Excalidraw exported as a component to directly embed in your projects
You can use npm
npm install react react-dom excalidraw
or via yarn
yarn add react react-dom excalidraw
After installation you will see the below font files in dist directory which you will have to copy to the path from where assets are served. In the demo its served from public folder.
Cascadia.woff2
FG_Virgil.woff2
import React, { useState } from "react";
import Excalidraw from "excalidraw";
import InitialData from "./initialData";
import "excalidraw/dist/excalidraw.min.css";
import "./styles.css";
export default function App() {
const onChange = (elements, state) => {
console.log("Elements :", elements, "State : ", state);
};
const onUsernameChange = (username) => {
console.log("current username", username);
};
const [dimensions, setDimensions] = useState({
width: window.innerWidth,
height: window.innerHeight,
});
const onResize = () => {
setDimensions({
width: window.innerWidth,
height: window.innerHeight,
});
};
useEffect(() => {
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
const { width, height } = dimensions;
const options = { zenModeEnabled: true, viewBackgroundColor: "#AFEEEE" };
return (
<div className="App">
<Excalidraw
width={width}
height={height}
initialData={InitialData}
onChange={onChange}
options={options}
user={{ name: "Excalidraw User" }}
onUsernameChange={onUsernameChange}
/>
</div>
);
}
| Name | Type | Default | Description |
|---|---|---|---|
| width | Number | window.innerWidth | The width of Excalidraw component |
| height | Number | window.innerHeight | The height of Excalidraw component |
| initialData | ExcalidrawElement[] | [] | The initial data with which app loads. |
| 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. | |
| options | Object | Each option has a default value. See options section for more details | Options to be passed to Excalidraw |
| user | { name?: string } | User details. The name refers to the name of the user to be shown | |
| onUsernameChange | Function | This callback is triggered whenever the username change. This callback receives the username. |
This props defines the width of the Excalidraw component. Defaults to window.innerWidth if not passed.
This props defines the height of the Excalidraw component. Defaults to window.innerHeight if not passed.
This helps to load Excalidraw with initialData. Defaults to [].
This should be array of ExcalidrawElement[] as shown below.
[
{
type: "rectangle",
version: 141,
versionNonce: 361174001,
isDeleted: false,
id: "oDVXy8D6rom3H1-LLH2-f",
fillStyle: "hachure",
strokeWidth: 1,
strokeStyle: "solid",
roughness: 1,
opacity: 100,
angle: 0,
x: 100.50390625,
y: 93.67578125,
strokeColor: "#000000",
backgroundColor: "transparent",
width: 186.47265625,
height: 141.9765625,
seed: 1968410350,
groupIds: [],
},
];You might want to use this if you are using some backend to store the excalidraw elements and want to preload excalidraw with those elements.
Every time component updates, this callback if passed will get triggered and has the below signature.
onChange(ExcalidrawElement[], AppState)Here you can try saving the data to your backend or local storage for example.
These contains the options object with which you can control the initial rendering of Excalidraw. Currently it only contains the below keys, more to be added in future.
| Name | type | default | Description |
|---|---|---|---|
| zenModeEnabled | boolean | false | Decides whether to enable zen mode |
| viewBackgroundColor | string | #fff | The background color of Excalidraw |
Here is how you use it
{ zenModeEnabled: true, viewBackgroundColor: "AFEEEE" }This is the user name which shows during collaboration. Defaults to {name: ''}. This is Object as later more attributes like user cursor colors can also be added.
This callback if passed gets triggered whenever username changes and has the below signature
onUserNameChange(username);These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
git clone https://github.com/excalidraw/excalidraw-embed.git| Command | Description |
|---|---|
npm install |
Install the dependencies |
npm start |
Run the project |
npm run fix |
Reformat all files with Prettier |
npm test |
Run tests |
npm run test:update |
Update test snapshots |
npm run test:code |
Test for formatting with Prettier |
Currently this is a fork of excalidraw and all the changes for making it an embedable component are done on top of it. So for any changes, please open an issue first to discuss what you would like to change.