From bc297e5e496d9f48ef77581b7fb41fdf328a62cf Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sun, 15 Mar 2026 16:19:35 -0400 Subject: refactor: dev-docs/ --- .../@excalidraw/excalidraw/api/utils/export.mdx | 196 +++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx (limited to 'dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx') diff --git a/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx b/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx new file mode 100644 index 0000000..6337fe7 --- /dev/null +++ b/dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx @@ -0,0 +1,196 @@ +--- +title: Export Utilities +id: "export" +--- + +:::info + +We're working on much improved export utilities. Stay tuned! + +::: + +### exportToCanvas + +**_Signature_** + +
+exportToCanvas({
 
+  elements,
 
+  appState
 
+  getDimensions,
 
+  files,
 
+  exportPadding?: number;

+}: ExportOpts
+
+ +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | | The elements to be exported to canvas. | +| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L17) | The app state of the scene. | +| [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. | +| `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. | +| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | _ | The files added to the scene. | +| `exportPadding` | `number` | `10` | The `padding` to be added on canvas. | + + +#### getDimensions + +```tsx +(width: number, height: number) => { + width: number, + height: number, + scale?: number +} +``` +A function which returns the `width`, `height`, and optionally `scale` (defaults to `1`), with which canvas is to be exported. + +**How to use** + +```js +import { exportToCanvas } from "@excalidraw/excalidraw"; +``` + +This function returns the canvas with the exported elements, appState and dimensions. + +```jsx live +function App() { + const [canvasUrl, setCanvasUrl] = useState(""); + const [excalidrawAPI, setExcalidrawAPI] = useState(null); + + return ( + <> + +
+ +
+
+ setExcalidrawAPI(api)} +/> +
+ + ) +} +``` + + +### exportToBlob + +**_Signature_** + +
+exportToBlob(
 
+  opts: ExportOpts & {
 
+  mimeType?: string,
 
+  quality?: number,
 
+  exportPadding?: number;

+})
+
+ +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `opts` | `object` | _ | This param is passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas) | +| `mimeType` | `string` | `image/png` | Indicates the image format. | +| `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg`/`image/webp` MIME types. | +| `exportPadding` | `number` | `10` | The padding to be added on canvas. | + +**How to use** + +```js +import { exportToBlob } from "@excalidraw/excalidraw"; +``` + +Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob). It internally uses [canvas.ToBlob](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob). + +### exportToSvg + +**_Signature_** + +
+exportToSvg({
 
+  elements:  
+    
+      ExcalidrawElement[]
+    ,
 
+  appState:
+     AppState
+    ,
 
+  exportPadding: number,
 
+  metadata: string,
 
+  files: 
+  
+      BinaryFiles
+    ,

+});
+
+ +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | | The elements to exported as `svg `| +| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L11) | The `appState` of the scene | +| exportPadding | number | 10 | The `padding` to be added on canvas | +| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) | undefined | The `files` added to the scene. | + +This function returns a promise which resolves to `svg` of the exported drawing. + +### exportToClipboard + +**_Signature_** + +
+exportToClipboard(
 
+  opts: ExportOpts & {
 
+  mimeType?: string,
 
+  quality?: number;
 
+  type: 'png' | 'svg' |'json'

+})
+
+ +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `opts` | | | This param is same as the params passed to `exportToCanvas`. You can refer to [`exportToCanvas`](#exporttocanvas). | +| `mimeType` | `string` | `image/png` | Indicates the image format, this will be used when exporting as `png`. | +| `quality` | `number` | `0.92` | A value between `0` and `1` indicating the [image quality](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#parameters). Applies only to `image/jpeg` / `image/webp` MIME types. This will be used when exporting as `png`. | +| `type` | 'png' | 'svg' | 'json' | _ | This determines the format to which the scene data should be `exported`. | + +**How to use** + +```js +import { exportToClipboard } from "@excalidraw/excalidraw"; +``` + +Copies the scene data in the specified format (determined by `type`) to clipboard. + +### Additional attributes of appState for export\* APIs + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `exportBackground` | `boolean` | `true` | Indicates whether `background` should be exported | +| `viewBackgroundColor` | `string` | `#fff` | The default background color | +| `exportWithDarkMode` | `boolean` | `false` | Indicates whether to export with `dark` mode | +| `exportEmbedScene` | `boolean` | `false` | Indicates whether scene data should be embedded in `svg/png`. This will increase the image size. | -- cgit v1.2.3