SketchAPI.Sketchpad
The Sketchpad JSON format is a JSON-based file format that describes a Sketchpad App instance. It is used to store and exchange Sketchpad App configurations between applications and services.
Table of Contents
SketchAPI.Sketchpad
namespace SketchAPI {
export interface Sketchpad {
/** API version identifier (2024) */
sketchApi: string;
/** Ancestry chain showing fork history */
ancestry: string[];
/** Unique app identifier (UUID) */
id: string;
/** Creation timestamp (2024-10-26T10:00:00Z) */
dateCreated: string;
/** Last update timestamp (2024-10-30T08:30:00Z) */
dateUpdated: string;
/** App version identifier (1.0.0) */
version: string;
/** Display name of the app */
name: string;
/** App purpose and description */
description: string;
/** User-defined metadata */
metadata: {
[key: string]: any;
};
/** Tags for app categorization */
tags: string[];
/** Canvas configuration */
canvas: {
/** Whether template modifications are allowed */
allowTemplateEditing: boolean;
/** Rendering engine mode */
renderMode: 'svg' | 'vector' | 'bitmap';
/** Default styling configuration */
defaultStyles: {
/** Default stroke color */
strokeColor: string;
/** Default fill color */
fillColor: string;
/** Default stroke width */
strokeWidth: number;
};
};
/** App settings */
settings: {
/** Interface language code */
language: string;
/** Autosave interval in minutes (-1 = disabled, 0 = immediate) */
autosave: number;
/** Whether to restore previous settings */
restoreSettings: boolean;
/** History tracking configuration */
history: {
/** Whether to auto-select layers that change */
autoSelectChangedLayers: boolean;
/** Whether redo operations are available */
canRedo: boolean;
/** Whether undo operations are available */
canUndo: boolean;
/** Maximum history steps (-1 = unlimited) */
limit: number;
/** How history entries are grouped */
groupBy: 'operation' | 'save';
/** History tracking mode */
mode: 'vector';
};
/** Keyboard shortcut mappings */
hotkeys: {
[key: string]: string;
};
/** UI theme configuration */
theme: {
/** Background color value */
background: string;
/** Foreground color value */
foreground: string;
/** Accent color value */
accent: string;
};
};
/** Available drawing tools */
tools: {
[toolName: string]: {
/** Tool-specific configuration */
properties: {
[key: string]: any;
};
/** Tool description text */
description: string;
/** Tool icon identifier */
icon: string;
/** Keyboard shortcut key */
hotkey: string;
/** Hover tooltip text */
tooltip: string;
/** Tool category grouping */
group: string;
};
};
/** Asset resources */
assets: {
/** Path to clipart directory */
clipart: string;
/** Available font resources */
fonts: any[];
/** Gradient preset definitions */
gradients: any[];
/** Pattern preset definitions */
patterns: any[];
/** Layer template definitions */
layers: Array<{
/** Layer type identifier */
type: string;
[key: string]: any;
}>;
};
/** UI component configuration */
ui: {
/** Export panel settings */
ExportPane: {
/** Whether panel is enabled */
enabled: boolean;
/** Panel component list */
components: ExportPaneComponent[];
};
/** Primary toolbar settings */
PrimaryToolbar: {
/** Whether toolbar is enabled */
enabled: boolean;
/** Whether to mirror for RTL languages */
mirrorInRTL: boolean;
/** Toolbar position */
position: 'left';
/** Primary action commands */
primaryCommands: PrimaryCommand[];
/** Secondary action commands */
secondaryCommands: SecondaryCommand[];
};
/** Settings panel configuration */
SettingsPane: {
/** Whether panel is enabled */
enabled: boolean;
/** Panel component list */
components: SettingsPaneComponent[];
};
/** Welcome message configuration */
WelcomeMessage: {
/** Whether message is enabled */
enabled: boolean;
};
/** Watermark configuration */
EmbeddedWatermark: {
/** Whether watermark is enabled */
enabled: boolean;
};
};
}
// Interface Component Types
/** Export panel component types */
type ExportPaneComponent =
| 'DownloadPaneTrigger'
| 'DownloadRegion'
| 'PrintPaneTrigger'
| QuickDownload;
/** Primary toolbar command types */
type PrimaryCommand =
| 'select'
| 'move'
| 'rotate'
| 'resize'
| 'attach'
| 'delete';
/** Secondary toolbar command types */
type SecondaryCommand =
| 'newDocument'
| 'openDocument'
| 'exportDocument'
| 'settings';
/** Settings panel component types */
type SettingsPaneComponent =
| 'AutoSaveToggle'
| 'HotkeysPanel'
| 'LanguageSelector'
| 'MeasurementUnitsSelector'
| 'PersistentStorageToggle'
| 'SnapToGuidesToggle'
| 'SurfacePanelTrigger'
| 'ThemePanel';
// Export-Related Types
/** Quick download configuration */
interface QuickDownload {
/** Component type identifier */
type: 'QuickDownload';
/** Supported export formats */
formats: ExportFormat[];
}
/** Supported export format types */
type ExportFormat =
| 'JPEG'
| 'PNG'
| 'PDF'
| 'SVG'
| 'SKETCHPAD';⭐️ Example
{
"sketchApi": "2024",
"ancestry": [
"originalAppJSON_UUID",
"fork1_UUID",
"fork2_UUID"
],
"id": "550e8400-e29b-41d4-a716-446655440000",
"dateCreated": "2024-10-26T10:00:00Z",
"dateUpdated": "2024-10-30T08:30:00Z",
"version": "1.0.0",
"name": "Invent Your Own Gadget",
"description": "Create your own invention using a selection of unique components and tools. Combine, customize, and experiment to build something new!",
"metadata": {
"author": "SketchPad Team",
"category": "Education",
"license": "MIT"
},
"tags": [
"branding",
"social",
"template"
],
"canvas": {
"allowTemplateEditing": true,
"renderMode": "svg",
"defaultStyles": {
"strokeColor": "black",
"fillColor": "white",
"strokeWidth": 2
}
},
"settings": {
"language": "en",
"autosave": -1,
"restoreSettings": true,
"history": {
"autoSelectChangedLayers": true,
"canRedo": true,
"canUndo": true,
"limit": -1,
"groupBy": "operation",
"mode": "vector"
},
"hotkeys": {
"0": "select",
"cmd+s": "save",
"cmd+z": "undo",
"c": "circle",
"r": "rectangle",
"l": "line",
"t": "text",
"delete": "delete",
"escape": "deselect"
},
"theme": {
"background": "#302e40",
"foreground": "#ffffff",
"accent": "#ff0000"
}
},
"tools": {
"circle": {
"properties": {
"radius": 50,
"fillColor": "white",
"strokeColor": "black",
"strokeWidth": 2
},
"description": "Draw a circle",
"icon": "circle",
"hotkey": "c",
"tooltip": "Draw a circle",
"group": "shapes"
},
"rectangle": {
"properties": {
"width": 100,
"height": 60,
"fillColor": "white",
"strokeColor": "black",
"strokeWidth": 2
},
"description": "Draw a rectangle",
"icon": "square",
"hotkey": "r",
"tooltip": "Draw a rectangle",
"group": "shapes"
}
},
"assets": {
"clipart": "path/to/clipart",
"fonts": [],
"gradients": [],
"patterns": [],
"layers": [
{
"type": "star",
"points": 5,
"radius": 50,
"fillColor": "white",
"strokeColor": "black",
"strokeWidth": 2
}
]
},
"ui": {
"ExportPane": {
"enabled": true,
"components": [
"DownloadPaneTrigger",
"DownloadRegion",
{
"type": "QuickDownload",
"formats": [
"JPEG",
"PNG",
"PDF",
"SVG",
"GADGET"
]
},
"PrintPaneTrigger"
]
},
"PrimaryToolbar": {
"enabled": true,
"mirrorInRTL": true,
"position": "left",
"primaryCommands": [
"select",
"move",
"rotate",
"resize",
"attach",
"delete"
],
"secondaryCommands": [
"newDocument",
"openDocument",
"exportDocument",
"settings"
]
},
"SettingsPane": {
"enabled": true,
"components": [
"AutoSaveToggle",
"HotkeysPanel",
"LanguageSelector",
"MeasurementUnitsSelector",
"PersistentStorageToggle",
"SnapToGuidesToggle",
"SurfacePanelTrigger",
"ThemePanel"
]
},
"WelcomeMessage": {
"enabled": false
},
"EmbeddedWatermark": {
"enabled": false
}
}
}🕊️ Migration to v2024.11.04
- Write JSONPatch
- Reference new properties in SketchAPI
Added Properties
-
json.name- new field (string) -
json.description- new field (string) -
json.sketchApi- new field (string) -
json.canvas.defaultStyles←json.defaults -
json.canvas.allowTemplateEditing(boolean) -
json.canvas.renderMode- new field (string)
Updated Properties
-
json.settings.hotkeys- Now supports all keyboard shortcuts -
json.settings.theme- Schema keys updated -
json.settings.history.groupBy- Added option for history tracking (operation|save) -
json.tools- Updated schema
Server Only
-
json.id- new field (UUID) -
json.dateCreated- new field (timestamp) -
json.dateUpdated- new field (timestamp) -
json.ancestry=[]- new field (array) -
json.version=1.0.0- new field (string) -
json.tags=["branding", "social", "template"](for document filtering) -
json.metadata- new field (object)