How to make a demo video for an API or developer tool

Short answer: an API has no UI to record, so show the request and the result. Four beats: the outcome in one line, the install or the call typed in a terminal, the output arriving, and one number or command to end on. Build it in React with Remotion so every character on screen is real, sharp text you can edit.

This post is about the developer-tool version. For a product with a UI, see how to make a product demo video in React.

Why API demos are hard

A dashboard demo shows itself: click, something changes. An API demo is a curl and a JSON blob, and a recording of that is:

• Too small. A terminal at 13px on a 1080p capture is unreadable on a phone.
• Noisy. Your prompt, your hostname, three warnings, a scroll.
• Frozen. When the output format changes, you re-record.

Rebuilt as components, the terminal types exactly the lines you give it, at a size you choose, and a new output is a new string.

The four beats

Trim the output hard. Nobody reads a 40-line JSON response in a video — show the three lines that prove it worked.

The call and the result: a terminal

Terminal Simulator is one camera flying over one canvas: a headline, an install panel with package-manager tabs, then a focus terminal that types its output in bursts. Any line ending in ... holds the frame, which is exactly the beat where a request is in flight:

import { TerminalSimulator } from "@/components/snap-cn/terminal-simulator";

export const CallScene = () => (
  <TerminalSimulator
    intro="*Invoices* from one *call.*"
    command={{
      managers: ["npm", "pnpm", "yarn", "bun"],
      text: "npm install @acme/billing",
    }}
    lines={[
      { text: "acme.invoices.create({ customer: 'cus_42' })", type: "command", delay: 0 },
      { text: "Sending...", type: "log", delay: 6 },
      { text: "→ inv_9f3 created · $1,240.00", type: "success", delay: 8 },
    ]}
  />
);

Pass intro={null} or command={null} to skip a station — the camera closes the gap.

For an agent or AI API: show the work

If what you sell is an agent, the interesting part is not the request — it is what happens between the request and the answer. Agent Steps writes that log one line at a time and ends on the result:

import { AgentSteps } from "@/components/snap-cn/agent-steps";

export const WorkScene = () => (
  <AgentSteps
    query="Find every unpaid invoice older than 30 days"
    steps={[
      { running: "Querying invoices…", done: "Queried 1,204 invoices", icon: "globe" },
      { running: "Checking due dates…", done: "Checked due dates" },
      { running: "Drafting reminders…", done: "Drafted reminders" },
    ]}
    result="18 reminders drafted"
  />
);

Write the last step in the present tense and put the number in result — the last step never finishes; it turns into the result chip.

Then Answer Stream for the reply itself, if your API answers in prose.

Outcome and close: type, not logos

Open and close with a line of text, not your logo. Text Reveal or Punch Lines carry a single sentence with enough motion to hold two seconds. More options in how to animate text in Remotion.

Put it together

import { AbsoluteFill, Series } from "remotion";
import { TextReveal } from "@/components/snap-cn/text-reveal";

export const ApiDemo = () => (
  <AbsoluteFill style={{ background: "#0a0a0a" }}>
    <Series>
      <Series.Sequence durationInFrames={90}>
        <TextReveal text="Invoices from one call" mode="dark" />
      </Series.Sequence>
      <Series.Sequence durationInFrames={200}>
        <CallScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={160}>
        <WorkScene />
      </Series.Sequence>
    </Series>
  </AbsoluteFill>
);

npx shadcn@latest add @snapcn/terminal-simulator @snapcn/agent-steps @snapcn/text-reveal
npx remotion render ApiDemo out/api-demo.mp4

Posting it in a README too? Render the same composition as a GIF — see how to make a GitHub README demo GIF.

Next: terminal and code-typing animation in Remotion.

FAQ