Excalidraw
All posts

One Year of Excalidraw

Excalidraw started as a way to procrastinate on January 1st, 2020, and ended up being a fully fledged whiteboard product only one year later! In this post, we’ll go over the most important features that made Excalidraw great at being a virtual whiteboard for sketching hand-drawn like diagrams.

We are so incredibly proud to have built something that is being used by 20k weekly active people.

https://excalidraw.com/#json=6443031091740672,amxJZJxlZAlUBLADWIukFg

Tech Stack

Excalidraw is fully open source, but it also stands on the shoulders of many other projects. We couldn’t do it without Rough.js, the library that gives Excalidraw its unique look; Virgil, the hand-written font designed by Ellinor Rapp; TypeScript, to tame the complexity of our codebase, giving a helping hand to new contributors (and old ones alike); and last but not least, React. Our full list of dependencies is listed on GitHub.

In addition, Excalidraw is depending on many awesome services such as Vercel for hosting and pull request previews, Crowdin for managing dozens of translations, CodeSandbox for easy hacking on the project, Sentry for error reporting, and Dependabot to keep our dependencies up to date.

Finally, this success wouldn’t be possible without you, the over 100 contributors who helped us ship new features, improvements, and fixes right to production.

https://excalidraw.com/#json=6671570797854720,bqkIFBlioHfMMLYHtcdGjA

Some of our coolest features

🤝 Collaboration

When the lockdown started, companies all around the world struggled to adapt to remote work. idlewinn and petehunt implemented live collaboration that could be used for interviews, brainstorming, presentations, and more. If you’re curious, we explained how it works in a blog post.

Cursors from other people in a collaborative session in https://t.co/MfygEryl5U now look like pointers and each have their own color :) pic.twitter.com/6EDbRL0k8b

— vjeux ✪ (@Vjeux) March 14, 2020

🔒 Your data is encrypted

Many of Excalidraw use cases involve drawing sensitive data. As such, we architected our system so that our servers never see the content of your drawings, using end-to-end encryption. The backend support for storing data was implemented by lipis, while the client-side encryption itself was added by vjeux. Read how we are doing it in our article on end-to-end encryption.

https://excalidraw.com/#json=5645858175451136,8w-G0ZXiOfRYAn7VWpANxw

🇺🇳 Translations

It was important for us early on to make sure that Excalidraw was translated into many languages so that it could be used all over the world. The initial implementation was done by fernandoalava, while the automatic integration with our Crowdin project was set up by lipis. Support for right-to-left languages was implemented soon after by j-f1. To top it off, Ellinor Rapp designed new font glyphs for several non-latin languages. You can read more about how we manage translations on the blog!

📱 Mobile first

Touch support and mobile-optimized layout was first added by j-f1. This includes the creation of a toolbar for mobile devices that displays relevant controls while still leaving most of the screen free for the canvas.

📚 Library

The library was first implemented by petehunt. After adding support for exporting/importing the library, we eventually introduced a public directory where you can share yours. Visit libraries.excalidraw.com for more.

Finally got around to sharing my @excalidraw library of Data Viz charts. You can find it here: https://t.co/jIQu4Vtsq6 pic.twitter.com/FbD63OmmRN

— Mark R Evans (@dbs_sticky) December 19, 2020

📊 Excalicharts

While we aim to keep Excalidraw simple to use, sometimes we hide little easter eggs that you need to find out for yourself (or find some hints by following our Twitter account). For example, you can copy any two-column dataset from a spreadsheet, or comma separated values (CSV) from a text file, and paste them into Excalidraw to quickly produce a chart. The first implementation was done by petehunt and several improvements were made by lipis.

🏹 Lines and Arrows

Possibly the single most complex feature in Excalidraw, lines/arrows have come a long way since the beginning. Initially, we’ve only had two-point lines. Multi-point support was added by gasimgasimzada, with improvements by dai-shi, line editing by dwelle, arrowheads by steveruizok, and by popular demand the arrow binding by xixixao.

🎉 We've added arrow binding! 🎉

We're still investigating what the best defaults and behavior should be, so let us know below or open a GitHub issue.

Many thanks to @xixixao for the great work! 💕

Try at https://t.co/74IIueHhs1 pic.twitter.com/cPkEB4szcS

— Excalidraw (@excalidraw) August 9, 2020

Related, the free hand drawing, one of the most requested features, was implemented by kbariotis.

We've released an initial implementation for free draw support. There's space for improvement, but we didn't want to keep you waiting! Let us know what you think.

Thanks @kbariotis! pic.twitter.com/xs2mwsepx8

— Excalidraw (@excalidraw) May 12, 2020

🔄 More powerful editing

We must give a shout-out to dai-shi for continuous implementations of seemingly simple, but in fact pretty hard problems such as rotation and resizing, especially in combination of editing multiple elements at once.

Here's the calculation in my rotation support fork of @excalidraw, that is drawn with the fork. 😎

Sharable link with the fork: https://t.co/YxY0t2AoEj

And, with this I'm confident that I can simplify the calculation: +(1+cos(angle))/2 🤯 pic.twitter.com/tMX8mRy0K4

— Daishi Kato (@dai_shi) April 1, 2020

#️⃣ Grid and Stats

From early on, people were asking for more precision in their hand drawn diagrams. We complied by adding the grid support implemented by dai-shi, and—inspired by YouTube’s stats for nerds—our own version of stats implemented by lipis. Both features could be found under the context menu by right-clicking on the canvas.

💾 File system integration and file handling

In Excalidraw, we use the browser-fs-access library to integrate with the file system of the operating system. This allows us to support a true open→edit→save workflow with proper over-saving and save-as on supported browsers, with a fallback to file uploads and downloads on other browsers. Read more about this feature in tomayac’s earlier article on this blog. We also have experimental support for file type association, so that when you double-click an .excalidraw file in your file explorer, the Excalidraw PWA opens.

⚙️ Gatsby plugin

We also have a plugin for Gatsby that automatically converts links to saved Excalidraw drawings to inline SVG at build time. We are actually using it in this post for our charts. Implemented by trevorblades and j-f1. You can find it under @excalidraw/gatsby-embedder-excalidraw.

Excalidraw blog infrastructure is so nice. You can just add a link to the excalidraw url of the illustration and there's a build step that downloads the file, turn it into a svg and embeds the svg directly in the post. https://t.co/6GUyQot4C9 pic.twitter.com/8RjoZ34Lwn

— vjeux ✪ (@Vjeux) May 6, 2020

🌒 Dark Mode

To help protect your eyes, @xixixao added dark mode, effectively turning Excalidraw into an actual blackboard.

When you are a « Dark mode » fan and you love @excalidraw 😉 pic.twitter.com/Ju0JFJWUWS

— Monsieur_Clean (@Msieur_Jo) April 1, 2020

📦 npm package

One of the last things we’ve introduced this year was a completely new npm package, available at @excalidraw/excalidraw. A long time in the making (thanks to @aakansha1216 for most of the work), this package allows you to easily embed Excalidraw as a React component into your apps.

Excalidraw in the news

Get involved

Excalidraw wouldn’t have become what it is today without all the wonderful contributions. If you haven’t already, you can start today! And remember, it’s not just code that makes Excalidraw better. Every bit helps, be it bug reports, translations, suggestions for improvements, or just hanging out on our Discord chat. Don’t forget to follow us on Twitter @excalidraw for all the latest news and announcements.

What’s next

We will continue working hard on improving the performance, adding features where it makes sense, fixing bugs, working with designers to make Excalidraw look better, and more. But whatever we do, we’ll try our best to ensure we don’t lose the simplicity and charm that makes Excalidraw the product you love. 💕

Some cool drawings

The best part of this project is to see a constant stream of awesome public drawings that people are making with Excalidraw. Here are some of our favorites from 2020.

Developer priorities throughout their career pic.twitter.com/juF4peKXCx

— Lea Verou (@LeaVerou) September 15, 2020

My son has been really enjoying his science homework since I recommended @excalidraw

Look at those hand-drawn sea creatures 😀 pic.twitter.com/td1oG7bPLx

— ☁️μ (@_cloudmu) October 19, 2020

🆕 Comic: Why Do Their Keyboards Keep Breaking?

✨ Animated SVG version of the comic... https://t.co/EFPJpeRDs6

✒️ Drawn with @excalidraw, exported to SVG, animated with CSS, with `prefers-reduced-motion` support pic.twitter.com/srS8pPGGa2

— Elijah Manor (@elijahmanor) July 27, 2020

Using Excalidraw to plan my herb garden is peak 2020 pic.twitter.com/NdDx9E3KKv

— Jess (@_jessicasachs) December 12, 2020

Daily reminder that @excalidraw is so freakin' useful pic.twitter.com/UtFd0UJrzC

— Andrew Aquino (@aqandrew) July 31, 2020

I wanted to try @excalidraw for a while, thanks to @manekinekko for the recommendation!! So I tried, and I loved it 👏 here's my first public repository! I draw some logos that could be useful for my upcoming blog articles 🤞
My handdrawn logos library :https://t.co/8PoTLiWBHq

— Pierre Clainchard🐼 (@Clainchoupi) October 27, 2020

Tip: https://t.co/3ryVNue1Ym is fantastic for quickly mocking up UIs. Free, feature-filled and the live collaboration mode is excellent.

Great work by @Vjeux and team! pic.twitter.com/y91nytLY8y

— Addy Osmani (@addyosmani) March 22, 2020

I didn't like the available flow charts that described the GTD methodology, so I made one real quick using @Vjeux 's Excalidraw.

This little is OS sketcher is already much better than other prominent but cluttered/clunky alternatives. pic.twitter.com/yyi9jm76x3

— Leo E. (@levsthings) February 2, 2020

Again...(!) @excalidraw is making prototyping (and developing) a breeze! #webdev pic.twitter.com/MvaG3yANGX

— @_RobDominguez (@_RobDominguez) January 28, 2020

Having fun with some iOS design in @excalidraw, thanks @Vjeux & other contributors! pic.twitter.com/AVNOl7oL4M

— Duane Bester (@duanebester) January 24, 2020

Working on my new blog post. In love with @excalidraw from @Vjeux pic.twitter.com/H1ib35Rhy7

— Ilya Lyamkin (@ilyamkin) February 9, 2020

There are many "Does React hooks replace Redux" questions and answers. Although the question itself is nonsense, I "excalidrew" the comparison between the bare #ReactHooks solution and #React-#Redux. pic.twitter.com/uaRaFBrYPv

— Daishi Kato (@dai_shi) March 19, 2020

Drew the rocket from a book (Ike's Incredible Ink, by @briannefarley) for my kid using @excalidraw. Nice to use it for more than development 😁 pic.twitter.com/APPpLEJ95m

— Bartek Ciszkowski (@bartekci) April 4, 2020

Tom Nook created using @excalidraw #acnh pic.twitter.com/EkxVz3qOQE

— Agal (@masbagal) April 8, 2020

Visualized my new project @paketconcierge using @excalidraw this afternoon. It's an amazing tool. I don't have a lot of artistic skills, which is evident below. But thanks to it, I created a story sketch I am very happy with.#excalidraw #notadesigner #perfectoolforthejob pic.twitter.com/BFH3GFnZfV

— Gregor Herdmann (@Pinnassog) April 8, 2020

Going remote due to current circumstances means we've had to up our documentation game. We used @excalidraw collaboration to document our dev, build and deploy process and can definitely recommend it

Not sure why it's so fun to use but it is! Little PR coming soon by the way 😉 pic.twitter.com/ZptHyj1fCK

— Candide Tech (@CandideTech) April 15, 2020

#brand in mind @excalidraw @1074Vectors pic.twitter.com/iqhIfFnIjr

— ____v e e n u s_____ (@veenusav) April 17, 2020

Awesome app @excalidraw It helps a lot in app dev. pic.twitter.com/hc8rrlxejz

— jeudesprits (@jeudesprits) May 25, 2020

Have you heard of @excalidraw? Truly amazing 🏆 It lets you SKETCH ANYTHING with a hand-drawn feel. Fast. Simple. Beautiful. Adds a very human touch 🤖 Think mockups, UI flows, sys diagrams etc. And now integrated seamlessly into GitPitch Desktop 😍 @Vjeux https://t.co/YZkZL30gjz pic.twitter.com/jk7q3IpJ51

— David Russell (@gitpitch) May 27, 2020

Having fun again with @excalidraw. 😎

This time writing about my journey learning Machine Learning from total noob to doing real client work.

Blog post coming... pic.twitter.com/9xeyFGYg64

— Carlos Roso (@caroso1222) July 1, 2020

My incomplete mental model for flexbox's main axis pic.twitter.com/Vi2bvmyRCn

— Rodrigo Pombo (@pomber) July 9, 2020

This is one of the best drawings I’ve seen. You are super talented! pic.twitter.com/f2Rgo0nmuw

— vjeux ✪ (@Vjeux) July 14, 2020

Giving life to my graph theory notes using @excalidraw pic.twitter.com/Xgsi3ahSNr

— Anas Ait aomar (@anas_aito) July 15, 2020

Event loop illustration with @excalidraw for my article about the browsers' javascript runtime: pic.twitter.com/aqT61qbXUb

— Nik #StopTheWar (@xnimorz) August 30, 2020

I included a shout-out to @excalidraw in yesterday's https://t.co/1lwBDpkVij @css article! 🙌https://t.co/Hqtjz9abBk

The mesmerizing explosion of community development after @Vjeux ignited #excalidraw was inspirational to us when we decided to open-source @layouit Grid 💚 pic.twitter.com/WcsPtcNyrb

— patak (@patak_dev) October 16, 2020