What we’ve shipped in the editor

One of the biggest changes we’ve been proud to unveil last year was undoubtedly the editor redesign. While having scores of people contribute to the editor is awesome (much love!), if not careful, over the years you can end up with a design without a strong single thread going through!

This is where Tony Bures came in with a new design, and enlisting the help of Barnabás Molnár we were able to ship the new interface that still keeps out of your way, is even a bit more compact, a little more consistent, and even makes room for new features we’ll be shipping this year!

There are some rough edges we need to fix up, such as missing hover/active states here and there, and some components still need porting (looking at you, context menu!). And not to forget, mobile design — while it’s sporting the new drip, it will need a bit more work to truly shine and make you effective on your small devices!

The editor redesign just dropped, check it out! 🔥

💖 Designed by @mrkvi and implemented by @_barnabasmolnar 💕

More improvements coming soon!https://t.co/NunLKqrvl8 pic.twitter.com/yihc3I2pBK

— Excalidraw (@excalidraw) November 1, 2022

What may have you missed in 2022?

If you’re using Excalidraw regularly, you shouldn’t have missed many new features. But some can be a bit hidden, so let’s take a look at some of the prominent changes this year. (We’ve included nuggets of information you may like 👀).

Freedrawing is fun, but sometimes it can get annoying if drawing gets slow, or unwanted gestures start happening, especially when using a stylus.

Palm rejection is hard in general, but doubly so on the web, so instead of doing that, we decided to sidestep it for now, and Zsolt Viczián helped us ship pen mode instead. It’s enabled when we first detect a pen (stylus), and we start preventing most touch events until you leave it. You can still pan the canvas with two fingers, but we’ve learned that your hand triggered zooming too often so we’ve disabled touch-zooming in pen mode, too.

In the future we’ll want to investigate better palm rejection so that if nothing else, we can re-enable touch-zooming.

Hi ⁦@excalidraw fans!⁩ We have just released pen mode for https://t.co/Eh0rCd9QFp. ⁦@dluzar⁩, thanks for the collaboration! pic.twitter.com/huXi6iS95T

— Zsolt Viczián (@zsviczian) February 2, 2022

Other common problem on tablets was performance. Some pens were firing pointer events much more frequently than needed, causing a bottleneck in rendering. So we’ve throttled them to not exceed the framerate of your screen (commonly 60Hz), which had the desired effect.

Next, you will notice the performance when freedrawing is much improved (via @dluzar): pic.twitter.com/5pg3SOcUDf

— Excalidraw (@excalidraw) February 8, 2022

While performance improved, it may technically result in slightly less line resolution — for most use cases it’s perfectly fine, but for handwriting we may want to investigate other venues (on that note, we would need to modify the freedraw algorithm, and there’s also the fact that most devices don’t emit high-resolution pointer events in the first place).

We’ve also heavily improved the Apple Pencil Scribble getting in the way, often dropping draw gestures altogether. Even so, sometimes drawing on iPads still triggers character recognition, which it’s unclear whether we can prevent — if you’re facing these problems, you might consider disabling Scribble in your settings.

Mobile and tablet experience is an ongoing effort and there are many more improvements to be had! But, you’re already making art in Excalidraw, so that makes us happy! ❤️

still one love @excalidraw for ideation. pic.twitter.com/zqBVnxOFj7

— Bart 🇺🇦 (@Biernacki) October 25, 2022

Do you know we support hyperlinks in the editor? Added by Aakansha Doshi, it allows you to add clickable links to elements to adding additional information and resources. Especially useful for linking diagrams together (e.g. on Excalidraw Plus 😋).

Support for in-diagram linking coming this year!

Yaay Hyperlinks are live now @excalidraw 🔥🔥
Try it out and share your feedback 💕 pic.twitter.com/RweIVhbp6y

— Aakansha (@aakansha1216) February 3, 2022

One missing feature was to add background to freedraw shapes, which was correct by Arun!

We've added support for adding background color to (closed) freedraw shapes.

Contributed by @node_monk ❤️

Check out at https://t.co/NunLKqs3aG pic.twitter.com/YNZ2IRNMu9

— Excalidraw (@excalidraw) February 9, 2022

Until we do a proper redesign of the color picker, a useful feature we’ve added last year is to pick from the custom colors you’ve been already using on your canvas.

You’ll be able to pick from more shades and better colors in the upcoming color picker. 🎨

Custom colors now supported @excalidraw 🔥🔥
The color picker lists up to 5 custom colors you are using on canvas 🥳 pic.twitter.com/qWQ6nzwZUo

— Aakansha (@aakansha1216) February 28, 2022

Now having a prominent position in the toolbar, previously you may have missed we’ve also added the Eraser tool, which allows you to remove multiple elements with way more ease, especially those tiny freedraw lines!

Eraser 🔥🔥
Try it out @excalidraw 💕 pic.twitter.com/kOnonGiAvl

— Aakansha (@aakansha1216) March 11, 2022

Tom Sherman added element locking to the editor, allowing you to lock elements in place to prevent accidental modifications or deletions.

It’s hidden under the context menu because the only way to unlock elements at the moment is by right-clicking and unlocking them from the context menu again. Thus, we haven’t put the lock button elsewhere in the UI so you don’t lock elements unintentionally as you explore what each button does, and not knowing how to unlock them.

Introducing support for locking of elements! 🔒

Useful when you don't want to accidentally move elements such as ones you use for background/containers.

To lock/unlock, use the context menu.

Implemented by @tomus_sherman et al ❤️

Try at https://t.co/NunLKqrvl8 pic.twitter.com/A2cCmQ4OOb

— Excalidraw (@excalidraw) April 7, 2022

Libraries are something we’ll be spending way more time on this year, but a big change led by Ishtiaq last year was moving libraries to a sidebar, allowing you to keep the library open at all times:

We've moved the library into a sidebar so it's easier to drop your items on canvas!

And, if you have a mighty screen size, you can choose to dock the sidebar to keep it open for all time, if that's your thing :).

Via @ishtiaq103 & @dluzar ❤️https://t.co/74IIueHhs1 pic.twitter.com/xJwR4Crzvk

— Excalidraw (@excalidraw) June 21, 2022

And little known feature is the ability to add multiple libraries to your canvas at once:

You can now easily insert multiple @excalidraw library items at once. Select several items (or hold Shift to select a range) and drag (or click) to drop on canvas.

via @dluzar

Try yourself with this library from @SketchingDev → https://t.co/k5td3x3ivB pic.twitter.com/0lV4lnzoa7

— Excalidraw (@excalidraw) May 11, 2022

You could add new points to existing arrow/lines in the line editor (Ctrl/Cmd-Enter) before, but it was hard to add points in the middle segments, so we’ve decided to work on that.

First, Aakansha added support for adding a midpoint to lines outside the line editor:

Arrows and lines experience improved in @excalidraw!

Now you can add a point in the middle even outside the line editor✨

More soon💜 pic.twitter.com/BuKUXxxYIt

— Aakansha (@aakansha1216) August 11, 2022

And then also allowed adding midpoints to any segment from within the line editor. We’ve decided to not expose this outside the line editor for now because it tends to get in the way too often when you try to move lines around.

Arrow and line editing experience improved!

Now you can add points between line segments inside the editor ✨

Implemented with 💜 by @aakansha1216 pic.twitter.com/dejjBITpSn

— Excalidraw (@excalidraw) September 14, 2022

Ryan and David have improved the default radius sizing for rectangles, making rectangles rounding to look similar across different sizes. While in the future we may support customizing radius to a point, our goal still is to make diagramming easy with as little tinkering with the settings as possible.

Per your feedback, we've made the rounding of rectangles less pronounced on large shapes, and more consistent across sizes!

(Old elements will stay the same so we don't break your diagrams!)

By @_ryan_di and @dluzar ❤️

Let us know what you think! https://t.co/NunLKqJ6cG pic.twitter.com/NYaBDvCE2O

— Excalidraw (@excalidraw) December 8, 2022

Towards the end of the year, Aakansha added the long awaited ability to add text labels to arrows!

Labeled Arrows are here 🔥🔥

To add a label press "Enter" or "Double click" on the arrow

Made with 💜 by @aakansha1216 pic.twitter.com/upzea78NgE

— Excalidraw (@excalidraw) December 5, 2022

But, Excalidraw is also about the community helping out! Here, Alex Kim fixed a vexing issue when resizing certain elements.

Thanks to the awesome work of Alex Kim (https://t.co/0RmHH7eg1J) and @_ryan_di, we've fixed an annoying issue that was making the bird (and other groups of linear shapes!) often behave badly when resizing.

Not anymore! 🚀✨https://t.co/NunLKqrvl8 pic.twitter.com/aeyu63ltew

— Excalidraw (@excalidraw) August 15, 2022

Want to help make Excalidraw better yourself? We’ll soon be making it easier to make your first contribution, so stay tuned, but you can head over to our GitHub right now.

What’s happening on the Plus side?

If you don’t know, last year we’ve unveiled Excalidraw Plus, an app aimed at teams built on top of the Excalidraw editor, offering companies much needed authorization and team management, and everyone a secure environment to organize their drawings, while still keeping our focus on simplicity and low friction. Adoption is not slowing down, and the app development is not lagging behind!

We have big plans this year you will certainly appreciate, but let’s give a shout-out to a few things that happened in Plus last year.

We’re iterating on the design not just in the editor, but in the Plus app, too! Besides the new look, we’ve added a search panel you can invoke anywhere:

We've touched up the @excalidrawPlus UI, as well as how searching works.

You can now open the search from mostly anywhere using the Cmd/Ctrl-P shortcut. Especially useful when in editor to quickly change scenes!

By @milosvete ❤️

More improvements soon! https://t.co/ZfNpZGbYoQ pic.twitter.com/tI6loq0jX2

— Excalidraw (@excalidraw) May 24, 2022

An important addition was the introduction of the Dashboard. Get around quickly and view who’s drawing right now, and where.

We've added a dashboard to Excalidraw+ where you can see your last edited and visited scenes, as well as where people are working right now!

Via @milosvete ❤️https://t.co/N9EqDmcmth pic.twitter.com/mOA4ZQUIoK

— Excalidraw+ (@excalidrawPlus) June 23, 2022

As the Plus app lives on a different subdomain, some of you were wishing for a more streamlined access. Milos added support for automatically redirecting you to Plus when you’re signed in, so you can access it directly from excalidraw.com.

We’re considering to make this the default (you would be always able to opt-out), because it can be confusing for some still. Let us know your thoughts on this one!

Excalidraw+ users, we now support auto-redirecting from https://t.co/o12qAPeiWt to the Plus app. You can enable it in preferences!

Via @milosvete 🎉 pic.twitter.com/4v1rsLnrPw

— Excalidraw+ (@excalidrawPlus) May 18, 2022

On that note, we’ve also made it possible to choose what page will be loaded first. You can pick between the editor or the dashboard, and more. What other shortcuts should we add?

In Excalidraw+ you can now choose what page you will land to on initial load.

Useful if you want jump right into your last edited scene and more. Check it out in your preferences!

By @milosvete ❤️https://t.co/ZfNpZGbYoQ pic.twitter.com/wU4kXTWdRh

— Excalidraw (@excalidraw) August 17, 2022

To reduce friction further, you can now create drawings even quicker. Use the “Start drawing” button in the Dashboard, or Opt/Alt + A everywhere else.

Need to quickly jot down some ideas? 📝

In Excalidraw+ you can now create a new drawing using the "start drawing" button when you're in the dashboard, or by using "Opt/Alt-A" shortcut anywhere.

Will create a new drawing in your private collection!

Via @milosvete ❤️ pic.twitter.com/SO5XMgW7jL

— Excalidraw (@excalidraw) September 19, 2022

Next, we’ve added support for sorting your collections, and choosing the sort order of your drawings.

Small quality of life improvement for Excalidraw Plus: if you're an admin of your workspace, you can now sort collections. 🚀https://t.co/ZfNpZGbYoQ pic.twitter.com/74P1pBeVQr

— Excalidraw (@excalidraw) March 29, 2022

We've added support to Excalidraw+ for sorting scenes by last created (the default), last updated, or alphabetically.

This is a user-specific setting (synced across devices) and won't affect what your teammates see.https://t.co/N9EqDmcmth pic.twitter.com/eNh7o4ZSEz

— Excalidraw+ (@excalidrawPlus) July 20, 2022

To please the accountants, we’ve added yearly billing (it’s cheaper, too 😉).

Yearly @excalidrawPlus billing support is finally here! Fewer invoices and better price. 🚀

Switch during checkout. For existing subscriptions you can do so from the workspace settings.

Thanks @milosvete ❤️ pic.twitter.com/xC0bqhJhLD

— Excalidraw (@excalidraw) July 7, 2022

Commenting is easier in Plus now, too!

You can now add comments to your drawings in Excalidraw Plus! 🔥🚀

Team effort by @aakansha1216, @milosvete, and @dluzar ❤️https://t.co/N9EqDmcmth pic.twitter.com/hlDAUrbOKk

— Excalidraw+ (@excalidrawPlus) July 28, 2022

VS Code extension & GitHub

Another major thing happening in the Excalidraw ecosystem was the release of the Excalidraw VS Code extension, maintained by Achille Lacoin. 💜

If neither the excalidraw.com app, nor the Plus app suits your needs, perhaps editing Excalidraw files from your VS Code workspace will. And you can use the extension on vscode.dev & github.dev, too – try it out!

VS @code users, introducing the Excalidraw extension! 🔥

Created and led by @pomdtrr ❤️ it is now the official Excalidraw VS Code extension that we'll be improving and maintaining going forward 🚀https://t.co/baKxQxqxz6

— Excalidraw (@excalidraw) April 5, 2022

And you’ll be able to use Excalidraw in the upcoming GitHub Blocks:

Excalidraw natively on GitHub soon 🚀 https://t.co/tLYiehHd6o

— Excalidraw (@excalidraw) November 10, 2022

Community

Discord

We restructured the Excalidraw Discord server to encourage engagement and interaction within our community!

If you have questions, feedback, or just want to chat, join us on Discord! We have some surprises in the works for Discord next year! 😉

In the wild

Excalidraw is being used far and wide.

From company docs…

Equally as important (probably more so) we have docs.

These docs use the wonderful mkdocs and mkdocs-material projects. Diagrams were done with excalidraw.https://t.co/Jtu6OVJjPl pic.twitter.com/YF69T9y7it

— Will McGugan (@willmcgugan) October 23, 2022

To illustrating whole books!

We cover two chapters from the book Understanding Distributed Systems by @RaVitillo:

1. Downstream resiliency

Timeout, retries, circuit breaker

2. Upstream resiliency

Load shedding, load leveling, rate limiting, constant work.

Read it here: https://t.co/T1yo6X0frW

— The Pragmatic Engineer (@Pragmatic_Eng) September 28, 2022

Or making awesome illustrations in general:

As we get nearer to 2023 and plans for a new year, for those of you considering Kubernetes, I strongly recommend the KCNA certification as a foundation. It's brilliant!

Have created this cheat sheet which will get you started. The video links provided cover 16% of the exam. pic.twitter.com/VMQvayoIq5

— James Spurin (@jamesspurin) December 20, 2022

AI skeptics have a fixed mindset.
AI enthusiasts have a growth mindset. pic.twitter.com/AZhkm7pwgE

— Victor 🧢 (@victor_bigfield) December 30, 2022

At conferences…

I fearlessly do live coding on stage, but live sketching with @excalidraw !! @TejasKumar_ draws my favorite planet. 🌎 pic.twitter.com/lycXa7X8aM

— Erik Rasmussen 🇺🇸🇪🇸 @erikras@erikras.com (@erikras) May 5, 2022

Excalidraw on the big screen again! #reactindia2022 🚀@flybayer from @Flightcontrolhq talking about type safety with @nextjs! pic.twitter.com/H9jIc9nKsz

— Excalidraw (@excalidraw) September 23, 2022

Look, here’s our Aakansha! ❤️

My talk about "Internals of Excalidraw" @ReactNext is now uploaded ✨

Had an amazing experience at the conf, lots of memories, fun and the most special thing about this conf was giving my first in-person conference talk 😍https://t.co/M64PSpKu8t

— Aakansha (@aakansha1216) August 5, 2022

Those slides must have taken a lot of work! (Or maybe not, with Excalidraw 😋).

Just published a presentation from my talk about @PrometheusIO history.
It's short, fun and full of images!
Had a great time drawing it and going through the CHANGELOG, PRs and issues way back to the first releases 🎨 🥳https://t.co/Mwqvqb9mFY pic.twitter.com/cO517U6FuT

— Martin Chodúr (@FUSAKLA) June 18, 2022

And not to forget Chris’s talk at Next.js Conf!

My talk on Excalidraw at Next.js is out! I talked about the history behind the project, how rendering and multiplayer works and a bit about the funding model for this open source project. https://t.co/eZql6T7QKk

— vjeux ✪ (@Vjeux) October 28, 2022

Excalidraw is also getting big on Twitch and YouTube, from @t3dotgg to @d0nutptr, melkeydev, @devagr, among others!

Speaking of YouTube, Aakansha recently explained how to build your own Excalidraw over at Chirag’s channel.

Hi all I recently did my first podcast and its uploaded now ✨
Its a System design mock interview / HLD discussion on "Designing a Whiteboard"
This was so much fun!
Thank you so much @engineerchirag for having me!
Do check it out & share your feedback 💕https://t.co/diX9Sc3l0z

— Aakansha (@aakansha1216) August 25, 2022

You rock hard at Excalidraw! 🍉

Coming up

Excalidraw

Last year we’ve added many great features, but we are not done! And we want to improve on existing ones, too, such as as better text editing support, arrow binding, and more. At the same time, making sure the editor retains its simplicity and low friction.

We’ll also be focusing on performance so that even huge drawings can be edited smoothly.

And we’re not forgetting libraries. More on that soon!

Package

Next year, we will taking the Excalidraw package to the next level, beginning with the upcoming npm release bringing the redesigned editor to your apps, and featuring an improved API to customize some parts of the editor UI. We’ll use this as a test bed on whether this type of new API works well, and we’ll be making changes to the rest of the editor to allow for much greater customization.

There are lots of places in need of much smoother experience, such as the images API, listening on changes, and programmatic API in general, so we’ll be working on that, too.

Plus

For Plus, we’ll be making strides on three fronts. Features, friction, and management.

We’ve learned from your feedback, and are adding features that you will like. From better sharing and readonly links integration, to presenting from Excalidraw a breeze.

At the same time, we want to ensure the app is as frictionless as possible. Getting your ideas on the canvas is what Excalidraw is about.

And we want to make it easier for business to make the transition. From user provisioning and auth (think SAML and SCIM), to billing, and enterprise support.

Join the Excalidraw team!

As alluded at the top, we are looking for talented devs such as you! If you’re as pumped about building Excalidraw as we are, we have open positions at both the Excalidraw editor and Excalidraw Plus. Check the details and drop us an email! 💪

If you don’t feel as confident but want to prove yourself, start contributing to excalidraw. That’s always a good way through which to join our ranks!

It’s going to be a packed year for Excalidraw across the board!

Happy New Year everyone! 🎉

Excalidraw Team