FR GitHub npm Get started

Studio

A visual editor for the timeline your agent wrote. Scrub the demo, click an element to target it, drag a step to a new time, and save. It runs on your machine and edits the same vistaro.config.json the CLI reads.

  1. What you can do

    • Scrub a live preview. Play the demo or jump to any moment and see the cursor, zoom and captions exactly as they will render.
    • Pick targets by clicking. Click an element in the preview instead of writing a CSS selector.
    • Apply effect presets. Add a click, zoom, highlight or fade to a step from a list, without remembering the fields.
    • Retime by dragging. Move a step along the timeline ruler to change when it happens.
    • Check and export. Run the same validation and the same export as the CLI, from the editor.
    • Save. Studio writes vistaro.config.json. It is a view over the file, never a second copy, so your diff stays readable.

  2. Open it

    From your project, with Vistaro installed (see Get started):

    terminal
    $ npx vistaro studio

    Studio starts a small server on your own machine and prints its address. Open it in your browser. Running npx vistaro with no command does the same and opens the browser for you. Press Ctrl-C in the terminal to stop it.

  3. Load your project

    Run it with no folder and you get a project picker: every demo found in the workspace, most recently touched first. Choose one to open it.

    To skip the picker, name the folder that holds the demo's index.html:

    terminal
    $ npx vistaro studio demo

    If the folder has a screen but no timeline yet, Studio offers the same starter timelines as init-config, for a guide or for a reel. Not sure what is in your workspace? npx vistaro demos lists every demo and the command that opens it.

    Options

    • --config scenarios/export-word.jsonOpen one of several timelines that share a screen.
    • --device mobilePreview the phone version of the demo.
    • --port 4000Use a fixed port instead of a random one.

  4. Good to know

    • Agent first, Studio second. Let your agent write the first version, then open Studio to tune timing and framing by eye. Ask the agent to rebuild afterwards; it sees your edits in the file.
    • Local only. The server listens on 127.0.0.1 and nothing is uploaded. No account, no API key.
    • One job at a time. Check and export run one after another, because each drives a real browser.