@simoneldevig/json-gui NPM

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

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 
};