Multiple base url fallbacks

.codesandbox/tasks.json

@@ -19,6 +19,11 @@
       "command": "yarn fix",
       "runAtStart": false
     },
+    "prettier": {
+      "name": "Prettify",
+      "command": "yarn prettier",
+      "runAtStart": false
+    },
     "start": {
       "name": "Start Excalidraw",
       "command": "yarn start",

.dockerignore

@@ -4,16 +4,8 @@
 !.eslintrc.json
 !.npmrc
 !.prettierrc
-!excalidraw-app/
 !package.json
 !public/
 !packages/
-!scripts/
 !tsconfig.json
 !yarn.lock
-
-# keep (sub)sub directories at the end to exclude from explicit included
-# e.g. ./packages/excalidraw/{dist,node_modules}
-**/build
-**/dist
-**/node_modules

.env.development

@@ -1,5 +1,3 @@
-MODE="development"
-
 VITE_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
 VITE_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 
@@ -10,24 +8,26 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 VITE_APP_WS_SERVER_URL=http://localhost:3002
 
 VITE_APP_PLUS_LP=https://plus.excalidraw.com
-VITE_APP_PLUS_APP=http://localhost:3000
+VITE_APP_PLUS_APP=https://app.excalidraw.com
 
-VITE_APP_AI_BACKEND=http://localhost:3016
+VITE_APP_AI_BACKEND=http://localhost:3015
 
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
 
 # put these in your .env.local, or make sure you don't commit!
 # must be lowercase `true` when turned on
 #
+# whether to enable Service Workers in development
+VITE_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 VITE_APP_DEV_DISABLE_LIVE_RELOAD=
-VITE_APP_ENABLE_TRACKING=true
+VITE_APP_DISABLE_TRACKING=true
 
 FAST_REFRESH=false
 
 # The port the run the dev server
-VITE_APP_PORT=3001
+VITE_APP_PORT=3000
 
 #Debug flags
 
@@ -37,16 +37,5 @@ VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=
 # Set this flag to false if you want to open the overlay by default
 VITE_APP_COLLAPSE_OVERLAY=true
 
-# Enable PWA in dev server
-VITE_APP_ENABLE_PWA=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0
-7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij
-ba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y
-UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
-s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
-kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
-HQIDAQAB'
-
-# set to true in .env.development.local to disable the prevent unload dialog
-VITE_APP_DISABLE_PREVENT_UNLOAD=
+# Set this flag to false to disable eslint
+VITE_APP_ENABLE_ESLINT=true

.env.production

@@ -1,5 +1,3 @@
-MODE="production"
-
 VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
 VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 
@@ -16,16 +14,4 @@ VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com
 
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
-VITE_APP_ENABLE_TRACKING=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApQ0jM9Qz8TdFLzcuAZZX
-/WvuKSOJxiw6AR/ZcE3eFQWM/mbFdhQgyK8eHGkKQifKzH1xUZjCxyXcxW6ZO02t
-kPOPxhz+nxUrIoWCD/V4NGmUA1lxwHuO21HN1gzKrN3xHg5EGjyouR9vibT9VDGF
-gq6+4Ic/kJX+AD2MM7Yre2+FsOdysrmuW2Fu3ahuC1uQE7pOe1j0k7auNP0y1q53
-PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
-iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
-PQIDAQAB'
-
-# Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when  running the build command
-VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
-VITE_APP_COLLAPSE_OVERLAY=false
+VITE_APP_DISABLE_TRACKING=

.eslintignore

@@ -0,0 +1,8 @@
+node_modules/
+build/
+package-lock.json
+.vscode/
+firebase/
+dist/
+public/workbox
+packages/excalidraw/types

.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["@excalidraw/eslint-config", "react-app"],
+  "rules": {
+    "import/no-anonymous-default-export": "off",
+    "no-restricted-globals": "off"
+  }
+}

.github/copilot-instructions.md

@@ -1,45 +0,0 @@
-# Project coding standards
-
-## Generic Communication Guidelines
-
-- Be succint and be aware that expansive generative AI answers are costly and slow
-- Avoid providing explanations, trying to teach unless asked for, your chat partner is an expert
-- Stop apologising if corrected, just provide the correct information or code
-- Prefer code unless asked for explanation
-- Stop summarizing what you've changed after modifications unless asked for
-
-## TypeScript Guidelines
-
-- Use TypeScript for all new code
-- Where possible, prefer implementations without allocation
-- When there is an option, opt for more performant solutions and trade RAM usage for less CPU cycles
-- Prefer immutable data (const, readonly)
-- Use optional chaining (?.) and nullish coalescing (??) operators
-
-## React Guidelines
-
-- Use functional components with hooks
-- Follow the React hooks rules (no conditional hooks)
-- Keep components small and focused
-- Use CSS modules for component styling
-
-## Naming Conventions
-
-- Use PascalCase for component names, interfaces, and type aliases
-- Use camelCase for variables, functions, and methods
-- Use ALL_CAPS for constants
-
-## Error Handling
-
-- Use try/catch blocks for async operations
-- Implement proper error boundaries in React components
-- Always log errors with contextual information
-
-## Testing
-
-- Always attempt to fix #problems
-- Always offer to run `yarn test:app` in the project root after modifications are complete and attempt fixing the issues reported
-
-## Types
-
-- Always include `packages/math/src/types.ts` in the context when your write math related code and always use the Point type instead of { x, y}

.github/workflows/autorelease-excalidraw.yml

@@ -12,10 +12,10 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 2
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Set up publish access
         run: |
           npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
@@ -24,4 +24,4 @@ jobs:
       - name: Auto release
         run: |
           yarn add @actions/core -W
-          yarn release --tag=next --non-interactive
+          yarn autorelease

.github/workflows/autorelease-preview.yml

@@ -0,0 +1,55 @@
+name: Auto release excalidraw preview
+on:
+  issue_comment:
+    types: [created, edited]
+
+jobs:
+  Auto-release-excalidraw-preview:
+    name: Auto release preview
+    if: github.event.comment.body == '@excalibot trigger release' && github.event.issue.pull_request
+    runs-on: ubuntu-latest
+    steps:
+      - name: React to release comment
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
+          comment-id: ${{ github.event.comment.id }}
+          reactions: "+1"
+      - name: Get PR SHA
+        id: sha
+        uses: actions/github-script@v4
+        with:
+          result-encoding: string
+          script: |
+            const { owner, repo, number } = context.issue;
+            const pr = await github.pulls.get({
+              owner,
+              repo,
+              pull_number: number,
+            });
+            return pr.data.head.sha
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ steps.sha.outputs.result }}
+          fetch-depth: 2
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18.x
+      - name: Set up publish access
+        run: |
+          npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Auto release preview
+        id: "autorelease"
+        run: |
+          yarn add @actions/core -W
+          yarn autorelease preview ${{ github.event.issue.number }}
+      - name: Post comment post release
+        if: always()
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
+          issue-number: ${{ github.event.issue.number }}
+          body: "@${{ github.event.comment.user.login }} ${{ steps.autorelease.outputs.result }}"

.github/workflows/lint.yml

@@ -9,10 +9,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Install and lint
         run: |

.github/workflows/locales-coverage.yml

@@ -10,14 +10,14 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
 
       - name: Create report file
         run: |

.github/workflows/publish-docker.yml

@@ -17,14 +17,9 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
       - name: Build and push
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v3
         with:
           context: .
           push: true
           tags: excalidraw/excalidraw:latest
-          platforms: linux/amd64, linux/arm64, linux/arm/v7

.github/workflows/semantic-pr-title.yml

@@ -11,6 +11,6 @@ jobs:
   semantic:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@v3.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/sentry-production.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Install and build
         run: |
           yarn --frozen-lockfile
@@ -28,7 +28,7 @@ jobs:
           export SENTRY_RELEASE=$(sentry-cli releases propose-version)
           sentry-cli releases new $SENTRY_RELEASE --project $SENTRY_PROJECT
           sentry-cli releases set-commits --auto $SENTRY_RELEASE
-          sentry-cli sourcemaps upload --release $SENTRY_RELEASE --no-rewrite ./build/static/js/ --url-prefix "~/static/js"
+          sentry-cli releases files $SENTRY_RELEASE upload-sourcemaps --no-rewrite ./build/static/js/ --url-prefix "~/static/js"
           sentry-cli releases finalize $SENTRY_RELEASE
           sentry-cli releases deploys $SENTRY_RELEASE new -e production
         env:

.github/workflows/size-limit.yml

@@ -11,10 +11,10 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
-      - name: Setup Node.js
+      - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Install in packages/excalidraw
         run: yarn
         working-directory: packages/excalidraw

.github/workflows/test-coverage-pr.yml

@@ -14,7 +14,7 @@ jobs:
       - name: "Install Node"
         uses: actions/setup-node@v2
         with:
-          node-version: "20.x"
+          node-version: "18.x"
       - name: "Install Deps"
         run: yarn install
       - name: "Test Coverage"

.github/workflows/test.yml

@@ -1,18 +1,16 @@
 name: Tests
 
-on:
-  push:
-    branches: master
+on: pull_request
 
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v2
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v2
         with:
-          node-version: 20.x
+          node-version: 18.x
       - name: Install and test
         run: |
           yarn install

.gitignore

@@ -8,9 +8,7 @@
 .history
 .idea
 .vercel
-.vscode/*
-!.vscode/extensions.json
-!.vscode/settings.recommended.json
+.vscode
 .yarn
 *.log
 *.tgz
@@ -27,5 +25,5 @@ packages/excalidraw/types
 coverage
 dev-dist
 html
-meta*.json
-.claude
+examples/**/bundle.*
+meta*.json

.lintstagedrc.js

@@ -0,0 +1,14 @@
+const { CLIEngine } = require("eslint");
+
+// see https://github.com/okonet/lint-staged#how-can-i-ignore-files-from-eslintignore-
+// for explanation
+const cli = new CLIEngine({});
+
+module.exports = {
+  "*.{js,ts,tsx}": files => {
+    return (
+      "eslint --max-warnings=0 --fix " + files.filter(file => !cli.isPathIgnored(file)).join(" ")
+    );
+  },
+  "*.{css,scss,json,md,html,yml}": ["prettier --write"],
+};

.nvmrc

@@ -0,0 +1 @@
+18

.oxfmtrc.json

@@ -1,5 +0,0 @@
-{
-  "printWidth": 80,
-  "proseWrap": "never",
-  "trailingComma": "all"
-}

.oxlintrc.json

@@ -1,149 +0,0 @@
-{
-  "$schema": "https://raw.githubusercontent.com/oxc-project/oxc/main/npm/oxlint/configuration_schema.json",
-  "plugins": ["typescript", "react", "jsx-a11y", "import"],
-  "rules": {
-    "no-unused-vars": [
-      "warn",
-      {
-        "ignoreRestSiblings": true
-      }
-    ],
-    "curly": "warn",
-    "no-console": [
-      "warn",
-      {
-        "allow": ["info", "warn", "error"]
-      }
-    ],
-    "no-else-return": "warn",
-    "no-lonely-if": "warn",
-    "no-unneeded-ternary": "warn",
-    "no-unused-expressions": "warn",
-    "no-useless-return": "warn",
-    "no-var": "warn",
-    "one-var": "warn",
-    "prefer-arrow-callback": "warn",
-    "prefer-const": "warn",
-    "prefer-template": "warn",
-    "typescript/consistent-type-imports": [
-      "error",
-      {
-        "disallowTypeAnnotations": false
-      }
-    ],
-    "typescript/no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          {
-            "group": [
-              "../../excalidraw",
-              "../../../packages/excalidraw",
-              "@excalidraw/excalidraw"
-            ],
-            "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
-            "allowTypeImports": true
-          }
-        ]
-      }
-    ],
-    "eslint/no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "jotai",
-            "message": "Do not import from \"jotai\" directly. Use our app-specific modules (\"editor-jotai\" or \"app-jotai\")."
-          }
-        ]
-      }
-    ],
-    "react/jsx-no-target-blank": [
-      "error",
-      {
-        "allowReferrer": true
-      }
-    ],
-
-    "eslint/no-unreachable": "warn",
-
-    // react
-    "react/jsx-no-comment-textnodes": "error",
-    "react/iframe-missing-sandbox": "warn",
-    "react/rules-of-hooks": "error",
-    "react/no-unescaped-entities": "warn",
-
-    // for later
-    // ----------
-    // "react/no-array-index-key": "warn",
-    // "react/jsx-no-useless-fragment": "warn",
-
-    // will require major refactor
-    // ---------------------------
-    // "react/only-export-components": "warn",
-
-    // type-aware rules (requires --type-aware flag)
-    // -------------------------------------------------------------------------
-    "typescript/switch-exhaustiveness-check": "warn",
-    "typescript/unbound-method": [
-      "warn",
-      {
-        "ignoreStatic": true
-      }
-    ],
-
-    // disabled rules
-    // -------------------------------------------------------------------------
-    // may be re-enabled later
-    "typescript/no-redundant-type-constituents": "off",
-    "typescript/no-unsafe-unary-minus": "off",
-    "typescript/no-floating-promises": "off",
-    // not planned
-    "eslint/no-async-promise-executor": "off",
-    "jsx-a11y/no-autofocus": "off",
-    "eslint-plugin-jsx-a11y/click-events-have-key-events": "off",
-    "eslint-plugin-jsx-a11y/label-has-associated-control": "off"
-  },
-  "ignorePatterns": [
-    "node_modules/",
-    "build/",
-    "dist/",
-    ".vscode/",
-    "firebase/",
-    "public/workbox",
-    "packages/excalidraw/types",
-    "examples/**/public",
-    "dev-dist",
-    "coverage"
-    // "**/tests/**",
-    // "**/*.test*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "packages/common/src/**/*.ts",
-        "packages/common/src/**/*.tsx",
-        "packages/element/src/**/*.ts",
-        "packages/element/src/**/*.tsx"
-      ],
-      "rules": {
-        "typescript/no-restricted-imports": [
-          "error",
-          {
-            "patterns": [
-              {
-                "group": [
-                  "../../excalidraw",
-                  "../../../packages/excalidraw",
-                  "@excalidraw/excalidraw"
-                ],
-                "message": "Do not import from '@excalidraw/excalidraw' package anything but types, as this package must be independent.",
-                "allowTypeImports": true
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ]
-}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["oxc.oxc-vscode"]
-}

.vscode/settings.recommended.json

@@ -1,22 +0,0 @@
-{
-  "oxc.enable": true,
-  "editor.formatOnSave": true,
-  "[javascript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[javascriptreact]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  }
-}

CLAUDE.md

@@ -1,34 +0,0 @@
-# CLAUDE.md
-
-## Project Structure
-
-Excalidraw is a **monorepo** with a clear separation between the core library and the application:
-
-- **`packages/excalidraw/`** - Main React component library published to npm as `@excalidraw/excalidraw`
-- **`excalidraw-app/`** - Full-featured web application (excalidraw.com) that uses the library
-- **`packages/`** - Core packages: `@excalidraw/common`, `@excalidraw/element`, `@excalidraw/math`, `@excalidraw/utils`
-- **`examples/`** - Integration examples (NextJS, browser script)
-
-## Development Workflow
-
-1. **Package Development**: Work in `packages/*` for editor features
-2. **App Development**: Work in `excalidraw-app/` for app-specific features
-3. **Testing**: Always run `yarn test:update` before committing
-4. **Type Safety**: Use `yarn test:typecheck` to verify TypeScript
-
-## Development Commands
-
-```bash
-yarn test:typecheck  # TypeScript type checking
-yarn test:update     # Run all tests (with snapshot updates)
-yarn fix             # Auto-fix formatting and linting issues
-```
-
-## Architecture Notes
-
-### Package System
-
-- Uses Yarn workspaces for monorepo management
-- Internal packages use path aliases (see `vitest.config.mts`)
-- Build system uses esbuild for packages, Vite for the app
-- TypeScript throughout with strict configuration

Dockerfile

@@ -1,20 +1,17 @@
-FROM --platform=${BUILDPLATFORM} node:18 AS build
+FROM node:18 AS build
 
 WORKDIR /opt/node_app
 
-COPY . .
-
-# do not ignore optional dependencies:
-# Error: Cannot find module @rollup/rollup-linux-x64-gnu
-RUN --mount=type=cache,target=/root/.cache/yarn \
-    npm_config_target_arch=${TARGETARCH} yarn --network-timeout 600000
+COPY package.json yarn.lock ./
+RUN yarn --ignore-optional --network-timeout 600000
 
 ARG NODE_ENV=production
 
-RUN npm_config_target_arch=${TARGETARCH} yarn build:app:docker
+COPY . .
+RUN yarn build:app:docker
 
-FROM --platform=${TARGETPLATFORM} nginx:1.27-alpine
+FROM nginx:1.21-alpine
 
-COPY --from=build /opt/node_app/excalidraw-app/build /usr/share/nginx/html
+COPY --from=build /opt/node_app/build /usr/share/nginx/html
 
 HEALTHCHECK CMD wget -q -O /dev/null http://localhost || exit 1

README.md

@@ -7,7 +7,7 @@
 
 <h4 align="center">
   <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://plus.excalidraw.com/blog">Blog</a> |
+  <a href="https://blog.excalidraw.com">Blog</a> |
   <a href="https://docs.excalidraw.com">Documentation</a> |
   <a href="https://plus.excalidraw.com">Excalidraw+</a>
 </h4>
@@ -23,17 +23,20 @@
 <br />
 <p align="center">
   <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
-    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  /></a>
+    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+  </a>
   <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
-    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  /></a>
+    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
+  </a>
   <a href="https://docs.excalidraw.com/docs/introduction/contributing">
-    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  /></a>
+    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
+  </a>
   <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/></a>
-  <a href="https://deepwiki.com/excalidraw/excalidraw">
-    <img alt="Ask DeepWiki" src="https://deepwiki.com/badge.svg" /></a>
+    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
+  </a>
   <a href="https://twitter.com/excalidraw">
-    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/></a>
+    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
+  </a>
 </p>
 
 <div align="center">
@@ -60,7 +63,7 @@ The Excalidraw editor (npm package) supports:
 - 🏗️&nbsp;Customizable.
 - 📷&nbsp;Image support.
 - 😀&nbsp;Shape libraries support.
-- 🌐&nbsp;Localization (i18n) support.
+- 👅&nbsp;Localization (i18n) support.
 - 🖼️&nbsp;Export to PNG, SVG & clipboard.
 - 💾&nbsp;Open format - export drawings as an `.excalidraw` json file.
 - ⚒️&nbsp;Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
@@ -84,11 +87,13 @@ We'll be adding these features as drop-in plugins for the npm package in the fut
 
 **Note:** following instructions are for installing the Excalidraw [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw) when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our [Development Guide](https://docs.excalidraw.com/docs/introduction/development).
 
-Use `npm` or `yarn` to install the package.
-
-```bash
+```
 npm install react react-dom @excalidraw/excalidraw
-# or
+```
+
+or via yarn
+
+```
 yarn add react react-dom @excalidraw/excalidraw
 ```
 

dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx

@@ -2,14 +2,14 @@
 
 Earlier we were using `renderFooter` prop to render custom footer which was removed in [#5970](https://github.com/excalidraw/excalidraw/pull/5970). Now you can pass a `Footer` component instead to render the custom UI for footer.
 
-You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should be a valid React Node.
+You will need to import the `Footer` component from the package and wrap your component with the Footer component. The `Footer` should a valid React Node.
 
 **Usage**
 
 ```jsx live
 function App() {
   return (
-    <div style={{ height: "500px" }}>
+    <div style={{ height: "500px"}}>
       <Excalidraw>
         <Footer>
           <button
@@ -25,21 +25,21 @@ function App() {
 }
 ```
 
-This will only work for `Desktop` devices.
+This will only for `Desktop` devices.
 
-For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useEditorInterface`](#useEditorInterface) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
+For `mobile` you will need to render it inside the [MainMenu](#mainmenu). You can use the [`useDevice`](#useDevice) hook to check the type of device, this will be available only inside the `children` of `Excalidraw` component.
 
 Open the `Menu` in the below playground and you will see the `custom footer` rendered.
 
 ```jsx live noInline
 const MobileFooter = ({}) => {
-  const editorInterface = useEditorInterface();
-  if (editorInterface.formFactor === "phone") {
+  const device = useDevice();
+  if (device.editor.isMobile) {
     return (
       <Footer>
         <button
           className="custom-footer"
-          style={{ marginLeft: "20px", height: "2rem" }}
+          style= {{ marginLeft: '20px', height: '2rem'}}
           onClick={() => alert("This is custom footer in mobile menu")}
         >
           custom footer
@@ -65,4 +65,4 @@ const App = () => (
 // Need to render when code is span across multiple components
 // in Live Code blocks editor
 render(<App />);
-```
+```

dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx

@@ -133,7 +133,7 @@ function App() {
 }
 ```
 
-Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/main-menu/DefaultItems.tsx) of the default items.
+Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/mainMenu/DefaultItems.tsx) of the default items.
 
 ### MainMenu.Group
 

dev-docs/docs/@excalidraw/excalidraw/api/children-components/welcome-screen.mdx

@@ -31,7 +31,7 @@ The welcome screen consists of two main groups of subcomponents:
 
 <img
   src={require("@site/static/img/welcome-screen-overview.png").default}
-  alt="Excalidraw logo: Sketch hand-drawn like diagrams."
+  alt="Excalidraw logo: Sketch handrawn like diagrams."
 />
 
 ### Center

dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx

@@ -10,11 +10,11 @@ import { FONT_FAMILY } from "@excalidraw/excalidraw";
 
 `FONT_FAMILY` contains all the font families used in `Excalidraw`. The default families are the following:
 
-| Font Family    | Description           |
-| -------------- | --------------------- |
-| `Excalifont`   | The `Hand-drawn` font |
-| `Nunito`       | The `Normal` Font     |
-| `Comic Shanns` | The `Code` Font       |
+| Font Family | Description            |
+| ----------- | ---------------------- |
+| `Excalifont`    | The `Hand-drawn` font |
+| `Nunito` | The `Normal` Font      |
+| `Comic Shanns`  | The `Code` Font        |
 
 Pre-selected family is `FONT_FAMILY.Excalifont`, unless it's overriden with `initialData.appState.currentItemFontFamily`.
 

dev-docs/docs/@excalidraw/excalidraw/api/props/excalidraw-api.mdx

@@ -13,7 +13,7 @@ Once the callback is triggered, you will need to store the api in state to acces
 ```jsx showLineNumbers
 export default function App() {
   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-  return <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />;
+  return <Excalidraw excalidrawAPI={{(api)=> setExcalidrawAPI(api)}} />;
 }
 ```
 
@@ -65,7 +65,7 @@ You can use this function to update the scene with the sceneData. It accepts the
 | `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L38) | The `elements` to be updated in the scene |
 | `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L39) | The `appState` to be updated in the scene. |
 | `collaborators` | <code>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L37">Collaborator></a></code> | The list of collaborators to be updated in the scene. |
-| `captureUpdate` | [`CaptureUpdateAction`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/store.ts#L40) | Controls which updates should be captured by the `Store`. Captured updates are emmitted and listened to by other components, such as `History` for undo / redo purposes. |
+| `storeAction` | [`StoreAction`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/store.ts#L40) | Parameter to control which updates should be captured by the `Store`. Captured updates are emmitted as increments and listened to by other components, such as `History` for undo / redo purposes. |
 
 ```jsx live
 function App() {
@@ -105,7 +105,7 @@ function App() {
       appState: {
         viewBackgroundColor: "#edf2ff",
       },
-      captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+      storeAction: StoreAction.CAPTURE,
     };
     excalidrawAPI.updateScene(sceneData);
   };
@@ -116,23 +116,24 @@ function App() {
       <button className="custom-button" onClick={updateScene}>
         Update Scene
       </button>
-      <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />
+      <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
     </div>
   );
 }
 ```
 
-#### captureUpdate
+#### storeAction
 
-You can use the `captureUpdate` to influence undo / redo behaviour.
+You can use the `storeAction` to influence undo / redo behaviour.
 
-> **NOTE**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `captureUpdate` value.
+> **NOTE**: Some updates are not observed by the store / history - i.e. updates to `collaborators` object or parts of `AppState` which are not observed (not `ObservedAppState`). Such updates will never make it to the undo / redo stacks, regardless of the passed `storeAction` value.
 
-|  | `captureUpdate` value | Notes |
+|  | `storeAction` value | Notes |
 | --- | --- | --- |
-| _Immediately undoable_ | `CaptureUpdateAction.IMMEDIATELY` | Use for updates which should be captured. Should be used for most of the local updates. These updates will _immediately_ make it to the local undo / redo stacks. |
-| _Eventually undoable_ | `CaptureUpdateAction.EVENTUALLY` | Use for updates which should not be captured immediately - likely exceptions which are part of some async multi-step process. Otherwise, all such updates would end up being captured with the next `CaptureUpdateAction.IMMEDIATELY` - triggered either by the next `updateScene` or internally by the editor. These updates will _eventually_ make it to the local undo / redo stacks. |
-| _Never undoable_ | `CaptureUpdateAction.NEVER` | Use for updates which should never be recorded, such as remote updates or scene initialization. These updates will _never_ make it to the local undo / redo stacks. |
+| _Immediately undoable_ | `StoreAction.CAPTURE` | Use for updates which should be captured. Should be used for most of the local updates. These updates will _immediately_ make it to the local undo / redo stacks. |
+| _Eventually undoable_ | `StoreAction.NONE` | Use for updates which should not be captured immediately - likely exceptions which are part of some async multi-step process. Otherwise, all such updates would end up being captured with the next `StoreAction.CAPTURE` - triggered either by the next `updateScene` or internally by the editor. These updates will _eventually_ make it to the local undo / redo stacks. |
+| _Never undoable_ | `StoreAction.UPDATE` | Use for updates which should never be recorded, such as remote updates or scene initialization. These updates will _never_ make it to the local undo / redo stacks. |
+
 
 ### updateLibrary
 
@@ -201,7 +202,7 @@ function App() {
         Update Library
       </button>
       <Excalidraw
-        excalidrawAPI={(api) => setExcalidrawAPI(api)}
+        ref={(api) => setExcalidrawAPI(api)}
         // initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/packages/excalidraw/initialData.js
         initialData={{
           libraryItems: initialData.libraryItems,
@@ -362,15 +363,22 @@ This API has the below signature. It sets the `tool` passed in param as the acti
 
 ```ts
 (
-  tool: ({ type: ToolType } | { type: "custom"; customType: string }) & {
-    locked?: boolean;
-  },
+  tool: (
+    | (
+        | { type: Exclude<ToolType, "image"> }
+        | {
+            type: Extract<ToolType, "image">;
+            insertOnCanvasDirectly?: boolean;
+          }
+      )
+    | { type: "custom"; customType: string }
+  ) & { locked?: boolean },
 ) => {};
 ```
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L91) | `selection` | The tool type which should be set as active tool |
+| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L91) | `selection` | The tool type which should be set as active tool. When setting `image` as active tool, the insertion onto canvas when using image tool is disabled by default, so you can enable it by setting `insertOnCanvasDirectly` to `true` |
 | `locked` | `boolean` | `false` | Indicates whether the the active tool should be locked. It behaves the same way when using the `lock` tool in the editor interface |
 
 ## setCursor

dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx

@@ -1,15 +1,7 @@
 # initialData
 
 <pre>
-  &#123; elements?:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
-    ExcalidrawElement[]
-  </a>
-  , appState?:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
-    AppState
-  </a>{" "}
-  &#125;
+&#123; elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a> &#125;
 </pre>
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
@@ -54,7 +46,7 @@ function App() {
             },
           ],
           appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
-          scrollToContent: true,
+          scrollToContent: true
         }}
       />
     </div>

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -3,35 +3,33 @@
 All `props` are _optional_.
 
 | Name | Type | Default | Description |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
 | [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
-| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
-| [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
-| [`onChange`](#onchange) | `function` | \_ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
-| [`onPointerUpdate`](#onpointerupdate) | `function` | \_ | Callback triggered when mouse pointer is updated. |
-| [`onPointerDown`](#onpointerdown) | `function` | \_ | This prop if passed gets triggered on pointer down events |
-| [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
-| [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
-| [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`generateLinkForSelection`](#generatelinkforselection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
-| [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
+| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | _ | Callback triggered with the excalidraw api once rendered |
+| [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
+| [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
+| [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
+| [`onPointerDown`](#onpointerdown) | `function` | _ | This prop if passed gets triggered on pointer down evenets |
+| [`onScrollChange`](#onscrollchange) | `function` | _ | This prop if passed gets triggered when scrolling the canvas. |
+| [`onPaste`](#onpaste) | `function` | _ | Callback to be triggered if passed when the something is pasted in to the scene |
+| [`onLibraryChange`](#onlibrarychange) | `function` | _ | The callback if supplied is triggered when the library is updated and receives the library items. |
+| [`onLinkOpen`](#onlinkopen) | `function` | _ | The callback if supplied is triggered when any link is opened. |
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
-| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
-| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | \_ | Render function that can be used to render custom stats on the stats dialog. |
-| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | \_ | This indicates if the app is in `view` mode. |
-| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | \_ | This indicates if the `zen` mode is enabled |
-| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | \_ | This indicates if the `grid` mode is enabled |
-| [`libraryReturnUrl`](#libraryreturnurl) | `string` | \_ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
+| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
+| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
+| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
+| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
+| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |
+| [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` &#124; `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
 | [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
-| [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
-| [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
-| [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| <code>((link: string) => boolean &#124; undefined)</code> | \_ | use for custom src url validation |
+| [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |
+| [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
+| [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
 | [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
-| [`renderScrollbars`] | `boolean` |  | `false` | Indicates whether scrollbars will be shown |
 
 ### Storing custom data on Excalidraw elements
 
@@ -95,8 +93,9 @@ This callback is triggered when mouse pointer is updated.
 
 This prop if passed will be triggered on pointer down events and has the below signature.
 
+
 <pre>
-  (activeTool:{" "}
+(activeTool:{" "}
   <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L115">
     {" "}
     AppState["activeTool"]
@@ -144,14 +143,6 @@ This callback if supplied will get triggered when the library is updated and has
 
 It is invoked with empty items when user clears the library. You can use this callback when you want to do something additional when library is updated for example persisting it to local storage.
 
-### generateLinkForSelection
-
-This prop if passed will be used to replace the default link generation function. The idea is that the host app can take over the creation of element links, which can be used to navigate to a particular element or a group. If the host app chooses a different key for element link id, then the host app should also take care of the handling and the navigation in `onLinkOpen`.
-
-```tsx
-(id: string, type: "element" | "group") => string;
-```
-
 ### onLinkOpen
 
 This prop if passed will be triggered when clicked on `link`. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
@@ -216,7 +207,8 @@ This prop indicates whether the shows the grid. When supplied, the value takes p
 
 ### libraryReturnUrl
 
-If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com).  
+Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
 
 ### theme
 
@@ -228,6 +220,7 @@ You can use [`THEME`](/docs/@excalidraw/excalidraw/api/utils#theme) to specify t
 
 This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over _intialData.appState.name_, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
 
+
 ### detectScroll
 
 Indicates whether Excalidraw should listen for `scroll` event on the nearest scrollable container in the DOM tree and recompute the coordinates (e.g. to correctly handle the cursor) when the component's position changes. You can disable this when you either know this doesn't affect your app or you want to take care of it yourself (calling the [`refresh()`](#ref) method).
@@ -247,7 +240,7 @@ This prop indicates whether to `focus` the Excalidraw component on page load. De
 Allows you to override `id` generation for files added on canvas (images). By default, an SHA-1 digest of the file is used.
 
 ```tsx
-(file: File) => string | Promise<string>;
+(file: File) => string | Promise<string>
 ```
 
 ### validateEmbeddable

dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx

@@ -65,7 +65,7 @@ If user choses to `dock` the sidebar, it will push the right part of the UI towa
 function App() {
   return (
     <div style={{ height: "500px" }}>
-      <Excalidraw UIOptions={{ dockedSidebarBreakpoint: 200 }} />
+      <Excalidraw UIOptions={{dockedSidebarBreakpoint: 200}}/>
     </div>
   );
 }
@@ -73,8 +73,9 @@ function App() {
 
 ## tools
 
-This `prop` controls the visibility of the tools in the editor. Currently you can control the visibility of `image` tool via this prop.
+This `prop` controls the visibility of the tools in the editor.
+Currently you can control the visibility of `image` tool via this prop.
 
-| Prop  | Type    | Default | Description                                     |
-| ----- | ------- | ------- | ----------------------------------------------- |
-| image | boolean | true    | Decides whether `image` tool should be visible. |
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| image | boolean | true | Decides whether `image` tool should be visible.

dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx

@@ -14,44 +14,35 @@ We're working on much improved export utilities. Stay tuned!
 **_Signature_**
 
 <pre>
-  exportToCanvas(&#123;
-  <br />
-  &nbsp; elements,
-  <br />
-  &nbsp; appState
-  <br />
-  &nbsp; getDimensions,
-  <br />
-  &nbsp; files,
-  <br />
-  &nbsp; exportPadding?: number;
-  <br />
-  &#125;:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/utils/export.ts#L24">
-    ExportOpts
-  </a>
+exportToCanvas(&#123;<br/>&nbsp;
+  elements,<br/>&nbsp;
+  appState<br/>&nbsp;
+  getDimensions,<br/>&nbsp;
+  files,<br/>&nbsp;
+  exportPadding?: number;<br/>
+&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L21">ExportOpts</a>
 </pre>
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to be exported to canvas. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L17) | The app state of the scene. |
-| [`getDimensions`](#getdimensions) | `function` | \_ | A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. |
-| `maxWidthOrHeight` | `number` | \_ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
-| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | \_ | The files added to the scene. |
+| [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported. |
+| `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
+| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | _ | The files added to the scene. |
 | `exportPadding` | `number` | `10` | The `padding` to be added on canvas. |
 
+
 #### getDimensions
 
 ```tsx
-(width: number, height: number) => {
+(width: number, height: number) => { 
   width: number,
-  height: number,
-  scale?: number
+  height: number, 
+  scale?: number 
 }
 ```
-
-A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported.
+A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported.
 
 **How to use**
 
@@ -66,17 +57,17 @@ function App() {
   const [canvasUrl, setCanvasUrl] = useState("");
   const [excalidrawAPI, setExcalidrawAPI] = useState(null);
 
-  return (
+  return  (
     <>
       <button
         className="custom-button"
         onClick={async () => {
           if (!excalidrawAPI) {
-            return;
+            return
           }
           const elements = excalidrawAPI.getSceneElements();
           if (!elements || !elements.length) {
-            return;
+            return
           }
           const canvas = await exportToCanvas({
             elements,
@@ -85,9 +76,7 @@ function App() {
               exportWithDarkMode: false,
             },
             files: excalidrawAPI.getFiles(),
-            getDimensions: () => {
-              return { width: 350, height: 350 };
-            },
+            getDimensions: () => { return {width: 350, height: 350}}
           });
           const ctx = canvas.getContext("2d");
           ctx.font = "30px Virgil";
@@ -101,13 +90,15 @@ function App() {
         <img src={canvasUrl} alt="" />
       </div>
       <div style={{ height: "400px" }}>
-        <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />
+        <Excalidraw ref={(api) => setExcalidrawAPI(api)}
+/>
       </div>
     </>
-  );
+  )
 }
 ```
 
+
 ### exportToBlob
 
 **_Signature_**
@@ -123,7 +114,7 @@ exportToBlob(<br/>&nbsp;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `opts` | `object` | \_ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
+| `opts` | `object` | _ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) |
 | `mimeType` | `string` | `image/png` | Indicates the image format. |
 | `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. |
 | `exportPadding` | `number` | `10` | The padding to be added on canvas. |
@@ -141,34 +132,26 @@ Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-
 **_Signature_**
 
 <pre>
-  exportToSvg(&#123;
-  <br />
-  &nbsp; elements:&nbsp;
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
-    ExcalidrawElement[]
-  </a>
-  ,<br />
-  &nbsp; appState:
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
-    {" "}
-    AppState
-  </a>
-  ,<br />
-  &nbsp; exportPadding: number,
-  <br />
-  &nbsp; metadata: string,
-  <br />
-  &nbsp; files:&nbsp;
+exportToSvg(&#123;<br/>&nbsp;
+  elements:&nbsp; 
+    <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
+      ExcalidrawElement[]
+    </a>,<br/>&nbsp;
+  appState:
+    <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95"> AppState
+    </a>,<br/>&nbsp;
+  exportPadding: number,<br/>&nbsp;
+  metadata: string,<br/>&nbsp;
+  files:&nbsp;
   <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59">
-    BinaryFiles
-  </a>
-  ,<br />
-  &#125;);
+      BinaryFiles
+    </a>,<br/>
+&#125;);
 </pre>
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to exported as `svg ` |
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to exported as `svg `|
 | appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L11) | The `appState` of the scene |
 | exportPadding | number | 10 | The `padding` to be added on canvas |
 | files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) | undefined | The `files` added to the scene. |
@@ -193,7 +176,7 @@ exportToClipboard(<br/>&nbsp;
 | `opts` |  |  | This param is same as the params passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas). |
 | `mimeType` | `string` | `image/png` | Indicates the image format, this will be used when exporting as `png`. |
 | `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg` / `image/webp` MIME types. This will be used when exporting as `png`. |
-| `type` | 'png' &#124; 'svg' &#124; 'json' | \_ | This determines the format to which the scene data should be `exported`. |
+| `type` | 'png' &#124; 'svg' &#124; 'json' | _ | This determines the format to which the scene data should be `exported`. |
 
 **How to use**
 

dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx

@@ -20,7 +20,8 @@ import { restoreAppState } from "@excalidraw/excalidraw";
 This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) and if any key is missing, it will be set to its `default` value.
 
 When `localAppState` is supplied, it's used in place of values that are missing (`undefined`) in `appState` instead of the defaults.  
-Use this as a way to not override user's defaults if you persist them. You can pass `null` / `undefined` if not applicable.
+Use this as a way to not override user's defaults if you persist them.
+You can pass `null` / `undefined` if not applicable.
 
 ### restoreElements
 
@@ -35,10 +36,10 @@ restoreElements(
 </pre>
 
 | Prop | Type | Description |
-| --- | --- | --- |
+| ---- | ---- | ---- |
 | `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
-| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined | When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
-| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements |
+| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined |  When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
+| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
 
 #### localElements
 
@@ -46,14 +47,13 @@ When `localElements` are supplied, they are used to ensure that existing restore
 Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update
 
 #### opts
-
 The extra optional parameter to configure restored elements. It has the following attributes
 
-| Prop | Type | Description |
-| --- | --- | --- |
+| Prop | Type | Description|
+| --- | --- | ------|
 | `refreshDimensions` | `boolean` | Indicates whether we should also _recalculate_ text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` | `boolean` | Indicates whether the _bindings_ for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
-| `normalizeIndices` | `boolean` | Indicates whether _fractional indices_ for the elements should be normalized. This is to prevent possible issues caused by using stale (too old, too long) indices. |
+| `repairBindings` |`boolean` | Indicates whether the _bindings_ for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
+| `normalizeIndices` |`boolean` | Indicates whether _fractional indices_ for the elements should be normalized. This is to prevent possible issues caused by using stale (too old, too long) indices. |
 
 **_How to use_**
 
@@ -94,12 +94,8 @@ This function makes sure elements and state is set to appropriate values and set
 **_Signature_**
 
 <pre>
-  restoreLibraryItems(libraryItems:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">
-    ImportedDataState["libraryItems"]
-  </a>
-  ,<br />
-  &nbsp; defaultStatus: "published" | "unpublished")
+restoreLibraryItems(libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["libraryItems"]</a>,<br/>&nbsp;
+defaultStatus: "published" | "unpublished")
 </pre>
 
 **_How to use_**

dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md

@@ -292,7 +292,7 @@ viewportCoordsToSceneCoords(&#123; clientX: number, clientY: number },<br/>&nbsp
   appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a><br/>): &#123;x: number, y: number}
 </pre>
 
-### useEditorInterface
+### useDevice
 
 This hook can be used to check the type of device which is being used. It can only be used inside the `children` of `Excalidraw` component.
 
@@ -300,8 +300,8 @@ Open the `main menu` in the below example to view the footer.
 
 ```jsx live noInline
 const MobileFooter = ({}) => {
-  const editorInterface = useEditorInterface();
-  if (editorInterface.formFactor === "phone") {
+  const device = useDevice();
+  if (device.editor.isMobile) {
     return (
       <Footer>
         <button
@@ -336,20 +336,12 @@ render(<App />);
 The `device` has the following `attributes`, some grouped into `viewport` and `editor` objects, per context.
 
 | Name | Type | Description |
-| ---- | ---- | ----------- |
-
-The `EditorInterface` object has the following properties:
-
-| Name | Type | Description |
-| --- | --- | --- | --- | --- | --- |
-| `formFactor` | `'phone' | 'tablet' | 'desktop'` | Indicates the device type based on screen size |
-| `desktopUIMode` | `'compact' | 'full'` | UI mode for desktop form factor |
-| `userAgent.raw` | `string` | Raw user agent string |
-| `userAgent.isMobileDevice` | `boolean` | True if device is mobile |
-| `userAgent.platform` | `'ios' | 'android' | 'other' | 'unknown'` | Device platform |
-| `isTouchScreen` | `boolean` | True if touch events are detected |
-| `canFitSidebar` | `boolean` | True if sidebar can fit in the viewport |
-| `isLandscape` | `boolean` | True if viewport is in landscape mode |
+| --- | --- | --- |
+| `viewport.isMobile` | `boolean` | Set to `true` when viewport is in `mobile` breakpoint |
+| `viewport.isLandscape` | `boolean` | Set to `true` when the viewport is in `landscape` mode |
+| `editor.canFitSidebar` | `boolean` | Set to `true` if there's enough space to fit the `sidebar` |
+| `editor.isMobile` | `boolean` | Set to `true` when editor container is in `mobile` breakpoint |
+| `isTouchScreen` | `boolean` | Set to `true` for `touch` when touch event detected |
 
 ### i18n
 

dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx

@@ -38,7 +38,6 @@ For a complete list of variables, check [theme.scss](https://github.com/excalidr
   --color-primary-light: #dcbec9;
 }
 ```
-
 ```tsx live
 function App() {
   return (

dev-docs/docs/@excalidraw/excalidraw/development.mdx

@@ -13,27 +13,47 @@ To start the example app using the `@excalidraw/excalidraw` package, follow the
 1. Install the dependencies
 
    ```bash
-   yarn
+   cd packages/excalidraw && yarn
    ```
 
 2. Start the example app
 
    ```bash
-   yarn start:example
+   yarn start
    ```
 
    [http://localhost:3001](http://localhost:3001) will open in your default browser.
 
-   This is the same example as the [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.
+   The example is same as the [codesandbox example](https://ehlz3.csb.app/)
 
 ## Releasing
 
+### Create a test release
+
+You can create a test release by posting the below comment in your pull request:
+
+```bash
+@excalibot trigger release
+```
+
+Once the version is released `@excalibot` will post a comment with the release version.
+
 ### Creating a production release
 
 To release the next stable version follow the below steps:
 
 ```bash
-yarn release --tag=latest --version=0.19.0
+yarn prerelease:excalidraw
 ```
 
-You will need to pass the `latest` tag with `version` for which you want to create the release. This will make the changes needed before publishing the packages into NPM, like updating dependencies of all `@excalidraw/*` packages, generating new entries in `CHANGELOG.md` and more.
+You need to pass the `version` for which you want to create the release. This will make the changes needed before making the release like updating `package.json`, `changelog` and more.
+
+The next step is to run the `release` script:
+
+```bash
+yarn release:excalidraw
+```
+
+This will publish the package.
+
+Right now there are two steps to create a production release but once this works fine these scripts will be combined and more automation will be done.

dev-docs/docs/@excalidraw/excalidraw/faq.mdx

@@ -6,17 +6,23 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple
 
 ### Turning off Aggressive Anti-Fingerprinting in Brave browser
 
-When _Aggressive Anti-Fingerprinting_ is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
+When *Aggressive Anti-Fingerprinting* is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
 
 We strongly recommend turning it off. You can follow the steps below on how to do so.
 
-1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button ![Shield button](../../assets/brave-shield.png)
+
+1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button
+![Shield button](../../assets/brave-shield.png)
 
 <div style={{width:'30rem'}}>
 
-2. Once opened, look for **Aggressively Block Fingerprinting** ![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+2. Once opened, look for **Aggressively Block Fingerprinting**
 
-3. Switch to **Block Fingerprinting** ![Block filtering](../../assets/block-fingerprint.png)
+![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+
+3. Switch to **Block Fingerprinting**
+
+![Block filtering](../../assets/block-fingerprint.png)
 
 4. Thats all. All text elements should be fixed now 🎉
 
@@ -24,6 +30,7 @@ We strongly recommend turning it off. You can follow the steps below on how to d
 
 If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
 
+
 ### ReferenceError: process is not defined
 
 When using `vite` or any build tools, you will have to make sure the `process` is accessible as we are accessing `process.env.IS_PREACT` to decide whether to use `preact` build.

dev-docs/docs/@excalidraw/excalidraw/installation.mdx

@@ -1,12 +1,16 @@
 # Installation
 
-**Excalidraw** is exported as a component to be directly embedded in your project.
+**Excalidraw** is published to npm as a component you can directly embed in your projects.
 
-Use `npm` or `yarn` to install the package.
+Using `npm`:
 
 ```bash
 npm install react react-dom @excalidraw/excalidraw
-# or
+```
+
+or `yarn`:
+
+```bash
 yarn add react react-dom @excalidraw/excalidraw
 ```
 
@@ -16,11 +20,15 @@ yarn add react react-dom @excalidraw/excalidraw
 
 :::
 
-### Self-hosting fonts
+### Static assets
 
-By default, Excalidraw will try to download all the used fonts from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod).
+Excalidraw depends on assets such as localization files (if you opt to use them), fonts, and others.
 
-For self-hosting purposes, you'll have to copy the content of the folder `node_modules/@excalidraw/excalidraw/dist/prod/fonts` to the path where your assets should be served from (i.e. `public/` directory in your project). In that case, you should also set `window.EXCALIDRAW_ASSET_PATH` to the very same path, i.e. `/` in case it's in the root:
+By default these assets are loaded from a public CDN [`https://unpkg.com/@excalidraw/excalidraw/dist/prod/`](https://unpkg.com/@excalidraw/excalidraw/dist/prod/), so you don't need to do anything on your end.
+
+However, if you want to host these files yourself, you can find them in your `node_modules/@excalidraw/excalidraw/dist` directory, in folders `excalidraw-assets` (for production) and `excalidraw-assets-dev` (for development).
+
+Copy these folders to your static assets directory, and add a `window.EXCALIDRAW_ASSET_PATH` variable in your `index.html` or `index.js` entry file pointing to your public assets path (relative). For example, if you serve your assets from the root of your hostname, you would do:
 
 ```js
 window.EXCALIDRAW_ASSET_PATH = "/";
@@ -31,7 +39,9 @@ or, if you serve your assets from the root of your CDN, you would do:
 ```js
 // Vanilla
 <head>
-  <script>window.EXCALIDRAW_ASSET_PATH = "https://my.cdn.com/assets/";</script>
+    <script>
+        window.EXCALIDRAW_ASSET_PATH = "https://my.cdn.com/assets/";
+    </script>    
 </head>
 ```
 
@@ -39,8 +49,8 @@ or, if you prefer the path to be dynamicly set based on the `location.origin`, y
 
 ```jsx
 // Next.js
-<Script id="load-env-variables" strategy="beforeInteractive">
-  {`window["EXCALIDRAW_ASSET_PATH"] = location.origin;`} // or use just "/"!
+<Script id="load-env-variables" strategy="beforeInteractive" >
+    { `window["EXCALIDRAW_ASSET_PATH"] = location.origin;` } // or use just "/"!
 </Script>
 ```
 
@@ -48,6 +58,6 @@ or, if you prefer the path to be dynamicly set based on the `location.origin`, y
 
 Excalidraw takes _100%_ of `width` and `height` of the containing block so make sure the container in which you render Excalidraw has non zero dimensions.
 
-## Demo
+### Demo
 
-Go to [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example.
+[Try here](https://codesandbox.io/s/excalidraw-ehlz3).

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -12,7 +12,8 @@ import { Excalidraw } from "@excalidraw/excalidraw";
 
 Throughout the documentation we use live, editable Excalidraw examples like the one shown below.
 
-While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes. For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.
+While we aim for the examples to closely reflect what you'd get if you rendered it yourself, we actually initialize it with some props behind the scenes.  
+For example, we're passing a `theme` prop to it based on the current color theme of the docs you're just reading.
 
 :::
 
@@ -37,8 +38,6 @@ If you want to only import `Excalidraw` component you can do :point_down:
 
 ```jsx showLineNumbers
 import dynamic from "next/dynamic";
-import "@excalidraw/excalidraw/index.css";
-
 const Excalidraw = dynamic(
   async () => (await import("@excalidraw/excalidraw")).Excalidraw,
   {
@@ -57,78 +56,83 @@ If you are using `pages router` then importing the wrapper dynamically would wor
 <Tabs>
   <TabItem value="Excalidraw Wrapper" label="Excalidraw Wrapper" >
 
-```jsx showLineNumbers
-"use client";
-import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";
+  ```jsx showLineNumbers
+  "use client";
+  import { Excalidraw, convertToExcalidrawElements } from "@excalidraw/excalidraw";
 
-import "@excalidraw/excalidraw/index.css";
+  import "@excalidraw/excalidraw/index.css";
 
-const ExcalidrawWrapper: React.FC = () => {
-  console.info(convertToExcalidrawElements([{
-    type: "rectangle",
-    id: "rect-1",
-    width: 186.47265625,
-    height: 141.9765625,
-  },]));
-  return (
-    <div style={{height:"500px", width:"500px"}}>
-      <Excalidraw />
-    </div>
-  );
-};
-export default ExcalidrawWrapper;
-```
+  const ExcalidrawWrapper: React.FC = () => {
+    console.info(convertToExcalidrawElements([{
+      type: "rectangle",
+      id: "rect-1",
+      width: 186.47265625,
+      height: 141.9765625,
+    },]));
+    return (
+      <div style={{height:"500px", width:"500px"}}>  
+        <Excalidraw />
+      </div> 
+    );
+  };
+  export default ExcalidrawWrapper;
+  ```
 
   </TabItem>
 
   <TabItem value="pages" label="Pages router">
 
-```jsx showLineNumbers
-import dynamic from "next/dynamic";
+  ```jsx showLineNumbers
+  import dynamic from "next/dynamic";
+  
+  // Since client components get prerenderd on server as well hence importing 
+  // the excalidraw stuff dynamically with ssr false
 
-// Since client components get prerenderd on server as well hence importing
-// the excalidraw stuff dynamically with ssr false
-
-const ExcalidrawWrapper = dynamic(
-  async () => (await import("../excalidrawWrapper")).default,
-  {
-    ssr: false,
-  },
-);
-
-export default function Page() {
-  return <ExcalidrawWrapper />;
-}
-```
+  const ExcalidrawWrapper = dynamic(
+    async () => (await import("../excalidrawWrapper")).default,
+    {
+      ssr: false,
+    },
+  );
 
+  export default function Page() {
+    return (
+      <ExcalidrawWrapper />      
+    );
+  }
+  ```
   </TabItem>
 
   <TabItem value="app" label="App router">
 
-```jsx showLineNumbers
-import dynamic from "next/dynamic";
+  ```jsx showLineNumbers
+  import dynamic from "next/dynamic";
 
-// Since client components get prerenderd on server as well hence importing
-// the excalidraw stuff dynamically with ssr false
+  // Since client components get prerenderd on server as well hence importing 
+  // the excalidraw stuff dynamically with ssr false
 
-const ExcalidrawWrapper = dynamic(
-  async () => (await import("../excalidrawWrapper")).default,
-  {
-    ssr: false,
-  },
-);
+  const ExcalidrawWrapper = dynamic(
+    async () => (await import("../excalidrawWrapper")).default,
+    {
+      ssr: false,
+    },
+  );
 
-export default function Page() {
-  return <ExcalidrawWrapper />;
-}
-```
+  export default function Page() {
+    return (
+      <ExcalidrawWrapper />
+    );
+  }
+  ```
 
   </TabItem>
 </Tabs>
 
-{/* Link  should be updated to point to the latest! */} Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs.vercel.app/).
 
-The `types` are available at `@excalidraw/excalidraw/types`, check [CodeSandbox](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser) example for details.
+Here is a [source code](https://github.com/excalidraw/excalidraw/tree/master/examples/excalidraw/with-nextjs) for the example with app and pages router. You you can try it out [here](https://excalidraw-package-example-with-nextjs-gh6smrdnq-excalidraw.vercel.app/).
+
+
+The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
 
 ### Preact
 
@@ -149,14 +153,31 @@ Since Vite removes env variables by default, you can update the vite config to e
     "process.env.IS_PREACT": JSON.stringify("true"),
   },
 ```
-
-:::
+::: 
 
 ## Browser
 
-To use it Excalidraw in a browser directly, use the following setup :point_down:
+To use it in a browser directly:
 
-> **Note**: We rely on import maps to de-duplicate `react`, `react-dom` and `react/jsx-runtime` versions.
+For development use :point_down:
+
+```js
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
+></script>
+```
+
+For production use :point_down:
+
+```js
+<script
+  type="text/javascript"
+  src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.production.min.js"
+></script>
+```
+
+You will need to make sure `react`, `react-dom` is available as shown in the below example. For prod please use the production versions of `react`, `react-dom`.
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
@@ -170,24 +191,13 @@ import TabItem from "@theme/TabItem";
   <head>
     <title>Excalidraw in browser</title>
     <meta charset="UTF-8" />
-    <link
-      rel="stylesheet"
-      href="https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.css"
-    />
-    <link rel="stylesheet" href="./index.css" />
-    <script>
-      window.EXCALIDRAW_ASSET_PATH =
-        "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
-    </script>
-    <script type="importmap">
-      {
-        "imports": {
-          "react": "https://esm.sh/react@19.0.0",
-          "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
-          "react-dom": "https://esm.sh/react-dom@19.0.0"
-        }
-      }
-    </script>
+    <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>
   </head>
 
   <body>
@@ -204,14 +214,6 @@ import TabItem from "@theme/TabItem";
 <TabItem value="js" label="Javascript">
 
 ```js showLineNumbers
-// See https://www.npmjs.com/package/@excalidraw/excalidraw documentation.
-import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/dev/index.js?external=react,react-dom";
-import React from "https://esm.sh/react@19.0.0";
-import ReactDOM from "https://esm.sh/react-dom@19.0.0";
-
-window.ExcalidrawLib = ExcalidrawLib;
-console.log("Excalidraw library", ExcalidrawLib);
-
 const App = () => {
   return React.createElement(
     React.Fragment,
@@ -233,5 +235,3 @@ root.render(React.createElement(App));
 
 </TabItem>
 </Tabs>
-
-You can try it out [here](https://jsfiddle.net/vfn6dm14/3/).

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/api.mdx

@@ -14,7 +14,7 @@ This API receives the mermaid syntax as the input, and resolves to skeleton Exca
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
 try {
-  const { elements, files } = await parseMermaidToExcalidraw(mermaidSyntax: string, {
+  const { elements, files } = await parseMermaid(mermaidSyntax: string, {
     fontSize: number,
   });
   const excalidrawElements = convertToExcalidrawElements(elements);
@@ -41,24 +41,18 @@ flowchart TD
   C -->|One| D[Laptop]
   C -->|Two| E[iPhone]
   C -->|Three| F[Car]
-```
+ ```
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c8ea84fc-e9fb-4652-9a12-154136d1a798"  width="250" height="200"/>
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/c8ea84fc-e9fb-4652-9a12-154136d1a798"
-  width="250"
-  height="200"
-/>
 
 ```
 flowchart LR
   id1((Hello from Circle))
 ```
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/6202a8b9-8aa7-451e-9478-4d8d75c0f2fa"
-  width="250"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/6202a8b9-8aa7-451e-9478-4d8d75c0f2fa"  width="250" height="200"/>
+
 
 #### Subgraphs
 
@@ -78,11 +72,7 @@ flowchart TB
   end
 ```
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/098bce52-8f93-437c-9a06-c6972e27c70a"
-  width="350"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/098bce52-8f93-437c-9a06-c6972e27c70a"  width="350" height="200"/>
 
 #### Unsupported shapes fallback to Rectangle
 
@@ -97,14 +87,9 @@ flowchart LR
   id5[/Parallelogram fallback to Rectangle /]
   id6[/Trapezoid fallback to Rectangle\]
 ```
-
 The above shapes are not supported in Excalidraw hence they fallback to Rectangle
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/cb269473-16c5-4c35-bd7a-d631d8cc5b47"
-  width="350"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/cb269473-16c5-4c35-bd7a-d631d8cc5b47"  width="350" height="200"/>
 
 #### Markdown fallback to Regular text
 
@@ -114,12 +99,7 @@ Since we don't support wysiwyg text editor yet, hence [Markdown Strings](https:/
 flowchart LR
   A("`Hello **World**`") --> B("`Whats **up** ?`")
 ```
-
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/107bd428-9ab9-42d4-ba12-b1e29c8db478"
-  width="250"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/107bd428-9ab9-42d4-ba12-b1e29c8db478"  width="250" height="200"/>
 
 #### Basic FontAwesome fallback to text
 
@@ -132,11 +112,8 @@ flowchart TD
   B-->E(A fa:fa-camera-retro perhaps?)
 ```
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/7a693863-c3f9-42ff-b325-4b3f8303c7af"
-  width="250"
-  height="200"
-/>
+
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/7a693863-c3f9-42ff-b325-4b3f8303c7af"  width="250" height="200"/>
 
 #### Cross Arrow head fallback to Bar Arrow head
 
@@ -144,12 +121,8 @@ flowchart TD
 flowchart LR
   Start x--x Stop
 ```
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/217dd1ad-7f4e-4c80-8c1c-03647b42d821"  width="250" height="200"/>
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/217dd1ad-7f4e-4c80-8c1c-03647b42d821"
-  width="250"
-  height="200"
-/>
 
 ## Unsupported Diagram Types
 
@@ -162,11 +135,7 @@ erDiagram
   CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
 ```
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/c1d3fdb3-32ef-4bf3-a38a-02ac3d7d2cb9"
-  width="300"
-  height="200"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c1d3fdb3-32ef-4bf3-a38a-02ac3d7d2cb9"  width="300" height="200"/>
 
 ```
 gitGraph
@@ -183,8 +152,4 @@ gitGraph
 
 ```
 
-<img
-  src="https://github.com/excalidraw/excalidraw/assets/11256141/e5dcec0b-d570-4eb4-b981-412a996aa96c"
-  width="400"
-  height="300"
-/>
+<img src="https://github.com/excalidraw/excalidraw/assets/11256141/e5dcec0b-d570-4eb4-b981-412a996aa96c"  width="400" height="300"/>

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/codebase.mdx

@@ -2,6 +2,6 @@
 
 The Codebase is divided into 2 Sections
 
-- [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
+* [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
 
-- [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.
+* [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type.mdx

@@ -10,7 +10,7 @@ lets run the playground server in local :point_down:
 yarn start
 ```
 
-This will start the playground server in port `1234` and open it in browser so you start playing with the playground.
+This will start the playground server in port `1234` and open it in browser so  you start playing with the playground.
 
 ## Update Supported Diagram Types
 
@@ -26,13 +26,13 @@ For this create a file named `{{diagramType}}.ts` in [`src/parser`](https://gith
 
 The main aim of the parser is :point_down:
 
-1. Determine how elements are connected in the diagram and thus finding arrow and text bindings.
+1. Determine how elements are connected in the diagram and thus finding arrow and text bindings. 
 
 For this you might have to dig in to the parser `diagram.parser.yy` and which attributes to parse for the new diagram.
 
 2. Determine the position and dimensions of each element, for this would be using the `svg`
 
-Once the parser is ready, lets start using it.
+Once the parser is ready, lets start using it. 
 
 Add the diagram type in switch case in [`parseMermaid`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L97) and call the parser for the same.
 
@@ -51,3 +51,4 @@ Thats it, you have added the new diagram type 🥳, now lets test it out!
 2. Incase the new diagram type added is present in [`unsupported.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/unsupported.ts) then remove it from there.
 
 3. Verify if the test cases are running fine in playground.
+

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart.mdx

@@ -8,10 +8,12 @@ In this section we will be diving into how the [flowchart parser](https://github
 
 We use `diagram.parser.yy` attribute to parse the data. If you want to know more about how the `diagram.parse.yy` attribute looks like, you can check it [here](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), however for scope of flowchart we are using **3** APIs from this parser to compute `vertices`, `edges` and `clusters` as we need these data to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
 
+
 For computing `vertices` and `edge`s lets consider the below svg generated by mermaid
 
 ![image](https://github.com/excalidraw/excalidraw/assets/11256141/d7013305-0b90-4fa0-a66e-b4f4604ad0b2)
 
+
 ## Computing the vertices
 
 We use `getVertices` API from `diagram.parse.yy` to get the vertices for a given flowchart.
@@ -40,10 +42,9 @@ Considering the same example this is the response from the API
 	}
 }
 ```
-
 The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) which takes the above response and uses the `svg` together to compute position, dimensions and cleans up the response.
 
-The final output from `parseVertex` looks like :point_down:
+ The final output from `parseVertex` looks like :point_down:
 
 ```js
 {
@@ -72,55 +73,57 @@ The final output from `parseVertex` looks like :point_down:
 }
 ```
 
+
 ## Computing the edges
 
-The lines and arrows are considered as `edges` in mermaid as shown in the above diagram. We use `getEdges` API from `diagram.parse.yy` to get the edges for a given flowchart. Considering the same example this is the response from the API
+The lines and arrows are considered as `edges` in mermaid as shown in the above diagram.
+We use `getEdges` API from `diagram.parse.yy` to get the edges for a given flowchart.
+Considering the same example this is the response from the API
 
 ```js
 [
-  {
-    start: "start",
-    end: "stop",
-    type: "arrow_point",
-    text: "",
-    labelType: "text",
-    stroke: "normal",
-    length: 1,
-  },
-];
+	{
+		"start": "start",
+		"end": "stop",
+		"type": "arrow_point",
+		"text": "",
+		"labelType": "text",
+		"stroke": "normal",
+		"length": 1
+	}
+]
 ```
 
 Similarly here the dimensions and position is missing and we compute that from the svg. The [`parseEdge`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L245) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
 
-The final output from `parseEdge` looks like :point_down:
+ The final output from `parseEdge` looks like :point_down:
 
 ```js
 [
-  {
-    start: "start",
-    end: "stop",
-    type: "arrow_point",
-    text: "",
-    labelType: "text",
-    stroke: "normal",
-    startX: 67.797,
-    startY: 22,
-    endX: 117.797,
-    endY: 22,
-    reflectionPoints: [
-      {
-        x: 67.797,
-        y: 22,
-      },
-      {
-        x: 117.797,
-        y: 22,
-      },
-    ],
-  },
-];
+	{
+		"start": "start",
+		"end": "stop",
+		"type": "arrow_point",
+		"text": "",
+		"labelType": "text",
+		"stroke": "normal",
+		"startX": 67.797,
+		"startY": 22,
+		"endX": 117.797,
+		"endY": 22,
+		"reflectionPoints": [
+			{
+				"x": 67.797,
+				"y": 22
+			},
+			{
+				"x": 117.797,
+				"y": 22
+			}
+		]
+	}
+]
 ```
-
 ## Computing the Subgraphs
 
 `Subgraphs` is collection of elements grouped together. The Subgraphs map to `grouping` elements in Excalidraw.
@@ -129,35 +132,46 @@ Lets consider the below example :point_down:
 
 ![image](https://github.com/excalidraw/excalidraw/assets/11256141/5243ce4c-beaa-43d2-812a-0577b0a574d7)
 
-We use `getSubgraphs` API to get the subgraph data for a given flowchart. Considering the same example this is the response from the API
+We use `getSubgraphs` API to get the subgraph data for a given flowchart.
+Considering the same example this is the response from the API
 
 ```js
 [
-  {
-    id: "one",
-    nodes: ["flowchart-a2-1399", "flowchart-a1-1400"],
-    title: "one",
-    classes: [],
-    labelType: "text",
-  },
-];
+	{
+		"id": "one",
+		"nodes": [
+				"flowchart-a2-1399",
+				"flowchart-a1-1400"
+		],
+		"title": "one",
+		"classes": [],
+		"labelType": "text"
+	}
+]
 ```
 
 For position and dimensions we use the svg to compute. The [`parseSubgraph`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L139) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
 
+
 ```js
 [
-  {
-    id: "one",
-    nodes: ["flowchart-a2-1399", "flowchart-a1-1400"],
-    title: "one",
-    labelType: "text",
-    nodeIds: ["a2", "a1"],
-    x: 75.4921875,
-    y: 0,
-    width: 121.25,
-    height: 188,
-    text: "one",
-  },
-];
-```
+	{
+		"id": "one",
+		"nodes": [
+				"flowchart-a2-1399",
+				"flowchart-a1-1400"
+		],
+		"title": "one",
+		"labelType": "text",
+		"nodeIds": [
+				"a2",
+				"a1"
+		],
+		"x": 75.4921875,
+		"y": 0,
+		"width": 121.25,
+		"height": 188,
+		"text": "one"
+	}
+]
+```

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/parser.mdx

@@ -2,6 +2,7 @@
 
 [This](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/index.ts) is the entry point of the library.
 
+
 `parseMermaidToExcalidraw` function is the only function exposed which receives mermaid syntax as the input, parses the mermaid syntax and resolves to Excalidraw Skeleton.
 
 Lets look at the high level overview at how the parse works :point_down:
@@ -12,10 +13,10 @@ Lets dive deeper into individual section now to understand better.
 
 ## Parsing Mermaid diagram
 
-One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library. We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
+One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library.
+We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
 
 Parsing is broken into two steps
-
 1. [`Rendering Mermaid to Svg`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#rendering-mermaid-to-svg) - This helps in determining the position and dimensions of each element in the diagram
 
 2. [`Parsing the mermaid syntax`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#parsing-the-mermaid-syntax) - We also need to know how elements are connected which isn't possible with svg alone hence we also parse the mermaid syntax which helps in determining the connections and bindings between elements in the diagram.
@@ -26,8 +27,10 @@ Parsing is broken into two steps
 
 The [`mermaid`](https://www.npmjs.com/package/mermaid) library provides the API `mermaid.render` API which gives the output of the diagram in `svg`.
 
+
 If the diagram isn't supported, this svg is converted to `dataURL` and can be rendered as an image in Excalidraw.
 
+
 ### Parsing the mermaid syntax
 
 For this we first need to process the options along with mermaid defination for diagram provided by the user.
@@ -54,8 +57,9 @@ If you want to understand how flowchart parser works, you can navigate to [Flowc
 
 Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.
 
-For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton. For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
+For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton.
+For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
 
 For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
 
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)
+![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/development.mdx

@@ -10,6 +10,7 @@ To set up the library in local, follow the below steps 👇🏼
 
 Go to [@excalidraw/mermaid-to-excalidraw](https://github.com/excalidraw/mermaid-to-excalidraw) and clone the repository to your local.
 
+
 ```bash
 git clone git@github.com:excalidraw/mermaid-to-excalidraw.git
 ```

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/installation.mdx

@@ -20,7 +20,7 @@ Once the library is installed, its ready to use.
 
 ```js
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
-import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
+import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
 
 try {
   const { elements, files } = await parseMermaid(diagramDefinition, {
@@ -38,4 +38,5 @@ try {
 
 ## Playground
 
-Try it out [here](https://mermaid-to-excalidraw.vercel.app)
+ Try it out [here](https://mermaid-to-excalidraw.vercel.app)
+

dev-docs/docs/codebase/json-schema.mdx

@@ -43,7 +43,7 @@ When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`)
 
   // editor state (canvas config, preferences, ...)
   "appState": {
-    "gridSize": 20,
+    "gridSize": null,
     "viewBackgroundColor": "#ffffff"
   },
 

dev-docs/docs/introduction/contributing.mdx

@@ -2,7 +2,8 @@
 
 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.
 
-We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you. For new contributors we would recommend to start with _Easy_ tasks.
+We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
+For new contributors we would recommend to start with *Easy* tasks.
 
 In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.
 
@@ -59,7 +60,10 @@ It's also a good idea to consider if your change should include additional tests
 
 Finally - always manually test your changes using the convenient staging environment deployed for each pull request. As much as local development attempts to replicate production, there can still be subtle differences in behavior. For larger features consider testing your change in multiple browsers as well.
 
-:::note Some checks, such as the `lint` and `test`, require approval from the maintainers to run. They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval. :::
+:::note
+Some checks, such as the `lint` and `test`, require approval from the maintainers to run. 
+They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval.
+:::
 
 ## Translating
 

dev-docs/docs/introduction/development.mdx

@@ -54,7 +54,7 @@ yarn
 yarn start
 ```
 
-### Lint & format
+### Reformat all files with Prettier
 
 ```bash
 yarn fix
@@ -72,6 +72,12 @@ yarn test
 yarn test:update
 ```
 
+### Test for formatting with Prettier
+
+```bash
+yarn test:code
+```
+
 ### Docker Compose
 
 You can use docker-compose to work on Excalidraw locally if you don't want to setup a Node.js env.

dev-docs/docusaurus.config.js

@@ -66,7 +66,7 @@ const config = {
             label: "Docs",
           },
           {
-            to: "https://plus.excalidraw.com/blog",
+            to: "https://blog.excalidraw.com",
             label: "Blog",
             position: "left",
           },
@@ -111,7 +111,7 @@ const config = {
             items: [
               {
                 label: "Blog",
-                to: "https://plus.excalidraw.com/blog",
+                to: "https://blog.excalidraw.com",
               },
               {
                 label: "GitHub",
@@ -149,29 +149,6 @@ const config = {
         systemvars: true,
       },
     ],
-    function () {
-      return {
-        name: "disable-fully-specified-error",
-        configureWebpack() {
-          return {
-            module: {
-              rules: [
-                {
-                  test: /\.m?js$/,
-                  resolve: {
-                    fullySpecified: false,
-                  },
-                },
-              ],
-            },
-            optimization: {
-              // disable terser minification
-              minimize: false,
-            },
-          };
-        },
-      };
-    },
   ],
 };
 

dev-docs/package.json

@@ -18,13 +18,13 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.18.0",
+    "@excalidraw/excalidraw": "0.17.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",
     "prism-react-renderer": "^1.3.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sass": "1.57.1"
   },
   "devDependencies": {

dev-docs/src/components/Homepage/index.js

@@ -1,6 +1,5 @@
-import clsx from "clsx";
 import React from "react";
-
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 const FeatureList = [
@@ -16,8 +15,8 @@ const FeatureList = [
     Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
     description: (
       <>
-        Want to build your own app powered by Excalidraw but don&apos;t know
-        where to start?
+        Want to build your own app powered by Excalidraw but don't know where to
+        start?
       </>
     ),
   },

dev-docs/src/components/Homepage/index.tsx

@@ -1,6 +1,5 @@
-import clsx from "clsx";
 import React from "react";
-
+import clsx from "clsx";
 import styles from "./styles.module.css";
 
 type FeatureItem = {

dev-docs/src/css/custom.scss

@@ -59,7 +59,7 @@ pre a {
   padding: 5px;
   background: #70b1ec;
   color: white;
-  font-weight: 700;
+  font-weight: bold;
   border: none;
 }
 

dev-docs/src/pages/index.tsx

@@ -1,11 +1,10 @@
+import React from "react";
+import clsx from "clsx";
+import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import HomepageFeatures from "@site/src/components/Homepage";
-import Layout from "@theme/Layout";
-import clsx from "clsx";
-import React from "react";
-
 import styles from "./index.module.css";
+import HomepageFeatures from "@site/src/components/Homepage";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();

dev-docs/src/theme/MDXComponents.js

@@ -1,6 +1,6 @@
 // Import the original mapper
-import Highlight from "@site/src/components/Highlight";
 import MDXComponents from "@theme-original/MDXComponents";
+import Highlight from "@site/src/components/Highlight";
 
 export default {
   // Re-use the default mapping

dev-docs/src/theme/ReactLiveScope/index.js

@@ -3,18 +3,11 @@ import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
 import initialData from "@site/src/initialData";
 import { useColorMode } from "@docusaurus/theme-common";
 
-import "@excalidraw/excalidraw/index.css";
-
 let ExcalidrawComp = {};
 if (ExecutionEnvironment.canUseDOM) {
   ExcalidrawComp = require("@excalidraw/excalidraw");
 }
 const Excalidraw = React.forwardRef((props, ref) => {
-  if (!window.EXCALIDRAW_ASSET_PATH) {
-    window.EXCALIDRAW_ASSET_PATH =
-      "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
-  }
-
   const { colorMode } = useColorMode();
   return <ExcalidrawComp.Excalidraw theme={colorMode} {...props} ref={ref} />;
 });
@@ -33,7 +26,6 @@ const ExcalidrawScope = {
   initialData,
   useI18n: ExcalidrawComp.useI18n,
   convertToExcalidrawElements: ExcalidrawComp.convertToExcalidrawElements,
-  CaptureUpdateAction: ExcalidrawComp.CaptureUpdateAction,
 };
 
 export default ExcalidrawScope;

dev-docs/tsconfig.json

@@ -1,5 +1,7 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
   "extends": "@tsconfig/docusaurus/tsconfig.json",
-  "compilerOptions": {}
+  "compilerOptions": {
+    "baseUrl": "."
+  }
 }

docker-compose.yml

@@ -1,3 +1,5 @@
+version: "3.8"
+
 services:
   excalidraw:
     build:

examples/excalidraw/components/App.scss

@@ -52,7 +52,7 @@
   transform: none;
 }
 
-.excalidraw .selected-shape-actions {
+.excalidraw .panelColumn {
   text-align: left;
 }
 

examples/excalidraw/components/App.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from "nanoid";
 import React, {
   useEffect,
   useState,
@@ -7,26 +6,15 @@ import React, {
   Children,
   cloneElement,
 } from "react";
+import ExampleSidebar from "./sidebar/ExampleSidebar";
 
 import type * as TExcalidraw from "@excalidraw/excalidraw";
-import type { ImportedLibraryData } from "@excalidraw/excalidraw/data/types";
-import type {
-  NonDeletedExcalidrawElement,
-  Theme,
-} from "@excalidraw/excalidraw/element/types";
-import type {
-  AppState,
-  BinaryFileData,
-  ExcalidrawImperativeAPI,
-  ExcalidrawInitialDataState,
-  Gesture,
-  LibraryItems,
-  PointerDownState as ExcalidrawPointerDownState,
-} from "@excalidraw/excalidraw/types";
 
-import initialData from "../initialData";
+import { nanoid } from "nanoid";
+
 import {
   resolvablePromise,
+  ResolvablePromise,
   distance2d,
   fileOpen,
   withBatchedUpdates,
@@ -35,11 +23,24 @@ import {
 
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
-import ExampleSidebar from "./sidebar/ExampleSidebar";
+import initialData from "../initialData";
 
-import "./ExampleApp.scss";
+import type {
+  AppState,
+  BinaryFileData,
+  ExcalidrawImperativeAPI,
+  ExcalidrawInitialDataState,
+  Gesture,
+  LibraryItems,
+  PointerDownState as ExcalidrawPointerDownState,
+} from "@excalidraw/excalidraw/dist/excalidraw/types";
+import type {
+  NonDeletedExcalidrawElement,
+  Theme,
+} from "@excalidraw/excalidraw/dist/excalidraw/element/types";
+import type { ImportedLibraryData } from "@excalidraw/excalidraw/dist/excalidraw/data/types";
 
-import type { ResolvablePromise } from "../utils";
+import "./App.scss";
 
 type Comment = {
   x: number;
@@ -72,7 +73,7 @@ export interface AppProps {
   excalidrawLib: typeof TExcalidraw;
 }
 
-export default function ExampleApp({
+export default function App({
   appTitle,
   useCustom,
   customArgs,
@@ -104,7 +105,6 @@ export default function ExampleApp({
   const [viewModeEnabled, setViewModeEnabled] = useState(false);
   const [zenModeEnabled, setZenModeEnabled] = useState(false);
   const [gridModeEnabled, setGridModeEnabled] = useState(false);
-  const [renderScrollbars, setRenderScrollbars] = useState(false);
   const [blobUrl, setBlobUrl] = useState<string>("");
   const [canvasUrl, setCanvasUrl] = useState<string>("");
   const [exportWithDarkMode, setExportWithDarkMode] = useState(false);
@@ -193,7 +193,6 @@ export default function ExampleApp({
         }) => setPointerData(payload),
         viewModeEnabled,
         zenModeEnabled,
-        renderScrollbars,
         gridModeEnabled,
         theme,
         name: "Custom name of drawing",
@@ -238,7 +237,7 @@ export default function ExampleApp({
             left: "50%",
             transform: "translateX(-50%)",
             bottom: "20px",
-            zIndex: 999999999999999,
+            zIndex: 9999999999999999,
           }}
         >
           Toggle Custom Sidebar
@@ -250,7 +249,7 @@ export default function ExampleApp({
           </TTDDialogTrigger>
         )}
         <TTDDialog
-          onTextSubmit={async () => {
+          onTextSubmit={async (_) => {
             console.info("submit");
             // sleep for 2s
             await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -555,7 +554,7 @@ export default function ExampleApp({
     if (!comment) {
       return null;
     }
-    const appState = excalidrawAPI?.getAppState();
+    const appState = excalidrawAPI?.getAppState()!;
     const { x, y } = sceneCoordsToViewportCoords(
       { sceneX: comment.x, sceneY: comment.y },
       appState,
@@ -712,14 +711,6 @@ export default function ExampleApp({
             />
             Grid mode
           </label>
-          <label>
-            <input
-              type="checkbox"
-              checked={renderScrollbars}
-              onChange={() => setRenderScrollbars(!renderScrollbars)}
-            />
-            Render scrollbars
-          </label>
           <label>
             <input
               type="checkbox"
@@ -881,7 +872,7 @@ export default function ExampleApp({
                 files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Excalifont";
+              ctx.font = "30px Virgil";
               ctx.strokeText("My custom text", 50, 60);
               setCanvasUrl(canvas.toDataURL());
             }}
@@ -902,7 +893,7 @@ export default function ExampleApp({
                 files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Excalifont";
+              ctx.font = "30px Virgil";
               ctx.strokeText("My custom text", 50, 60);
               setCanvasUrl(canvas.toDataURL());
             }}

examples/excalidraw/components/CustomFooter.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
 import type * as TExcalidraw from "@excalidraw/excalidraw";
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
 
 const COMMENT_SVG = (
   <svg

examples/excalidraw/components/MobileFooter.tsx

@@ -1,9 +1,6 @@
-import React from "react";
-
-import type * as TExcalidraw from "@excalidraw/excalidraw";
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-
+import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/dist/excalidraw/types";
 import CustomFooter from "./CustomFooter";
+import type * as TExcalidraw from "@excalidraw/excalidraw";
 
 const MobileFooter = ({
   excalidrawAPI,
@@ -12,10 +9,10 @@ const MobileFooter = ({
   excalidrawAPI: ExcalidrawImperativeAPI;
   excalidrawLib: typeof TExcalidraw;
 }) => {
-  const { useEditorInterface, Footer } = excalidrawLib;
+  const { useDevice, Footer } = excalidrawLib;
 
-  const editorInterface = useEditorInterface();
-  if (editorInterface.formFactor === "phone") {
+  const device = useDevice();
+  if (device.editor.isMobile) {
     return (
       <Footer>
         <CustomFooter

examples/excalidraw/components/sidebar/ExampleSidebar.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-
+import { useState } from "react";
 import "./ExampleSidebar.scss";
 
 export default function Sidebar({ children }: { children: React.ReactNode }) {

examples/excalidraw/initialData.tsx

@@ -46,7 +46,7 @@ const elements: ExcalidrawElementSkeleton[] = [
 ];
 export default {
   elements,
-  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 5 },
+  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
   scrollToContent: true,
   libraryItems: [
     [

examples/excalidraw/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "examples",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@excalidraw/excalidraw": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5"
+  }
+}

examples/excalidraw/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig"
+}

examples/excalidraw/utils.ts

@@ -1,6 +1,7 @@
-import { MIME_TYPES } from "@excalidraw/excalidraw";
-import { fileOpen as _fileOpen } from "browser-fs-access";
 import { unstable_batchedUpdates } from "react-dom";
+import { fileOpen as _fileOpen } from "browser-fs-access";
+import type { MIME_TYPES } from "@excalidraw/excalidraw";
+import { AbortError } from "../../packages/excalidraw/errors";
 
 type FILE_EXTENSION = Exclude<keyof typeof MIME_TYPES, "binary">;
 
@@ -84,7 +85,7 @@ export const fileOpen = <M extends boolean | undefined = false>(opts: {
         if (rejectPromise) {
           // so that something is shown in console if we need to debug this
           console.warn("Opening the file was canceled (legacy-fs).");
-          rejectPromise(new Error("Request Aborted"));
+          rejectPromise(new AbortError());
         }
       };
     },

examples/excalidraw/with-nextjs/.gitignore

@@ -34,6 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# copied assets
-public/**/*.woff2

examples/excalidraw/with-nextjs/package.json

@@ -3,23 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build:packages": "yarn --cwd ../../ build:packages",
-    "build:workspace": "yarn build:packages && yarn copy:assets",
-    "copy:assets": "cp -r ../../packages/excalidraw/dist/prod/fonts ./public",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm",
     "dev": "yarn build:workspace && next dev -p 3005",
     "build": "yarn build:workspace && next build",
     "start": "next start -p 3006",
     "lint": "next lint"
   },
   "dependencies": {
+    "@excalidraw/excalidraw": "*",
     "next": "14.1",
-    "react": "19.0.0",
-    "react-dom": "19.0.0"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "path2d-polyfill": "2.0.1",
     "typescript": "^5"
   }

examples/excalidraw/with-nextjs/src/app/page.tsx

@@ -1,6 +1,4 @@
 import dynamic from "next/dynamic";
-import Script from "next/script";
-
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
@@ -17,9 +15,7 @@ export default function Page() {
     <>
       <a href="/excalidraw-in-pages">Switch to Pages router</a>
       <h1 className="page-title">App Router</h1>
-      <Script id="load-env-variables" strategy="beforeInteractive">
-        {`window["EXCALIDRAW_ASSET_PATH"] = window.origin;`}
-      </Script>
+
       {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */}
       <ExcalidrawWithClientOnly />
     </>

examples/excalidraw/with-nextjs/src/common.scss

@@ -7,7 +7,7 @@ a {
   color: #1c7ed6;
   font-size: 20px;
   text-decoration: none;
-  font-weight: 500;
+  font-weight: 550;
 }
 
 .page-title {

examples/excalidraw/with-nextjs/src/excalidrawWrapper.tsx

@@ -1,17 +1,16 @@
 "use client";
 import * as excalidrawLib from "@excalidraw/excalidraw";
 import { Excalidraw } from "@excalidraw/excalidraw";
+import App from "../../components/App";
 
 import "@excalidraw/excalidraw/index.css";
 
-import App from "../../with-script-in-browser/components/ExampleApp";
-
 const ExcalidrawWrapper: React.FC = () => {
   return (
     <>
       <App
         appTitle={"Excalidraw with Nextjs Example"}
-        useCustom={() => {}}
+        useCustom={(api: any, args?: any[]) => {}}
         excalidrawLib={excalidrawLib}
       >
         <Excalidraw />

examples/excalidraw/with-nextjs/src/pages/excalidraw-in-pages.tsx

@@ -1,5 +1,4 @@
 import dynamic from "next/dynamic";
-
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically

examples/excalidraw/with-nextjs/tsconfig.json

@@ -23,12 +23,6 @@
     },
     "forceConsistentCasingInFileNames": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "build/types/**/*.ts"
-  ],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "build/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

examples/excalidraw/with-nextjs/vercel.json

@@ -0,0 +1,3 @@
+{
+  "outputDirectory": "build"
+}

examples/excalidraw/with-script-in-browser/index.html

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -11,15 +11,16 @@
     <title>React App</title>
     <script>
       window.name = "codesandbox";
-      window.EXCALIDRAW_ASSET_PATH =
-        "https://esm.sh/@excalidraw/excalidraw@0.18.0/dist/prod/";
     </script>
+    <link rel="stylesheet" href="/dist/browser/dev/index.css" />
   </head>
 
   <body>
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
 
+    <!-- This is so that we use the bundled excalidraw.development.js file instead
+    of the actual source code -->
     <script type="module">
       import * as ExcalidrawLib from "@excalidraw/excalidraw";
 

examples/excalidraw/with-script-in-browser/index.tsx

@@ -1,11 +1,10 @@
+import App from "../components/App";
 import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import "@excalidraw/excalidraw/index.css";
-
 import type * as TExcalidraw from "@excalidraw/excalidraw";
 
-import App from "./components/ExampleApp";
+import "@excalidraw/excalidraw/index.css";
 
 declare global {
   interface Window {
@@ -20,7 +19,7 @@ root.render(
   <StrictMode>
     <App
       appTitle={"Excalidraw Example"}
-      useCustom={() => {}}
+      useCustom={(api: any, args?: any[]) => {}}
       excalidrawLib={window.ExcalidrawLib}
     >
       <Excalidraw />

examples/excalidraw/with-script-in-browser/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "with-script-in-browser",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@excalidraw/excalidraw": "*"
+  },
+  "devDependencies": {
+    "vite": "5.0.12",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "start": "yarn workspace @excalidraw/excalidraw run build:esm && vite",
+    "build": "yarn workspace @excalidraw/excalidraw run build:esm && vite build",
+    "build:preview": "yarn build && vite preview --port 5002"
+  }
+}

examples/excalidraw/with-script-in-browser/vercel.json

@@ -0,0 +1,4 @@
+{
+  "outputDirectory": "dist",
+  "installCommand": "yarn install"
+}