📦 @goodandready/dsh-live-canvas
Interactive Visual Frontend Studio, Retool-Style CRUD Admin Engine, Time-Travel Debugger, 1-Click Multi-Deploy (Vercel, Cloudflare, Netlify, Gist), Figma Vector Bridge, Effective HTML Artifacts, UI Sound FX, and 31 Agent Tools for DeepSeek Harness
🇬🇧 English •
🇷🇺 Русский •
🇨🇳 中文说明
⭐ If you like this plugin, please star it on GitHub — it shows me that the plugin is useful to you and motivates me to keep developing it.
🐛 If you find a bug or would like to request a feature, open a GitHub issue in any language — I will review your proposal and implement useful suggestions in a future plugin version.
|
⚡ Overview & The Problem
When coding assistants work in standard terminal or chat windows, they typically produce static code snippets or markdown blocks. This creates critical friction:
- No Live Feedback: Developers cannot see or test interactivity, form validations, animations, or responsive breakpoints without manually copying code into a local build toolchain.
- Context Fragmentation: Reviewing UI changes requires switching back and forth between IDE, terminal, browser, and design tools.
- Verbose Text Overload: Explaining architecture, roadmaps, and wireframes in raw text produces walls of markdown that are difficult to scan.
The Solution: dsh-live-canvas
Inspired by Thariq Shihipar's The Unreasonable Effectiveness of HTML, Plannotator, and modern visual studios (Figma, Retool, V0), @goodandready/dsh-live-canvas transforms DeepSeek Harness into a complete, standalone frontend development suite. It provides in-memory ESM bundling, real-time SSE hot-reloading, in-chat interactive preview cards, a split-view code editor, time-travel history debugging, 1-click cloud deployment, and 30 dedicated Agent Tools.
🧭 Sidebar Layouts & Surface Compatibility
@goodandready/dsh-live-canvas supports all DSH navigation layouts with zero external dependencies:
| Environment | Supported Surface | Capabilities |
|---|
| DSH 0.1.5-alpha.1+ (Native) | Native Right Sidebar (sidebarRightTabs, sidebar.right.pane.tab) | Full Live Canvas workspace tab + native file viewer for dsh-resource://file (.html, .jsx, .tsx, .svg, .mermaid, .md). |
| Legacy DSH Profiles | dsh-better-sidebar integration | Dedicated tab (live-canvas) and registered file viewer (live-canvas-viewer). |
| Dual Profiles (Both enabled) | Coexists seamlessly | Distinct, deterministic IDs (@goodandready/dsh-live-canvas vs live-canvas), no duplicate mounting, independent cleanup disposers. |
| Minimal / Standalone Profiles | Standalone Drawer & Modals | Self-contained slide-over drawer with hotkeys (Alt+C), zero reliance on external sidebar plugins. |
🏛️ System Architecture
graph TD
classDef agent fill:#1e1b4b,stroke:#6366f1,stroke-width:2px,color:#fff;
classDef core fill:#064e3b,stroke:#10b981,stroke-width:2px,color:#fff;
classDef ui fill:#451a03,stroke:#f59e0b,stroke-width:2px,color:#fff;
classDef sandbox fill:#18181b,stroke:#71717a,stroke-width:2px,color:#fff;
Agent[🤖 DeepSeek Harness Agent / 30 Tools]:::agent
Store[💾 PreviewStore LRU Cache & History Snapshots]:::core
Watcher[📁 WorkspaceWatcher File Change Detection]:::core
Bundler[⚡ Smart Recursive ESM Bundler & Transpiler]:::core
Deployer[🌍 Multi-Platform Deploy Engine]:::core
FigmaBridge[🎨 Figma Vector Bridge]:::core
SoundEngine[🔊 Web Audio FX Synthesis]:::core
Themes[🎨 AI Theme Tokens Engine]:::core
WebUI[💻 DSH WebUI BetterSidebar Tab]:::ui
ChatCards[💬 In-Chat Live Preview Tool Cards]:::ui
EditorDrawer[📝 Split-View Code Editor Drawer]:::ui
TimeTravelUI[⏳ Time-Travel History Scrubber]:::ui
DeployModal[🌍 Instant Deploy Dialog]:::ui
SandboxFrame[🛡️ Sandboxed Iframe Preview Runtime]:::sandbox
WYSIWYG[✏️ Double-Click Inline WYSIWYG Editor]:::sandbox
DnD[↕️ Drag & Drop Section Reordering]:::sandbox
Blueprint[📐 Blueprint Grayscale Filter Mode]:::sandbox
Agent -->|live_canvas_* tools| Store
Watcher -->|Auto file sync| Store
Store --> Bundler
Deployer --> Store
FigmaBridge --> Store
Themes --> SandboxFrame
Bundler --> SandboxFrame
SoundEngine --> SandboxFrame
WebUI --> EditorDrawer
WebUI --> TimeTravelUI
WebUI --> DeployModal
WebUI --> SandboxFrame
ChatCards -->|1-Click Activate Tab| WebUI
SandboxFrame --> WYSIWYG
SandboxFrame --> DnD
SandboxFrame --> Blueprint
WYSIWYG -->|POST /api/save-content| Watcher
DnD -->|POST /api/save-reorder| Watcher
✨ Exhaustive Feature Breakdown
- 🏠 Projects Hub & Recent Sessions (v0.2.14): Dedicated dashboard displaying all active preview sessions and workspace components (React, HTML, Vue, SVG, Markdown) sorted by activity, featuring instant search and 1-click loading.
- ↕️ Interactive Chat Card Resizing: Smooth vertical height resizing (160px to 800px) via drag handle, quick preset dimensions (
S 200px, M 320px, L 480px), and Wide View mode (⤢).
- 🔄 Dedicated In-Canvas Refresh: Frame reload button in toolbar and support for F5 / Ctrl+R shortcuts inside the canvas frame without reloading the DSH host application.
- 🛡️ Defensive Tool Output Schemas: AI agent tools return structured refusal metadata (
code, allowedRoots, reason) on path policy violations, enabling autonomous model error recovery.
1. 🗄️ Retool-Style CRUD Admin Dashboard Studio (lib/crud.js / Tool 26)
- Instant Data Grids: Generates full-featured data management micro-apps with live search, column sorting, and status filter pills (
Active, Pending, Suspended).
- Interactive Modals: Form validation for creating and editing records on the fly.
- Persistent Database: Automatically syncs record changes to
localStorage so data survives page reloads.
- CSV Data Export: 1-click export of table data directly to downloadable
.csv files.
2. ⏳ Time-Travel Debugger & History Timeline Scrubber (lib/timetravel.js / Tool 27)
- Visual Revision Slider: Interactive scrubber bar allowing developers and agents to slide through historical session snapshots.
- Instant Rollback: 1-click restore of any previous snapshot directly back into the live canvas without touching Git.
- Timestamped Revisions: Compares intermediate iterations generated across conversation turns.
3. 🌍 1-Click Multi-Platform Web Deployment (lib/deploy.js / Tool 28)
- Vercel: Prepares static distribution with
vercel.json routing rules.
- Cloudflare Pages: Generates
_routes.json and security headers (_headers).
- Netlify: Packages static dist with SPA redirects (
_redirects).
- GitHub Gist: Generates standalone single-file HTML ready for immediate public sharing via Gist preview.
4. 🎨 Figma & Penpot Vector Bridge (lib/figma.js / Tool 29)
- SVG-to-Tailwind Converter: Pasted vector SVG code from Figma or Penpot is automatically parsed into clean, responsive React JSX or HTML with Tailwind CSS classes.
- Export to Figma: Wraps canvas components into standard SVG with
foreignObject for direct pasting (Ctrl+V) into Figma design files.
5. 🔊 UI Sound FX & Micro-Interactions Synthesis (lib/sound.js / Tool 30)
- Zero-Dependency Web Audio API: Pure mathematical synthesis of UI feedback sounds without external audio assets.
- Curated Sound Presets: Tactile
click, switch tap, 2-tone success chime, warning error buzz, modal pop, and 3-tone levelup arpeggio.
6. 📋 Effective HTML Artifact Archetypes (lib/wireframe.js, lib/plan.js, lib/diagram.js, lib/prototype.js)
- 📐 Low-Fi Wireframes (Tool 21): Monochromatic blueprint layouts with skeleton loaders and placeholder image boxes to evaluate UX hierarchy without styling bias.
- 📋 Interactive Release Plans (Tool 22): Release readiness roadmaps with priority badges (
P0, P1, P2), dynamic progress bars, milestone checkboxes, and persistent state.
- 📊 Living Architecture Diagrams (Tool 23): Zoomable node-graph diagrams with animated data flow lines and detailed service popups on click.
- 🧪 Multi-Step Prototype Flows (Tool 24): Onboarding wizards and checkout flows with step transitions and validation state machines.
- ✍️ Visual Annotation Sign-Off (Tool 25): Boxed markup with resolution statuses (
open / resolved) and response threads.
7. 💬 In-Chat Live Preview Tool Cards (LiveCanvasChatCard)
- Embedded Sandbox Preview: Directly in the chat stream, tool executions render an interactive preview card.
- 1-Click Studio Activation: Clicking
🚀 Open in Live Canvas automatically opens the BetterSidebar Live Canvas tab and loads the session.
8. ⚡ Smart Multi-File ESM Bundler (lib/transpiler.js)
- Recursive Local Import Resolution: Resolves relative
./Header.jsx, ./Card.tsx, ./data.js, and ./styles.css imports in-memory.
- Babel JSX & PostCSS: Transpiles modern React 18, Vue, HTML5, SVG, and Mermaid diagrams without external build tools.
- Asset Streaming: Safely streams local workspace images via
GET /dsh-live-canvas/assets/*.
9. 🎨 AI Theme Tokens Engine (lib/themes.js)
- 1-Click Design System Switcher: Linear Dark, Vercel Clean, Swiss Editorial, Glassmorphism Neon, and Cyberpunk Terminal.
10. 🔍 Visual Regression & Layout Audit (Tool 18)
- Inspects canvas DOM for text overflow clipping, missing
alt attributes, low contrast, and viewport responsiveness issues.
11. 📱 QR Code Mobile Live Share (Tool 20)
- Generates instant SVG QR codes and local network URLs for testing canvas previews on real smartphones over Wi-Fi.
12. 📦 1-Click Vite Project ZIP Packager (lib/packager.js / Tool 13)
- Bundles the active canvas into a complete production-ready
Vite + React or Vite + Vue project with package.json, vite.config.js, and tailwind.config.js.
🛠️ Complete 30 Agent Tools Reference
| # | Tool Name | Description | Key Parameters | Return Values |
|---|
| 1 | live_canvas_preview | Renders or updates preview session for HTML/React/SVG/Mermaid | content, componentType, title, theme | previewUrl, canvasId, success |
| 2 | live_canvas_inspect | Retrieves user DOM clicks, CSS selectors, and element attributes | canvasId, limit | inspections: [...], count |
| 3 | live_canvas_reload | Forces instant SSE reload on open preview frames | canvasId | reloaded, timestamp |
| 4 | live_canvas_diagnose | Queries sandbox console errors and exceptions for self-healing | canvasId, level | logs: [...], hasErrors |
| 5 | live_canvas_export | Exports standalone HTML bundle with pre-rendered markup and progressive runtime enhancement | canvasId, saveToDisk | downloadUrl, savedPath |
| 6 | live_canvas_annotations | Queries or clears boxed visual annotations and user markup | canvasId, action | annotations: [...], count |
| 7 | live_canvas_gallery | Creates multi-variant Storybook comparison matrix | variants, title | variantsCount, previewUrl |
| 8 | live_canvas_watch | Scans and binds workspace files to live file watcher | subDir, exts | files: [...], watchedFiles |
| 9 | live_canvas_controls | Updates Storybook-style interactive props sliders |
🛠️ In-Canvas DevTools & Diagnostic Feedback Loop
- Mini-Console Drawer: Real-time log/warn/error interception inside the sandbox with collapsible bottom drawer, level filtering, and toolbar badge count.
- Component State Presets Switcher: Instant switching between
Default, Loading, Empty, Error, and Overflow states via toolbar selector and DOM event triggers.
- Agent Vision Feedback Loop:
live_canvas_capture_snapshot lets coding agents query DOM structure or extract complete rendered HTML snapshots.
- Standalone Single-File HTML Export: 1-click single-file bundle export at
/dsh-live-canvas/api/standalone pre-rendering component markup for instant offline viewing with progressive CDN runtime enhancement.
- W3C Design Tokens Bridge: Parses W3C / Figma design token JSON structures into live CSS custom properties.
📦 Installation
Install into your DeepSeek Harness profile with one command:
dsh plugin --profile web add @goodandready/dsh-live-canvas
The same values are edited on the Live Canvas Preview page under Plugins. The page shows one description line under the title and the settings form below it. Save writes each field through the plugin settings service. While that service is loading, the form shows a loading state. When the service is not available, the form shows an unavailable state instead of an error page. The settings namespace is dsh-live-canvas; the package name is not a valid settings identifier.
⚙️ Configuration (settings.yaml)
plugins:
"@goodandready/dsh-live-canvas":
defaultViewport: "responsive" # Options: responsive, mobile, tablet, desktop, matrix
autoOpenOnHtmlGen: true # Automatically focus Live Canvas tab upon UI generation
enableHotReload: true # Enable SSE real-time hot-reloading on code updates
maxSessionCache: 50 # Maximum active preview sessions in LRU memory cache
enableFileWatcher: true # Enable filesystem watcher for live project sync
workspaceDir: "" # Custom project root path (defaults to working directory)
workspaceRoots: [] # Explicit allowed workspace root directories for path sandboxing
| Parameter | Type | Default | Description |
|---|
defaultViewport | string | "responsive" | Initial viewport dimension (responsive, mobile, tablet, desktop, matrix) |
autoOpenOnHtmlGen | boolean | true | Automatically opens BetterSidebar Live Canvas tab when agent generates UI |
enableHotReload | boolean | true | Real-time SSE hot-reload stream for sandbox frames |
maxSessionCache | number | 50 | Maximum number of active preview sessions kept in memory |
enableFileWatcher | boolean | true | Monitors workspace directory for file changes |
workspaceDir | string | "" | Base directory for scanning workspace components |
workspaceRoots | string[] | [] | Explicit allowed root paths for file viewing and workspace scanning. Blocks path traversal outside allowed folders. |
⌨️ Interactive Controls & Shortcuts
| Action | Shortcut / Trigger | Result |
|---|
| Instant Canvas Refresh | Click 🔄 Refresh or press F5 / Ctrl+R | Reloads active preview frame without reloading DSH host |
| Chat Card Drag Resize | Drag bottom border handle on chat preview | Smoothly resize chat preview height from 160px to 800px |
| Chat Card Wide Mode | Click ⤢ in chat card header | Expands chat preview card to full message width |
| Projects Hub | Select 🏠 Projects Hub in toolbar dropdown | Open interactive project dashboard with recent sessions and file search |
| Inline WYSIWYG Text Edit | Double-click text element on canvas | Edit heading/paragraph inline and save with Enter |
| Split-View Code Editor | Click 💻 Code in toolbar | Collapsible side-by-side code editor with live debounce sync |
| Blueprint Mode | Click 📐 Wireframe in toolbar | Toggles high-contrast monochromatic structural view |
| Drag & Drop Reordering | Click ↕️ D&D in toolbar | Drag section and card blocks to reorder layout visually |
| Time-Travel Scrubber | Click ⏳ Timeline in toolbar | Slide through revision history and restore previous snapshots |
| 1-Click Web Deploy | Click 🌍 Deploy in toolbar | Prepares Vercel, Cloudflare, Netlify, or Gist deployment package |
| Sound FX Toggle | Click 🔊 Sound in toolbar | Enables/disables synthesized Web Audio feedback |
| Inspect Element | Click 🔍 Inspect in toolbar | Click any DOM element to capture CSS selector and computed styles |
🔒 Security & Sandboxing Architecture
Live Canvas operates with enterprise-grade defensive sandboxing:
- Strict Path Sandboxing (
resolveSafePath): All file access requests via API and agent tools (live_canvas_preview, /dsh-live-canvas/api/open-file, /dsh-live-canvas/api/workspace/files) must resolve within authorized workspace roots (workspaceRoots or the current process working directory). Attempts to traverse into sensitive parent directories (such as /etc, system binaries, or sibling folders) are rejected with ERR_PATH_OUTSIDE_ROOTS and HTTP 403 Forbidden.
- CSRF & Origin Verification (
isTrustedRequest): Mutating endpoints require verified same-origin requests matching standard browser headers (Sec-Fetch-Site: same-origin, Origin, or Referer) or loopback authorization.
- Content Security Policy: Canvas previews are rendered inside sandboxed iframes with strict CSP directives (
default-src 'self' 'unsafe-inline' 'unsafe-eval' data: blob: https: http:; X-Frame-Options: SAMEORIGIN; X-Content-Type-Options: nosniff).
- DOM Attribute Escaping & Scoped Frame Messaging: Projects Hub sanitizes all
data-file-path, data-title, and data-path attributes via escapeHtml (supporting filenames with quotes and special characters) and restricts parent frame postMessage delivery to explicit targetOrigin (window.location.origin).
- Comprehensive Route Family Protection & Volatile Reactivity: All registered route families (
/events, /sandbox, /diff, /matrix, /timetravel, /assets, /api, and updater status) are guarded by isTrustedRequest / isTrustedStatusRequest, rejecting untrusted LAN or cross-site requests with 403 Forbidden. Runtime configuration changes via Cordis loader/volatile-update and config events are dynamically observed and applied live to store, watcher, and tools without restarting the harness.
🔄 Host-Side 1-Click Updater
Live Canvas includes an integrated host-side updater conforming to the DSH plugin standard:
- Automated Update Checking: Background checking queries
registry.npmjs.org for new releases, taking into account semver prereleases.
- DSH Card UI Integration: Shows current vs latest version, "Check for Updates" button, and 1-click update trigger.
- Safe Host Installation: Executes profile update using the local package manager (
pnpm / dsh plugin add), verifying host loopback and authorization headers (X-DSH-Update-Key).
📄 License
MIT © GooDAnDReaDY
