The Reality of Creating An Infinite Canvas In React: The Solution Isn't Out There

Do you know what React needs? One of the things that it should have but doesn’t even though there are a lot of apps and tools out there with this kind of functionality. React should have an infinite canvas library. But before I switch into complainer mode and talk all about how stupid it is that React doesn’t have a go-to solution for Infinite canvases, let’s get into informative mode first.

Basically, I will explain to you geeks what an infinite canvas is, some apps that use them, and the closest already-made solutions we have for adding one to our projects. At the end of this, you’ll probably wonder how most tools and projects add this functionality. Join me as I rant about this seemingly little, but major inconvenience. So, what am I waiting for? Let’s dive in 🙂.

What The Heck Is An Infinite Canvas???

Wow, what a dumb question. I mean, just put two and two together and figure it out. But for you people who don’t see the obvious meaning when you put “infinite” and “canvas” together, let me explain it to you like you’re five. I mean, you’re probably going to ask AI to do that anyway, so I’m saving you a prompt. You’re welcome.

An infinite canvas is a canvas that never ends.

Apparently, the term comes from a book titled Reinventing Comics by Scott McCloud. The idea is that a web page can grow as large as needed. But in this case, we are talking about a simple canvas that can be zoomed and panned and also one we can add elements to or draw on. Obviously, it won’t really be infinite, but gives that illusion. I imagine coding one from scratch to be difficult, which is why I thought a library must exist for it right? Maybe a little package that adds this kind of functionality to your project. Nope. But there are apps that have them.

Apps And Tools That Use Infinite Canvases

As a developer, of course, the list starts with:

Figma: Figma is used for creating, testing, and sharing designs for websites, mobile apps, and other digital products. As a developer, I use it all the time. And there’s a chance that if you click on this article that is about React, which is a library made to build user interfaces, you use it too.

DeepNotes: DeepNotes is literally called an infinite canvas tool. And even though it’s open source, it’s hard to find out exactly how they are implementing infinite canvas functionality.

Look, I don’t want to look through a whole GitHub repository mostly in Vue.js to find something that can help me figure out how to add this kind of functionality in my React project. I mean, do you? That seems like some tedious work to maybe find a solution—a solution you would need to make work with React. Yeah, I’m not doing that.

Muse: Muse is advertised as a canvas for thinking with whiteboards within whiteboards. Muse having a memo about infinite canvases is why it landed on the list. Unfortunately, it’s not open-source or anything, but it’s still worth mentioning.

And Plenty More...

Even though I did not list every app/tool in existence that has infinite canvas functionality, you still get the point. The point is that there are tons of apps/tools that have this kind of functionality. The question is, why isn’t it more accessible? But, until we have an answer to that, let’s talk about the pathetic options created so far.

Our Options For Implementing Infinite Canvases

As I was searching for a solution, I found one. Or at least something that could be the solution for some people. That half-solution was tldraw.

Tldraw is an instant collaborative whiteboard tool that I honestly should have added to the list of apps and tools that use an infinite canvas. And unlike everyone else,tldraw has documentationwhere you can learn how to add it to your React project:

Installation:

Install tldraw by running npm i tldraw.

Code:

Here's the code:

'Use client';
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function () {
    return (
        <div style={{ position: 'fixed', inset: 0 }}>
            <Tldraw />
        </div>
    )
}

As for other solutions…I haven’t found any. I wish I was kidding.

I mean, yeah, there are tools out there that can help you create an infinite canvas, but none of them offer an infinite canvas.

What The Heck, Devs!

Why is there only one solution out there that’s not even the solution for everybody? Tell me, Universe, why has no developer offered a solution yet? It can’t be that complicated, right?

“You’re a bright person. Why don’t you create a solution,” Johnny says.

My God, Johnny, if I had to create my own custom solution for every single feature I want to add to my projects I’d need at least an extra one thousand years of life. Why? Not only does each solution need to be functional, but also good enough to present to the world, plus easy to set up.

And even if I did go and create a solution just for infinite canvases, it wouldn’t be in this blog post. In fact, maybe I will come back to this topic down the line and create one. Maybe, in the future, I’ll be lucky and someone will create it. But for now, ladies, gentlemen, and everyone in between, I will rant about it.

But I did enough talking in this blog post. It’s time to wrap things up. If you liked reading this follow me on Medium for articles on how to program and develop things. Also, subscribe to my newsletter to get an email every time I publish something. Psst, I write about stuff that I find interesting. From programming to little fun things I learned.

Happy Coding!