syntax-json

Minimal JSON syntax highlighter. Single-pass, zero dependencies, <1 KB.

Uses the native CSS Highlight API — no DOM mutations, no reflows.

<1KB
Minified size
0
Dependencies
0
DOM mutations
Parse time
Live Demo Highlighted
{
  "name": "syntax-json",
  "version": "1.0.1",
  "description": "Minimal JSON syntax highlighter",
  "count": 42,
  "pi": 3.14159265,
  "scientific": 1.5e10,
  "negative": -273.15,
  "active": true,
  "deleted": false,
  "data": null,
  "tags": ["fast", "light", "zero-deps", "css-highlight-api"],
  "nested": {
    "level": 2,
    "items": [1, 2, 3],
    "deep": { "ok": true }
  }
}
Performance Benchmark

Measures real parse time across different JSON sizes. Each size runs 50 iterations (median reported).

Size Time Throughput Scale
Click Run to benchmark
Install
CDN recommended
<script src="https://cdn.jsdelivr.net/npm/syntax-json@1.0.1/dist/syntaxjson.min.js" crossorigin="anonymous"></script>
npm
npm install syntax-json
ESM
import syntaxJSON from 'syntax-json';
Usage

Add the script and use <pre><code class="json"> — highlighting is automatic.

<pre><code class="json">{ "hello": "world", "n": 42, "ok": true }</code></pre>

<script src="https://cdn.jsdelivr.net/npm/syntax-json@1.0.1/dist/syntaxjson.min.js" crossorigin="anonymous"></script>
syntax-json · MIT License