esm.run @excalidraw/excalidraw demo

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Excalidraw in browser</title>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://esm.sh/@excalidraw/[email protected]/dist/dev/index.css"
    />
    <link rel="stylesheet" href="./index.css" />
    <script>
    	window.EXCALIDRAW_ASSET_PATH = "https://esm.sh/@excalidraw/[email protected]/dist/prod/";
		</script>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/[email protected]",
          "react/jsx-runtime": "https://esm.sh/[email protected]/jsx-runtime",
          "react-dom": "https://esm.sh/[email protected]"
        }
      }
    </script>
  </head>

  <body>
    <div class="container">
      <h1>Excalidraw Browser Example</h1>
      <div id="app"></div>
    </div>
  </body>
</html>

CSS

.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;
}

JavaScript

// See https://www.npmjs.com/package/@excalidraw/excalidraw documentation.
      import * as ExcalidrawLib from 'https://esm.sh/@excalidraw/[email protected]/dist/dev/index.js?external=react,react-dom';
			import React from "https://esm.sh/[email protected]";
      import { createRoot } from "https://esm.sh/[email protected]/client";
      import ReactDOM from "https://esm.sh/[email protected]"
      
      window.ExcalidrawLib = ExcalidrawLib;
      console.log("Excalidraw library", ExcalidrawLib);

      const App = () => {
        const [excalidrawAPI, setExcalidrawAPI] = React.useState(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);

        React.useEffect(() => {
          setDimensions({
            width: excalidrawWrapperRef.current.getBoundingClientRect().width,
            height: excalidrawWrapperRef.current.getBoundingClientRect().height,
          });
          const onResize = () => {
            setDimensions({
              width: excalidrawWrapperRef.current.getBoundingClientRect().width,
              height:
              excalidrawWrapperRef.current.getBoundingClientRect().height,
            });
          };

          window.addEventListener("resize", onResize);

          return () => window.removeEventListener("resize", onResize);
        }, [excalidrawWrapperRef]);

        const updateScene = () => {
          const sceneData = {
            elements: [
              {
                type: "rectangle",
                version: 141,
                versionNonce: 361174001,
                isDeleted: false,
                id: "oDVXy8D6rom3H1-LLH2-f",
               ...