Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/udamir/api-diff-viewer

React component to view difference between two Json based API documents
https://github.com/udamir/api-diff-viewer

api compare diff jsonschema openapi react side-by-side swagger

Last synced: 2 days ago
JSON representation

React component to view difference between two Json based API documents

Awesome Lists containing this project

README

        

# api-diff-viewer
npm npm npm type definitions GitHub

React component to view the difference between two Json based API documents. Supported specifications: JsonSchema, OpenAPI 3.x, AsyncAPI 2.x.

View [online demo](https://udamir.github.io/api-diff-viewer/) and [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://api-diff-viewer.vercel.app/)

## Current status and plans:
- [x] JsonSchema support
- [x] OpenApi 3.x support
- [ ] Swagger support
- [x] AsyncApi 2.x support
- [x] Side-by-side compare view
- [x] Inline compare view
- [x] Yaml output
- [x] Json output
- [x] Compare text by words
- [x] Collapse/expand blocks
- [x] View change summary on collaped blocks
- [x] Collapse/expand all
- [x] Filter changes by type (Hide unchanged/not filtered lines)
- [x] Navigation sidebar
- [x] Non-blocking loading (via WebWorker)
- [x] Custom themes support
- [ ] Default themes
- [ ] WebComponent
- [ ] Performance improvement
- [ ] Tests

## Documentation

### Installation

```sh
# Yarn
yarn add api-diff-viewer

# NPM
npm install api-diff-viewer
```

> ✨ Checkout the stories [here](https://api-diff-viewer.vercel.app/) for a detailed documentation.

## Development

### Install

```sh
yarn install
```

### Develop

```sh
yarn storybook
```

## License

MIT