https://github.com/simoneldevig/json-gui
Currently in beta... A GUI for easily creating mock api's via a UI with json-server
https://github.com/simoneldevig/json-gui
json-gui json-server mock mock-api mock-server rest-api
Last synced: 3 months ago
JSON representation
Currently in beta... A GUI for easily creating mock api's via a UI with json-server
- Host: GitHub
- URL: https://github.com/simoneldevig/json-gui
- Owner: simoneldevig
- License: mpl-2.0
- Created: 2019-09-01T16:11:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-05-06T16:25:54.000Z (almost 3 years ago)
- Last Synced: 2025-10-26T02:22:25.718Z (5 months ago)
- Topics: json-gui, json-server, mock, mock-api, mock-server, rest-api
- Language: Vue
- Homepage:
- Size: 17.1 MB
- Stars: 11
- Watchers: 3
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Currently in beta👷♂️
Bugs may occur
> Create a REST API with a GUI
- ⚡️ Create endpoints
- ♻️ Create reusable models
- ➕ Add property types (string, number, boolean, object, array)
- 🦄 [Faker.js](https://github.com/marak/Faker.js/) integration for quickly adding random data
- 🔌 [Quicktype.io](https://quicktype.io/) integration for converting models and endpoints to C# and TypeScript (properly more to come)
JSON GUI is a tool for making even easier mock up a full REST API for your project. It's a GUI for [json-server](https://github.com/typicode/json-server) so you don't have to write JSON or generator functions to set up your API.
Even though it's made for json-server, it can also be used as a JSON generator.
## How it looks
## Getting started
**Install using npm**
``` bash
npm i @simoneldevig/json-gui
```
**Run it with npx**
``` bash
npx json-gui
```
**Run it with npm scripts**
Add `"json-gui": "json-gui` to `scripts` property in `package.json` and do
``` bash
npm run json-gui
```
## Configuration
It's possible to configure the json-server implementation via a config file.
To configure the settings, simply create a file called json-server.config.js. All [json-server](https://github.com/typicode/json-server#cli-usage) CLI configurations are supported. The default config looks like this:
```javascript
module.exports = {
baseDir: 'json-gui', // Directory where json-gui files are located
port: 5000, // Set port
host: 'localhost', // Set host
watch: true, // Watch for changes to db.json
routes: '', // Path to custom routes file
delay: 0, // Add delay to responses (ms)
logger: true, // Show logs in console
noCors: false, // Disable Cross-Origin Resource Sharing
readOnly: true, // Allow only GET requests (json-gui will overwrite posted data on generate)
snapshotsDir: 'json-gui/snapshots', // Set snapshots directory
foreignKeySuffix: 'Id', // Set foreign key suffix, (e.g. _id as in post_id)
id: 'id', // Set database id property (e.g. _id)
middlewares: [] // Relative paths to middleware files
};
```
## Future stuff (up for grabs)
- [ ] [Unit tests](https://github.com/simoneldevig/json-gui/issues/2)
- [ ] [JSON importer](https://github.com/simoneldevig/json-gui/issues/1)
- [ ] [Easy deployment](https://github.com/simoneldevig/json-gui/issues/7)
## Contribution
See [Contributing Guide](https://github.com/simoneldevig/json-gui/tree/master/.github/CONTRIBUTING.md).
## License
Copyright © 2021 Simon Eldevig
All source code is licensed under the [Mozilla Public License](https://github.com/simoneldevig/json-gui/blob/master/LICENSE).