initialData

{ elements?: ExcalidrawElement[], appState?: AppState }

This helps to load Excalidraw with initialData. It must be an object or a promise which resolves to an object containing the below optional fields.

Name	Type	Description
elements	ExcalidrawElement[]	The elements with which Excalidraw should be mounted.
appState	AppState	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 | Promise<LibraryItems>	This library items with which Excalidraw should be mounted.
files	BinaryFiles	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.

Live Editor

function App() { return ( <div style={{ height: "500px" }}> <Excalidraw initialData={{ 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: "#000000", backgroundColor: "transparent", width: 186.47265625, height: 141.9765625, seed: 1968410350, groupIds: [], }, ], appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" }, scrollToContent: true }} /> </div> ); }

function App() {
  return (
    <div style={{ height: "500px" }}>
      <Excalidraw
        initialData={{
          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: "#000000",
              backgroundColor: "transparent",
              width: 186.47265625,
              height: 141.9765625,
              seed: 1968410350,
              groupIds: [],
            },
          ],
          appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
          scrollToContent: true
        }}
      />
    </div>
  );
}

Result

Loading...