Excalidraw Has a Free API That Most Developers Don't Know About

Excalidraw is the popular whiteboard tool, but most developers do not realize it has a powerful embeddable React component and a programmatic API. Embed Excalidraw in Your App npm install @excalidraw/excalidraw import { Excalidraw } from " @excalidraw/excalidraw " ; function Whiteboard () { return ( < div style = {{ height : " 500px " }} > < Excalidraw onChange = {( elements , state ) => { console . log ( " Elements: " , elements ); saveToDatabase ( elements ); }} initialData = {{ elements : loadedElements , appState : { viewBackgroundColor : " #ffffff " } }} / > < /div > ); } Programmatic Element Creation import { convertToExcalidrawElements } from " @excalidraw/excalidraw " ; const elements = convertToExcalidrawElements ([ { type : " rectangle " , x : 100 , y : 100 , width : 200 , height : 100 , backgroundColor : " #a5d8ff " , strokeColor : " #1971c2 " }, { type : " text " , x : 150 , y : 130 , text : " Hello World " , fontSize : 20 }, { type : " arrow " , x : 300 , y : 150 , width :