Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/udamir/api-diff-viewer
- Owner: udamir
- License: mit
- Created: 2022-05-01T09:49:52.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-14T10:46:50.000Z (14 days ago)
- Last Synced: 2024-12-18T09:09:37.327Z (10 days ago)
- Topics: api, compare, diff, jsonschema, openapi, react, side-by-side, swagger
- Language: TypeScript
- Homepage: http://api-diff-viewer.vercel.app
- Size: 3.9 MB
- Stars: 36
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# api-diff-viewer
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