HD Viewer

View .hd documents rendered directly in VS Code with charts, Mermaid diagrams, tabs, callouts, and HD plugins.

Features

• Rendered preview for .hd files through a custom editor.
• Source, preview, and split modes from the editor title bar, command palette, and standard preview keybindings.
• Live updates as you edit .hd source.
• Plugin auto-loading for trusted HD component plugins (*.hd.js):
  • Workspace plugins from plugins/, hd-plugins/, or .hd/plugins/.
  • Global plugins from the folder set in hd.globalPluginFolder.
  • Previews refresh automatically when a plugin file changes.
• Theme-aware rendering that follows the active VS Code theme.
• Syntax highlighting for .hd source.

Usage

1. Open a .hd file. It opens in the rendered HD viewer by default.
2. Use the editor title buttons or command palette to switch modes:
   • HD: Source Mode opens editable source.
   • HD: Split Source / Preview opens source on the left and preview on the right.
   • HD: Preview Mode opens the rendered preview.
3. Use Cmd+Shift+V / Ctrl+Shift+V to open preview mode from source.
4. Use Cmd+K V / Ctrl+K V to open split source/preview mode.
5. Add trusted plugin files such as mindmap.hd.js to your workspace plugins/ folder to render custom HD components.

Settings

Security note

HD documents are inert data and are sanitized before rendering. Plugins are code and run inside the preview webview. Only put plugin files you trust into your plugin folders; treat them like any other dependency you add to a project.

Development

No build step is required; the extension is plain JavaScript.

1. Open the vscode-extension/ folder in VS Code.
2. Press F5 to launch the Extension Development Host.
3. Open any .hd file in the dev window.

Package locally:

npm run build:local
npm run install:local

Publishing

npm run package
npm run publish

Publishing requires a Visual Studio Marketplace publisher named wishlatte and a valid VSCE_PAT.

License

MIT