Discussion: Excalidraw as an API

I am interested in using excalidraw as an API:

• Integrating inside a website (besides embedding iframe)
• Collecting the output of a board programmatically
• Drawing something: excalidraw.draw(JSON copied from the tool)

This is how i imagine it to be used in a React app:

import Excalidraw from 'excalidraw'

function MyComponent(){
  const [data, setData] = useState({});
  return (
            <Excalidraw value={data} onChange={setData} />
  )
}

data has the format of excalidraw files.

Notes

• As a first implementation, we won’t implement anything else.
• Later we can add
  • a way to export to an image. const base64Image = getImageFromExcalidrawData(data)
  • a way to change controls. (remove the rectangle button or add a new one, or customize the look and feel of the buttons)
  • utilities to draw something in the board. data = createCircle(data, options)
  • adding new controls (insert in the current board) …

[ad1992]

closing this as now we have published @excalidraw/excalidraw 🎉

[dwelle]

Let’s do it!