Import and export

Images, SVG and files out; files, images, text and links in. Copy and paste that works between tabs and apps, and exports rendered on a server.

Export images#

On the web, the app object exports what's selected, or the whole page when nothing is:

await app.downloadPng({ scale: 2, padding: 32, background: true })
app.downloadSvg({ theme: 'light' })

await app.copyAsPng() // to the clipboard, ready to paste into a doc or chat
await app.copyAsSvg()

const blob = await app.exportPng({ ids: ['shape:abc'], background: false })
const svg = app.exportSvg()

Option	What it does
`ids`	Which shapes. Defaults to the selection, then the whole page
`scale`	Output scale (2 for crisp images on high-density screens)
`padding`	Space around the shapes, in pixels
`background`	Include the page background, or export transparent
`theme`	`'light'`, `'dark'` or a full theme object
`pixelRatio`	PNG only. Defaults to the device's
`maxPixels`	PNG only. Caps the size, since browsers fail on huge canvases
`fontCss`	SVG only. `@font-face` rules to embed, so the file renders its hand-drawn text anywhere

Export on a server#

The core renders SVG without a browser. Use it for thumbnails, previews and emails:

thumbnail.tsts

import { createEditor, exportToSvgString } from 'canvasflow'

export function thumbnail(snapshot: Parameters<ReturnType<typeof createEditor>['loadSnapshot']>[0]) {
  const editor = createEditor({ snapshot })
  const result = exportToSvgString(editor, { padding: 24, theme: 'light' })
  editor.dispose()
  return result?.svg ?? null
}

The figures on these docs pages are made this way, at build time.

Files#

.canvasflow files are JSON: the document's records with a schema version, so files from older versions open and migrate cleanly.

await app.saveFile() // save dialog where supported, download elsewhere
await app.openFile() // file picker, then loads it

// Or by hand:
import { parseFile, toFile } from 'canvasflow'

const text = JSON.stringify(toFile(editor.getSnapshot()))
const snapshot = parseFile(text)
if (snapshot) editor.loadSnapshot(snapshot)

Copy and paste#

Copy and paste go through the system clipboard, so they work between tabs, between apps built on CanvasFlow, and with other apps:

You paste	You get
Shapes copied from CanvasFlow	The same shapes, with bindings and assets
An image	An image shape (uploaded through your asset store, if you have one)
SVG markup	An image
A YouTube, Vimeo, Figma or similar link	An embed
Any other link or text	A text shape

Pasted content lands where the pointer is, or in the middle of the view. ⌘D duplicates in place without touching the clipboard.

Drag and drop#

Drop images or .canvasflow files anywhere on the canvas. Several images are fanned out so they don't stack. Your own panels can drag shapes onto the canvas too (see Plugins).

Content between documents#

For "copy to another board" or templates, move content rather than snapshots. Content is a set of shapes with everything they need (bindings, assets, frame children):

const content = editor.getContent(editor.getSelectedIds())
// …later, in another editor:
otherEditor.putContent(content!, { select: true })

Ids are remapped on the way in, so you can paste the same content many times.