{"_id":"@aichy/excalidraw","_rev":"2-a4b49eef4768bfab4890291ad0f368d3","name":"@aichy/excalidraw","dist-tags":{"latest":"0.18.1"},"versions":{"0.18.0":{"name":"@aichy/excalidraw","version":"0.18.0","keywords":["excalidraw","excalidraw-embed","react","npm","npm excalidraw"],"license":"MIT","_id":"@aichy/excalidraw@0.18.0","maintainers":[{"name":"aichy","email":"aichy66@gmail.com"}],"homepage":"https://github.com/aichy/excalidraw/tree/ainote/packages/excalidraw","bugs":{"url":"https://github.com/aichy/excalidraw/issues"},"dist":{"shasum":"7441e1a174d86c37dede0c291e13f678baec7bef","tarball":"https://registry.npmjs.org/@aichy/excalidraw/-/excalidraw-0.18.0.tgz","fileCount":1101,"integrity":"sha512-Tup9OMQjYhco6cwXkCLjb5j2/aibEhq1PuYEiV9Ff47JKYwGKQ9avAsrP+5ZgPbZa0uWmtm1lbCvAmkm2X9VLw==","signatures":[{"sig":"MEUCIQDdT4LtnxQDjcZ66NIXZKVM8MPPGgioECMH7Fqvjy2ijwIgKQbkzu6bW9Hx4qyou3Vi0EDYl+JI8ikrYhfZKTU9I54=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":50012954},"main":"./dist/prod/index.js","type":"module","types":"./dist/types/excalidraw/index.d.ts","module":"./dist/prod/index.js","exports":{".":{"types":"./dist/types/excalidraw/index.d.ts","default":"./dist/prod/index.js","production":"./dist/prod/index.js","development":"./dist/dev/index.js"},"./*":{"types":"./dist/types/excalidraw/*.d.ts"},"./math/*":{"types":"./dist/types/math/src/*.d.ts"},"./utils/*":{"types":"./dist/types/utils/src/*.d.ts"},"./common/*":{"types":"./dist/types/common/src/*.d.ts"},"./element/*":{"types":"./dist/types/element/src/*.d.ts"},"./index.css":{"production":"./dist/prod/index.css","development":"./dist/dev/index.css"}},"gitHead":"0642e72cfa2d9a71198200e52f37399384610ee3","scripts":{"build:esm":"rimraf dist && node ../../scripts/buildPackage.js && yarn gen:types","gen:types":"rimraf types && tsc"},"_npmUser":{"name":"aichy","email":"aichy66@gmail.com"},"repository":{"url":"git+https://github.com/aichy/excalidraw.git","type":"git"},"_npmVersion":"11.12.1","description":"Excalidraw as a React component","directories":{},"_nodeVersion":"24.15.0","browserslist":{"production":[">0.2%","not dead","not ie <= 11","not op_mini all","not safari < 12","not kaios <= 2.5","not edge < 79","not chrome < 70","not and_uc < 13","not samsung < 10"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"clsx":"1.1.1","pako":"2.0.3","pica":"7.1.1","sass":"1.51.0","fuzzy":"0.1.3","jotai":"2.11.0","nanoid":"3.3.3","roughjs":"4.6.4","radix-ui":"1.4.3","cross-env":"7.0.3","pwacompat":"2.0.17","tunnel-rat":"0.1.2","jotai-scope":"0.7.2","png-chunk-text":"1.0.0","lodash.debounce":"4.0.8","lodash.throttle":"4.1.1","points-on-curve":"1.0.1","@codemirror/view":"^6.0.0","@lezer/highlight":"^1.0.0","es6-promise-pool":"2.5.0","perfect-freehand":"1.2.0","@codemirror/state":"^6.0.0","browser-fs-access":"0.38.0","image-blob-reduce":"3.0.1","png-chunks-encode":"1.0.0","png-chunks-extract":"1.0.0","@codemirror/commands":"^6.0.0","@codemirror/language":"^6.0.0","@braintree/sanitize-url":"6.0.2","@excalidraw/laser-pointer":"1.3.1","canvas-roundrect-polyfill":"0.0.1","@excalidraw/random-username":"1.1.0","@excalidraw/mermaid-to-excalidraw":"2.2.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"dotenv":"16.0.1","esbuild":"0.19.10","ansicolor":"2.0.3","cross-env":"7.0.3","jest-diff":"29.7.0","harfbuzzjs":"0.3.6","typescript":"5.9.3","@types/pako":"2.0.3","@types/pica":"5.1.3","autoprefixer":"10.4.7","fake-indexeddb":"3.1.7","fonteditor-core":"2.4.1","esbuild-sass-plugin":"2.16.0","eslint-plugin-react":"7.32.2","@testing-library/dom":"10.4.0","@testing-library/react":"16.2.0","@types/lodash.debounce":"4.0.8","@testing-library/jest-dom":"6.6.3","@size-limit/preset-big-lib":"9.0.0","@types/resize-observer-browser":"0.1.7"},"peerDependencies":{"react":"^17.0.2 || ^18.2.0 || ^19.0.0","react-dom":"^17.0.2 || ^18.2.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/excalidraw_0.18.0_1782194430141_0.2618629827525327","host":"s3://npm-registry-packages-npm-production"}},"0.18.1":{"name":"@aichy/excalidraw","version":"0.18.1","type":"module","types":"./dist/types/excalidraw/index.d.ts","main":"./dist/prod/index.js","module":"./dist/prod/index.js","exports":{"./common/*":{"types":"./dist/types/common/src/*.d.ts"},"./element/*":{"types":"./dist/types/element/src/*.d.ts"},"./math/*":{"types":"./dist/types/math/src/*.d.ts"},"./utils/*":{"types":"./dist/types/utils/src/*.d.ts"},"./*":{"types":"./dist/types/excalidraw/*.d.ts"},"./index.css":{"development":"./dist/dev/index.css","production":"./dist/prod/index.css"},".":{"types":"./dist/types/excalidraw/index.d.ts","development":"./dist/dev/index.js","production":"./dist/prod/index.js","default":"./dist/prod/index.js"}},"publishConfig":{"access":"public"},"description":"Excalidraw as a React component","license":"MIT","keywords":["excalidraw","excalidraw-embed","react","npm","npm excalidraw"],"browserslist":{"production":[">0.2%","not dead","not ie <= 11","not op_mini all","not safari < 12","not kaios <= 2.5","not edge < 79","not chrome < 70","not and_uc < 13","not samsung < 10"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"repository":{"type":"git","url":"git+https://github.com/aichy/excalidraw.git"},"bugs":{"url":"https://github.com/aichy/excalidraw/issues"},"homepage":"https://github.com/aichy/excalidraw/tree/ainote/packages/excalidraw","scripts":{"gen:types":"rimraf types && tsc","build:esm":"rimraf dist && node ../../scripts/buildPackage.js && yarn gen:types"},"peerDependencies":{"react":"^17.0.2 || ^18.2.0 || ^19.0.0","react-dom":"^17.0.2 || ^18.2.0 || ^19.0.0"},"dependencies":{"@braintree/sanitize-url":"6.0.2","@codemirror/commands":"^6.0.0","@codemirror/language":"^6.0.0","@codemirror/state":"^6.0.0","@codemirror/view":"^6.0.0","@lezer/highlight":"^1.0.0","@excalidraw/laser-pointer":"1.3.1","@excalidraw/mermaid-to-excalidraw":"2.2.2","@excalidraw/random-username":"1.1.0","browser-fs-access":"0.38.0","canvas-roundrect-polyfill":"0.0.1","clsx":"1.1.1","cross-env":"7.0.3","es6-promise-pool":"2.5.0","fuzzy":"0.1.3","image-blob-reduce":"3.0.1","jotai":"2.11.0","jotai-scope":"0.7.2","lodash.debounce":"4.0.8","lodash.throttle":"4.1.1","nanoid":"3.3.3","pako":"2.0.3","perfect-freehand":"1.2.0","pica":"7.1.1","png-chunk-text":"1.0.0","png-chunks-encode":"1.0.0","png-chunks-extract":"1.0.0","points-on-curve":"1.0.1","pwacompat":"2.0.17","radix-ui":"1.4.3","roughjs":"4.6.4","sass":"1.51.0","tinycolor2":"1.6.0","tunnel-rat":"0.1.2"},"devDependencies":{"@size-limit/preset-big-lib":"9.0.0","@testing-library/dom":"10.4.0","@testing-library/jest-dom":"6.6.3","@testing-library/react":"16.2.0","@types/lodash.debounce":"4.0.8","@types/pako":"2.0.3","@types/pica":"5.1.3","@types/resize-observer-browser":"0.1.7","ansicolor":"2.0.3","autoprefixer":"10.4.7","cross-env":"7.0.3","dotenv":"16.0.1","esbuild":"0.19.10","esbuild-sass-plugin":"2.16.0","eslint-plugin-react":"7.32.2","fake-indexeddb":"3.1.7","fonteditor-core":"2.4.1","harfbuzzjs":"0.3.6","jest-diff":"29.7.0","typescript":"5.9.3"},"gitHead":"0642e72cfa2d9a71198200e52f37399384610ee3","_id":"@aichy/excalidraw@0.18.1","_nodeVersion":"24.15.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-+i/S+kGSizvadoquCpWADwpzhoffyMqrk7zWB0pXqv/2tADdO7U8EQfUZR+cEiUgXkQTjskUjBSTbJ6fa5OKbA==","shasum":"d7ef8e92414dff57996ce59ea1afddef718a05a1","tarball":"https://registry.npmjs.org/@aichy/excalidraw/-/excalidraw-0.18.1.tgz","fileCount":1101,"unpackedSize":50012981,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCbkYvLoPDuVCxIxhrPPnOWm/ZddZx5pbFi746/uoSB9QIgCvNwWTTTAoFsJI4bahnjZ28RLpV/By45/wDR1a8/wys="}]},"_npmUser":{"name":"aichy","email":"aichy66@gmail.com"},"directories":{},"maintainers":[{"name":"aichy","email":"aichy66@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/excalidraw_0.18.1_1782195165527_0.10009876640924165"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-23T06:00:29.979Z","modified":"2026-06-23T06:12:46.225Z","0.18.0":"2026-06-23T06:00:30.797Z","0.18.1":"2026-06-23T06:12:46.118Z"},"bugs":{"url":"https://github.com/aichy/excalidraw/issues"},"license":"MIT","homepage":"https://github.com/aichy/excalidraw/tree/ainote/packages/excalidraw","keywords":["excalidraw","excalidraw-embed","react","npm","npm excalidraw"],"repository":{"type":"git","url":"git+https://github.com/aichy/excalidraw.git"},"description":"Excalidraw as a React component","maintainers":[{"name":"aichy","email":"aichy66@gmail.com"}],"readme":"# Excalidraw\n\n**Excalidraw** is exported as a React component that you can embed directly in your app.\n\n## Installation\n\nInstall the package together with its React peer dependencies.\n\n```bash\nnpm install react react-dom @excalidraw/excalidraw\n# or\nyarn add react react-dom @excalidraw/excalidraw\n```\n\n> **Note**: If you want to try unreleased changes, use `@excalidraw/excalidraw@next`.\n\n## Quick start\n\nThe minimum working setup has two easy-to-miss requirements:\n\n1. Import the package CSS:\n\n```ts\nimport \"@excalidraw/excalidraw/index.css\";\n```\n\n2. Render Excalidraw inside a container with a non-zero height.\n\n```tsx\nimport { Excalidraw } from \"@excalidraw/excalidraw\";\nimport \"@excalidraw/excalidraw/index.css\";\n\nexport default function App() {\n return (\n
\n \n
\n );\n}\n```\n\nExcalidraw fills `100%` of the width and height of its parent. If the parent has no height, the canvas will not be visible.\n\n## Next.js / SSR frameworks\n\nExcalidraw should be rendered on the client. In SSR frameworks such as Next.js, use a client component and load it dynamically with SSR disabled.\n\n```tsx\n// app/components/ExcalidrawClient.tsx\n\"use client\";\n\nimport { Excalidraw } from \"@excalidraw/excalidraw\";\nimport \"@excalidraw/excalidraw/index.css\";\n\nexport default function ExcalidrawClient() {\n return (\n
\n \n
\n );\n}\n```\n\n```tsx\n// app/page.tsx\nimport dynamic from \"next/dynamic\";\n\nconst ExcalidrawClient = dynamic(\n () => import(\"./components/ExcalidrawClient\"),\n { ssr: false },\n);\n\nexport default function Page() {\n return ;\n}\n```\n\nSee the local examples for complete setups:\n\n- [examples/with-nextjs](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs)\n- [examples/with-script-in-browser](https://github.com/excalidraw/excalidraw/tree/master/examples/with-script-in-browser)\n\n## LLM / agent tips\n\nIf an LLM or coding agent is setting up Excalidraw, these shortcuts usually save more time than re-prompting:\n\n- Start with a plain `` in a `100vh` container. Add refs, `initialData`, persistence, or custom UI only after the base embed works.\n- If the canvas is blank, check the CSS import and parent height first. Those are the two most common integration failures.\n- In Next.js or other SSR frameworks, assume client-only rendering first. Use `\"use client\"` and `dynamic(..., { ssr: false })` before debugging hydration or `window is not defined` errors.\n- If imports or entrypoints are unclear, inspect `node_modules/@excalidraw/excalidraw/package.json`. The installed package exports are the source of truth.\n- Do not set `window.EXCALIDRAW_ASSET_PATH` unless you are intentionally self-hosting fonts/assets.\n- When docs and generated code drift, copy the nearest working example from this repo, especially `examples/with-nextjs` or `examples/with-script-in-browser`.\n\n## Migrating to `@excalidraw/excalidraw@0.18.x`\n\nVersion `0.18.x` removes the old `types/`-prefixed deep import paths. If you were importing types from `@excalidraw/excalidraw/types/...`, switch to the new type-only subpaths below.\n\n| Old path | New path |\n| --- | --- |\n| `@excalidraw/excalidraw/types/data/transform.js` | `@excalidraw/excalidraw/element/transform` |\n| `@excalidraw/excalidraw/types/data/types.js` | `@excalidraw/excalidraw/data/types` |\n| `@excalidraw/excalidraw/types/element/types.js` | `@excalidraw/excalidraw/element/types` |\n| `@excalidraw/excalidraw/types/utility-types.js` | `@excalidraw/excalidraw/common/utility-types` |\n| `@excalidraw/excalidraw/types/types.js` | `@excalidraw/excalidraw/types` |\n\nDrop the `.js` extension. The new package `exports` map resolves these paths without it.\n\nThese deep subpaths are for `import type` only. Runtime imports should come from the package root, plus `@excalidraw/excalidraw/index.css` for styles.\n\nFor example:\n\n```ts\nimport { exportToSvg } from \"@excalidraw/excalidraw\";\n```\n\n## Self-hosting fonts\n\nBy default, Excalidraw downloads the fonts it needs from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod).\n\nFor self-hosting, copy the contents of `node_modules/@excalidraw/excalidraw/dist/prod/fonts` into the path where your app serves static assets, for example `public/`. Then set `window.EXCALIDRAW_ASSET_PATH` to that same path:\n\n```html\n\n```\n\n## Demo\n\nTry the [CodeSandbox example](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser).\n\n## Integration\n\nRead the [integration docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration).\n\n## API\n\nRead the [API docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api).\n\n## Contributing\n\nRead the [contributing docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing).\n","readmeFilename":"README.md"}