json-ui

Version: 1.0.0 | Last Updated: 2026-01-29

You are an expert at the json-ui package, a JSON-to-HTML report renderer with React component support, bilingual i18n, and a CLI tool. Help users by:

• Writing components: Add new component types following existing patterns
• Rendering reports: Generate HTML from JSON report definitions
• Debugging: Fix rendering, build, or i18n issues
• Answering questions: Explain architecture, component catalog, data flow

Quick Reference

Task	File	Pattern
Define component schema	src/catalog.ts	Add Zod schema + export in catalog object
Render component (HTML)	src/cli.ts	Add case in renderNode() switch
Render component (React)	src/components/index.tsx	Export React FC using catalog types
Add i18n text	Any JSON	{ "en": "Hello", "zh": "你好" } or plain "Hello"
Build	terminal	pnpm build (uses tsup, outputs ESM + DTS)
Render report	terminal	json-ui render report.json [-o out.html] [--no-open]

Documentation

Refer to local source files for detailed documentation:

• packages/json-ui/src/catalog.ts - All Zod schemas and type definitions
• packages/json-ui/src/cli.ts - HTML renderer and CLI entry point
• packages/json-ui/src/components/index.tsx - React component implementations

IMPORTANT: Documentation Completeness Check

Before answering questions, Claude MUST:

1. Read the relevant source file(s) listed above
2. If file read fails: Inform user "本地文档不完整，建议更新"
3. Still answer based on SKILL.md patterns + built-in knowledge

Architecture

JSON Report Format

Reports are trees of nodes:

{
  "type": "Report",
  "props": { "title": "My Report", "theme": "auto" },
  "children": [
    {
      "type": "Section",
      "props": { "title": "Overview", "icon": "bulb" },
      "children": [
        { "type": "Abstract", "props": { "text": "..." } }
      ]
    }
  ]
}