# @zsviczian/excalidraw

> Excalidraw as a React component

Latest version **0.18.137** (published 2026-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zsviczian/excalidraw
pnpm add @zsviczian/excalidraw
yarn add @zsviczian/excalidraw
bun add @zsviczian/excalidraw
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; large bundle; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.18.137 |
| Published | 2026-09-16 |
| First published | 2021-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 31 |
| Unpacked size | 86.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 60 |
| Maintainers | zsviczian |
| Keywords | excalidraw, excalidraw-embed, react, npm, npm excalidraw |

## Links

- npm: https://www.npmjs.com/package/@zsviczian/excalidraw
- Repository: https://github.com/zsviczian/excalidraw
- Homepage: https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw
- Issues: https://github.com/excalidraw/excalidraw/issues
- npm.io page: https://npm.io/package/@zsviczian/excalidraw

## Dependencies (31)

- [clsx](https://npm.io/package/clsx.md) 1.1.1
- [pako](https://npm.io/package/pako.md) 2.0.3
- [pica](https://npm.io/package/pica.md) 7.1.1
- [sass](https://npm.io/package/sass.md) 1.51.0
- [fuzzy](https://npm.io/package/fuzzy.md) 0.1.3
- [jotai](https://npm.io/package/jotai.md) 2.11.0
- [nanoid](https://npm.io/package/nanoid.md) ^5.1.11
- [roughjs](https://npm.io/package/roughjs.md) 4.6.4
- [radix-ui](https://npm.io/package/radix-ui.md) 1.4.3
- [pwacompat](https://npm.io/package/pwacompat.md) 2.0.17
- [tunnel-rat](https://npm.io/package/tunnel-rat.md) 0.1.2
- [jotai-scope](https://npm.io/package/jotai-scope.md) 0.7.2
- [png-chunk-text](https://npm.io/package/png-chunk-text.md) 1.0.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) 4.0.8
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) 4.1.1
- [points-on-curve](https://npm.io/package/points-on-curve.md) 1.0.1
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.0.0
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.0.0
- [es6-promise-pool](https://npm.io/package/es6-promise-pool.md) 2.5.0
- [perfect-freehand](https://npm.io/package/perfect-freehand.md) 1.2.0
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.0.0
- [browser-fs-access](https://npm.io/package/browser-fs-access.md) 0.38.0
- [image-blob-reduce](https://npm.io/package/image-blob-reduce.md) 3.0.1
- [png-chunks-encode](https://npm.io/package/png-chunks-encode.md) 1.0.0
- [png-chunks-extract](https://npm.io/package/png-chunks-extract.md) 1.0.0
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.0.0
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.0.0
- [@braintree/sanitize-url](https://npm.io/package/@braintree/sanitize-url.md) 6.0.2
- [@excalidraw/laser-pointer](https://npm.io/package/@excalidraw/laser-pointer.md) 1.3.1
- [canvas-roundrect-polyfill](https://npm.io/package/canvas-roundrect-polyfill.md) 0.0.1
- [@excalidraw/random-username](https://npm.io/package/@excalidraw/random-username.md) 1.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.18.137 (latest) — 2026-09-16
- 0.18.113-beta.4 (beta) — 2026-07-29
- 0.18.97-test.1 (test) — 2026-06-16
- 0.18.0-19 (next) — 2025-05-27
- 0.18.136 — 2026-09-14
- 0.18.135 — 2026-09-07
- 0.18.134 — 2026-09-06
- 0.18.133 — 2026-09-06
- 0.18.132 — 2026-09-04
- 0.18.131 — 2026-09-03
- 0.18.130 — 2026-08-29
- 0.18.129 — 2026-08-28
- 0.18.128 — 2026-08-27
- 0.18.127 — 2026-08-25
- 0.18.126 — 2026-08-23
- … 414 more at https://npm.io/package/@zsviczian/excalidraw/versions

## README

# Excalidraw

**Excalidraw** is exported as a React component that you can embed directly in your app.

## Installation

Install the package together with its React peer dependencies.

```bash
npm install react react-dom @excalidraw/excalidraw
# or
yarn add react react-dom @excalidraw/excalidraw
```

> **Note**: If you want to try unreleased changes, use `@excalidraw/excalidraw@next`.

## Quick start

The minimum working setup has two easy-to-miss requirements:

1. Import the package CSS:

```ts
import "@excalidraw/excalidraw/index.css";
```

2. Render Excalidraw inside a container with a non-zero height.

```tsx
import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";

export default function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Excalidraw />
    </div>
  );
}
```

Excalidraw fills `100%` of the width and height of its parent. If the parent has no height, the canvas will not be visible.

## Next.js / SSR frameworks

Excalidraw should be rendered on the client. In SSR frameworks such as Next.js, use a client component and load it dynamically with SSR disabled.

```tsx
// app/components/ExcalidrawClient.tsx
"use client";

import { Excalidraw } from "@excalidraw/excalidraw";
import "@excalidraw/excalidraw/index.css";

export default function ExcalidrawClient() {
  return (
    <div style={{ height: "100vh" }}>
      <Excalidraw />
    </div>
  );
}
```

```tsx
// app/page.tsx
import dynamic from "next/dynamic";

const ExcalidrawClient = dynamic(
  () => import("./components/ExcalidrawClient"),
  { ssr: false },
);

export default function Page() {
  return <ExcalidrawClient />;
}
```

See the local examples for complete setups:

- [examples/with-nextjs](https://github.com/excalidraw/excalidraw/tree/master/examples/with-nextjs)
- [examples/with-script-in-browser](https://github.com/excalidraw/excalidraw/tree/master/examples/with-script-in-browser)

## LLM / agent tips

If an LLM or coding agent is setting up Excalidraw, these shortcuts usually save more time than re-prompting:

- Start with a plain `<Excalidraw />` in a `100vh` container. Add refs, `initialData`, persistence, or custom UI only after the base embed works.
- If the canvas is blank, check the CSS import and parent height first. Those are the two most common integration failures.
- 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.
- If imports or entrypoints are unclear, inspect `node_modules/@excalidraw/excalidraw/package.json`. The installed package exports are the source of truth.
- Do not set `window.EXCALIDRAW_ASSET_PATH` unless you are intentionally self-hosting fonts/assets.
- When docs and generated code drift, copy the nearest working example from this repo, especially `examples/with-nextjs` or `examples/with-script-in-browser`.

## Migrating to `@excalidraw/excalidraw@0.18.x`

Version `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.

| Old path | New path |
| --- | --- |
| `@excalidraw/excalidraw/types/data/transform.js` | `@excalidraw/excalidraw/element/transform` |
| `@excalidraw/excalidraw/types/data/types.js` | `@excalidraw/excalidraw/data/types` |
| `@excalidraw/excalidraw/types/element/types.js` | `@excalidraw/excalidraw/element/types` |
| `@excalidraw/excalidraw/types/utility-types.js` | `@excalidraw/excalidraw/common/utility-types` |
| `@excalidraw/excalidraw/types/types.js` | `@excalidraw/excalidraw/types` |

Drop the `.js` extension. The new package `exports` map resolves these paths without it.

These deep subpaths are for `import type` only. Runtime imports should come from the package root, plus `@excalidraw/excalidraw/index.css` for styles.

For example:

```ts
import { exportToSvg } from "@excalidraw/excalidraw";
```

## Self-hosting fonts

By default, Excalidraw downloads the fonts it needs from the [CDN](https://esm.run/@excalidraw/excalidraw/dist/prod).

For 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:

```html
<script>
  window.EXCALIDRAW_ASSET_PATH = "/";
</script>
```

## Demo

Try the [CodeSandbox example](https://codesandbox.io/p/sandbox/github/excalidraw/excalidraw/tree/master/examples/with-script-in-browser).

## Integration

Read the [integration docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration).

## API

Read the [API docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api).

## Contributing

Read the [contributing docs](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/contributing).

---
_Source: https://npm.io/package/@zsviczian/excalidraw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._