Christopher “Vjeux” Chedeau: Excalidraw: Under the hood of the virtual whiteboard

Hey, everyone, I'm so excited to be here, part of the Next.js Conf. My name is Christopher Chedeau, I'm also known as vjeux on the internet, and today I'm going to talk about Excalidraw. So Excalidraw is a tool called a virtual whiteboard, but in a sense, it is a way to get all of your thoughts "onto paper" and communicate with each other.

So the way it started was January 1st, 2020. So at Facebook we have this process called peer feedback, where you have to give feedback on the people that you're working with. And this is very important, because this is a way for everybody to start learning and growing and being better. Now, I'm a big procrastinator, and so when it happens, I'm basically cannot focus on doing the things I'm supposed to be doing. And I've started using a technique recently

called "active procrastination." And so what this means is, I'm basically know that I'm not going to do the thing I want to do, like peer feedback. And so I'm actually going to, like, focus on something else. And so in this case, what I wanted was to write a blog post. And for the past 10 years I've been using a tool called Zwibbler, that makes handwritten-like diagrams. The unfortunate event is that, that day, the Zwibbler tool wasn't working anymore.

And so I was like, "Hmm, maybe I could write it. Doesn't seem super complicated, and it seems like fun." And so I started using this library called Rough.js, in order to make those handwritten lines, and I used CodeSandbox to prototype it. So I put it on Twitter, and much to my surprise, there was a lot of excitement about it. So the next day I decided to create a GitHub repo, and to add the Vercel integration. So it gave me two things. So the first one is,

people could actually submit pull request, and I could see live what it was doing. And so I didn't have to import the pull request, start locally developing it, I could just, like, play around with what they were proposing, and it was much easier to get the live collaboration aspect going. The second part is, with one click I was able to get a website up and going. So I didn't do to do like DevOps or anything, nope, it was just working. And so with this integration, like my goal was to build a community around this,

because I'm only one person, and I still had this feedback to write. I wrote it, don't worry about it. So what I did was, my playbook with all of the previous open source product I've been running, is to create a list of, like, the things I wish the product would have. And so I think I created like 20 of them, and a lot of people started contributing. And this was amazing, so, like, a lot of energy, and, like, the project moved really fast.

Now let's talk about all of the nitty gritty details of how rendering works within Excalidraw. So we are here today at Next.js Conf, which is all about React. And the most fundamental idea of React is that you've got a piece of state, and you're implementing a render function that takes this piece of state and generates an output. And so in the context of Excalidraw, every single time you do a mouse move event within the app, we're going to generate a new piece of state,

which is the list of all of the things you're seeing on the screen. So you're going to have like rectangles, text, arrows, circles, and then you're going to do some magic that is going to generate how do you render it using this handwritten-like feeling. First let's talk about texts. The font right now looks handwritten. And this is not a coincidence. Ellinor Rapp actually took her handwriting and converted it into a font.