Excalidraw Draw Simple powerful and easy to use add drawing feature to any webpage Example shows in just a few lines how to add this Further reading documentation Link https docs excalidraw com docs excalidraw excalidraw api props ref settoast style body min height 900px container font family sans serif text align center button wrapper button z index 1 height 40px width 100px margin 10px padding 5px excalidraw App menu_top buttonList display flex excalidraw wrapper height 800px margin 50px position relative root dir ltr excalidraw layer ui__wrapper zen mode transition App menu_bottom transition left transform none style script src https unpkg com react 18 2 0 umd react development js script script src https unpkg com react dom 18 2 0 umd react dom development js script script type text javascript src https unpkg com excalidraw excalidraw 0 15 2 81ebf82 dist excalidraw development js script div class container h1 Excalidraw Embed Example h1 div id app div div script function App const excalidrawRef React useRef null const excalidrawWrapperRef React useRef null const dimensions setDimensions React useState width undefined height undefined const viewModeEnabled setViewModeEnabled React useState false const zenModeEnabled setZenModeEnabled React useState false const gridModeEnabled setGridModeEnabled React useState false const sceneData elements appState viewBackgroundColor edf2ff openSidebar customSidebar const updateScene excalidrawRef current updateScene sceneData excalidrawRef current setToast message Scene has been updated duration 2000 const toggleMenu for let n in excalidrawRef current console log n console log typeof excalidrawRef current toggleSidebar excalidrawRef current toggleMenu type customSidebar excalidrawRef current toggleSidebar force true return React createElement React Fragment null React createElement button className update scene onClick updateScene Update Scene React createElement button className toggle menu onClick toggleMenu Toggle Menu React createElement button className reset scene onClick excalidrawRef current resetScene Reset Scene React createElement div className excalidraw wrapper ref excalidrawWrapperRef React createElement ExcalidrawLib Excalidraw initialData sceneData ref excalidrawRef zenModeEnabled gridModeEnabled viewModeEnabled end App const excalidrawWrapper document getElementById app const root ReactDOM createRoot excalidrawWrapper root render React createElement App script
Sidebar const updateScene excalidrawRef current updateScene sceneData excalidrawRef current setToast message Scene has been updated duration 2000 const toggleMenu for let n in excalidrawRef current console log n console log typeof excalidrawRef current toggleSidebar excalidrawRef current toggleMenu type customSidebar excalidrawRef current toggleSidebar force true return React createElement React Fragment null React createElement button className update scene onClick updateScene Update Scene React createElement button className toggle menu onClick toggleMenu Toggle Menu React createElement button className reset scene onClick excalidrawRef current resetScene Reset Scene React createElement div className excalidraw wrapper ref excalidrawWrapperRef React createElement ExcalidrawLib Excalidraw initialData sceneData ref excalidrawRef zenModeEnabled gridModeEnabled viewModeEnabled end App const excalidrawWrapper document getElementById app const root ReactDOM createRoot excalidrawWrapper root render React createElement App script