-
-
-
- 
-
-
- 
-
-
- 
-
-
- 
-
-
-
- - Create beautiful hand-drawn like diagrams, wireframes, or whatever you like. -
-
](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [
](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
-
-
-
-Last but not least, we're thankful to these companies for offering their services for free:
-
-[](https://vercel.com) [](https://sentry.io) [](https://crowdin.com)
diff --git a/excalidraw/crowdin.yml b/excalidraw/crowdin.yml
deleted file mode 100644
index ccb8a17..0000000
--- a/excalidraw/crowdin.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-files:
- - source: /packages/excalidraw/locales/en.json
- translation: /packages/excalidraw/locales/%locale%.json
diff --git a/excalidraw/dev-docs/.gitignore b/excalidraw/dev-docs/.gitignore
deleted file mode 100644
index b2d6de3..0000000
--- a/excalidraw/dev-docs/.gitignore
+++ /dev/null
@@ -1,20 +0,0 @@
-# Dependencies
-/node_modules
-
-# Production
-/build
-
-# Generated files
-.docusaurus
-.cache-loader
-
-# Misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/excalidraw/dev-docs/README.md b/excalidraw/dev-docs/README.md
deleted file mode 100644
index aaba2fa..0000000
--- a/excalidraw/dev-docs/README.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Website
-
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-Using SSH:
-
-```
-$ USE_SSH=true yarn deploy
-```
-
-Not using SSH:
-
-```
-$ GIT_USER=- Selecting the checkbox to see the collaborator count -
- -![Excalidraw logo: Sketch hand-drawn like diagrams.]({require("@site/static/img/welcome-screen-overview.png").default})
-
-### Center
-
-`ToolBar Hints
-
- (api:{" "}
-
- ExcalidrawAPI
-
- ) => void;
-
-
-Once the callback is triggered, you will need to store the api in state to access it later.
-
-```jsx showLineNumbers
-export default function App() {
- const [excalidrawAPI, setExcalidrawAPI] = useState(null);
- return
- (scene:{" "}
-
- sceneData
-
- ) => void
-
-
-You can use this function to update the scene with the sceneData. It accepts the below attributes.
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L38) | The `elements` to be updated in the scene |
-| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L39) | The `appState` to be updated in the scene. |
-| `collaborators` | MapCollaborator> | The list of collaborators to be updated in the scene. |
-| `captureUpdate` | [`CaptureUpdateAction`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/store.ts#L40) | Controls which updates should be captured by the `Store`. Captured updates are emmitted and listened to by other components, such as `History` for undo / redo purposes. |
-
-```jsx live
-function App() {
- const updateScene = () => {
- const sceneData = {
- elements: [
- {
- 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: "#c92a2a",
- backgroundColor: "transparent",
- width: 186.47265625,
- height: 141.9765625,
- seed: 1968410350,
- groupIds: [],
- boundElements: null,
- locked: false,
- link: null,
- updated: 1,
- roundness: {
- type: 3,
- value: 32,
- },
- },
- ],
- appState: {
- viewBackgroundColor: "#edf2ff",
- },
- captureUpdate: CaptureUpdateAction.IMMEDIATELY,
- };
- excalidrawAPI.updateScene(sceneData);
- };
- const [excalidrawAPI, setExcalidrawAPI] = useState(null);
- return (
- Click to update the scene
- -
- (opts: {
libraryItems:{" "}
-
- LibraryItemsSource
-
- ;
merge?: boolean;
prompt?: boolean;
-
openLibraryMenu?: boolean;
-
defaultStatus?: "unpublished" | "published";
}) => Promise<
-
- LibraryItems
-
- >
-
-
-You can use this function to update the library. It accepts the below attributes.
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library |
-| `merge` | boolean | `false` | Whether to merge with existing library items. |
-| `prompt` | boolean | `false` | Whether to prompt user for confirmation. |
-| `openLibraryMenu` | boolean | `false` | Keep the library menu open after library is updated. |
-| `defaultStatus` | "unpublished" | "published" | `"unpublished"` | Default library item's `status` if not present. |
-
-```tsx live
-function App() {
- const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-
- useEffect(() => {
- if (!excalidrawAPI) {
- return;
- }
- // to open the library sidebar
- excalidrawAPI.updateScene({ appState: { openSidebar: "library" } });
- }, [excalidrawAPI]);
-
- return (
- Click to update the library items
- -
- (files:{" "}
-
- BinaryFileData
-
- ) => void
-
-
-Adds supplied files data to the `appState.files` cache on top of existing files present in the cache.
-
-## resetScene
-
-```tsx
-(opts?: { resetLoadingState: boolean }) => void
-```
-
-Resets the scene. If `resetLoadingState` is passed as true then it will also force set the loading state to false.
-
-## getSceneElementsIncludingDeleted
-
-
- () =>{" "}
-
- ExcalidrawElement[]
-
-
-
-Returns all the elements including the deleted in the scene.
-
-## getSceneElements
-
-- () => NonDeleted< - - ExcalidrawElement - - []> -- -Returns all the elements excluding the deleted in the scene - -## getAppState - -
- () =>{" "}
-
- AppState
-
-
-
-Returns current appState.
-
-## history
-
-```tsx
-{
- clear: () => void
-}
-```
-
-This is the history API. history.clear() will clear the history.
-
-## scrollToContent
-
-```tsx
-(
- target?: ExcalidrawElement | ExcalidrawElement[],
- opts?:
- | {
- fitToContent?: boolean;
- animate?: boolean;
- duration?: number;
- }
- | {
- fitToViewport?: boolean;
- viewportZoomFactor?: number;
- animate?: boolean;
- duration?: number;
- }
-) => void
-```
-
-Scroll the nearest element out of the elements supplied to the center of the viewport. Defaults to the elements on the scene.
-
-| Attribute | type | default | Description |
-| --- | --- | --- | --- |
-| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | All scene elements | The element(s) to scroll to. |
-| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. Note that the zoom range is between 10%-100%. |
-| opts.fitToViewport | boolean | false | Similar to fitToContent but the zoom range is not limited. If elements are smaller than the viewport, zoom will go above 100%. |
-| opts.viewportZoomFactor | number | 0.7 | when fitToViewport=true, how much screen should the content cover, between 0.1 (10%) and 1 (100%) |
-| opts.animate | boolean | false | Whether to animate between starting and ending position. Note that for larger scenes the animation may not be smooth due to performance issues. |
-| opts.duration | number | 500 | Duration of the animation if `opts.animate` is `true`. |
-
-## refresh
-
-```tsx
-() => void
-```
-
-Updates the `offsets` for the `Excalidraw` component so that the coordinates are computed correctly (for example the cursor position).
-
-You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves).
-
-For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API.
-
-## setToast
-
-This API can be used to show the toast with custom message.
-
-```tsx
-({ message: string, closable?:boolean,duration?:number
- } | null) => void
-```
-
-| Attribute | type | Description |
-| --- | --- | --- |
-| message | string | The message to be shown on the toast. |
-| closable | boolean | Indicates whether to show the closable button on toast to dismiss the toast. |
-| duration | number | Determines the duration after which the toast should auto dismiss. To prevent autodimiss you can pass `Infinity`. |
-
-To dismiss an existing toast you can simple pass `null`
-
-```js
-setToast(null);
-```
-
-## id
-
-The unique id of the excalidraw component. This can be used to identify the excalidraw component, for example importing the library items to the excalidraw component from where it was initiated when you have multiple excalidraw components rendered on the same page as shown in [multiple excalidraw demo](https://codesandbox.io/s/multiple-excalidraw-k1xx5).
-
-## getFiles
-
-
- () =>{" "}
-
- files
-
-
-
-This API can be used to get the files present in the scene. It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements.
-
-## setActiveTool
-
-This API has the below signature. It sets the `tool` passed in param as the active tool.
-
-```ts
-(
- tool: (
- | { type: ToolType }
- | { type: "custom"; customType: string }
- ) & { locked?: boolean },
-) => {};
-```
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L91) | `selection` | The tool type which should be set as active tool |
-| `locked` | `boolean` | `false` | Indicates whether the the active tool should be locked. It behaves the same way when using the `lock` tool in the editor interface |
-
-## setCursor
-
-This API can be used to customise the mouse cursor on the canvas and has the below signature. It sets the mouse cursor to the cursor passed in param.
-
-```tsx
-(cursor: string) => void
-```
-
-## toggleSidebar
-
-```tsx
-(opts: { name: string; tab?: string; force?: boolean }) => boolean;
-```
-
-This API can be used to toggle sidebar, optionally opening a specific sidebar tab. It returns whether the sidebar was toggled on or off. If the `force` flag passed, it will force the sidebar to be toggled either on/off.
-
-This API is especially useful when you render a custom [`
-{ elements?: ExcalidrawElement[], appState?: AppState }
-
-
-This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. |
-| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. |
-| `scrollToContent` | `boolean` | This attribute indicates whether to `scroll` to the nearest element to center once `Excalidraw` is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToContent` is false so that scroll positions are retained |
-| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L247) | Promise<[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200)> | This library items with which `Excalidraw` should be mounted. |
-| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L82) | The `files` added to the scene. |
-
-You might want to use this when you want to load excalidraw with some initial elements and app state.
-
-```jsx live
-function App() {
- return (
- Promise | `null` | The initial data with which app loads. |
-| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | \_ | Callback triggered with the excalidraw api once rendered |
-| [`isCollaborating`](#iscollaborating) | `boolean` | \_ | This indicates if the app is in `collaboration` mode |
-| [`onChange`](#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`. |
-| [`onPointerUpdate`](#onpointerupdate) | `function` | \_ | Callback triggered when mouse pointer is updated. |
-| [`onPointerDown`](#onpointerdown) | `function` | \_ | This prop if passed gets triggered on pointer down events |
-| [`onScrollChange`](#onscrollchange) | `function` | \_ | This prop if passed gets triggered when scrolling the canvas. |
-| [`onPaste`](#onpaste) | `function` | \_ | Callback to be triggered if passed when something is pasted into the scene |
-| [`onLibraryChange`](#onlibrarychange) | `function` | \_ | The callback if supplied is triggered when the library is updated and receives the library items. |
-| [`generateLinkForSelection`](#generatelinkforselection) | `function` | \_ | Allows you to override `url` generation when linking to Excalidraw elements. |
-| [`onLinkOpen`](#onlinkopen) | `function` | \_ | The callback if supplied is triggered when any link is opened. |
-| [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
-| [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | \_ | Render function that renders custom UI in top right corner |
-| [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | \_ | Render function that can be used to render custom stats on the stats dialog. |
-| [`viewModeEnabled`](#viewmodeenabled) | `boolean` | \_ | This indicates if the app is in `view` mode. |
-| [`zenModeEnabled`](#zenmodeenabled) | `boolean` | \_ | This indicates if the `zen` mode is enabled |
-| [`gridModeEnabled`](#gridmodeenabled) | `boolean` | \_ | This indicates if the `grid` mode is enabled |
-| [`libraryReturnUrl`](#libraryreturnurl) | `string` | \_ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
-| [`theme`](#theme) | `"light"` | `"dark"` | `"light"` | The theme of the Excalidraw component |
-| [`name`](#name) | `string` | | Name of the drawing |
-| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
-| [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
-| [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
-| [`autoFocus`](#autofocus) | `boolean` | `false` | Indicates whether to focus the Excalidraw component on page load |
-| [`generateIdForFile`](#generateidforfile) | `function` | \_ | Allows you to override `id` generation for files added on canvas |
-| [`validateEmbeddable`](#validateembeddable) | `string[]` \| `boolean` \| `RegExp` \| `RegExp[]` \| ((link: string) => boolean | undefined) | \_ | use for custom src url validation |
-| [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `