Create API Documentation from JSON

When building APIs, you often start with a sample JSON response and need to generate all the supporting artifacts — type definitions, OpenAPI schemas, mock endpoints, and documentation. DataLensia lets you derive all of these from a single JSON payload.

🚩 The Scenario

You're designing a new /api/products endpoint and have a sample response:

[
  {
    "id": "prod_001",
    "name": "Wireless Headphones",
    "price": 79.99,
    "inStock": true,
    "categories": ["electronics", "audio"],
    "specs": {
      "battery_hours": 30,
      "bluetooth_version": "5.3",
      "weight_grams": 250
    }
  }
]

🛠️ Step 1: Generate TypeScript Types

1. Open the JSON Convert tool.
2. Paste your sample JSON.
3. Select TypeScript from the format grid.
4. Copy the generated types:

interface Specs {
  battery_hours: number;
  bluetooth_version: string;
  weight_grams: number;
}

interface Product {
  id: string;
  name: string;
  price: number;
  inStock: boolean;
  categories: string[];
  specs: Specs;
}

type RootType = Product[];

🛠️ Step 2: Generate JSON Schema

1. Open the Schema Generator.
2. Paste the same JSON.
3. Copy the generated JSON Schema (Draft 2020-12) for request/response validation.

🛠️ Step 3: Generate OpenAPI Spec

1. Open the JSON Convert tool.
2. Select OpenAPI from the API/Schema category.
3. The tool generates an OpenAPI 3.0 specification with schemas derived from your data.

🛠️ Step 4: Create a Mock Endpoint

1. Open the Mock API Generator.
2. Paste your sample JSON.
3. Configure: Status 200, Method GET, Delay 200ms.
4. Click Generate Link.
5. Use the generated URL in your frontend while the backend is being built:

const res = await fetch("https://datalensia.com/api/mock/m1.eJy...");
const products = await res.json();

🛠️ Step 5: Add Dynamic Values

Make your mock more realistic with Faker.js placeholders:

[
  {
    "id": "{{faker.string.uuid()}}",
    "name": "{{faker.commerce.productName()}}",
    "price": "{{faker.commerce.price()}}",
    "inStock": true,
    "categories": ["{{faker.commerce.department()}}"]
  }
]

Every request to your mock endpoint now returns different, realistic data.

💡 Complete Workflow Summary

Step	Tool	Output
1	Convert → TypeScript	.ts type definitions
2	Schema Generator	JSON Schema (Draft 2020-12)
3	Convert → OpenAPI	OpenAPI 3.0 YAML
4	Mock API Generator	Live REST endpoint
5	Mock + Faker	Dynamic mock data

🎯 Benefits

• Single source of truth: One JSON sample generates all artifacts.
• Frontend unblocked: Developers can code against mock endpoints immediately.
• Consistent contracts: TypeScript types and JSON Schema ensure frontend and backend agree on the data shape.
• Zero infrastructure: Everything runs locally in the browser, no deployment needed.

---

🚀 Try it now

Start with any JSON in the Convert Tool, generate TypeScript types, then create a mock endpoint in the Mock API Generator.