schyma 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# JSON Schema Visualizer(Schyma)
|
|
2
|
+
|
|
3
|
+
Schyma is a tool designed to simplify the visualization of JSON Schemas, making it less tedious to learn how different parts of api specs are connected(especially when you’re just starting). The visualizer takes JSON Schema files as input and generates a user-friendly graphical representation of the specification.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Import JSON Schemas: The visualizer supports various JSON Schemas, such as AsyncAPI, Postman Collection Format, OpenAPI (formerly Swagger), Github Action Spec and so much more. You can easily import your JSON Schema files into the tool.
|
|
8
|
+
|
|
9
|
+
- Interactive Visualization: The visualizer provides an interactive and intuitive graphical representation of the JSON Schema. Names, Descriptions, Examples, and other essential details are visually presented for better understanding.
|
|
10
|
+
|
|
11
|
+
## Supported JSON Schema Formats
|
|
12
|
+
|
|
13
|
+
The JSON Schema Visualizer currently supports the following JSON Schema formats:
|
|
14
|
+
`.json`
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Installation & Usage
|
|
18
|
+
|
|
19
|
+
The easiest way to use schyma is to install it from npm and build it into your app with Webpack.
|
|
20
|
+
|
|
21
|
+
```
|
|
22
|
+
npm install schyma
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Then use it in your app:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import React from 'react';
|
|
29
|
+
import Schyma from 'schyma';
|
|
30
|
+
import 'schyma/dist/esm/style.css'
|
|
31
|
+
import schema from '../config/2.6.0.json';
|
|
32
|
+
|
|
33
|
+
export default function App() {
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div className="App">
|
|
37
|
+
<Schyma title="Name of Specification" description="Specification Description" schema={schema} />
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Monorepo Development
|
|
44
|
+
|
|
45
|
+
This repository is now organized as a monorepo:
|
|
46
|
+
|
|
47
|
+
- `packages/library`: the published `schyma` package
|
|
48
|
+
- `packages/playground`: a local React playground that consumes the workspace library
|
|
49
|
+
|
|
50
|
+
Run from the repository root:
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
npm install
|
|
54
|
+
npm run dev
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Useful commands:
|
|
58
|
+
|
|
59
|
+
```bash
|
|
60
|
+
npm run build
|
|
61
|
+
npm run build:library
|
|
62
|
+
npm run build:playground
|
|
63
|
+
npm run test
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Props
|
|
67
|
+
|
|
68
|
+
Common props you may want to specify include:
|
|
69
|
+
|
|
70
|
+
- `title`: The title of the JSON Schema, which will also be displayed on the initial node.
|
|
71
|
+
|
|
72
|
+
- `description`: The description of the JSON Schema being parsed
|
|
73
|
+
|
|
74
|
+
- `schema`: The JSON Schema schema which will be rendered on the visualizer.
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
## Contributing
|
|
78
|
+
We welcome contributions from the community! If you find a bug, have a feature request, or want to contribute in any way.
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
## License
|
|
82
|
+
|
|
83
|
+
Apache Liscence 2.0. Copyright (c) Azeez Elegbede 2026.
|