Visual Demo Builder: Create Demos Without Writing YAML

Why a Visual Builder?

DemoScript's YAML-first approach is great for version control and automation, but sometimes you just want to explore an API and build a demo interactively. Maybe you're:

• Prototyping a demo before committing to a structure
• Exploring an unfamiliar API to understand its endpoints
• Not comfortable with YAML syntax
• Wanting to quickly test API calls before adding them to a demo

The Visual Demo Builder addresses all of these use cases with a point-and-click interface that generates valid DemoScript YAML.

Getting Started

Launch the builder with a single command:

demoscript edit

This starts a local server and opens your browser to http://localhost:3002/editor. The editor runs entirely locally, so it works with internal APIs that aren't accessible from the cloud.

demoscript edit --host --port 3838

Two Modes: OpenAPI and Custom

The builder supports two input modes, accessible via a toggle at the top of the interface:

OpenAPI Mode

If you have an OpenAPI specification, this mode lets you browse and execute endpoints visually:

1. Enter your OpenAPI spec URL and click "Fetch"
2. Browse endpoints grouped by tag
3. Search to filter endpoints
4. Click an endpoint to select it
5. Fill in the auto-generated form fields
6. Execute the request to see the response
7. Click "+ Add to Demo" to add it as a step

Custom Mode

Don't have an OpenAPI spec? Custom mode lets you manually enter endpoint details:

• Base URL — The API server (e.g., https://api.example.com)
• Method — GET, POST, PUT, DELETE, or PATCH
• Path — The endpoint path (e.g., /users)
• Headers — Optional JSON headers
• Body — Optional JSON request body

This mode is perfect for quick testing or when working with APIs that don't have OpenAPI documentation.

Building Your Demo Step by Step

As you execute requests and click "+ Add to Demo", steps appear in the right sidebar. You can:

• Drag and drop to reorder steps
• Edit any step to modify its configuration
• Delete steps you don't need

Saving Variables

Need to chain requests? After executing a request, click "Save Variable" to extract a value from the response:

1. Enter a variable name (e.g., userId)
2. Enter the JSON path (e.g., data.id)
3. Click "Save"

The variable is now available as $userId in subsequent requests. Use it in paths (/users/$userId), headers, or request bodies.

Exporting Your Demo

When you're happy with your demo, the Export panel provides multiple options:

• Copy YAML — Copy to clipboard for pasting into a file
• Download YAML — Download as demo.yaml
• Preview YAML — Toggle to see the generated YAML

The generated YAML is ready to use with demoscript serve:

demoscript serve demo.yaml

Example Workflow

Let's walk through creating a demo for a user management API:

1. Launch the Builder

demoscript edit

2. Configure OpenAPI (optional)

If you have an OpenAPI spec, enter the URL and click Fetch. Otherwise, switch to Custom mode.

3. Add Authentication Step

Execute POST /auth/login with credentials, then save the returned token:

• Variable name: token
• JSON path: token

4. Add User Creation Step

Execute POST /users with a new user's data. The form fields are auto-generated if you're using OpenAPI mode. Save the user ID:

• Variable name: userId
• JSON path: id

5. Add Fetch User Step

Execute GET /users/$userId to verify the user was created. The $userId variable is automatically substituted.

6. Export

Click "Download YAML" to get your demo file. The generated YAML might look like:

title: "My Demo"
description: "Generated by DemoScript Builder"

settings:
  base_url: "https://api.example.com"
  openapi: "https://api.example.com/openapi.json"

steps:
  - rest: POST /auth/login
    title: "Login"
    defaults:
      email: "demo@example.com"
      password: "demo123"
    save:
      token: token

  - rest: POST /users
    title: "Create User"
    defaults:
      name: "New User"
      email: "newuser@example.com"
    save:
      userId: id

  - rest: GET /users/$userId
    title: "Fetch User"

Local-First Design

The builder runs entirely on your local machine, which provides several advantages:

• Works with internal APIs — Access localhost or private network APIs
• No cloud required — Works offline once started
• Session persistence — Your work is saved to localStorage
• Free — Included with the open-source CLI

Summary

• demoscript edit launches the visual demo builder
• OpenAPI mode auto-generates forms from your API spec
• Custom mode lets you manually enter endpoint details
• Save variables to chain requests together
• Drag-and-drop to reorder steps
• Export to YAML for use with demoscript serve

The Visual Demo Builder bridges the gap between exploring an API and creating a polished demo. Use it to prototype quickly, then refine the exported YAML as needed.