Canvas Studio Demo

Reusable, configurable canvas editor with multiple instances

1. Full-Featured Editor

Complete canvas editor with all tools, theme support, and save functionality. Changes: 0

2. Read-Only Viewer

Display-only mode with predefined content, no toolbar

3. Dark Theme - Shape Tools Only

Dark mode editor with pen and highlighter tools disabled

4a. Compact Editor

Smaller instance with grid overlay

4b. Another Instance

Independent state, can exist alongside others

Usage Instructions

Select Tool: Click and drag objects

Pen Tool: Draw freehand strokes

Highlighter: Semi-transparent drawing

Shape Tool: Create various shapes

Keyboard Shortcuts:

Ctrl/Cmd + D: Duplicate selected object
Ctrl/Cmd + C: Copy
Ctrl/Cmd + V: Paste
Delete/Backspace: Remove selected object

Code Example

import CanvasStudio from '@/components/CanvasStudio';

// Full-featured editor
<CanvasStudio 
  className="h-[600px]"
  theme="light"
  onChange={(data) => console.log('Changed:', data)}
  onSave={(data) => console.log('Saved:', data)}
/>

// Read-only viewer
<CanvasStudio 
  className="h-[400px]"
  readOnly
  initialData={savedCanvasData}
  components={{ toolbar: false }}
/>

// Custom configuration
<CanvasStudio
  theme="dark"
  disabledTools={['pen', 'highlight']}
  components={{ propertiesPanel: false }}
  pageOptions={{ showGrid: true }}
/>