npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

acryl-dsh-editor-plugin-web

v0.1.2

Published

DSH web plugin: a VS Code-style code editor view (file tree, Monaco, ripgrep search/replace, Markdown preview, git diff).

Readme

DSH Editor (deprecated — see below)

Deprecated. acryl-dsh-editor-plugin (no suffix) is now universal: dsh.client.platform: "web" covers both ACRYL Web and ACRYL Desktop identically, since Desktop's client is Chromium-rendered exactly like Web's. This -web fork existed only to work around a dsh-client-connection RPC-registration bug that also affected the bare package; that bug is now fixed there too ([email protected]+). Install the bare package instead:

dsh plugin --profile web add acryl-dsh-editor-plugin

This fork is deprecated on npm and receives no further updates.

A VS Code-style code editor that runs inside DeepSeek Harness (DSH) — and therefore inside ACRYL Desktop, which hosts the same DSH plugin runtime. It adds a Files tab to the session main area with a file tree, the Monaco editor, cross-file search/replace, a Markdown preview, and Git status/diff.

The plugin is a standard Cordis plugin (npm package). It installs with one dsh plugin add command and survives restarts.

Features

  • File tree — browse the workspace directory, expand/collapse folders, Git status badges (M/A/??…); click a badge to view the diff.
  • Monaco editor — multi-file tabs, syntax highlighting, configurable word wrap / minimap / font size / tab width, customizable keybindings.
  • Cross-file search — powered by ripgrep: streaming incremental results, match highlighting, virtual scrolling (up to 20,000 results), case/whole-word/regex toggles, include/exclude globs, search history, cross-file replace.
  • Markdown preview — source / preview / split views; rendered with marked + DOMPurify sanitization, highlight.js, mermaid diagrams, KaTeX math, and task-list checkboxes.
  • Quick openCtrl+P with fuzzy matching on relative paths.
  • Conversation path jumpCtrl+click (Cmd+click on macOS) a file path inside an inline-code snippet in the conversation to jump straight to the Files tab and open it.
  • Theme sync — follows the DSH light/dark theme; Monaco, highlight.js, and mermaid switch in real time.

Requirements

  • Node.js >= 20
  • A DSH (or ACRYL Desktop) installation with the dsh CLI available
  • ripgrep on PATH for cross-file search (the editor degrades gracefully without it)
  • git on PATH for status badges and diffs (optional)

Install

From npm (recommended)

dsh plugin --profile web add acryl-dsh-editor-plugin-web

From GitHub

dsh plugin --profile web add git+https://github.com/acryldev/acryl-dsh-editor-plugin-web.git

From a local directory

dsh plugin --profile web add file:/path/to/acryl-dsh-editor-plugin-web

After installing, restart DSH (dsh web --profile web). A Files tab appears in the session main area.

Install into ACRYL Desktop

ACRYL Desktop hosts the same DSH plugin runtime, so the same command works from its built-in terminal — omit the profile flag and the Desktop's active profile is used:

dsh plugin add acryl-dsh-editor-plugin-web

Or install from a local checkout while developing:

dsh plugin add file:/path/to/acryl-dsh-editor-plugin-web

The Desktop routes dsh plugin add through its recoverable install boundary: the active profile is snapshotted, the package is installed, and on success it is reconciled into dsh.profile.bundles. Restart ACRYL Desktop afterwards so the client module table is re-scanned and the Files tab mounts.

How installation works

dsh plugin add appends the package to dsh.profile.bundles. At profile boot, DSH merges this package's bundle patch (cordis.patch.yml) — one insert of the dsh-editor host row — exactly like a manual cordis.patch.yml mount line, and loads the browser half declared under the package's dsh.client field. The client module table scan result is cached in-process, so plugin set changes require a DSH restart to take effect.

Architecture

A DSH browser-UI plugin has two halves, declared via the npm package's dsh field:

  • Host half (lib/index.js) — a standard Cordis plugin in the Node process. Injects fs, subprocess, and connection; serves the editor's private JSON RPC on the /editor connection channel:
    • fs:init, fs:stat-path, fs:project-root, fs:list, fs:read, fs:write, fs:files
    • fs:search-start / fs:search-poll / fs:search-cancel (ripgrep jobs), fs:search-replace
    • git:status, git:diff
  • Client half (lib/client.js) — a browser module loaded by the DSH client runtime. Renders the React UI (file tree, tabs, Monaco, search, preview), talks to the host over the /editor channel, and registers the Files conversation view plus an Editor settings section.

The two halves are wired at boot: package.json declares dsh.bundle.patchcordis.patch.yml (Host) and dsh.client./lib/client.js (Client). No profile file edits are needed.

Dynamic one-off install (try it without installing)

src/host.js and src/client.js are the same editor packaged as dynamic Cordis plugin function bodies. They can be defined inside a single DSH session with the cordis_define tool and activated with cordis_run — no profile change, but they vanish when the process restarts. See install/INSTALL.md.

Directory structure

acryl-dsh-editor-plugin-web/
├── lib/
│   ├── index.js           # Host half (Node: fs/git/ripgrep backends + /editor RPC)
│   └── client.js          # Client half (browser: UI, Monaco, search, preview via /editor RPC)
├── src/
│   ├── host.js            # Dynamic-plugin function body of the host half (reference / quick try)
│   └── client.js          # Dynamic-plugin function body of the client half
├── cordis.patch.yml       # dsh.bundle.patch: inserts the host plugin row into the profile
├── package.json           # dsh.bundle.patch + dsh.client declarations
├── install/INSTALL.md     # Install & migration guide
├── README.md
└── LICENSE

Where it's listed

  • DSH Store (featured example): https://acryl.dev/store/packages/acryl-dsh-editor-plugin-web — featured at the top of the directory and used as the worked example in the publishing guide.
  • npm: https://www.npmjs.com/package/acryl-dsh-editor-plugin-web — tagged dsh-plugin + acryl-package, which is how the store and the DSH Desktop market catalog discover it.
  • Publishing guide: https://acryl.dev/store/publishing — how to publish your own DSH plugin, using this repository as the reference.

License

MIT