Archived docs Get your API Key
Get started
Tutorials
Guides
Reference
Help for AI agents
🤖 AI Assistant

Visual editor

The JSON2Video dashboard ships with a visual editor that lets you build a movie JSON without writing JSON by hand. It is the recommended starting point for non-developers and a useful prototyping tool for developers who want to scaffold a movie before exporting it to code.

The editor lives at json2video.com/dashboard/videos.

TODO: capture screenshot of the editor at /dashboard/videos/edit/new.

Opening the editor

  1. Sign in at json2video.com/dashboard.
  2. Click Videos in the left sidebar.
  3. Click Add new video. The editor opens on a blank canvas at /dashboard/videos/edit/new.

To edit an existing video, click any row in the list. The editor URL is /dashboard/videos/edit/<id>.

The editor layout

The visual editor splits into three regions:

  • Canvas (centre): live preview of the current scene at the configured resolution.
  • Timeline (bottom): one row per scene; each scene has stacked element bars showing duration and order.
  • Properties panel (right): the form for whatever you've selected — movie, scene, or element.

Adding scenes

Click the + button at the end of the timeline to add a scene. Each scene is rendered sequentially in the final video. You can:

  • Drag scenes left/right to reorder.
  • Click a scene tab to select it; the canvas updates to show it.
  • Duplicate a scene from the scene context menu.
  • Set per-scene properties (duration, transition, background) in the right panel.

Adding elements

With a scene selected, click + Add element in the right panel. Choose from:

  • Image — static image with optional Ken Burns motion.
  • Video — video clip with optional chroma key, trim, volume.
  • Text — styled text using one of the predefined styles.
  • Component — pre-built animated card from the component catalog.
  • HTML — custom HTML/CSS snippet (advanced).
  • Audio — music or sound effect.
  • Voice — AI-generated voiceover.
  • Audiogram — animated waveform synced to the scene audio.
  • Subtitles — auto-generated subtitles from the scene voice / audio.

Each element appears as a bar in the scene's timeline. Drag the bar to reposition in time; drag its edges to resize the duration.

Drag and drop

  • Move an element on the canvas: click and drag.
  • Resize an element on the canvas: drag a corner handle.
  • Reorder elements in z-order: drag the timeline bars vertically.
  • Reorder scenes: drag scene tabs horizontally.

The properties panel updates in real time as you drag.

Preview

Click Play on the timeline to preview the entire movie inline at a reduced resolution. The preview uses a client-side renderer that gets close to but is not identical to the final server render — for the authoritative result, render and download.

Saving and rendering

The editor auto-saves your work as a draft. To trigger a server render:

  1. Click Render in the top right.
  2. The dashboard switches to a render-progress view showing percentage and a thumbnail as soon as one is available.
  3. When the render finishes, the result appears in your video list at json2video.com/dashboard/videos.

You can also click Save as template to store the current JSON as a template for later reuse.

Export to JSON

To take the JSON out of the editor and into code:

  1. Click the JSON toggle in the top toolbar.
  2. The editor switches to a code view with the full movie JSON.
  3. Copy and paste into your codebase, or call the API with this body.

This makes the visual editor a fast scaffolding tool — design visually, then export and parameterise in code.

Limitations

  • The visual editor previews a simplified version of the timeline. AI voice timing and some advanced motion (HTML elements, complex chroma keying) are only fully accurate in the server render.
  • The visual editor does not yet edit iterate blocks or expression-driven values. To use those features, edit JSON directly or use templates.

See also

← Previous: DashboardNext: Templates →