https://github.com/Verbalman/ngx-json-reader

Angular 17+ JSON reader/editor with multi-URL compare & diff
https://github.com/Verbalman/ngx-json-reader

Last synced: about 2 months ago
JSON representation

Angular 17+ JSON reader/editor with multi-URL compare & diff

• Host: GitHub
• URL: https://github.com/Verbalman/ngx-json-reader
• Owner: Verbalman
• License: mit
• Created: 2025-08-19T18:50:38.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2025-08-19T20:06:28.000Z (2 months ago)
• Last Synced: 2025-08-19T22:10:55.784Z (2 months ago)
• Language: TypeScript
• Homepage:
• Size: 116 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-angular - ngx-json-reader - Angular 17+ JSON reader/editor with multi-URL comparison and diffing. (Development Utilities / Developer Tools)
• awesome-angular - ngx-json-reader - Angular 17+ JSON reader/editor with multi-URL comparison and diffing. (Development Utilities / Developer Tools)

README

          
# NgxJsonReader

[![npm version](https://img.shields.io/npm/v/ngx-json-reader.svg)](https://www.npmjs.com/package/ngx-json-reader)

[![GitHub stars](https://img.shields.io/github/stars/Verbalman/ngx-json-reader.svg?style=social)](https://github.com/Verbalman/ngx-json-reader)

**ngx-json-reader** is a lightweight Angular 17+ library for working with JSON in your applications.

It provides a standalone component that can:

- Load JSON from URLs or directly from data inputs

- Render tree view with expand/collapse and inline editing

- Compare multiple JSON sources side-by-side

- Download JSON back to file

Perfect for developer tools, admin dashboards, or any Angular app that needs an interactive JSON viewer/editor.

## Installation

```bash

npm install ngx-json-reader

```

## Example usage

```typescript

import { Component } from '@angular/core';

import { JsonReaderComponent } from 'ngx-json-reader';

@Component({

  selector: 'app-root',

  standalone: true,

  imports: [JsonReaderComponent],

  template: `

    

    

    

    

    

    

    

  `

})

export class AppComponent {

  fisrt = { a: 1, b: { x: 10, y: [1,2] } };

  second = { a: 1, b: { x: 11, y: [1,2,3] }, d: null };

  srcUrls = [

    './some/path/one.json',

    './some/path/two.json',

  ];

  downloadFilename = [

    'new-one.json',

    'new-two.json',

  ];

}

```

## Inputs / Outputs

### Inputs

- `srcUrls?: string[]`: load JSONs from URLs

- `srcHeaders?: Record`: headers for load JSONs from URLs

- `data?: unknown | unknown[]`: single or multiple JSON objects

- `editable = true`: enable inline editing

- `modified = false`: enable add/remove action

- `expanded = true`: expand all JSONs by default

- `downloadFilename: string | string[] = 'data.json'`: filename when downloading

### Outputs

- `dataChange`: emits on JSON edits