style body min height 700px 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 dist excalidraw development js script div class container h3 Excalidraw Embed Example h3 div id app div div script var excalidrawRef null const App excalidrawRef React useRef null const excalidrawWrapperRef React useRef null return React createElement React Fragment null React createElement div style height 500px React createElement ExcalidrawLib Excalidraw ref excalidrawRef const excalidrawWrapper document getElementById app const root ReactDOM createRoot excalidrawWrapper root render React createElement App for let n in ExcalidrawLib console log e n for let n in ExcalidrawLib Excalidraw console log ed n const doExport async exportToClipboard serializeAsJSON ExcalidrawLib serializeAsJSON elements excalidrawAPI getSceneElements appState excalidrawAPI getAppState console log current excalidrawRef current const blob await ExcalidrawLib exportToBlob elements excalidrawRef current getSceneElements mimeType image png appState initialData appState exportEmbedScene exportWithDarkMode files excalidrawRef current getFiles console log blob blob const doExportSvg async const svg await ExcalidrawLib exportToSvg elements excalidrawRef current getSceneElements mimeType image png appState initialData appState exportEmbedScene exportWithDarkMode width 300 height 100 files excalidrawRef current getFiles console log svg svg innerHTML const doExportClipboard async const onCopy async type png svg json if excalidrawAPI return false await exportToClipboard elements excalidrawAPI getSceneElements appState excalidrawAPI getAppState files excalidrawAPI getFiles type const svg await ExcalidrawLib exportToClipboard elements excalidrawRef current getSceneElements appState excalidrawRef current getAppState files excalidrawRef current getFiles type svg console log svg svg const doImport async loadSceneOrLibraryFromBlob const file await fileOpen description Excalidraw or library file const contents await loadSceneOrLibraryFromBlob file null null if contents type MIME_TYPES excalidraw excalidrawAPI updateScene contents data as any else if contents type MIME_TYPES excalidrawlib excalidrawAPI updateLibrary libraryItems contents data as ImportedLibraryData libraryItems openLibraryMenu true let ip document createElement input ip type file ip onchange async console log ip ip let selFile ip files 0 console log selFile selFile let reader new FileReader reader onload async re let arrayBufferNew re target result let uint8ArrayNew new Uint8Array arrayBufferNew let blob new Blob arrayBufferNew let contents await ExcalidrawLib loadSceneOrLibraryFromBlob blob null null console log contents contents excalidrawRef current updateScene contents data reader readAsArrayBuffer selFile ip click script button onclick doExport Export button button onclick doExportSvg ExportSvg button button onclick doExportClipboard ExportClipboard button button onclick doImport Import button script onload async let p await fetch https notebook xbdev net var resources test excalidraw let t await p text let content JSON parse t excalidrawRef current scrollToContent viewportZoomFactor 20 console log scrollToContent type typeof excalidrawRef current scrollToContent console log type content type console log excalidrawRef excalidrawRef await excalidrawRef current updateScene content excalidrawRef current setToast message Scene loaded duration 2000 excalidrawRef current scrollToContent opts viewportZoomFactor 20 const elements excalidrawRef current getSceneElements excalidrawRef current scrollToContent elements fitToContent true viewportZoomFactor 1 0 script
const svg await ExcalidrawLib exportToClipboard elements excalidrawRef current getSceneElements appState excalidrawRef current getAppState files excalidrawRef current getFiles type svg console log svg svg const doImport async loadSceneOrLibraryFromBlob const file await fileOpen description Excalidraw or library file const contents await loadSceneOrLibraryFromBlob file null null if contents type MIME_TYPES excalidraw excalidrawAPI updateScene contents data as any else if contents type MIME_TYPES excalidrawlib excalidrawAPI updateLibrary libraryItems contents data as ImportedLibraryData libraryItems openLibraryMenu true let ip document createElement input ip type file ip onchange async console log ip ip let selFile ip files 0 console log selFile selFile let reader new FileReader reader onload async re let arrayBufferNew re target result let uint8ArrayNew new Uint8Array arrayBufferNew let blob new Blob arrayBufferNew let contents await ExcalidrawLib loadSceneOrLibraryFromBlob blob null null console log contents contents excalidrawRef current updateScene contents data reader readAsArrayBuffer selFile ip click script button onclick doExport Export button button onclick doExportSvg ExportSvg button button onclick doExportClipboard ExportClipboard button button onclick doImport Import button script onload async let p await fetch https notebook xbdev net var resources test excalidraw let t await p text let content JSON parse t excalidrawRef current scrollToContent viewportZoomFactor 20 console log scrollToContent type typeof excalidrawRef current scrollToContent console log type content type console log excalidrawRef excalidrawRef await excalidrawRef current updateScene content excalidrawRef current setToast message Scene loaded duration 2000 excalidrawRef current scrollToContent opts viewportZoomFactor 20 const elements excalidrawRef current getSceneElements excalidrawRef current scrollToContent elements fitToContent true viewportZoomFactor 1 0 script