Deprecating Excalidraw Electron in favor of the web version

Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel hand-drawn.
This article was cross-posted to and first appeared on the Excalidraw blog.

On the Excalidraw project, we have decided to
deprecate Excalidraw…

Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel hand-drawn.
This article was cross-posted to and first appeared on the Excalidraw blog.

On the Excalidraw project, we have decided to
deprecate Excalidraw Desktop, an
Electron wrapper for Excalidraw, in favor of the web version that you
can—and always could—find at excalidraw.com. After a careful analysis, we
have decided that Progressive Web App (PWA) is the future we want to build
upon. Read on to learn why.

How Excalidraw Desktop came into being

Soon after @vjeux created the initial version of Excalidraw in
January 2020 and blogged about it, he proposed the following in
Issue #561:

Would be great to wrap Excalidraw within Electron (or equivalent) and publish it as a [platform-specific]
application to the various app stores.

The immediate reaction by @voluntadpear was to suggest:

What about making it a PWA instead? Android currently supports adding them to the Play Store as
Trusted Web Activities and hopefully iOS will do the same soon. On Desktop, Chrome lets you
download a desktop shortcut to a PWA.

The decision that @vjeux took in the end was simple:

We should do both 🙂

While work on converting the version of Excalidraw into a PWA was started by
@voluntadpear and later others,
@lipis independently
went ahead and created
a separate repo for Excalidraw Desktop.

To this day, the initial goal set by @vjeux, that is, to submit
Excalidraw to the various app stores, has not been reached yet. Honestly, no one has even started
the submission process to any of the stores. But why is that? Before I answer, let’s
look at Electron, the platform.

What is Electron?

The unique selling point of Electron is that it allows you to "build
cross-platform desktop apps with JavaScript, HTML, and CSS"
. Apps built with Electron are
"compatible with Mac, Windows, and Linux", that is, "Electron apps build and run on three
platforms"
. According to the homepage, the hard parts that Electron makes easy are
automatic updates,
system-level menus and notifications,
crash reporting,
debugging and profiling, and
Windows installers. Turns out, some of
the promised features need a detailed look at the small print.

  • For example, automatic updates "are [currently] only [supported] on macOS and Windows. There is
    no built-in support for auto-updater on Linux, so it is recommended to use the distribution’s
    package manager to update your app"
    .

  • Developers can create system-level menus by calling Menu.setApplicationMenu(menu). On Windows and
    Linux, the menu will be set as each window’s top menu, while on macOS there are many
    system-defined standard menus, like the
    Services
    menu. To make one’s menus a standard menu, developers should set their menu’s role accordingly,
    and Electron will recognize them and make them become standard menus. This means that a lot of
    menu-related code will use the following platform check:
    const isMac = process.platform === 'darwin'.

  • Windows installers can be made with
    windows-installer. The README of the project
    highlights that "for a production app you need to sign your application. Internet Explorer’s
    SmartScreen filter will block your app from being downloaded, and many anti-virus vendors will
    consider your app as malware unless you obtain a valid cert"
    [sic].

Looking at just these three examples, it is clear that Electron is far from "write once, run
everywhere". Distributing an app on app stores requires
code signing, a security technology for
certifying app ownership. Packaging an app requires using tools like
electron-forge and thinking about where to
host packages for app updates. It gets complex relatively quickly, especially when the objective
truly is cross platform support. I want to note that it is absolutely possible to create stunning
Electron apps with enough effort and dedication. For Excalidraw Desktop, we were not there.

Where Excalidraw Desktop left off

Excalidraw Desktop so far is basically the Excalidraw web app bundled as an
.asar file with an added About Excalidraw window. The look
and feel of the application is almost identical to the web version.

The Excalidraw Desktop application running in an Electron wrapper.
Excalidraw Desktop is almost indistinguishable from the web version
The Excalidraw Desktop 'About' window displaying the version of the Electron wrapper and the web app.
The About Excalidraw menu providing insights into the versions

On macOS, there is now a system-level menu at the top of the application, but since none of the menu
actions—apart from Close Window and About Excalidraw—are hooked up to to anything, the menu
is, in its current state, pretty useless. Meanwhile, all actions can of course be performed via the
regular Excalidraw toolbars and the context menu.

The Excalidraw Desktop menu bar on macOS with the 'File', 'Close Window' menu item selected.
The menu bar of Excalidraw Desktop on macOS

We use electron-builder, which supports
file type associations.
By double-clicking an .excalidraw file, ideally the Excalidraw Desktop app should open. The
relevant excerpt of our electron-builder.json file looks like this:

{
"fileAssociations": [
{
"ext": "excalidraw",
"name": "Excalidraw",
"description": "Excalidraw file",
"role": "Editor",
"mimeType": "application/json"
}
]
}

Unfortunately, in practice, this does not always work as intended, since, depending on the
installation type (for the current user, for all users), apps on Windows 10 do not have the
rights to associate a file type to themselves.

These shortcomings and the pending work to make the experience truly app-like on all platforms
(which, again, with enough effort is possible) were a strong argument for us to reconsider our
investment in Excalidraw Desktop. The way bigger argument for us, though, was that we foresee that
for our use case, we do not need all the features Electron offers. The grown and still growing set
of capabilities of the web serves us equally well, if not better.

How the web serves us today and in the future

Even in 2020, jQuery is still
incredibly popular. For many
developers it has become a habit to use it, despite the fact that today they
might not need jQuery. There is a similar resource for
Electron, aptly called You Might Not Need Electron. Let me
outline why we think we do not need Electron.

Installable Progressive Web App

Excalidraw today is an installable Progressive Web App with a
service worker and a
Web App Manifest. It caches all its resources in two caches,
one for fonts and font-related CSS, and one for everything else.

Chrome DevTools Application tab showing the two Excalidraw caches.
Excalidraw’s cache contents

This means the application is fully offline-capable and can run without a network connection.
Chromium-based browsers on both desktop and mobile prompt the user to install the app.
You can see the installation prompt in the screenshot below.

Excalidraw prompting the user to install the app in Chrome on macOS.
The Excalidraw install dialog in Chrome

Excalidraw is configured to run as a standalone application, so when you install it, you get an app
that runs in its own window. It is fully integrated in the operating system’s multitasking UI and
gets its own app icon on the home screen, Dock, or task bar; depending on the platform where you install
it.

Excalidraw running in its own window.
The Excalidraw PWA in a standalone window
Excalidraw icon on the macOS Dock.
The Excalidraw icon on the macOS Dock

File system access

Excalidraw uses browser-fs-access for
accessing the file system of the operating system. On supporting browsers, this allows for a true
open→edit→save workflow and actual over-saving and "save as", with a transparent fallback for
other browsers. You can learn more about this feature in my blog post
Reading and writing files and directories with the browser-fs-access library.

Drag and drop support

Files can be dragged and dropped onto the Excalidraw window just as in platform-specific applications. On a
browser that supports the File System Access API, a dropped
file can be immediately edited and the modifications be saved to the original file. This is so
intuitive that you sometimes forget that you are dealing with a web app.

Clipboard access

Excalidraw works well with the operating system’s clipboard. Entire Excalidraw drawings or also just
individual objects can be copied and pasted in image/png and image/svg+xml formats, allowing for
an easy integration with other platform-specific tools like Inkscape or web-based
tools like SVGOMG.

Excalidraw context menu showing the 'copy to clipboard as SVG' and 'copy to clipboard as PNG' menu items.
The Excalidraw context menu offering clipboard actions

File handling

Excalidraw already supports the experimental File Handling API,
which means .excalidraw files can be double-clicked in the operating system’s file manager and
open directly in the Excalidraw app, since Excalidraw registers as a file handler for .excalidraw
files in the operating system.

Excalidraw drawings can be shared by link. Here is an
example. In the future, if
people have Excalidraw installed as a PWA, such links will not open in a browser tab, but launch a
new standalone window. Pending implementation, this will work thanks to
declarative link capturing,
an, at the time of writing, bleeding-edge proposal for a new web platform feature.

Conclusion

The web has come a long way, with more and more features landing in browsers that only a couple of
years or even months ago were unthinkable on the web and exclusive to platform-specific applications.
Excalidraw is at the forefront of what is possible in the browser, all while acknowledging that not
all browsers on all platforms support each feature we use. By betting on a progressive
enhancement strategy, we enjoy the latest and greatest wherever possible, but without leaving anyone
behind. Best viewed in any browser.

Electron has served us well, but in 2020 and beyond, we can live without it. Oh, and for that
objective of @vjeux: since the Android Play Store now accepts PWAs in a
container format called Trusted Web Activity and
since the
Microsoft Store supports PWAs,
too, you can expect Excalidraw in these stores in the not too distant future. Meanwhile, you can
always use and install Excalidraw in and from the browser.

Acknowledgements

This article was reviewed by @lipis,
@dwelle, and
Joe Medley.


Print Share Comment Cite Upload Translate
APA
Thomas Steiner | Sciencx (2024-03-29T04:59:18+00:00) » Deprecating Excalidraw Electron in favor of the web version. Retrieved from https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/.
MLA
" » Deprecating Excalidraw Electron in favor of the web version." Thomas Steiner | Sciencx - Thursday January 7, 2021, https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/
HARVARD
Thomas Steiner | Sciencx Thursday January 7, 2021 » Deprecating Excalidraw Electron in favor of the web version., viewed 2024-03-29T04:59:18+00:00,<https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/>
VANCOUVER
Thomas Steiner | Sciencx - » Deprecating Excalidraw Electron in favor of the web version. [Internet]. [Accessed 2024-03-29T04:59:18+00:00]. Available from: https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/
CHICAGO
" » Deprecating Excalidraw Electron in favor of the web version." Thomas Steiner | Sciencx - Accessed 2024-03-29T04:59:18+00:00. https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/
IEEE
" » Deprecating Excalidraw Electron in favor of the web version." Thomas Steiner | Sciencx [Online]. Available: https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/. [Accessed: 2024-03-29T04:59:18+00:00]
rf:citation
» Deprecating Excalidraw Electron in favor of the web version | Thomas Steiner | Sciencx | https://www.scien.cx/2021/01/07/deprecating-excalidraw-electron-in-favor-of-the-web-version/ | 2024-03-29T04:59:18+00:00
https://github.com/addpipe/simple-recorderjs-demo