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. Its Variables tab declares the movie's variables, and any property can be switched to an expression (the fx toggle on the row) to drive it from one, e.g. {{ headline }}.

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 — text-to-speech 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.

Repeating a scene#

A scene can be repeated once per item of an array variable, so one authored scene becomes many rendered ones — a product card per product, a room per room. Select the scene and open the Repeat (iterate) group in the properties panel:

1. Pick the array variable to repeat over. The picker lists only the movie's array variables and shows how many items each holds; use Enter a path… to type a dotted path such as product.images.
2. The panel confirms how many copies the scene will render, and warns inline when it will render none — an empty array, or an array of plain values rather than objects, silently removes the scene from the movie.
3. Optionally narrow the range with From / To / Step. From is inclusive and To is exclusive, both 1-based; negative values count from the end of the array. These fields appear only once the scene repeats.

Each copy gets the item's own fields as local variables — reference them as {{ name }} exactly like movie-level variables — plus {{ iteration }}, {{ first_iteration }} and {{ last_iteration }}. The timeline shows the copies grouped under the authored scene, and the outline marks the scene with a repeat badge.

If the movie has no array variable yet, the picker offers to create one and takes you to the Variables panel, where its rows are edited.

See scene reference for the underlying iterate properties.

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. TTS voice timing and some advanced motion (HTML elements, complex chroma keying) are only fully accurate in the server render.
• iterate is editable on scenes only. To repeat an individual element, edit the JSON directly.
• condition is shown on a scene but never evaluated in the editor: a conditioned scene stays visible and editable, and the preview decides whether it renders.

See also#

• Dashboard — Templates
• Tutorials
• Movie JSON reference