GooDAnDReaDY/dsh-live-canvas
Interactive visual frontend studio for DeepSeek Harness: CRUD admin engine, time-travel debugger and one-click multi-host deploys.
Transforms DeepSeek Harness into a frontend development suite: in-memory recursive ESM bundling (Babel JSX + PostCSS), SSE hot-reloading, in-chat interactive preview cards, a split-view code editor, time-travel history debugging, one-click cloud deployment, and 31 agent tools. It renders HTML/React/Vue/SVG/Mermaid previews in sandboxed iframes with a mini-console, component-state presets, a visual regression/layout audit, inline WYSIWYG editing, drag-and-drop section reordering and a Blueprint wireframe mode. Feature groups include a Retool-style CRUD admin builder with localStorage persistence and CSV export, a time-travel debugger with snapshot rollback, 1-click deploys to Vercel/Cloudflare Pages/Netlify/GitHub Gist, a Figma/Penpot SVG-to-Tailwind bridge, Web Audio UI sound synthesis, and effective-HTML artifact archetypes (wireframes, release plans, living architecture diagrams, prototype flows, annotation sign-off). It also ships a 1-click Vite+React/Vite+Vue project ZIP packager and a QR-code mobile live-share. Security: strict path sandboxing (resolveSafePath rooted at workspaceRoots/working directory, rejecting traversal with ERR_PATH_OUTSIDE_ROOTS/HTTP 403), CSRF/origin verification, and CSP-scoped preview iframes.
Install
dsh plugin --profile web add @goodandready/dsh-live-canvasCopied verbatim from the README's '📦 Installation' section (the only install line it gives). The package is published on npm: @goodandready/dsh-live-canvas, latest 0.2.24 on registry.npmjs.org (checked 2026-10-06). The README notes the settings namespace is 'dsh-live-canvas' even though the package name is '@goodandready/dsh-live-canvas' (the package name is not a valid settings identifier).
Compatibility
Node 20+ (README badge). DeepSeek Harness Web: registered as a DSH plugin and supports four surfaces — native DSH 0.1.5-alpha.1+ right sidebar (sidebarRightTabs, sidebar.right.pane.tab), the legacy dsh-better-sidebar integration (tab 'live-canvas'), dual profiles (both enabled, distinct deterministic IDs), and Minimal/Standalone profiles via a self-contained slide-over drawer with an Alt+C hotkey. Settings live under the dsh-live-canvas namespace in settings.yaml.
Details
- Repo: GooDAnDReaDY/dsh-live-canvas
- Category: Web UI Enhancements
- Stars: 2
- Version: GitHub GooDAnDReaDY/dsh-live-canvas — npm @goodandready/dsh-live-canvas (latest 0.2.24, registry.npmjs.org, 2026-10-06); MIT © GooDAnDReaDY (README License section). Feature notes in the README reference v0.2.14.
FAQ
- Which DeepSeek Harness surface does it require?
- It supports all DSH navigation layouts: the native right sidebar on DSH 0.1.5-alpha.1+, the legacy dsh-better-sidebar integration, dual profiles (both enabled), and Minimal/Standalone profiles where it runs as a self-contained slide-over drawer opened with Alt+C.
- Can I preview code without a local build toolchain?
- Yes. It does in-memory ESM bundling with recursive local import resolution, Babel JSX and PostCSS transpilation, so modern React 18, Vue, HTML5, SVG and Mermaid render in a sandboxed iframe without external build tools.
- What deployment targets can it produce?
- The 1-click deploy engine prepares ready-to-ship bundles for Vercel (vercel.json routing), Cloudflare Pages (_routes.json + _headers), Netlify (_redirects) and GitHub Gist (standalone single-file HTML).
Alternatives
Nagi-ovo/dsh-visualize · jyh20030112/dsh-visual-plugin · omdsh-dev/dsh-genui