Native application

[vjeux]

Would be great to wrap excalidraw within electron (or equivalent) and publish it as a native application to the various app stores.

[voluntadpear]

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.

[vjeux]

We should do both :)

[lipis]

https://excalidraw.com/?id=5742560236535808 :D

[bringking]

I am now obsessed with using this for all my diagram needs at work. I have a little experience with it. Would love to help this effort. Are you thinking this code would be co-located in this repo? Or in another one?

[lipis]

I think it would be more sane to have it in a different repo.

[bringking]

@lipis yeah, the tradeoff being some work would need to take place to make the core sharable between the Native and Web app?

[lipis]

https://github.com/excalidraw/excalidraw-desktop

[voluntadpear]

I can work on make the regular Web version a PWA if you'd agree it'll be useful. cc @vjeux

[vjeux]

Yeah, that would be great @voluntadpear !

[nrgapple]

A local electron build would be great for all working in a secure environment where reaching out to an external server is not possible for sensitive information

[dwelle]

@nrgapple all data sent to our server is encrypted on client so our server cannot read it even if it wanted to.

You can check the source code:

excalidraw/src/scene/data.ts

Lines 145 to 175 in d39c7d4

	export async function exportToBackend(
	elements: readonly ExcalidrawElement[],
	appState: AppState,
	) {
	const json = serializeAsJSON(elements, appState);
	const encoded = new TextEncoder().encode(json);
	const key = await window.crypto.subtle.generateKey(
	{
	name: "AES-GCM",
	length: 128,
	},
	true, // extractable
	["encrypt", "decrypt"],
	);
	// The iv is set to 0. We are never going to reuse the same key so we don't
	// need to have an iv. (I hope that's correct...)
	const iv = new Uint8Array(12);
	// We use symmetric encryption. AES-GCM is the recommended algorithm and
	// includes checks that the ciphertext has not been modified by an attacker.
	const encrypted = await window.crypto.subtle.encrypt(
	{
	name: "AES-GCM",
	iv: iv,
	},
	key,
	encoded,
	);
	// We use jwk encoding to be able to extract just the base64 encoded key.
	// We will hardcode the rest of the attributes when importing back the key.
	const exportedKey = await window.crypto.subtle.exportKey("jwk", key);

[nrgapple]

Thanks @dwelle for the fast response. The encryption feature should work in theory. But convincing management that a change will not happen while using the web that leaks info is hard. Would there be a way to manually build and wrap it in an electron application?

[dwelle]

The encryption feature should work in theory. But convincing management that a change will not happen while using the web that leaks info is hard.

Note that we send data to our server only when you share your scene via link, and that feature will remain there even in the desktop application --- how else would you want to share your scene with others? Well, you can download it to a JSON file and pass it around manually, but you can already do so in the web app, and no data is leaked to server at all.

Would there be a way to manually build and wrap it in an electron application?

We're planning to do it ourselves but not sure about the timeframe. You can of course try to do so yourself, it shouldn't be that hard.

[j-f1]

I started a mobile app for iOS:

It looks nice but still needs some handling in-app, like additional features to make it more than just a web app (which is forbidden by the app store guidelines) and correctly working around the notch (it currently clips just below it rather than allowing the drawings to scroll into the ears:

(PS: the iOS simulator is a great tool for developing mobile sites. Hold option to bring up the pinch tool.)

[j-f1]

It also lets me create a mac app that’s 150KB (!)

[lipis]

I think we can close that one: https://github.com/excalidraw/excalidraw-desktop

[katuak]

I think Electron was too heavy for a simple web wrapper, you could use the system's webview (or a PWA).

[lipis]

@dragonDScript We stopped using Electron: https://blog.excalidraw.com/deprecating-excalidraw-electron/

[katuak]

I know, thank you anyway.

[mrdc]

@j-f1 Hi, is it PWA that was installed on macOS?

@lipis Unfortunately, when using SRware Iron (Chrome based) on macOS 10.15.7 I have no prompts or options to install Excalidraw as an app.

[dwelle]

If SRware Iron disables PWAs for whatever reason, nothing we can do about it.

If you care about privacy, use https://brave.com/

[j-f1]

@mrdc No, it’s just a basic AppKit app that displays a web view pointing to the Excalidraw website.

[mrdc]

@mrdc No, it’s just a basic AppKit app that displays a web view pointing to the Excalidraw website.

Thanks, I’ve made an app and it’s 11,5MB :/

[j-f1]

Here’s the code if you want to test and update it: https://github.com/j-f1/excalidraw-mac

[solarkraft]

An Android app would allow the use of high resolution pointer events, which would enable handwriting support.

(Web browsers are supposed to support it, but none on Android do. Maybe lobbying for proper support on that end could accomplish the goal too, on iOS it probably couldn't)

This would be pretty big deal for me.