One Year of Excalidraw
January 01, 2021, by Excalidraw Team
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.
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.
Some of our coolest features
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.
🔒 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.
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.
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.
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! 🎉— Excalidraw (@excalidraw) August 9, 2020
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
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.— Excalidraw (@excalidraw) May 12, 2020
Thanks @kbariotis! pic.twitter.com/xs2mwsepx8
🔄 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. 😎— Daishi Kato (@dai_shi) April 1, 2020
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
#️⃣ 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.
📦 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
Featured a few times on Hacker News:
- As an example on web.dev article: https://web.dev/browser-fs-access/
A few blog posts:
- On Product Hunt: https://www.producthunt.com/posts/excalidraw
- React Europe talk: https://www.youtube.com/watch?v=fix2-SynPGE
Used to illustrate an O’Reilly Book: https://www.amazon.com/dp/1492057096
- Another book: https://twitter.com/dchest/status/1264237749642637312
Few companies also integrated Excalidraw in the product
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.
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
🆕 Comic: Why Do Their Keyboards Keep Breaking?— Elijah Manor (@elijahmanor) July 27, 2020
✨ 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
Using Excalidraw to plan my herb garden is peak 2020 pic.twitter.com/NdDx9E3KKv— Jess (@_jessicasachs) December 12, 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 🤞— Pierre Clainchard🐼 (@Clainchoupi) October 27, 2020
My handdrawn logos library :https://t.co/8PoTLiWBHq
I didn't like the available flow charts that described the GTD methodology, so I made one real quick using @Vjeux 's Excalidraw.— Leo E. (@levsthings) February 2, 2020
This little is OS sketcher is already much better than other prominent but cluttered/clunky alternatives. pic.twitter.com/yyi9jm76x3
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
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— Candide Tech (@CandideTech) April 15, 2020
Not sure why it's so fun to use but it is! Little PR coming soon by the way 😉 pic.twitter.com/ZptHyj1fCK
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
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
I included a shout-out to @excalidraw in yesterday's https://t.co/1lwBDpkVij @css article! 🙌https://t.co/Hqtjz9abBk— patak (@patak_dev) October 16, 2020
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