Skip to content

Currently in beta... A GUI for easily creating mock api's via a UI with json-server

License

Notifications You must be signed in to change notification settings

simoneldevig/json-gui

Repository files navigation

Currently in beta👷‍♂️

Bugs may occur

json-gui logo


travis build npm version node compatility


Create a REST API with a GUI

  • ⚡️ Create endpoints
  • ♻️ Create reusable models
  • ➕ Add property types (string, number, boolean, object, array)
  • 🦄 Faker.js integration for quickly adding random data
  • 🔌 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 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

json-gui screenshot

Getting started

Install using npm

npm i @simoneldevig/json-gui

Run it with npx

npx json-gui 

Run it with npm scripts

Add "json-gui": "json-gui to scripts property in package.json and do

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 CLI configurations are supported. The default config looks like this:

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)

Contribution

See Contributing Guide.

License

Copyright © 2021 Simon Eldevig

All source code is licensed under the Mozilla Public License.