Interactive Playground
Experience the Canvus SDK in action — a fully interactive design editor running in your browser.
Try it out! Select elements on the canvas to edit their styles in real-time. Use the tools in the toolbar to draw new elements, pan with Space, and zoom with scroll.
⚠️
The toolbar, layers panel, and design inspector are the “host app” — UI you build around Canvus. The canvas workspace in the center is powered by the Canvus SDK. Look for the YOUR APP and CANVUS SDK badges in the demo.
What This Demonstrates
| Feature | Description |
|---|---|
| Layers Panel · Your App | Tree view of all mounted HTML nodes with hierarchy visualization |
| Design Inspector · Your App | Live CSS property editing — layout, spacing, fill, border, typography |
| Canvas Workspace · Canvus SDK | Infinite pan/zoom canvas with dot grid, snap alignment guides, and selection overlays |
| Drawing Tools · Canvus SDK | Box and Text drawing tools to create new elements on the canvas |
| Shadow DOM Isolation · Canvus SDK | All content renders inside Shadow DOM — zero style leakage |
| Flat String Bridge · Canvus SDK | Every visual edit produces clean, semantic HTML output |
Keyboard Shortcuts
| Key | Action |
|---|---|
V | Switch to Move tool |
R | Switch to Box drawing tool |
T | Switch to Text drawing tool |
Space + Drag | Pan the canvas |
Scroll | Zoom in/out at cursor |
Double-click | Edit text content inline |
Ready to build your own? Check out the Quick Start guide or explore the full SDK Reference.