Introduction

In DeepSeek Harness (DSH) sessions, AI can generate self-contained HTML files. If these artifacts are only saved in the workspace directory, previewing, saving, and exporting still require manually opening files, switching windows, or converting formats.

dsh-canvas-preview is a DSH canvas preview plugin maintained by jiuyuechuwuhao. It adds a “Canvas” view to the DSH session interface for real-time preview of AI-generated web artifacts, supporting save-as and PNG/JPG/SVG export. Below introduces its features, installation, and usage scope.

What is it

dsh-canvas-preview is positioned as: a canvas preview plugin for DeepSeek Harness, targeting AI-generated web artifacts, providing real-time preview and export capabilities.

The maintainer is jiuyuechuwuhao, and the license is MIT. The plugin bundle declares dsh.bundle, which can be applied with cordis.patch.yml to enable the canvas; it can also run as a dynamic plugin without writing a profile.

Core Features

  1. Canvas Tab: An independent view side-by-side with the chat; the left side shows the file list, and the right side shows sandbox real-time preview.
  2. Auto Sync: Scans the workspace every 4 seconds; no manual refresh is needed after the AI saves.
  3. Top-Right Notification Card: New artifacts pop up with real-time rendering thumbnails; the entire card is draggable, expandable, and resizable.
  4. Save As: Uses the native macOS directory picker, defaults to saving in the same directory as the HTML, but can be saved to “Downloads” or any location.
  5. PNG/JPG/SVG Export: Bitmaps use Headless Chrome 2x HD 3200×2400, taking about 2 seconds; Vector SVG is extracted directly, supporting infinite scaling.
  6. Preview Details: Width presets (Fit/1280/Mobile Portrait), Dark mode preview, Export duration display.
  7. Dynamic Plugin Mode: Define and run the canvas plugin via host.js + client.js in dynamic/, without writing a profile.

Installation and Activation

If using the npx installer, you can run:

npx dsh-canvas-preview

Then open:

http://127.0.0.1:3080/

The “Canvas” tab will appear in the session top bar.

If using the DSH plugin package command, you can run:

dsh plugin --profile web add dsh-canvas-preview

This command installs the plugin using the web profile. The plugin bundle declares dsh.bundle, which can be applied with cordis.patch.yml to enable the canvas.

For local development, you can install using a file: path:

dsh plugin --profile web add "dsh-canvas-preview@file:/绝对路径/dsh-canvas-preview"

Then enable the canvas in the following file:

~/.dsh/profiles/web/cordis.patch.yml

Dynamic plugin mode does not require writing a profile. The steps are:

  1. Clone the repository to any location.
  2. In the DSH session, tell the Agent: “Define and run the canvas plugin according to host.js + client.js in dsh-canvas-preview/dynamic/.”
  3. Approve the plugin run once.

Typical Usage

After the above steps, the typical flow is to first let the Agent generate or modify HTML files in the current workspace, then view them in the “Canvas” tab.

The plugin scans .html / .htm files in the session cwd and previews them in a sandbox iframe. For PNG/JPG export, it launches a local Headless Chrome screenshot and writes the result back to the workspace or a specified directory. SVG export directly extracts the SVG, suitable for vector scenarios requiring lossless scaling.

If you need to hand over the results to subsequent documentation or design processes, you can first use “Save As” to place the HTML in the target directory, then export PNG/JPG or SVG as needed.

Applicable Scenarios and Notes

Suitable for workflows that produce HTML artifacts in DSH sessions: After the Agent generates or modifies HTML files in the current workspace, you can directly view, save, and export them in the session interface.

Notes before use:

  • The plugin runs with the permissions of the current dsh process; you should check the source code and license before installing.
  • The plugin will scan .html / .htm files in the session cwd.
  • PNG/JPG export will launch the local Headless Chrome.
  • The plugin does not send artifacts to third parties; this excludes cases where the HTML being previewed requests remote fonts or images on its own.
  • The plugin does not read API keys.
  • Dynamic plugin mode requires approval of the plugin run once.

Links

  • Community Directory: https://www.skillhub.cn/plugins/jiuyuechuwuhao/dsh-canvas-preview
  • GitHub: https://github.com/jiuyuechuwuhao/dsh-canvas-preview