Content & Layout

The Supademo Editor

Once a demo is recorded, it automatically opens in the edit mode. The Supademo editor is designed to feel familiar, intuitive, and non-intimidating.

Every action you record becomes a step. In guided screenshot demos, those actions include clicks, typing, and scrolls. In HTML and sandbox demos, they're click-based interactions. Those steps can be reordered, deleted, duplicated, or renamed at any time.

Updating Demos Incrementally

One of the most important things to understand is that Supademo makes it easy to update demos incrementally. Instead of re-recording everything when something changes, you can update only what's needed.

If a UI change affects a single step, that step can be deleted and re-recorded without touching the rest of the demo or changing its URL.

Inside the editor, you'll see an Add Step option between every step. This is how demos evolve over time.

The Add Step Feature

The Add Step feature lets you record new steps, upload images or videos, record your screen or camera, or insert content that already lives in your Supademo media library. Instead of starting over, demos are built forward.

The most common use case is recording new steps. When something changes, the outdated step can be removed and replaced by continuing from the relevant URL. This works across all demo types and avoids unnecessary re-recording.

This approach is especially important for sandbox demos. A best practice is to record one section or module at a time, then continue adding depth by inserting new steps as the sandbox experience evolves.

Uploading Images and Videos

Add Step can also be used to upload images or videos when assets already exist. For example, pricing information stored in an offline spreadsheet can be added as an image step, keeping that content inside the demo flow. This is particularly useful for sales teams that want to track engagement on supporting materials.

Uploading videos is another common use case, especially when adding a more human layer. Short intro videos can explain context or how to navigate a demo. In onboarding scenarios, welcome videos from leadership are often included to set expectations or share company values. These videos support the demo rather than replace it.

Screen and Camera Recording

Supademo also allows screen and camera recording directly inside the editor. This is useful when something doesn't translate well in HTML or screenshot-based demos, such as animations, transitions, or visual moments that are part of the product experience. These moments can be captured as short video steps and inserted directly into the flow.

The Media Library

The media library makes reuse easy. Images and videos that have already been uploaded can be inserted again without re-uploading.

The key idea here is flexibility. Add Step allows demos to be built using a mix of recordings, images, videos, and reusable assets, making them easier to keep accurate, engaging, and maintainable over time.

Each recording session supports up to 200 recorded actions, and additional steps can always be added later. This is particularly useful for sandbox-style experiences.

Staying Organized

As demos grow, organization becomes increasingly important. One simple but powerful habit is renaming steps. Clear step names make it much easier to understand what's happening, especially in longer sandbox demos where thumbnails alone aren't enough.

Look and Feel

Beyond structure, there are also tools for managing look and feel.

Guided screenshot demos support custom backgrounds, including gradients, colors, and images. This helps frame demos and showcases in an on-brand way.

Both HTML and guided screenshot demos support zoom and pan, which helps guide attention to specific areas of the screen and highlight small UI elements.

For demos that include voiceovers, subtitles can be edited independently. This is especially useful when adjusting pronunciation in AI voiceovers without changing how captions appear.

URL-Based Demos

Stepping back for a moment, this part is critical.

Supademo is URL-based. Every demo has a single source of truth. That same URL can live in documentation, websites, sales materials, and knowledge bases. When the demo is updated, it updates everywhere automatically, without changing links or re-embedding content.

Making Updates

When making small updates, the simplest approach is to replace individual steps directly. If larger changes are required, a practical workflow is to record a separate demo, make the updates there, copy the updated steps into the original demo, and remove the outdated steps. This keeps the original URL intact while avoiding partially updated demos being visible during editing.

This approach is especially helpful for teams transitioning from large video libraries. A common first step is uploading each existing video into its own Supademo and replacing old video links. Over time, as those videos become outdated, individual steps can be replaced with native Supademo recordings without ever changing the URL.

What's Next

Now that the foundation of editing and updating is clear, the next section focuses on chapters — a tool that's often underused, but incredibly powerful when it comes to structuring and scaling demos.