{"id":41593,"library":"ngx-json-viewer","title":"ngx-json-viewer","description":"Angular component for displaying JSON data in a collapsible, tree-like view. Current stable version is 3.2.1, released periodically. Key differentiators: fully Angular-native (no jQuery), supports theming via CSS variables, configurable depth and initial expansion, works with Angular 2+. Older versions (v1 for Angular 2, v2 for Angular 4-7) have different APIs and are in maintenance mode.","status":"active","version":"3.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/hivivo/ngx-json-viewer","tags":["javascript","angular","json","typescript"],"install":[{"cmd":"npm install ngx-json-viewer","lang":"bash","label":"npm"},{"cmd":"yarn add ngx-json-viewer","lang":"bash","label":"yarn"},{"cmd":"pnpm add ngx-json-viewer","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM import path; also sets up the component in your Angular module.","wrong":"import { NgxJsonViewerModule } from 'ngx-json-viewer/ngx-json-viewer.module';","symbol":"NgxJsonViewerModule","correct":"import { NgxJsonViewerModule } from 'ngx-json-viewer';"},{"note":"Can be used directly if you are using standalone components (Angular 14+).","wrong":null,"symbol":"NgxJsonViewerComponent","correct":"import { NgxJsonViewerComponent } from 'ngx-json-viewer';"},{"note":"The package is ESM-only; CommonJS require will not work. Use import statements.","wrong":"const ngxJsonViewer = require('ngx-json-viewer');","symbol":"require('ngx-json-viewer')","correct":null}],"quickstart":{"code":"// app.module.ts\nimport { NgxJsonViewerModule } from 'ngx-json-viewer';\n\n@NgModule({\n  imports: [\n    NgxJsonViewerModule\n  ],\n  ...\n})\nexport class AppModule { }\n\n// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <ngx-json-viewer [json]=\"jsonData\" [expanded]=\"true\" [depth]=\"5\"></ngx-json-viewer>\n  `,\n  styles: [`\n    :host { display: block; }\n  `]\n})\nexport class AppComponent {\n  jsonData = {\n    name: 'John',\n    age: 30,\n    active: true,\n    address: {\n      street: '123 Main St',\n      city: 'Anytown',\n      zip: '12345'\n    },\n    hobbies: ['reading', 'coding', 'hiking']\n  };\n}","lang":"typescript","description":"Minimal Angular setup: import the module, bind a JSON object, and display it with expandable/collapsible nodes."},"warnings":[{"fix":"Upgrade to Angular 14+ or use ngx-json-viewer@2 for Angular 4-7.","message":"Version 3.x drops support for Angular < 14.","severity":"breaking","affected_versions":">=3.0.0 <4.0.0"},{"fix":"Use [json] input instead of [data]; for Angular 2 use version 1.x.","message":"Version 2.x drops support for Angular 2/3 and introduces a new API with [json] input instead of [data].","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"Use --ngx-json-font-family for font-family and --ngx-json-font-size for font-size (if supported). Check source if not available.","message":"The old CSS custom property --ngx-json-font-family is incorrectly named; it is used for font-size as well.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Set [expanded]=\"true\" if you want depth-based expansion.","message":"The [depth] input does not work correctly when [expanded] is false; nodes remain collapsed regardless of depth.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"search_vec":"'-7':57 '2':46,52 '3.2.1':22 '4':56 'angular':5,29,45,51,55,67 'angular-n':28 'api':60 'collaps':13 'compon':6 'configur':38 'css':36 'current':18 'data':10 'depth':39 'differ':59 'differenti':26 'display':8 'expans':42 'fulli':27 'initi':41 'javascript':66 'jqueri':32 'json':3,9,68 'key':25 'like':16 'mainten':64 'mode':65 'nativ':30 'ngx':2 'ngx-json-view':1 'older':47 'period':24 'releas':23 'stabl':19 'support':33 'theme':34 'tree':15 'tree-lik':14 'typescript':69 'v1':49 'v2':53 'variabl':37 'version':20,48 'via':35 'view':17 'viewer':4 'work':43","created_at":"2026-06-04T18:53:09.700262+00:00","updated_at":"2026-06-04T18:53:09.700262+00:00","problems":[{"fix":"Ensure you have run `npm install ngx-json-viewer` and that your tsconfig has `\"module\": \"esnext\"` and `\"moduleResolution\": \"node\"`.","cause":"Missing import or type definitions not loaded.","error":"Cannot find module 'ngx-json-viewer' or its corresponding type declarations."},{"fix":"Use `import { NgxJsonViewerModule } from 'ngx-json-viewer';` (correct path).","cause":"Trying to import a named export that does not exist or using a wrong path.","error":"ERROR in 'NgxJsonViewerModule' is not an NgModule"},{"fix":"Add NgxJsonViewerModule to the imports array of the module that declares the component using <ngx-json-viewer>.","cause":"NgxJsonViewerModule is not imported in the module where the component is used.","error":"Can't bind to 'json' since it isn't a known property of 'ngx-json-viewer'."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/hivivo/ngx-json-viewer#readme","github":"https://github.com/hivivo/ngx-json-viewer","docs":null,"changelog":null,"pypi":null,"npm":"ngx-json-viewer","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}