excalidraw-reskin

Reskinned distribution of the Excalidraw React component. Forked from @excalidraw/excalidraw.

Installation

Install the package together with its React peer dependencies.

npm install react react-dom excalidraw-reskin
# or
yarn add react react-dom excalidraw-reskin

Quick start

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

1. Import the package CSS:

import "excalidraw-reskin/index.css";

2. Render the component inside a container with a non-zero height.

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

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

The canvas 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

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

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

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

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

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

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

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

Self-hosting fonts

By default, the component downloads the fonts it needs from the CDN. For self-hosting, copy the contents of node_modules/excalidraw-reskin/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:

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

Upstream

This is a reskin of Excalidraw. For original integration docs and API reference, see the upstream project.