Introduction¶

When writing frontend pages with DSH (DeepSeek Harness), verifying the effect usually involves a fixed workflow: let the model output HTML, copy it to a local file, and then switch to the browser to open it. Every time a page is modified, this copy-and-switch process is repeated. dsh-page-preview integrates this step into the DSH web interface: the HTML code block output by the model can be rendered into an interactive preview in-place, while local projects or online URLs can be viewed in a floating window in real-time. Below is an introduction to its positioning, features, installation steps, and typical usage.

What is this¶

dsh-page-preview is a DSH web plugin, version 1.0.0, maintained by watericetangcw, and licensed under MIT. It solves the problem of having DSH “display” the page directly within the web page, rather than just providing you with a snippet of code. Its capabilities are divided into two parts:

1. Inline rendering of the html page-preview code block output by DSH into a preview panel;
2. Providing a set of tools to open a draggable floating preview window in the interface to view local pages or URLs.

The plugin depends on @deepseek-ai/dsh-tools ^0.1.0-rc.6 and requires a Node version of ^22.19.0 || >=24.0.0.

Core Features¶

Inline Preview¶

Let DSH output an html page-preview code block. After the answer is sent, it will be rendered as an interactive preview panel below the message, supporting fullscreen, collapsing, and opening in a new window, while the code block itself remains a normal code block that can be viewed and copied as usual. Note that inline preview requires all CSS and JS within the page to be inlined.

Floating Window¶

The plugin provides four tools covering the full lifecycle of the preview:

The floating window is draggable, resizable, and supports fullscreen, with content scaling proportionally to the virtual desktop width. When closed, it shrinks to a capsule in the top-right corner with a green breathing light; clicking it restores the window. Previews are isolated per session, so switching sessions does not interfere with each other.

Installation and Usage¶

The philosophy of DSH is “everything is a plugin,” and this plugin is also installed with a single command:

dsh plugin --profile web add github:watericetangcw/dsh-page-preview

After installation, restart dsh web and refresh the browser page once to enable the plugin.

Typical Usage¶

The following three examples are taken from the project README and can be copied and sent to DSH directly after installation.

① Inline Preview – Generate and display a page:

Please write a complete static HTML page (CSS and JS must all be inlined), display it using an `html page-preview` code block, and the content should be a real-time clock card.

② Floating Window – Preview an online page:

Please use preview_register to preview this webpage: https://watericetangcw.github.io/dsh-page-preview/hello-world

③ Floating Window – Preview a local project and refresh:

Please use preview_register to preview the docs/demo-site directory, then change the page title to "dsh-page-preview Demo", and call preview_refresh so I can see the updates.

To summarize the floating window workflow: first use preview_register to register the page, call preview_refresh to check for updates after modifying files, use preview_replace if you need to switch pages, and call preview_unregister to close when finished.

The project also provides two online demo pages; after installation, you can preview them directly using method ②:

• https://watericetangcw.github.io/dsh-page-preview/hello-world
• https://watericetangcw.github.io/dsh-page-preview/demo-site/

Use Cases and Notes¶

Suitable for developers using DSH web in the browser who frequently ask models to generate or modify static pages; also suitable for scenarios where you modify local HTML projects while viewing the results.

Two points to note during usage:

1. Inline preview requires CSS and JS to be fully inlined;
2. Previews are isolated by session, so switching sessions does not interfere with each other.

Regarding security: Like all DSH plugins, this plugin runs with the permissions of the current dsh process. It is recommended to read the project source code and confirm the license (this project is MIT) before deciding whether to enable it.

Summary¶

dsh-page-preview compresses the “generate page → copy → open browser” workflow into inline previews and a floating window within the DSH interface, allowing for instant refreshes without interference between sessions. If you frequently write pages in DSH, give it a try.

• Repository: https://github.com/watericetangcw/dsh-page-preview
• Community Directory Page: https://www.skillhub.cn/plugins/watericetangcw/dsh-page-preview

Note that the directory is a site maintained by the community and has no official affiliation with DeepSeek / Huantian.