Excalidraw as a component

There’s been two PR already that attempt to make an Excalidraw component (#958, #1493), sorry I have not been responsive. Before we proceed further I’d like to ask a few questions to @mizchi and @ad1992 (and all the people that +1 the issues). We should have done this in the first place before spending a lot of time with the implementation.

Once we are clear about what the use cases are, the API we want, what to do with options and how to implement it. We’ll be able to do the work once and get it merged.

1. What are the concrete use cases?

I can think that it would be useful to embed images in a wiki. I would like to know exactly what use case you have in mind so we can figure out the best trade-offs for it. Please be as specific as possible.

1. What is the API that you expect from the component?

<Excalidraw ???? />

and in particular:

• How do you expect dimensions to be taken into account? Does it
• How do you expect the scene to be passed? Is it a controlled component, or do you get an callback when it changes, how do you set the original one?
• How do you get the result back? Do you get a json, or a svg, or a png? Multiple ones? (so you can keep the source and you save the svg/png for consumption)

1. What happens with all the options?

• Load/save file, do we need it?
• Collaboration, does it even make sense?
• Export dialog, needed?
• Github banner, should be gone right?
• Zoom in/out, seems useful.
• Languages, do we want to use the language from the container instead?
• All the drawing options, do we want them? Or do we just want black and white.
• Does it need to support mobile? How do we manage scrolling with our own scroll?

1. What implementation do we want to go to?

At the outset, there seems to be two big possibilities: inject the component directly in the DOM, and pray there will be no style conflicts. Or use an iframe.

Based on the answers of all the questions above, we can figure out which is the best trade-off.

Sorry again about all the wasted work so far. Let’s go through the proper process and merge it in. I believe that this is a good feature to have.

[pA1nD]

I believe an excalidraw component would be incredible useful but also very tricky to realize. We’re completely hooked with exclidraw and are using it all over the place so we are looking currently into using it in a number of tools. I’m trying to outline it here one use case:

Internal Project Management Tool

We have an internal project management tool where we track projects and work on issues. To specify requirements, we create markdown files (markdown editor). Our customer has an access where he/she can review the requirements (rendered markdown).

In the same way as we use markdown to express ourselves, we started to use excalidraw drawings. Currently as exported SVGs. But everytime we need to change something, we need to open the file in excalidraw, change something, export, upload again. To implify we are planning to include excalidraw as an alternative to the markdown editor. So that we can edit it, and the customers can check it out.

Further down the road, we might even end up sketching solutions out with our customer in a realtime session.

DX ideas / requirements

Frontend

<Excalidraw 
  data={project.data} 
  editable={true} 
  session={`${EXCALIDRAW_URL}#room=${project.id},${createHash()}`} 
  user={user.name}
  asIframe={false}
  options={{language: 'en', showLoad: false, showSave: false, showSession: false}}
/>

Property	Default value	Description
data	null	Set the default data
editable	true	Allow a user to edit elements and show / hide the edit-related controlls
session	null	URL with room to connect session. Valid value: https://penguin.academy/excalidraw#room=106e6b881deb86c5968f,jxL8E8nDQZU34TbigREJpw
user	null	The user’s username to be displayed in a shared session
~asIframe~	~false~	~Embed excalidraw as iFrame. Default is to directly embed excalidraw (canvas)~ seems irrelevant
options	null	Additional options to configure default states of the Excalidraw UI

How would the styling work if excalidraw is directly embedded?

Backend

I would imagine to include excalidraw in a similar fashion as e.g. socket.io. So it would allow me simply to include it in an existing server or to create a new one if needed.

Using with Node http server

const server = require('http').createServer(...)
const excalidraw = require('excalidraw-server')(server)

Using with Express As I’m using express, I could include this in my application like this:

// server.js
const excalidraw = require('./excalidraw')
app.use('/excalidraw', excalidraw)

// excalidraw.js
const app = require('express')()
const server = require('http').Server(app)
const excalidraw = require('excalidraw-server')(server);

excalidraw.on(...) // expose here a bunch of useful events.

I am currently not quite sure how the flow with the events would look like, but my most important requirement would be to store the current version in a database (e.g. every 5 seconds or so). Would that mean that I need to have the whole json in memory on the server or is there a smarter way?

It would for sure be awesome to export socket.io’s io. Because this would e.g. allow me to make it work with my sessions (authentication) doing something like:

io.use(sharedsession(session, {
    autoSave:true
}));

Maybe simply as excalidraw.io ?

[ad1992]

@pA1nD I am working on exporting it as a component here. There are some pending things left and then will release the first version of it very soon. Then we can discuss what more features can be added to it.