Denna Spec Preview
Rich preview for .denna-spec.json files inside VS Code — similar to the built-in Markdown preview.
Features
- Formatted preview panel — renders metadata cards, chain grids, allocation tables, calculation modules, known issues, address classifications, and generic JSON sections
- Click-to-source navigation — click any element in the preview to highlight the corresponding JSON in the source editor
- Live updates — preview refreshes automatically as you edit the JSON
- Theme-aware — adapts to your VS Code light/dark theme using native CSS variables
- Schema-aware rendering — fetches
$schema URLs for enhanced type detection (rates, amounts, durations, addresses)
Usage
- Open any
.denna-spec.json file
- Click the preview icon in the editor title bar (top-right)
- The preview opens in a side panel
- Click any value in the preview to jump to it in the source
Supported Spec Sections
| Section |
Rendering |
| Metadata |
Card with name, kind, version, description, tags, references |
| Chains |
Grid of chain cards with addresses, features, enabled status |
| Allocations |
Tables grouped by chain with protocol, type, underlying, address |
| Calculation Modules |
List with enabled/disabled status and notes |
| Known Issues |
Cards with status badges and severity |
| Address Classifications |
Grouped tables by category |
| Generic sections |
Recursive JSON viewer with type-aware formatting |
Denna Types
The extension automatically detects and formats Denna semantic types:
- Rates —
{ value: 30, unit: "bps" } → 30 bps
- Amounts —
{ value: 1000000, currency: "USD" } → 1,000,000 USD
- Durations —
{ value: 24, unit: "months" } → 24 months
- Addresses —
{ value: "0x...", format: "evm" } → formatted with label
- Dates —
"2026-01-15" → Jan 15, 2026
Development
npm install
npm run build
npm test
Press F5 in VS Code to launch the Extension Development Host for testing.
| |
