dsh-plugin-canvas-pro
Canvas-Pro for DeepSeek Harness: a Web drawer plus eight model tools for creating, patching, versioning, and exporting canvas artifacts.
What it does
After install, the Web session header gets a Canvas button. The agent can create HTML, Markdown, Mermaid, SVG, or React artifacts; the drawer previews them in a sandboxed iframe.
Model tools:
| Tool | Purpose |
|---|
create_canvas_artifact | Create an artifact |
update_canvas_artifact | Patch by selection, line range, or overwrite |
get_canvas_selection | Read the latest preview selection |
get_canvas_artifact | Read current content |
list_canvas_versions | List snapshots |
revert_canvas_artifact | Restore a previous snapshot as a new version |
diff_canvas_artifact | Unified or split diff between versions |
export_canvas_artifact | Export markdown, html, svg, png data URL, or json |
Selecting text in the preview opens Explain / Refactor / Fix / custom prompt actions and submits them into the current chat.
Compared with open-source DSH plugins
Sources are the plugins' own listings on awesome-dsh-plugin. This table only covers claims that those listings make and that this repo implements.
| dsh-live-canvas | dsh-canvas-preview | dsh-generative-ui | Canvas-Pro |
|---|
| What it is | Live sandbox for HTML / React / Vue / SVG / Mermaid / Markdown | Conversation tab that previews workspace HTML | Streaming TSX UI inline or in a side canvas | Artifact workspace: drawer + eight model tools |
| Agent tools | Preview-oriented | canvas_preview-style HTML preview | Agent writes TSX; cards can run bash / curl / model / files | create / update / get / get_selection / list_versions / revert / diff / export |
| Partial edit | Not the product focus | Typically whole HTML | New TSX frames | replace_selection, replace_range, full_overwrite |
| Selection → next turn | DOM click inspector | Not listed | Click on a card drives the next chat turn | Explain / Refactor / Fix / custom prompt from a text selection |
| Versions | Side-by-side visual diff | Not listed | State kept across stream frames | Snapshot history, revert as a new version, unified and split line diff |
| Export | Vite ZIP | Local PNG / JPG / SVG | Not listed | Markdown, standalone HTML, SVG, PNG rasterization (SVG fallback), JSON archive |
| Persistence | Session / HMR | Workspace HTML files | In-memory UI state | $DSH_HOME/storages/canvas-pro/artifacts.json |
| Drawer | Preview surface | Conversation tab | Inline + side canvas | Resizable overlay; chat turns do not force it open |
Same-name plugins that are not competitors here:
Where the others are stronger:
- live-canvas: real React / Vue / Mermaid runtimes, SSE hot reload, device matrix, Vite ZIP.
- canvas-preview: first-class PNG / JPG export from workspace HTML.
- generative-ui: streaming TSX compile, no extra tool schema, clicks inside a card start the next turn.
Where Canvas-Pro is stronger for DSH artifact work:
- Patch instead of regenerate. The agent can replace a selected span or a line range. Preview plugins usually take a new full document.
- Text selection is a first-class agent input. The drawer posts the span into the current composer; the host can also read it via
get_canvas_selection.
- Version time machine. Each patch is a snapshot; the agent can list, diff, and revert without rewriting the file from scratch.
- Export is a model tool, not only a UI button: markdown / html / svg / png / json from
export_canvas_artifact.
- Local artifact store survives Web restarts under
$DSH_HOME.
Not claimed: richer live React/Mermaid than live-canvas; streaming TSX than generative-ui; raster PNG/JPG reliability than canvas-preview.
Install
dsh plugin --profile web add github:lokih1028/dsh-plugin-canvas-pro
Restart the Web profile, then refresh the GUI.
Config
- id: canvas-pro
name: dsh-plugin-canvas-pro
config:
maxHistoryPerArtifact: 50
enableReactPreview: true
Artifacts are stored under $DSH_HOME/storages/canvas-pro/artifacts.json when DSH_HOME is set.
Limits
- React artifacts currently show source in the preview sandbox; they are not executed as a live React tree.
- Mermaid artifacts show source unless you convert them to HTML.
- PNG export tries a browser rasterization of the SVG preview; if that fails it falls back to SVG.
- Selection line numbers come from the rendered preview, not always from source lines. Prefer
replace_selection over replace_range when the two disagree.
License
MIT
