Krona

Fold, diff and edit config files · Docs

JSON · YAML · TOML · INI/.env — React

Language
GitHubnpm

app.json (JSONC)jsonComments and trailing commas survive; objects and arrays fold.

Mode
2
3
~4
5
~7
8
~14
15
17
~18
23
~24
25
26
27
{
// Krona sample — JSONC is supported: comments survive parsing.
"name": "krona-demo",
"version": "1.4.2",
"private": false,
"server": {
"host": "0.0.0.0",
"port": 8080,
"timeouts": { "read": 30, "write": 30, "idle": 120 }
},
"database": {
"driver": "postgres",
"pool": { "min": 2, "max": 16 },
},
"features": { "search": true, "billing": false, "beta": null },
"empty": {},
"emptyList": []
}
2
3
~4
5
~7
8
~14
15
17
~18
24
~25
+26
27
28
29
{
// Krona sample — JSONC is supported: comments survive parsing.
"name": "krona-demo",
"version": "1.5.0",
"private": false,
"server": {
"host": "127.0.0.1",
"port": 8080,
"timeouts": { "read": 15, "write": 30, "idle": 120 }
},
"database": {
"driver": "postgres",
"pool": { "min": 4, "max": 32 },
},
"features": { "search": true, "billing": true, "beta": true },
"telemetry": { "enabled": true, "endpoint": "https://otel.internal:4317" },
"empty": {},
"emptyList": []
}

This view, in code

import { Krona } from 'kronajs'

<Krona format="json" theme="dark">
  <Krona.Diff left={before} right={after}
    defaultCollapsedDepth={2}
    collapseUnchanged
    showMinimap
  />
</Krona>

Options

Every control here is a real prop. The code below updates with them, so whatever you end up with is copy-pasteable.

Install

npm i kronajs
yarn add kronajs
pnpm add kronajs

YAML lives behind kronajs/yaml so its parser never reaches a bundle that only shows JSON.