Skip to main content

Integration

Module bundler​

If you are using a module bundler (for instance, Webpack), you can import it as an ES6 module as shown below

import { Excalidraw } from "@excalidraw/excalidraw";
info

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.

Live Editor
Result
Loading...

Next.js​

Since Excalidraw doesn't support server side rendering, you should render the component once the host is mounted.

Here are two ways on how you can render Excalidraw on Next.js.

  1. Using Next.js Dynamic import [Recommended].

Since Excalidraw doesn't support server side rendering so you can also use dynamic import to render by setting ssr to false.

import dynamic from "next/dynamic";
const Excalidraw = dynamic(
  async () => (await import("@excalidraw/excalidraw")).Excalidraw,
  {
    ssr: false,
  },
);
export default function App() {
  return <Excalidraw />;
}

Here is a working demo.

  1. Importing Excalidraw once client is rendered.
import { useState, useEffect } from "react";
export default function App() {
  const [Excalidraw, setExcalidraw] = useState(null);
  useEffect(() => {
    import("@excalidraw/excalidraw").then((comp) =>
      setExcalidraw(comp.Excalidraw),
    );
  }, []);
  return <>{Excalidraw && <Excalidraw />}</>;
}

Here is a working demo

The types are available at @excalidraw/excalidraw/types, you can view example for typescript

Preact​

Since we support umd build ships with react/jsx-runtime and react-dom/client inlined with the package. This conflicts with Preact and hence the build doesn't work directly with Preact.

However we have shipped a separate build for Preact so if you are using Preact you need to set process.env.IS_PREACT to true to use the Preact build.

Once the above env variable is set, you will be able to use the package in Preact as well.

info

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.

Since Vite removes env variables by default, you can update the vite config to ensure its available 👇

 define: {
    "process.env.IS_PREACT": JSON.stringify("true"),
  },

Browser​

To use it in a browser directly:

For development use 👇

<script
  type="text/javascript"
  src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
></script>

For production use 👇

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

<!DOCTYPE html>
<html>
  <head>
    <title>Excalidraw in browser</title>
    <meta charset="UTF-8" />
    <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>
    <div class="container">
      <h1>Excalidraw Embed Example</h1>
      <div id="app"></div>
    </div>
    <script type="text/javascript" src="packages/excalidraw/index.js"></script>
  </body>
</html>