lokih1028/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:

• dsh-agent-canvas — Agent / Subagent / Workflow graph, not document artifacts.
• dsh-ark9canvas — image generation workbench.
• dsh-web-artifact-designer — a skill that writes HTML/SVG files, not a live drawer.

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:

1. Patch instead of regenerate. The agent can replace a selected span or a line range. Preview plugins usually take a new full document.
2. 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.
3. Version time machine. Each patch is a snapshot; the agent can list, diff, and revert without rewriting the file from scratch.
4. Export is a model tool, not only a UI button: markdown / html / svg / png / json from export_canvas_artifact.
5. 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