Skip to the content
Version 2.4.1 · Apache-2.0 · runs on your machine

Demo videos, written not recorded.

Write one spoken line per scene. Showcase films your real product in a browser, reads the narration in a local voice, and builds the video. To change what is said, edit a line and render again.

Make your first video Watch the themes
bunx showcase init --config
0:00 / 0:00

Made with Showcase, from a script. 45 seconds, with sound.

How it works

From a script to a video, in four steps

Press a step to see what happens in it.

Step 1 of 4

Write

A video is one TypeScript file. Each scene has the line the voice will say, and what happens on screen while it is said.

video.ts
{
  id: 'moved',
  say: 'One click keeps only the shipments whose date moved.',
  run: async ({ page, stage, untilSaid }) => {
    await stage.click(page.getByRole('button', { name: 'Moved only' }))
    await untilSaid(0.6)
    await stage.focus(page.locator('td.eta').first(), {
      label: 'Old date kept under the new one',
    })
  },
}
What you get

Everything a video editor would add

Nobody records a screen and nobody opens a video editor.

One script, every shape

Landscape for YouTube, vertical for Shorts, Reels and TikTok, square for LinkedIn. Each platform gets its own named file.

16:99:161:14:52:3

Twelve themes, or your own

One word sets the whole look. Or make a theme for your brand: by hand, or describe the brand and have it written.

Sound that is measured

Effects are chosen for your project, measured, and refused when they would squeak.

Nothing cut off

Anything cut off, off screen or covered by a caption fails the render and is named.

Safe on a live product

Read-only mode refuses every request that could change data. You sign in once, yourself.

Or describe the video in a small file

Say what to film, how long, and where it will be posted. Only the address is required.

showcase.config.json
{
  "url": "http://localhost:3000",
  "length": 30,
  "platforms": ["youtube", "instagram-reel"],
  "theme": "clay"
}

Works with Claude Code

The kit ships a skill that tells the agent how a senior editor would cut the video, and the checks it must pass.

Fonts chosen for video

Eleven pairings from Google Fonts, each with its own title weight and tracking. Video type is not web type.

Themes

One word changes the whole look

Cards, captions, labels, fonts, colours, backdrop, movement and sound change together.

All 12 themes
A frame from a video in the glass themeglassGlassmorphism. Modern apps, AI products, launch videos.
A frame from a video in the clay themeclayClaymorphism. Consumer apps, education, friendly brands.
A frame from a video in the brutal themebrutalBrutalism. Developer tools, creative studios, brands that want attitude.
A frame from a video in the bento themebentoBento grid. Feature overviews, "everything it does" videos.
A frame from a video in the editorial themeeditorialEditorial. Finance, law, publishing, reports.
A frame from a video in the terminal themeterminalTerminal. Developer tools, APIs, security products.

From an empty folder to a first video.

Ten steps, each with the command to type and what you should see. Every tool in the pipeline is free.

Start the guide Read the docs