Skip to the work area

tooto

Theme

Your product already knows how to demo itself.

Tooto takes a short spec, drives your real app in a real browser, records it, narrates it and hands back a finished tutorial video. The project that made it stays editable afterwards, by you or by an agent.

Open the editor
50 fps
Capture of the live product, not a slide deck
5 tracks
Video, voice, effects, music and captions
1 spec
Beats, script and listing metadata in one file
0 deps
The format is node builtins and nothing else

What it does

Four jobs a person usually does badly and late.

A tutorial video is a recording, a script, an edit and a listing. Each one is a different afternoon, and the result is stale the week the product changes.

  • Records the real thing

    No slides and no mockups. A headless browser signs in to your live app and performs the walkthrough, so what ships is what a customer would see.

  • Writes and speaks the script

    The spec carries the beats. Narration is synthesised, metered against the capture, and captioned on the same timeline rather than burned in afterwards.

  • Gives back a document

    The output is a project, not an opaque file: tracks, clips, a palette and a provenance log. Change one line of narration and six seconds re-render.

  • Publishes itself

    Title, description, chapters, thumbnail and tags come from the same spec, and the master goes up with cross-links to the series already stitched in.

How it works

Four steps, and only the first one is yours.

  1. 01 · A spec goes in

    One file per video: the slug, the title, the URL to drive, the beats in order and the script lines. Length rules and per-line word budgets are checked before a frame is recorded, so a bad spec fails in seconds rather than after a full render.

    topics/agency-suite-crm.mjs
  2. 02 · A recorder drives your real app

    Sign in, navigate, click, scroll, and hold on the thing being explained. The cursor path, the marks and the interaction events are captured alongside the frames, so the edit knows where the attention was and not only what the screen showed.

    track.json · cursor samples, marks, events
  3. 03 · An editable project comes out

    Video, voice, effects, music and captions, each clip with an id that survives an edit. Time is seconds rather than frames, sources are referenced rather than embedded, and a field a newer editor wrote survives a round trip through an older one.

    tooto.project v1
  4. 04 · It publishes itself

    Quality gates run against the finished master. Listing metadata is generated from the same spec that drove the recording, operator overrides win over generated text, and cross-links to earlier videos are stitched in at publish rather than at render.

    qa → meta → upload

The project document

A video an agent can edit, because it is data.

Nothing in the format executes, records or encodes. It describes what the finished video is, and a renderer turns that into pixels. That split is the point: an agent, a script, a UI and a person all edit the same document.

// every clip carries a stable id, so a re-render is scoped
// to what changed rather than to the whole film
{
  "format": "tooto.project",
  "version": 1,
  "canvas": { "width": 1920, "height": 1080, "fps": 50 },
  "theme": { "mode": "dark", "palette": "midnight" },
  "tracks": [
    { "id": "video", "clips": [
      { "id": "v_roster", "start": 12.4, "duration": 6.32 }
    ] },
    { "id": "voice", "gainDb": 0, "clips": [] }
  ],
  "provenance": { "steps": [] }
}
  • Time is seconds, never frames

    Frames are a render concern and they change with the canvas. A project that stores them breaks when the output does.

  • Sources are referenced, not embedded

    Which keeps a whole film small enough to read, diff and review in a pull request like any other file.

  • Unknown fields survive a round trip

    A newer editor writing a field this version does not understand cannot lose it, so two tools can work on one document without a migration.

  • Every edit is data

    Insert, update, remove, move and ripple are operations on the document, so an agent and the interface share one code path and undo is the inverse patch.

Who it is for

Anyone whose product changes faster than their videos.

  • Product teams shipping weekly

    The walkthrough is out of date the day it ships. Re-run the spec against the current build instead of rebooking an afternoon and a microphone.

  • Developer tools

    Every feature gets a walkthrough on the real product, in one voice, on one set of rules, without a person in the loop for the third one this month.

  • Agencies and educators

    One spec per client, a palette per brand, and a document you can hand over at the end rather than a folder only you can open.

Pricing

Not set yet, and this is the shape it will take.

  • Solo

    TBD / month

    One product, one voice, the whole pipeline.

    • Spec to published video
    • The five project palettes
    • Project files you keep

  • Team Likely

    TBD / month

    A series, a schedule and more than one editor.

    • Everything in Solo
    • Series cross-links and chapters
    • Agent access to the project format
    • Scheduled re-renders on release

  • Studio

    TBD / month

    Many products, many brands, one pipeline.

    • Everything in Team
    • Custom palettes and typography
    • Your own publishing destinations

These numbers are genuinely undecided. The waitlist is how they get decided, so the note you leave on it is worth more to us than the address.

Early access

Tell us what you would record first.

One email, when there is something to open. No sequence, no newsletter, and the note is read by a person.