Configuration

Control how your SketchAPI instance looks, behaves, and what tools are available — all through the Sketchpad config object.

For the full TypeScript schema, see the App Config Reference.

Table of Contents

• Canvas
• Settings
• Theme
• Hotkeys
• UI Panels
• Export Defaults

---

Canvas

Set the rendering mode and default drawing styles:

const sketchpad = new Sketchpad({
  canvas: {
    renderMode: 'svg',
    allowTemplateEditing: false,
    defaultStyles: {
      strokeColor: '#333',
      fillColor: 'transparent',
      strokeWidth: 2
    }
  }
})

Property	Type	Description
renderMode	'svg' \| 'vector' \| 'bitmap'	Rendering engine mode
allowTemplateEditing	boolean	Whether users can modify template layers
defaultStyles.strokeColor	string	Default stroke color for new objects
defaultStyles.fillColor	string	Default fill color for new objects
defaultStyles.strokeWidth	number	Default stroke width for new objects

---

Settings

Workspace behavior, history, autosave, and language:

settings: {
  language: 'en',
  autosave: 5,
  restoreSettings: true,
  history: {
    canUndo: true,
    canRedo: true,
    limit: -1,
    groupBy: 'operation'
  }
}

Property	Type	Description
language	string	Interface language code
autosave	number	Autosave interval in minutes (-1 = disabled, 0 = immediate)
restoreSettings	boolean	Restore previous session settings on load
history.canUndo	boolean	Enable undo
history.canRedo	boolean	Enable redo
history.limit	number	Max history steps (-1 = unlimited)
history.groupBy	'operation' \| 'save'	Group history by individual operations or saves

---

Theme

Customize the interface colors:

settings: {
  theme: {
    background: '#302e40',
    foreground: '#ffffff',
    accent: '#ff0000'
  }
}

---

Hotkeys

Map keyboard shortcuts to tools and actions:

settings: {
  hotkeys: {
    'cmd+z': 'undo',
    'cmd+s': 'save',
    'c': 'circle',
    'r': 'rectangle',
    't': 'text',
    'delete': 'delete',
    'escape': 'deselect'
  }
}

---

UI Panels

Enable, disable, and customize the three main UI panels. See Components for the full list of panel components.

ui: {
  PrimaryToolbar: {
    enabled: true,
    mirrorInRTL: true,
    position: 'left',
    primaryCommands: ['select', 'move', 'rotate', 'resize', 'attach', 'delete'],
    secondaryCommands: ['newDocument', 'openDocument', 'exportDocument', 'settings']
  },
  ExportPane: {
    enabled: true,
    components: [
      'DownloadPaneTrigger',
      'DownloadRegion',
      { type: 'QuickDownload', formats: ['JPEG', 'PNG', 'PDF', 'SVG', 'SKETCHPAD'] },
      'PrintPaneTrigger'
    ]
  },
  SettingsPane: { enabled: true },
  WelcomeMessage: { enabled: false },
  EmbeddedWatermark: { enabled: false }
}

---

Export Defaults

Set default export format and quality in the document settings:

settings: {
  exportDPI: 72,
  exportFormat: 'png',
  exportQuality: 0.95
}

Property	Type	Description
exportDPI	number	Output resolution in dots per inch
exportFormat	string	Default format (png, jpg, svg)
exportQuality	number	Quality from 0 to 1 (for lossy formats)