ngx-json-explorer

A fully-configurable Angular JSON tree explorer. Drop it in, hand it any JSON value, and get an interactive, themeable, keyboard-accessible tree with inline editing and search — with almost every visual and behavioral detail exposed as a plain option.

Live demo — an interactive showcase exercising every option live.

npm install ngx-json-explorer

No config, works out of the box. Everything below (themes, editing, search, grouping huge arrays, etc.) is opt-in on top of that.

Table of contents

• Quick start
• Features
• Views — tree, force-directed graph, table/grid
• Recipes — editing, custom theme, app-wide defaults, custom value rendering
• JsonExplorerOptions reference
• Outputs reference
• Theming
• Accessibility
• Roadmap
• Local development / contributing

Quick start

1. Install:

npm install ngx-json-explorer

2. Import the standalone component (Angular 15+, no NgModule needed):

import { Component } from '@angular/core';
import { JsonExplorerComponent } from 'ngx-json-explorer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [JsonExplorerComponent],
  template: `<ngx-json-explorer [json]="data"></ngx-json-explorer>`,
})
export class AppComponent {
  data = {
    id: 42,
    name: 'Ada Lovelace',
    active: true,
    roles: ['admin', 'developer'],
    address: { city: 'Springfield', pincode: '00000' },
    lastLogin: null,
  };
}

That's it — you get a searchable, collapsible, copyable JSON tree. Using an NgModule-based app instead of standalone components? See NgModule-based apps below.

3. Turn on the features you want, all through one [options] input:

import { JsonExplorerOptions } from 'ngx-json-explorer';

options: JsonExplorerOptions = {
  theme: 'dracula',            // 'light' | 'dark' | 'monokai' | 'dracula' | 'solarized' | 'nord'
  editable: true,               // let users edit/add/delete values inline
  maxDepth: 2,                  // auto-collapse anything deeper than 2 levels
  sortKeys: true,                // alphabetize object keys
};

<ngx-json-explorer [(json)]="data" [options]="options"></ngx-json-explorer>

Note the [(json)] (banana-in-a-box) instead of [json] — that two-way binding is what lets edits made in the tree flow back into data. Skip it (use plain [json]) if you're only rendering a read-only viewer.

Features

• 🌳🕸️📊 Three views — the default indented tree, a Table/Grid view with breadcrumb drill-down, and a force-directed graph (🚧 work in progress — see Views) — switchable live via viewMode or the toolbar
• 🔍 Search keys/values with match highlighting, a case-sensitivity toggle, and next/prev navigation
• ✏️ Inline editing — edit values, add keys/items, delete nodes, with [(json)] two-way binding and (edited)/(added)/(deleted) outputs
• 🎨 Six built-in themes (light, dark, monokai, dracula, solarized, nord) plus full custom theming via CSS variables
• 📂 Expand all / collapse all — per-node expand state is preserved across data updates
• 📋 Copy value, copy path (e.g. users[0].address.city), copy full JSON, and download as .json
• 🏷️ Type badges, with a configurable icon style (triangle / chevron / circle / square)
• 📏 maxDepth auto-collapse and groupArraysAfterLength chunking so huge payloads stay responsive
• ✂️ collapseStringsAfterLength with an inline "more/less" toggle for long strings
• ⌨️ Keyboard-accessible tree navigation (arrow keys, Enter/Space, Home/End) with ARIA tree/treeitem roles
• 🧩 Custom value templates via [valueTemplate] to render links/badges/images for specific value shapes
• 🌐 App-wide defaults via provideNgxJsonExplorerDefaults() — set it once, every instance inherits it
• Ships as standalone components with an NgModule wrapper for module-based apps

Views

Three interchangeable views over the same data, switchable via viewMode or the toolbar's Tree/Graph/Table buttons:

options: JsonExplorerOptions = { viewMode: 'graph' }; // 'tree' (default) | 'graph' | 'table'

• Tree (default) — the indented, collapsible tree described above.
• Graph 🚧 (work in progress — see note below) — a force-directed node/link layout: click a node to expand/collapse its subtree, drag nodes to reposition, scroll to zoom, drag the background to pan. Node color follows the same type-based coloring as the tree, and search matches are highlighted. Expand/collapse state is shared with the tree view — switch views mid-session and it's preserved. Adds d3-force (~30 kB, zero peer deps) as a runtime dependency of the library.
• Table — renders the current value as a grid: an array of objects becomes one column per key (click a header to sort), any other array becomes a single-column list, and a plain object becomes a key/value property grid. Click a cell containing an object/array to drill into it as its own table, with a breadcrumb trail back to where you started.

🚧 Graph view is a work in progress. It renders and its expand/collapse click behavior works, but drag-to-reposition and pan/zoom are still being verified and may be unreliable in this release — a stability pass on the d3-force simulation lifecycle is planned for the next release. Table view is stable.

Current limitation (v1): Graph and Table are read-only — inline editing (editable) only applies in Tree view for now. Search/highlighting is wired for Tree and Graph (both read the same underlying node tree); Table view does not yet filter by the current search term.

<ngx-json-explorer [json]="data" [options]="{ viewMode: 'table' }"></ngx-json-explorer>

Recipes

Editing

Set editable: true (or a granular { edit, add, delete } object) and bind [(json)] instead of [json]:

<ngx-json-explorer [(json)]="data" [options]="{ editable: true }" (edited)="onEdited($event)"> </ngx-json-explorer>

• Click the pencil icon to edit a value inline. Type a JSON literal — 42, "text", true, null, {"a":1} — and it's parsed to the matching type; anything that doesn't parse as JSON is kept as a plain string.
• Click the + icon on any object/array (or the toolbar's "+ Add entry" button for top-level keys) to add a new key/item.
• Click the trash icon to delete a node.

Want only some of it enabled? Use the granular form:

options: JsonExplorerOptions = { editable: { edit: true, add: false, delete: false } };

NgModule-based apps

import { NgModule } from '@angular/core';
import { NgxJsonExplorerModule } from 'ngx-json-explorer';

@NgModule({
  imports: [NgxJsonExplorerModule],
})
export class SharedModule {}

App-wide defaults

Set defaults once in app.config.ts instead of repeating [options] on every instance — per-instance [options] still win field-by-field:

import { ApplicationConfig } from '@angular/core';
import { provideNgxJsonExplorerDefaults } from 'ngx-json-explorer';

export const appConfig: ApplicationConfig = {
  providers: [provideNgxJsonExplorerDefaults({ theme: 'dracula', copyable: true })],
};

Custom theme

options: JsonExplorerOptions = {
  theme: { '--njx-key-color': '#ff5722', '--njx-badge-object': '#333' },
};

See Theming for the full variable list and other ways to override colors.

Custom value rendering

Render links, badges, images, or anything else for specific value shapes with [valueTemplate]:

<ngx-json-explorer [json]="data" [valueTemplate]="linkTpl"></ngx-json-explorer>

<ng-template #linkTpl let-segment>
  <a *ngIf="segment.type === 'string' && segment.value.startsWith('http')" [href]="segment.value" target="_blank">
    {{ segment.value }}
  </a>
  <span *ngIf="!(segment.type === 'string' && segment.value.startsWith('http'))">{{ segment.description }}</span>
</ng-template>

JsonExplorerOptions reference

Every field is optional — pass only what you want to change.

| Option | Type | Default | Description | |-------------------------------|---------------------------------------------------------|-------------|----------------------------------------------------------------------------| | expanded | boolean | true | Initial expand state for all nodes | | maxDepth | number | Infinity | Auto-collapse nodes deeper than this level | | theme | preset name | Partial<NjxThemeVars> | 'light' | Named preset (light/dark/monokai/dracula/solarized/nord) or a partial CSS-variable override object | | showTypes | boolean | true | Show the type badge next to each key | | copyable | boolean | true | Show per-node copy-value / copy-path buttons | | showToolbar | boolean | true | Master switch for the whole toolbar | | toolbar | { search?, expandCollapse?, copy?, theme?, download? } | all true except download | Granular per-control toolbar visibility | | sortKeys | boolean | false | Alphabetically sort object keys (arrays keep their order) | | keyFormatter | (key: string) => string | undefined | Purely visual key transform, e.g. snake_case → Title Case | | editable | boolean \| { edit?, add?, delete? } | false | Enable inline editing, granularly or all at once | | indentWidth | number | 18 | Pixels of indent per nesting level | | iconStyle | 'triangle' \| 'circle' \| 'square' \| 'chevron' | 'triangle'| Shape of the expand/collapse glyph | | collapseStringsAfterLength | number | undefined | Truncate long strings with a "…more" toggle | | groupArraysAfterLength | number | undefined | Chunk long arrays into collapsible index-range groups (e.g. [0 … 99]) | | displayArrayKey | boolean | true | Show the numeric index as the "key" for array items | | quotesOnKeys | boolean | false | Wrap object keys in quotes | | rootName | string | undefined | Wrap the whole tree in one synthetic collapsible root node | | caseSensitiveSearch | boolean | false | Default case-sensitivity for search (the user can still toggle it) | | viewMode | 'tree' \| 'graph' \| 'table' | 'tree' | Which view renders the data — see Views |

toolbar also accepts a viewToggle?: boolean field (default true) to show/hide the Tree/Graph/Table switch buttons as a group.

Outputs reference

| Output | Payload | Fired when | |------------------|----------------------------------------------------|---------------------------------------------------| | jsonChange | the updated JSON value | Any edit/add/delete (part of [(json)]) | | copied | { path: string; value: any } | User clicks a copy-value or copy-path button | | searchChanged | string | The (debounced) search term changes | | edited | { path: string; oldValue: any; newValue: any } | An in-place value edit is committed | | added | { path: string; key: string; value: any } | A new key/item is added | | deleted | { path: string; oldValue: any } | A node is deleted |

Theming

Pick a built-in preset:

<ngx-json-explorer [json]="data" [options]="{ theme: 'nord' }"></ngx-json-explorer>

Presets: light, dark, monokai, dracula, solarized, nord.

Or fully re-brand by passing a partial CSS-variable override object instead of a preset name — this layers on top of the light preset:

options: JsonExplorerOptions = {
  theme: { '--njx-key-color': '#ff5722', '--njx-badge-object': '#333' },
};

Every CSS custom property (see NjxThemeVars in json-explorer.types.ts) can also be overridden globally in your own stylesheet, without touching any [options]:

ngx-json-explorer {
  --njx-key-color: #ff5722;
  --njx-max-height: 600px;
}

Accessibility

The tree exposes role="tree" / role="treeitem", aria-expanded, and aria-level. Keyboard support: ↑/↓ move focus, → expands (or moves into the first child), ← collapses (or moves to the previous row), Enter/Space toggles, Home/End jump to the first/last visible row.

Roadmap / not in this pass

• 🚧 Next release: finish stabilizing Graph view — verify drag-to-reposition and pan/zoom, harden the d3-force simulation lifecycle against rapid options/segments changes
• Inline editing inside Graph and Table views (currently Tree-only)
• Raw/Text view (formatted, syntax-highlighted JSON text)
• Search/highlighting support in Table view
• Export the Graph view as a PNG/SVG image
• Virtual scrolling (CDK) for extremely large trees (100k+ nodes)
• Native rendering of Map / Set / RegExp / Error values
• Copy-as-JS-literal
• JSON import / paste-to-view

Found a bug or have a feature request? Open an issue.

Local development / contributing

This package's source lives in an Angular CLI workspace (the same shape ng generate library produces), alongside a testing-app that showcases every option live.

git clone https://github.com/Swaraj55/ngx-json-explorer.git
cd ngx-json-explorer
npm install

ng serve testing-app        # showcase app at http://localhost:4200
ng build ngx-json-explorer  # build the library to dist/ngx-json-explorer
ng test ngx-json-explorer   # run unit tests (Vitest)

Pack and publish from the built output:

ng build ngx-json-explorer
cd dist/ngx-json-explorer
npm pack        # produces ngx-json-explorer-2.0.0.tgz, for local testing
npm publish     # publish to npm

Pull requests welcome — see CONTRIBUTING.md for the full guide, and please follow the Code of Conduct. Found a security issue? See SECURITY.md instead of opening a public issue.

License

MIT — see LICENSE.