view-api 1.1.1 → 3.0.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 Ridlo Achmad Ghifary
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -6,10 +6,11 @@ Perfect for frontend development, testing, and prototyping without a real backen
 
 ## ✨ Features
 
-- Run mock APIs from a single JSON file
+- Run a command and get editor and the api fetchable
 - Auto Refresh JSON file
 - Customizable port
 - Randomized success / error responses
+- Delay response
 - Zero setup for frontend teams
 - Works fully offline
 
@@ -20,62 +21,96 @@ You don’t need to install it globally.
 Run directly with `npx`:
 
 ```bash
-npx view-api start ./mock.json --port 4000
+# simpler way
+npx view-api dev
+
+or
+
+# use your own file
+npx view-api dev <file-path>
 ```
 
 Or install globally:
 
 ```bash
 npm install -g view-api
-view-api start mock.json
+view-api dev
 ```
 
 ## 🚀 Usage
 
 ```bash
-view-api start <config-path> [options]
+view-api dev <config-path> [options]
 ```
 
 ### Options
 
-| Option         | Description            | Default |
-| -------------- | ---------------------- | ------- |
-| `--port`, `-p` | Port to run the server | `3000`  |
+| Option       | Description            | Default |
+| ------------ | ---------------------- | ------- |
+| `--api-port` | Port to run the api    | `8723`  |
+| `--ui-port`  | Port to run the editor | `8724`  |
 
 Example:
 
 ```bash
-view-api start src/mocks/mock.json --port 4000
+view-api dev src/mocks/mock.json --api-port 4000 --ui-port 4001
+```
+
+Then you will have running editor and the API endpoint:
+
+```bash
+➜ API running at   http://localhost:4000
+➜ EDITOR running at   http://localhost:4001
 ```
 
 ## 📄 Mock Config Format
 
 ```json
 {
-  "version": "1.0.0",
-  "routes": {
-    "GET /products": {
-      "behavior": {
-        "successRate": 70
+  "GET /products": {
+    "behavior": {
+      "successRate": 50
+    },
+    "responses": {
+      "success": {
+        "statusCode": 200,
+        "body": {
+          "status": "success",
+          "message": "Products fetched wkwk",
+          "data": [
+            {
+              "id": 1,
+              "name": "Product A",
+              "price": 10000,
+              "stock": 50
+            },
+            {
+              "id": 2,
+              "name": "Product B",
+              "price": 15000,
+              "stock": 30
+            }
+          ]
+        }
       },
-      "responses": {
-        "success": {
-          "statusCode": 200,
+      "errors": [
+        {
+          "statusCode": 500,
           "body": {
-            "status": "success",
-            "data": [{ "id": 1, "name": "Product A" }]
+            "status": "failed",
+            "message": "Server error",
+            "error_code": "SERVER_ERROR"
           }
         },
-        "errors": [
-          {
-            "statusCode": 500,
-            "body": {
-              "status": "failed",
-              "message": "Server error"
-            }
+        {
+          "statusCode": 400,
+          "body": {
+            "status": "failed",
+            "message": "Bad request, invalid parameters",
+            "error_code": "INVALID_PARAMETERS"
           }
-        ]
-      }
+        }
+      ]
     }
   }
 }
@@ -83,4 +118,4 @@ view-api start src/mocks/mock.json --port 4000
 
 ## 📜 License
 
-MIT
+Licensed under the MIT License.

package/bin/mock-runner.js

@@ -1,20 +1,38 @@
 #!/usr/bin/env node
 
-import path from "path";
 import { program } from "commander";
-import startServer from "../src/server.js";
+import { startApiServer } from "../src/api/server.js";
+import { startEditorServer } from "../src/editor/server.js";
+import { loadConfig } from "../src/shared/config.js";
 
 program
-  .name("mock-runner")
-  .description("Run mock APIs from a JSON config")
-  .version("1.0.0");
+  .name("view-api")
+  .description("Run mock APIs locally from a JSON configuration file")
+  .version("2.0.0");
 
+/**
+ * DEV — API + Editor
+ */
 program
-  .command("start <config>")
-  .option("-p, --port <port>", "port to run server", "3000")
-  .action((config, options) => {
-    const configPath = path.resolve(process.cwd(), config);
-    startServer({ configPath, port: Number(options.port) || 8734 });
+  .command("dev [configPath]")
+  .description("Start mock API with live editor UI")
+  .option("--api-port <port>", "API port", 8723)
+  .option("--ui-port <port>", "Editor UI port", 8724)
+  .action((configPath, options) => {
+    if (configPath && !configPath.endsWith(".json")) {
+      console.error("➜ Config file must be a .json file");
+      process.exit(1);
+    }
+
+    if (options.apiPort === options.uiPort) {
+      console.error("➜ API port and UI port must be different");
+      process.exit(1);
+    }
+
+    loadConfig(configPath);
+
+    startApiServer({ port: Number(options.apiPort) });
+    startEditorServer({ port: Number(options.uiPort) });
   });
 
 program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-api",
-  "version": "1.1.1",
+  "version": "3.0.1",
   "description": "Run mock APIs locally from a JSON configuration file",
   "type": "module",
   "bin": {
@@ -10,7 +10,7 @@
     "type": "git",
     "url": "https://github.com/RidloGhifary/view-api"
   },
-  "homepage": "https://github.com/RidloGhifary/view-api",
+  "homepage": "https://ridloghifary.github.io/view-api",
   "bugs": {
     "url": "https://github.com/RidloGhifary/view-api/issues"
   },
@@ -20,7 +20,7 @@
     "README.md"
   ],
   "scripts": {
-    "dev": "nodemon bin/mock-runner.js start src/mocks/mock.json",
+    "dev": "nodemon bin/mock-runner.js dev src/mocks/mock.json",
     "start": "node bin/mock-runner.js",
     "prepublishOnly": "npm run lint || true"
   },
@@ -31,16 +31,22 @@
     "cli",
     "frontend",
     "testing",
-    "json"
+    "json",
+    "view-api"
   ],
-  "author": "Ridlo",
+  "author": "Ridlo Achmad Ghifary <ridloghfry@gmail.com>",
+  "private": false,
   "license": "MIT",
   "engines": {
     "node": ">=18"
   },
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "codemirror": "^6.0.2",
     "commander": "^14.0.2",
     "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
     "express": "^5.2.1",
     "helmet": "^8.1.0",
     "morgan": "^1.10.1"

package/src/api/handler.js

@@ -0,0 +1,42 @@
+import { getConfig } from "../shared/config.js";
+import { chance, pickRandom } from "./random.js";
+
+export const handleMockRequest = (req, res) => {
+  const key = `${req.method.toUpperCase()} ${req.path}`;
+  const config = getConfig()[key];
+
+  if (!config) {
+    return res.status(404).json({
+      status: "failed",
+      message: "Mock not found",
+    });
+  }
+
+  const isSuccess = chance(config?.behavior?.successRate ?? 100);
+  const errors = config?.responses?.errors ?? [];
+
+  if (isSuccess || !errors?.length) {
+    const { statusCode = 200, body } = config.responses.success;
+    const delay = config?.behavior?.delay ?? 0;
+
+    if (!body) {
+      return res.status(statusCode).json("No response body defined");
+    }
+
+    if (delay > 0) {
+      return setTimeout(() => {
+        res.status(statusCode).json(body);
+      }, delay);
+    }
+
+    return res.status(statusCode).json(body);
+  }
+
+  const error = pickRandom(errors);
+
+  if (!error.body) {
+    return res.status(error.statusCode ?? 500).json("No error body defined");
+  }
+
+  return res.status(error.statusCode ?? 500).json(error.body);
+};

package/src/api/random.js

@@ -0,0 +1,7 @@
+export const chance = (percent) => {
+  return Math.random() * 100 < percent;
+};
+
+export const pickRandom = (arr) => {
+  return arr[Math.floor(Math.random() * arr.length)];
+};

package/src/api/server.js

@@ -0,0 +1,20 @@
+import express from "express";
+import morgan from "morgan";
+import cors from "cors";
+import helmet from "helmet";
+import { handleMockRequest } from "./handler.js";
+
+export const startApiServer = ({ port }) => {
+  const app = express();
+
+  app.use(express.json());
+  app.use(cors());
+  app.use(helmet());
+  app.use(morgan("dev"));
+
+  app.use(handleMockRequest);
+
+  app.listen(port, () =>
+    console.log(`➜ API running at   http://localhost:${port}`),
+  );
+};

package/src/editor/public/editor.js

@@ -0,0 +1,78 @@
+import { json } from "https://esm.sh/@codemirror/lang-json";
+import { oneDark } from "https://esm.sh/@codemirror/theme-one-dark";
+import { EditorView, basicSetup } from "https://esm.sh/codemirror";
+
+let editor, saveTimer, statusTimer;
+let lastValid = true;
+
+const statusEl =
+  document.getElementById("status") || document.createElement("div");
+statusEl.id = "status";
+document.body.appendChild(statusEl);
+
+// load config
+const res = await fetch("/__config");
+const data = await res.json();
+
+const customTheme = EditorView.theme({
+  "&": {
+    fontSize: "14px",
+    fontFamily: `"JetBrains Mono", "Fira Code", monospace`,
+  },
+  ".cm-content": {
+    padding: "16px",
+  },
+});
+
+editor = new EditorView({
+  doc: JSON.stringify(data, null, 2),
+  extensions: [
+    basicSetup,
+    json(),
+    oneDark,
+    customTheme,
+    EditorView.updateListener.of((update) => {
+      if (!update.docChanged) return;
+      debounceSave();
+    }),
+  ],
+  parent: document.getElementById("editor"),
+});
+
+function debounceSave() {
+  clearTimeout(saveTimer);
+  saveTimer = setTimeout(saveConfig, 700);
+}
+
+async function saveConfig() {
+  try {
+    const value = editor.state.doc.toString();
+    if (!value.trim().endsWith("}")) return;
+
+    const parsed = JSON.parse(value);
+
+    await fetch("/__config", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(parsed),
+    });
+
+    showStatus("Saved ✓", false);
+    lastValid = true;
+  } catch (err) {
+    showStatus("Invalid JSON ✗", true);
+    lastValid = false;
+  }
+}
+
+function showStatus(text, isError) {
+  clearTimeout(statusTimer);
+
+  statusEl.textContent = text;
+  statusEl.className = isError ? "error" : "ok";
+  statusEl.style.opacity = "1";
+
+  statusTimer = setTimeout(() => {
+    statusEl.style.opacity = "0";
+  }, 2500);
+}

package/src/editor/public/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>View API Editor</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <div id="editor"></div>
+    <div id="status"></div>
+
+    <script type="module" src="./editor.js"></script>
+  </body>
+</html>

package/src/editor/public/style.css

@@ -0,0 +1,40 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+#editor {
+  height: 100vh;
+  width: 100vw;
+}
+
+/* CodeMirror full height fix */
+.cm-editor {
+  height: 100%;
+}
+
+#status {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 6px 12px;
+  font-size: 12px;
+  text-align: center;
+  transition: opacity 0.3s ease;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#status.ok {
+  background: #064e3b;
+  color: #a7f3d0;
+}
+
+#status.error {
+  background: #7f1d1d;
+  color: #fecaca;
+}

package/src/editor/server.js

@@ -0,0 +1,30 @@
+import express from "express";
+import path from "path";
+import { fileURLToPath } from "url";
+import { getConfig, setConfig } from "../shared/config.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const startEditorServer = ({ port }) => {
+  const app = express();
+  app.use(express.json());
+
+  // serve UI
+  app.use(express.static(path.join(__dirname, "public")));
+
+  // get current config
+  app.get("/__config", (_req, res) => {
+    res.json(getConfig());
+  });
+
+  // save config
+  app.post("/__config", (req, res) => {
+    setConfig(req.body);
+    res.json({ ok: true });
+  });
+
+  app.listen(port, () =>
+    console.log(`➜ EDITOR running at   http://localhost:${port}`),
+  );
+};

package/src/mocks/mock.json

@@ -1,51 +1,48 @@
 {
-  "version": "1.0.0",
-  "routes": {
-    "GET /products": {
-      "behavior": {
-        "successRate": 50
+  "GET /products": {
+    "behavior": {
+      "successRate": 50
+    },
+    "responses": {
+      "success": {
+        "statusCode": 200,
+        "body": {
+          "status": "success",
+          "message": "Products fetched wkwk",
+          "data": [
+            {
+              "id": 1,
+              "name": "Product A",
+              "price": 10000,
+              "stock": 50
+            },
+            {
+              "id": 2,
+              "name": "Product B",
+              "price": 15000,
+              "stock": 30
+            }
+          ]
+        }
       },
-      "responses": {
-        "success": {
-          "statusCode": 200,
+      "errors": [
+        {
+          "statusCode": 500,
           "body": {
-            "status": "success",
-            "message": "Products fetched wkwk",
-            "data": [
-              {
-                "id": 1,
-                "name": "Product A",
-                "price": 10000,
-                "stock": 50
-              },
-              {
-                "id": 2,
-                "name": "Product B",
-                "price": 15000,
-                "stock": 30
-              }
-            ]
+            "status": "failed",
+            "message": "Server error",
+            "error_code": "SERVER_ERROR"
           }
         },
-        "errors": [
-          {
-            "statusCode": 500,
-            "body": {
-              "status": "failed",
-              "message": "Server error",
-              "error_code": "SERVER_ERROR"
-            }
-          },
-          {
-            "statusCode": 400,
-            "body": {
-              "status": "failed",
-              "message": "Bad request, invalid parameters",
-              "error_code": "INVALID_PARAMETERS"
-            }
+        {
+          "statusCode": 400,
+          "body": {
+            "status": "failed",
+            "message": "Bad request, invalid parameters",
+            "error_code": "INVALID_PARAMETERS"
           }
-        ]
-      }
+        }
+      ]
     }
   }
 }

package/src/shared/config.js

@@ -0,0 +1,23 @@
+import fs from "fs";
+import { defaultMockConfig } from "./defaultConfig.js";
+
+let config = {};
+
+export const loadConfig = (path) => {
+  if (!path) {
+    config = structuredClone(defaultMockConfig);
+    return;
+  }
+
+  if (!fs.existsSync(path)) {
+    throw new Error(`Mock config file not found: ${path}`);
+  }
+
+  config = JSON.parse(fs.readFileSync(path, "utf-8"));
+};
+
+export const getConfig = () => config;
+
+export const setConfig = (next) => {
+  config = next;
+};

package/src/shared/defaultConfig.js

@@ -0,0 +1,54 @@
+export const defaultMockConfig = {
+  "GET /health": {
+    behavior: {
+      successRate: 100,
+      delay: 3000, // milliseconds
+    },
+    responses: {
+      success: {
+        statusCode: 200,
+        body: {
+          status: "success",
+          message: "Life is good!",
+          data: { healthy: true },
+        },
+      },
+      errors: [
+        {
+          statusCode: 500,
+          body: {
+            status: "error",
+            message: "Internal server error",
+          },
+        },
+      ],
+    },
+  },
+
+  "GET /products": {
+    behavior: {
+      successRate: 50,
+    },
+    responses: {
+      success: {
+        statusCode: 200,
+        body: {
+          status: "success",
+          data: [
+            { id: 1, name: "Product A", price: 120000 },
+            { id: 2, name: "Product B", price: 90000 },
+          ],
+        },
+      },
+      errors: [
+        {
+          statusCode: 500,
+          body: {
+            status: "error",
+            message: "Internal server error",
+          },
+        },
+      ],
+    },
+  },
+};

package/src/app.js

@@ -1,29 +0,0 @@
-import express from "express";
-import morgan from "morgan";
-import helmet from "helmet";
-import cors from "cors";
-
-// define routes here
-import mockRoutes from "./routes/mock.routes.js";
-
-import "dotenv/config";
-
-export default function createApp(configPath) {
-  const app = express();
-
-  // ==== MIDDLEWARES ====
-  app.use(express.json());
-  app.use(express.urlencoded({ extended: true }));
-  app.use(morgan("dev"));
-  app.use(cors());
-  app.use(helmet());
-
-  app.use((req, _res, next) => {
-    req.mockConfigPath = configPath;
-    next();
-  });
-
-  app.use(mockRoutes);
-
-  return app;
-}

package/src/controllers/mock.controller.js

@@ -1,21 +0,0 @@
-import { handle } from "../services/mock.service.js";
-
-export const handleRequest = async (req, res, next) => {
-  try {
-    // call service to handle request
-    const data = handle(req.mockConfigPath, req.method, req.path);
-    console.log("🚀 ~ handleRequest ~ data:", data);
-
-    if (!data) {
-      return res.status(404).json({
-        status: "failed",
-        message: `No mock defined for ${req.method} ${req.path}`,
-      });
-    }
-
-    // return response
-    return res.status(data.statusCode).json(data.body);
-  } catch (err) {
-    next(err);
-  }
-};

package/src/routes/mock.routes.js

@@ -1,8 +0,0 @@
-import express from "express";
-import { handleRequest } from "../controllers/mock.controller.js";
-
-const router = express.Router();
-
-router.use(handleRequest);
-
-export default router;

package/src/server.js

@@ -1,10 +0,0 @@
-import createApp from "./app.js";
-
-export default ({ configPath, port }) => {
-  const server = createApp(configPath);
-
-  server.listen(port, () => {
-    console.log(`  ➜  [API] Server running on:   http://localhost:${port}`);
-    console.log(`  ➜  [API] Using config file:   ${configPath}`);
-  });
-};

package/src/services/mock.service.js

@@ -1,15 +0,0 @@
-import { loadConfig } from "../utils/loadConfig.js";
-import { pickResponse } from "../utils/responsePicker.js";
-
-export const handle = (mockConfigPath, method, path) => {
-  const config = loadConfig(mockConfigPath);
-  const key = `${method} ${path}`;
-
-  const route = config.routes[key];
-
-  if (!route) {
-    return null;
-  }
-
-  return pickResponse(route);
-};

package/src/utils/loadConfig.js

@@ -1,6 +0,0 @@
-import fs from "fs";
-
-export const loadConfig = (configPath) => {
-  const raw = fs.readFileSync(configPath, "utf-8");
-  return JSON.parse(raw);
-};

package/src/utils/responsePicker.js

@@ -1,19 +0,0 @@
-export const pickResponse = (routeConfig) => {
-  const { behavior, responses } = routeConfig;
-  const roll = Math.random() * 100;
-
-  if (roll <= behavior.successRate) {
-    return {
-      statusCode: responses.success.statusCode,
-      body: responses.success.body,
-    };
-  }
-
-  const errors = responses.errors;
-  const error = errors[Math.floor(Math.random() * errors.length)];
-
-  return {
-    statusCode: error.statusCode,
-    body: error.body,
-  };
-};