Quickdraw

https://tryquickdraw.com/docs
Admin
Quickdraw is an MIT-licensed infinite-canvas whiteboard SDK for React, React Native, and vanilla...
Tokens:8,193
Snippets:110
Trust Score:3.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install Quickdraw Core

Source: https://tryquickdraw.com/docs/core

Install the core package via npm.

```bash
npm install @quickdrawjs/core
```

--------------------------------

### Install Quickdraw for React

Source: https://tryquickdraw.com/docs

Use npm to install the React-specific package.

```bash
npm install @quickdrawjs/react
```

--------------------------------

### Initialize Quickdraw Board

Source: https://tryquickdraw.com/docs/core

Setup a basic board instance within a container element using the createQuickdraw factory.

```html
<div id="board" style="position: fixed; inset: 0"></div>
<script type="module">
  import { createQuickdraw } from '@quickdrawjs/core'
  // (or from a CDN like esm.sh while prototyping)
 
  const board = createQuickdraw({
    container: document.getElementById('board'),
    theme: 'light',
    grid: 'dots',
  })
</script>
```

--------------------------------

### Install Quickdraw for React Native

Source: https://tryquickdraw.com/docs/react-native

Install the required package and the WebView dependency.

```bash
npm install @quickdrawjs/react-native react-native-webview
```

--------------------------------

### Initialization

Source: https://tryquickdraw.com/docs/headless

Methods to initialize the Quickdraw instance in headless mode.

```APIDOC
## Initialization

### Description
Initialize the Quickdraw instance with UI components hidden.

### Methods
- `<Quickdraw ref={ref} hideUi />` (React)
- `createQuickdraw({ container, hideUi: true })` (Plain JS)
- `createQuickdraw({ container, themeToggle: false, gridControl: false })` (Selective UI)
```

--------------------------------

### Initialize a Quickdraw board in React

Source: https://tryquickdraw.com/docs

Import the component and CSS, then render the Quickdraw component within a container that has defined dimensions.

```javascript
import { Quickdraw } from '@quickdrawjs/react'
import '@quickdrawjs/core/quickdraw.css'
 
export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Quickdraw theme="light" grid="dots" />
    </div>
  )
}
```

--------------------------------

### createQuickdraw(options)

Source: https://tryquickdraw.com/docs/core

Initializes a new Quickdraw board instance within a specified container element.

```APIDOC
## createQuickdraw(options)

### Description
Initializes a new Quickdraw board instance. Returns an object containing the editor, ui, and destroy method.

### Parameters
- **container** (HTMLElement) - Required - The DOM element where the board will be rendered.
- **theme** ('light' | 'dark') - Optional - The visual theme of the board. Default: 'light'.
- **grid** ('none' | 'lines' | 'ruled' | 'dots' | 'crosses' | 'iso') - Optional - The grid pattern. Default: 'lines'.
- **readonly** (boolean) - Optional - If true, the board is view-only. Default: false.
- **hideUi** (boolean) - Optional - If true, the toolbar is hidden. Default: false.
- **themeToggle** (boolean) - Optional - Enables the theme toggle in the menu. Default: true.
- **gridControl** (boolean) - Optional - Enables the grid control in the menu. Default: true.
- **watermark** (boolean) - Optional - Displays the corner watermark. Default: true.
- **store** (Store) - Optional - A shared store instance for document synchronization.
- **camera** (object) - Optional - Initial camera position { x, y, z }.
- **styles** (object) - Optional - Initial pen styles.
- **onSave** (function) - Optional - Callback function (blob, background) => void to intercept PNG export.
```

--------------------------------

### Configure Quickdraw with refs and callbacks

Source: https://tryquickdraw.com/docs

Use a ref to access the editor instance and handle document changes via the onChange callback.

```javascript
const ref = useRef(null)
 
<Quickdraw
  ref={ref}
  snapshot={saved}                          // restore a saved board
  autoFit                                   // fit content on mount/resize
  onChange={(diff, source, editor) =>       // every document change
    save(editor.store.getSnapshot())}
/>
```

--------------------------------

### Initialize headless Quickdraw

Source: https://tryquickdraw.com/docs/headless

Use the hideUi prop or option to render the canvas without the default toolbar.

```jsx
<Quickdraw ref={ref} hideUi />
```

```javascript
// plain JS
const board = createQuickdraw({ container, hideUi: true })
```

--------------------------------

### Set and monitor board theme

Source: https://tryquickdraw.com/docs/theming

Use the editor instance to programmatically switch themes and listen for changes.

```javascript
editor.setTheme('dark')
editor.theme.id            // current theme
editor.on('theme', sync)   // the board menu can switch it too
```

--------------------------------

### Manage theme in React

Source: https://tryquickdraw.com/docs/theming

Use the theme prop and onThemeChange callback to synchronize the board with your application state.

```jsx
const [theme, setTheme] = useState('light')
<Quickdraw theme={theme} onThemeChange={setTheme} />
```

--------------------------------

### Manage the Store

Source: https://tryquickdraw.com/docs/core

Access the store to retrieve snapshots, load data, or listen for document changes.

```javascript
const { store } = board.editor
 
store.getSnapshot()                          // plain JSON
store.loadSnapshot(snap, 'remote')           // restore, outside undo history
store.listen((diff, source) => {})           // every change
store.undo(); store.redo()
```

--------------------------------

### useQuickdrawStore

Source: https://tryquickdraw.com/docs/react

A hook for creating a stable store instance for controlled usage of the Quickdraw component.

```APIDOC
## useQuickdrawStore(snapshot)

### Description
Creates a stable store instance that can be shared between views or preloaded before rendering.

### Parameters
- **snapshot** (JSON) - Required - The document snapshot to initialize the store.
```

--------------------------------

### Save and load board state via API

Source: https://tryquickdraw.com/docs/persistence

Shows how to send and retrieve board snapshots using standard fetch requests to a backend database.

```javascript
// save
await fetch(`/api/boards/${id}`, {
  method: 'PUT',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify(store.getSnapshot()),
})
 
// load
const snap = await fetch(`/api/boards/${id}`).then((r) => r.json())
store.loadSnapshot(snap, 'remote')
```

--------------------------------

### Configure board grid

Source: https://tryquickdraw.com/docs/theming

Set the grid type and listen for grid changes using the editor instance.

```javascript
editor.setGrid('dots')     // 'none' | 'lines' | 'ruled' | 'dots' | 'crosses' | 'iso'
editor.on('grid', sync)
```

--------------------------------

### Accessing the engine via ref

Source: https://tryquickdraw.com/docs/react

Use a ref to access imperative APIs like tool selection, camera control, and undo history.

```jsx
const ref = useRef(null)
 
<Quickdraw ref={ref} />
 
ref.current.editor.setTool('draw')
ref.current.editor.fitContent({ animate: 220 })
ref.current.editor.store.undo()
ref.current.ui.setHidden(true)
```

--------------------------------

### Save and restore board state with localStorage

Source: https://tryquickdraw.com/docs/persistence

Uses localStorage to persist the board snapshot, with a debounced save mechanism to optimize performance.

```javascript
const { store } = board.editor
 
// restore (source 'remote' keeps the load out of the user's undo history)
const saved = localStorage.getItem('doc')
if (saved) {
  store.loadSnapshot(JSON.parse(saved), 'remote')
  board.editor.fitContent()
}
 
// save, debounced — snapshots are cheap but not free
let t
store.listen(() => {
  clearTimeout(t)
  t = setTimeout(() => {
    localStorage.setItem('doc', JSON.stringify(store.getSnapshot()))
  }, 400)
})
```

--------------------------------

### Manage drawing tools

Source: https://tryquickdraw.com/docs/headless

Set active tools and geometric shapes, and listen for tool changes.

```javascript
editor.setTool('draw')
// 'select' | 'hand' | 'draw' | 'highlight' | 'eraser' | 'laser'
// | 'arrow' | 'line' | 'geo' | 'text' | 'note'
 
editor.setGeoKind('star')
// 'rectangle' | 'ellipse' | 'triangle' | 'diamond' | 'hexagon' | 'star'
 
editor.on('tool', () => highlight(editor.tool))
```

--------------------------------

### Basic Quickdraw implementation

Source: https://tryquickdraw.com/docs/react

Render the Quickdraw component within a container that has defined dimensions.

```jsx
import { Quickdraw } from '@quickdrawjs/react'
import '@quickdrawjs/core/quickdraw.css'
 
export default function Board() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Quickdraw theme="light" grid="lines" />
    </div>
  )
}
```

--------------------------------

### Implement a WebSocket relay server

Source: https://tryquickdraw.com/docs/sync

A simple relay server that forwards incoming messages to all other connected peers. It does not interpret the document data.

```javascript
import { WebSocketServer } from 'ws'
 
const wss = new WebSocketServer({ port: 8080 })
wss.on('connection', (ws) => {
  ws.on('message', (data) => {
    for (const peer of wss.clients) {
      if (peer !== ws && peer.readyState === 1) peer.send(data.toString())
    }
  })
})
```

--------------------------------

### Listening to Store Changes

Source: https://tryquickdraw.com/docs/data-model

Subscribe to store updates, optionally filtering by source.

```javascript
const stop = store.listen((diff, source) => { ... })
const stopUser = store.listen(fn, { source: 'user' })   // only local changes
```

--------------------------------

### Syncing theme state

Source: https://tryquickdraw.com/docs/react

Use callbacks to synchronize internal board state with external application state.

```jsx
const [theme, setTheme] = useState('light')
 
<Quickdraw theme={theme} onThemeChange={setTheme} />
```

--------------------------------

### Persist board state in React

Source: https://tryquickdraw.com/docs/persistence

Demonstrates using the snapshot and onChange props to manage board state within a React component.

```jsx
<Quickdraw
  snapshot={saved}
  autoFit
  onChange={(diff, source, editor) =>
    debouncedSave(editor.store.getSnapshot())}
/>
```

--------------------------------

### Implement sync in React Native

Source: https://tryquickdraw.com/docs/sync

Uses the Quickdraw component to emit diffs from a React Native environment, allowing cross-platform synchronization with web clients.

```jsx
<Quickdraw
  onChange={(diff, source) => source === 'user' && socket.send(JSON.stringify(diff))}
/>
// board.current.applyDiff(remoteDiff) on message
```

--------------------------------

### Store API

Source: https://tryquickdraw.com/docs/core

Methods for managing the document state and snapshots.

```APIDOC
## Store Methods

### Description
Methods to manage the document data model.

- **getSnapshot()** - Returns the current document state as JSON.
- **loadSnapshot(snap, source)** - Restores a snapshot.
- **listen(callback)** - Subscribes to document changes.
- **undo()** - Reverts the last action.
- **redo()** - Re-applies the last undone action.
```

--------------------------------

### Quickdraw Bridge Methods

Source: https://tryquickdraw.com/docs/react-native

Promise-based methods exposed via the component ref to interact with the drawing engine.

```APIDOC
## Bridge Methods

### Methods
- **getSnapshot()** - Returns a Promise resolving to the current board state as JSON.
- **loadSnapshot(snapshot)** - Loads a provided JSON snapshot into the board.
- **exportPng(options)** - Returns a Promise resolving to a data URL of the board as a PNG. Options include { scale: number }.
- **setTool(toolName)** - Sets the active drawing tool.
- **undo()** - Performs an undo operation on the board.
```

--------------------------------

### Snapshotting the Document

Source: https://tryquickdraw.com/docs/data-model

Capture or restore the entire document state as a JSON snapshot.

```javascript
const snap = store.getSnapshot()   // the whole document, plain JSON
store.loadSnapshot(snap, 'remote')
```

--------------------------------

### Implement client-side sync

Source: https://tryquickdraw.com/docs/sync

Uses the store listener to broadcast local changes and applies remote diffs to the store. The 'source' tag prevents echo loops and isolates remote changes from the local undo stack.

```javascript
const { store } = board.editor
 
store.listen((diff) => socket.send(JSON.stringify(diff)), { source: 'user' })
socket.onmessage = (e) => store.applyDiff(JSON.parse(e.data), 'remote')
```

--------------------------------

### Configure drawing styles

Source: https://tryquickdraw.com/docs/headless

Apply styles to current selection or upcoming shapes, and retrieve current style settings.

```javascript
editor.setStyle('color', 'blue')   // twelve named colors — see Theming
editor.setStyle('size', 'l')       // 's' | 'm' | 'l' | 'xl'
editor.setStyle('dash', 'dashed')  // 'draw' | 'solid' | 'dashed' | 'dotted'
editor.setStyle('fill', 'semi')    // 'none' | 'semi' | 'solid' | 'pattern'
 
editor.currentStyles()             // what the next shape will look like
editor.on('styles', refresh)
```

--------------------------------

### board.current.exportPng

Source: https://tryquickdraw.com/docs/export-images

Exports the board as a data URL for use in React Native environments.

```APIDOC
## board.current.exportPng(options)

### Description
Exports the board as a data URL, suitable for sharing sheets or file system writes in React Native.

### Parameters
- **options** (object) - Required
  - **scale** (number) - Optional - Output pixel density.

### Returns
- **Promise<string>** - Resolves with the image as a data URL.
```

--------------------------------

### Quickdraw Component Props

Source: https://tryquickdraw.com/docs/react-native

Configuration props for the Quickdraw component to control theme, grid, and UI behavior.

```APIDOC
## Quickdraw Component Props

### Props
- **theme** ('light' | 'dark') - Optional - Sets the board theme, defaults to 'light'.
- **grid** ('none' | 'lines' | 'ruled' | 'dots' | 'crosses' | 'iso') - Optional - Sets the grid style, defaults to 'lines'.
- **readonly** (boolean) - Optional - Locks input, defaults to false.
- **hideUi** (boolean) - Optional - Hides the toolbar, defaults to false.
- **themeToggle** (boolean) - Optional - Enables theme switch in board-menu, defaults to true.
- **gridControl** (boolean) - Optional - Enables grid switch in board-menu, defaults to true.
- **watermark** (boolean) - Optional - Displays the corner mark, defaults to true.
- **snapshot** (JSON) - Optional - Initial document state loaded on init.
- **styles** (object) - Optional - Initial pen styles.
- **style** (RN style) - Optional - Style object passed to the WebView container.
```

--------------------------------

### Camera API

Source: https://tryquickdraw.com/docs/headless

Methods for controlling the viewport and camera movement.

```APIDOC
## Camera API

### Methods
- `editor.fitContent({ animate })`: Zooms to fit content.
- `editor.setCamera({ x, y, z })`: Sets camera position and zoom.
- `editor.pan(dx, dy)`: Pans the camera.
- `editor.zoomAt(sx, sy, zoom)`: Zooms at a specific screen point.
- `editor.screenToPage(sx, sy)`: Converts screen coordinates to page coordinates.
```

--------------------------------

### Control the Editor

Source: https://tryquickdraw.com/docs/core

Interact with the editor instance to change tools, themes, grid settings, and manage selection.

```javascript
const { editor } = board
 
editor.setTool('draw')     // 'select' | 'hand' | 'draw' | 'highlight' | 'eraser'
                           // | 'laser' | 'arrow' | 'line' | 'geo' | 'text' | 'note'
editor.setTheme('dark')
editor.setGrid('lines')
editor.fitContent({ animate: 220 })
editor.setStyle('color', 'blue')
editor.selectAll()
editor.deleteSelection()
 
editor.on('tool', () => {})        // also: 'theme', 'grid', 'selection',
                                   // 'camera', 'history', 'styles'
```

--------------------------------

### editor.exportImage

Source: https://tryquickdraw.com/docs/export-images

Exports the board or specific shapes as a blob with configurable background, scale, and margin settings.

```APIDOC
## editor.exportImage(options)

### Description
Exports the board content or a specific selection of shapes as a blob.

### Parameters
- **options** (object) - Required
  - **background** (boolean) - Optional - If true, includes paper background; if false, exports as transparent.
  - **scale** (number) - Optional - Output pixel density.
  - **margin** (number) - Optional - Padding around the content.
  - **ids** (Set) - Optional - A Set of shape IDs to export only those specific shapes.

### Returns
- **Promise<Blob>** - Resolves with the exported image blob.
```

--------------------------------

### Writing Data to the Store

Source: https://tryquickdraw.com/docs/data-model

Perform mutations using put, update, or remove, and group multiple operations into a single transaction.

```javascript
store.put(record)                  // add or replace
store.update(id, { x: 100 })       // shallow patch
store.remove([id1, id2])
store.transact(() => {             // many writes, one diff, one undo entry
  store.put(a)
  store.update(b.id, { w: 200 })
})
```

--------------------------------

### Tools API

Source: https://tryquickdraw.com/docs/headless

Methods for managing drawing tools and geometric shapes.

```APIDOC
## Tools API

### Methods
- `editor.setTool(tool)`: Sets the active tool ('draw', 'select', 'hand', 'highlight', 'eraser', 'laser', 'arrow', 'line', 'geo', 'text', 'note').
- `editor.setGeoKind(kind)`: Sets the geometric shape kind ('rectangle', 'ellipse', 'triangle', 'diamond', 'hexagon', 'star').
- `editor.on('tool', callback)`: Listen for tool changes.
```

--------------------------------

### Managing History

Source: https://tryquickdraw.com/docs/data-model

Control undo/redo operations and listen for history state changes.

```javascript
store.undo(); store.redo()
store.canUndo; store.canRedo
store.listenHistory(fn)            // can-undo/can-redo changed
```

--------------------------------

### Basic Quickdraw Component Usage

Source: https://tryquickdraw.com/docs/react-native

Implement the Quickdraw component within a React functional component using a ref for interaction.

```javascript
import { useRef } from 'react'
import { Quickdraw } from '@quickdrawjs/react-native'
 
export default function Board() {
  const board = useRef(null)
  return (
    <Quickdraw
      ref={board}
      theme="dark"
      grid="dots"
      onChange={(diff) => console.log('changed', diff)}
      style={{ flex: 1 }}
    />
  )
}
```

--------------------------------

### Quickdraw Component

Source: https://tryquickdraw.com/docs/react

The primary React component for rendering the Quickdraw board. It supports various configuration props for themes, grids, and UI behavior.

```APIDOC
## <Quickdraw />

### Description
The Quickdraw component renders an interactive drawing board within a container. It supports both controlled and uncontrolled modes.

### Props
- **theme** ('light' | 'dark') - Optional - The visual theme of the board. Default: 'light'.
- **grid** ('none' | 'lines' | 'ruled' | 'dots' | 'crosses' | 'iso') - Optional - The backdrop style. Default: 'lines'.
- **readonly** (boolean) - Optional - If true, locks input and hides the toolbar. Default: false.
- **hideUi** (boolean) - Optional - If true, hides the stock toolbar. Default: false.
- **themeToggle** (boolean) - Optional - Show the theme switch in the board menu. Default: true.
- **gridControl** (boolean) - Optional - Show the grid switch in the board menu. Default: true.
- **watermark** (boolean) - Optional - The corner mark; mount-time only. Default: true.
- **store** (Store) - Optional - External store for controlled usage.
- **snapshot** (JSON) - Optional - Document loaded on mount (ignored when store is given).
- **camera** ({ x, y, z }) - Optional - Initial camera position.
- **styles** ({ color, size, dash, fill, font }) - Optional - Initial pen styles.
- **autoFit** (boolean) - Optional - Fit content on mount and container resize. Default: false.

### Callbacks
- **onMount(editor, ui)** - Fires once after the board is ready.
- **onChange(diff, source, editor)** - Fires on every document change.
- **onSelectionChange(ids, editor)** - Fires when selection changes.
- **onThemeChange(themeId, editor)** - Fires when the in-board theme switch is used.
- **onGridChange(gridId, editor)** - Fires when the in-board grid switch is used.
- **onSave(blob, background)** - Fires on toolbar PNG export.
```

--------------------------------

### Accessing Records in the Store

Source: https://tryquickdraw.com/docs/data-model

Retrieve individual records, collections, or metadata from the store.

```javascript
store.get(id)        // one record
store.shapes()       // all drawable records
store.ids()          // every id
store.size           // record count
```

--------------------------------

### Disable watermark in plain JavaScript

Source: https://tryquickdraw.com/docs/watermark

Pass the watermark option as false during the initialization of the Quickdraw instance.

```javascript
// plain JS
createQuickdraw({ container, watermark: false })
```

--------------------------------

### Control camera view

Source: https://tryquickdraw.com/docs/headless

Adjust the viewport, zoom, and pan the canvas programmatically.

```javascript
editor.fitContent({ animate: 220 })     // zoom to fit
editor.setCamera({ x, y, z })
editor.pan(dx, dy)                      // screen-space delta
editor.zoomAt(sx, sy, 1.2)              // zoom about a screen point
editor.screenToPage(sx, sy)
editor.on('camera', onMove)
```

--------------------------------

### Styles API

Source: https://tryquickdraw.com/docs/headless

Methods for managing shape styles and appearance.

```APIDOC
## Styles API

### Methods
- `editor.setStyle(property, value)`: Sets style properties (color, size, dash, fill).
- `editor.currentStyles()`: Returns the current style configuration.
- `editor.on('styles', callback)`: Listen for style changes.
```

--------------------------------

### Controlled usage with a store

Source: https://tryquickdraw.com/docs/react

Pass a custom store to manage document state independently of the component lifecycle.

```jsx
import { Quickdraw, useQuickdrawStore } from '@quickdrawjs/react'
 
function App({ savedSnapshot }) {
  const store = useQuickdrawStore(savedSnapshot) // stable across renders
  return <Quickdraw store={store} />
}
```

--------------------------------

### Bridge Method Interaction

Source: https://tryquickdraw.com/docs/react-native

Use the component ref to call asynchronous methods for snapshots, exports, and tool management.

```javascript
const snapshot = await board.current.getSnapshot()   // plain JSON
await board.current.loadSnapshot(saved)
const png = await board.current.exportPng({ scale: 2 })  // data URL
board.current.setTool('draw')
board.current.undo()
```

--------------------------------

### Configure selective UI elements

Source: https://tryquickdraw.com/docs/headless

Disable specific UI components like theme toggles or grid controls while keeping the toolbar.

```javascript
createQuickdraw({ container, themeToggle: false, gridControl: false })
```

--------------------------------

### History API

Source: https://tryquickdraw.com/docs/headless

Methods for managing undo and redo operations.

```APIDOC
## History API

### Methods
- `store.undo()`: Reverts the last action.
- `store.redo()`: Re-applies the last undone action.
- `store.canUndo` / `store.canRedo`: Boolean status of history stack.
- `store.listenHistory(callback)`: Listen for history changes.
```

--------------------------------

### Exporting images via the API

Source: https://tryquickdraw.com/docs/export-images

Use the exportImage method to programmatically export the board or specific shapes with custom settings.

```javascript
const blob = await editor.exportImage({
  background: true,   // paper background; false = transparent
  scale: 2,           // output pixel density
  margin: 48,         // page-space padding around the content
  ids: null,          // a Set of shape ids to export just those
})
```

```javascript
const blob = await editor.exportImage({
  background: false,
  ids: new Set(editor.selection),
})
```

--------------------------------

### Selection API

Source: https://tryquickdraw.com/docs/headless

Methods for manipulating selected shapes.

```APIDOC
## Selection API

### Methods
- `editor.setSelection(ids)`: Sets the current selection.
- `editor.selectAll()`: Selects all shapes.
- `editor.duplicateSelection()`: Duplicates selected shapes.
- `editor.deleteSelection()`: Deletes selected shapes.
- `editor.bringToFront()` / `editor.sendToBack()`: Adjusts layer order.
- `editor.selection`: Returns a Set of selected IDs.
- `editor.selectionBounds()`: Returns bounds of the selection.
```

--------------------------------

### Editor API

Source: https://tryquickdraw.com/docs/core

Methods available on the editor instance to manipulate the board state and tools.

```APIDOC
## Editor Methods

### Description
Methods to control tools, themes, and board content.

- **setTool(tool)** - Sets the active tool ('draw', 'select', 'hand', 'highlight', 'eraser', 'laser', 'arrow', 'line', 'geo', 'text', 'note').
- **setTheme(theme)** - Updates the board theme.
- **setGrid(grid)** - Updates the grid style.
- **fitContent(options)** - Adjusts the view to fit content.
- **setStyle(property, value)** - Updates pen styles.
- **selectAll()** - Selects all elements on the board.
- **deleteSelection()** - Deletes currently selected elements.
- **on(event, callback)** - Registers event listeners for changes.
```

--------------------------------

### Applying Remote Changes

Source: https://tryquickdraw.com/docs/data-model

Apply external diffs or snapshots to the store, marking them as remote to exclude them from the local undo stack.

```javascript
store.applyDiff(diff, 'remote')
store.loadSnapshot(snap, 'remote')
```

--------------------------------

### Intercepting exports with onSave

Source: https://tryquickdraw.com/docs/export-images

Use the onSave callback to handle the exported blob manually, such as uploading it to a server.

```jsx
<Quickdraw onSave={async (blob, background) => {
  const form = new FormData()
  form.append('file', blob, 'board.png')
  await fetch('/api/upload', { method: 'POST', body: form })
}} />
```

```javascript
// plain JS
createQuickdraw({ container, onSave: (blob, background) => upload(blob) })
```

--------------------------------

### Exporting images in React Native

Source: https://tryquickdraw.com/docs/export-images

Use exportPng to retrieve a data URL for sharing or file system operations in a React Native environment.

```javascript
const dataUrl = await board.current.exportPng({ scale: 2 })
```

--------------------------------

### Set shape color

Source: https://tryquickdraw.com/docs/theming

Apply a color name to shapes; the actual rendered color adapts based on the current theme.

```javascript
editor.setStyle('color', 'violet')
```

--------------------------------

### Transaction Diff Structure

Source: https://tryquickdraw.com/docs/data-model

The schema for diff objects emitted during transactions.

```json
{
  added:   { [id]: record },
  removed: { [id]: record },
  updated: { [id]: [from, to] }
}
```

--------------------------------

### Disable built-in controls

Source: https://tryquickdraw.com/docs/theming

Hide the default theme and grid controls in the board menu when using custom application controls.

```javascript
createQuickdraw({ container, themeToggle: false, gridControl: false })
```

```jsx
<Quickdraw themeToggle={false} gridControl={false} />
```

--------------------------------

### Disable watermark in React Native

Source: https://tryquickdraw.com/docs/watermark

Use the watermark prop set to false within the React Native Quickdraw component.

```jsx
// React Native
<Quickdraw watermark={false} />
```

--------------------------------

### Disable watermark in React

Source: https://tryquickdraw.com/docs/watermark

Set the watermark prop to false on the Quickdraw component to hide the corner mark.

```jsx
<Quickdraw watermark={false} />
```

--------------------------------

### Manipulate selection

Source: https://tryquickdraw.com/docs/headless

Programmatically select, duplicate, delete, or reorder shapes on the canvas.

```javascript
editor.setSelection([id1, id2])
editor.selectAll()
editor.selection                   // a Set of ids
editor.selectionBounds()           // page-space bounds or null
editor.duplicateSelection()
editor.deleteSelection()
editor.bringToFront(); editor.sendToBack()
editor.on('selection', refresh)
```
Tokens:
Raw