json-to-frontmatter-html

Render JSON objects as HTML tree tables for frontmatter display.

Uses tree-to-html for rendering, providing consistent styling between JSON data and ASCII tree structures.

Installation

npm install json-to-frontmatter-html tree-to-html

Or install from GitHub:

{
  "dependencies": {
    "json-to-frontmatter-html": "github:iafan/json-to-frontmatter-html",
    "tree-to-html": "github:iafan/tree-to-html"
  }
}

Usage

import { renderJson } from 'json-to-frontmatter-html'

const data = {
  name: 'My Project',
  version: '1.0.0',
  author: {
    name: 'John Doe',
    email: '[email protected]'
  },
  tags: ['typescript', 'html', 'tree']
}

const html = renderJson(data)

Output renders as a tree table:

• Keys appear in the left column (tree structure)
• Values appear in the right column
• Nested objects/arrays render as indented tree branches

API

renderJson(json): string

Render any JSON value (object, array, or primitive) as HTML tree table. Just pass any plain JavaScript object - no type wrapping needed.

parseJson(json): TreeNode[]

Parse JSON and convert to TreeNode array (from tree-to-html). Useful if you want to customize rendering.

Output HTML Classes

Uses the same classes as tree-to-html for consistent styling:

| Class | Description | |-------|-------------| | .tree-container | Wrapper div | | .tree-table | Table element | | .tree-structure | Cell with key names | | .tree-name | Key name span | | .tree-comment-cell | Value cell | | .tree-comment | Value text span |

See tree-to-html for full CSS styling guide.

Example Output

For this JSON:

{
  "title": "Hello",
  "author": {
    "name": "John",
    "url": "https://example.com"
  }
}

Renders as an HTML table (visually similar to):

title           # Hello
author
 ├── name       # John
 └── url        # https://example.com

License

This is free and unencumbered software released into the public domain (Unlicense).