Excalidraw is a virtual collaborative whiteboard that lets you easily sketch diagrams that feel hand-drawn. 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
Would be great to wrap Excalidraw within Electron (or equivalent) and publish it as a native 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 :)
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?
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 native 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
roleaccordingly, 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 abolutely 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.
On macOS, there is now a native 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.
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:
"description": "Excalidraw file",
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 native-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.
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 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.
File system access
Excalidraw uses browser-nativefs 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-nativefs library.
Drag and drop support
Files can be dragged and dropped onto the Excalidraw window just as in native 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.
Excalidraw works well with the operating system's clipboard. Entire Excalidraw drawings or also just
individual objects can be copied and pasted in
image/svg+xml formats, allowing for
an easy integration with other native tools like Inkscape or Web-based
tools like SVGOMG.
Excalidraw already supports the experimental File Handling API,
.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
files in the operating system.
Declarative link capturing
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.
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 native 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.