Skip to main content
The Composer node turns outputs from other nodes into a finished image or video. Wire any mix of image, text, video, and audio nodes into it, then arrange everything in its visual editor. This guide walks the full video workflow; for the node’s ports and config reference, see the Composer node page.

​
How the Composer thinks

Three ideas explain everything else:
  1. Every connected input is a layer. An image node becomes an image layer, a video node a video clip, a text node a caption, an audio node a soundtrack. Layers stack on a fixed-size canvas (pick a size preset — Instagram, TikTok, YouTube — or set your own).
  2. The timeline controls when, the canvas controls where. Drag layers on the canvas to position them; drag their bars on the timeline (it appears whenever a video or audio input is connected) to decide when each one is on screen.
  3. Timing that depends on real clip lengths resolves when the composition renders. AI-generated clips often don’t exist while you’re designing — the editor shows estimated lengths (dashed bars, with a note), and the final render always measures the actual media. Run the upstream nodes once to load real durations into the editor.
The node outputs an image when the composition is fully static, and a video when any video or audio layer is present.

​
Overlay vs. Sequence

The timeline has an arrangement toggle (with a ? explainer in the editor):
  • Overlay (default) — every layer keeps its own timing. Drag a bar to choose when that layer is on screen; layers can overlap freely. Use it for composited content: a logo pinned all video, a caption appearing at 3s, picture-in-picture. Bars snap to other layers’ edges while dragging.
  • Sequence — video clips play back-to-back in row order (top row first), like a reel. Their bars are auto-positioned (link icon) and sized from the actual clip durations at render time, so regenerated clips of a different length can never drift or leave gaps. Images, text, and audio still keep their own Overlay-style timing on top — a logo or music track can ride over the whole reel.
Rule of thumb: building a montage of clips → Sequence; hand-placing layers over each other → Overlay. For a side-by-side segment inside a reel, compose that segment in a second Composer node and feed its output into the sequence. In Sequence mode, set xfade (next to the toggle) to cross-dissolve between clips: each clip overlaps the previous by that many seconds and fades in over it. 0 keeps hard cuts.

​
Fitting and cropping media

When a layer has an explicit size, Fit (in its Layout panel) decides how the source fills the box: Stretch distorts to fill, Contain letterboxes inside, Cover fills and center-crops the overflow — use Cover to avoid distortion. Crop trims a percentage off any side of the source before placement: type exact Crop % values in the Appearance panel, or select the layer and click ✂ Crop on the canvas to drag a marquee over the full source (trimmed edges dim live, and the result is identical regardless of fit). Motion adds a Ken Burns drift — Zoom in slowly pushes into the media across its visible window, Zoom out pulls back — perfect for slideshows of generated images. While arranging on the canvas, layers snap to the canvas edges/center and to each other (blue guides show the alignment), the Layout panel’s align buttons jump a layer to any canvas edge or center, and text layers support alignment, line height, an outline, and a drop shadow. Drag the dividers beside the side panels (or double-click to collapse) to give the canvas more room.

​
Timing and trimming clips

A video or audio bar on the timeline shows the full source clip; the bright region is what plays, and the darker head/tail are cut:
  • Drag the bright region’s edges to trim — the left handle cuts into the source’s beginning, the right handle ends the clip early. The darker areas show exactly what’s being cut.
  • Drag the bar body to move the clip in time (Overlay mode).
  • Double-click a bar to reset its timing and trims.
  • A clip with a start but no end plays out its full real length (“until source end”).
  • Exact values can be typed in the layer’s Layout panel: Start s / End s (when it’s on screen) and Trim in s / Trim out s (what part of the source plays).
Timed clips always play from their own first frame at their start time — a clip placed at 5s starts at its beginning (or at its trim-in point), not 5 seconds into its footage.

​
Video length

The video’s length is automatic by default: long enough to cover every source clip and timed layer. The timeline always shows some empty headroom past the current end (hatched) — drag a layer’s end into it and the video grows as you go. To pin an exact length, set Duration in the canvas panel’s Video section (shorter cuts the composition; longer extends it, with videos freezing on their last frame). While dragging bars, a blue snap guide appears whenever an edge lines up with another layer’s start or end, the playhead, or the composition’s bounds.

​
Trimming the whole video

To cut the exported video itself — not a layer — use the bracket handles on the timeline ruler: drag the left handle to set where the video starts, the right one to set where it ends. Everything outside the range darkens across all rows. The same values live in the canvas panel under Video Range (Start s / End s), and double-clicking a handle resets it. The render trims picture and audio together.

​
Animations (entry/exit)

Every visual layer can animate when it appears and disappears. In the layer’s Layout panel pick Animate in / Animate out:
AnimationEffect
FadeOpacity ramps in/out
Slide leftEnters from the right edge moving left (exits moving left)
Slide rightEnters from the left moving right
Slide upEnters from the bottom moving up
Slide downEnters from the top moving down
Each has its own duration (0.25–2s). Animations anchor to the layer’s timing window — an exit animation finishes exactly when the layer leaves. The scrub preview and playback show them in place.

​
Audio

Connect audio nodes for music or voice-over: each becomes a timeline row with timing, trim, and a Volume control (0–200%). Video layers’ own sound is included automatically, gated to their timing window, with their own Volume. Everything mixes into the output. A composition with audio always renders as a video, even if every visual layer is a still.

​
Preview

  • Play (button on the timeline) — watches the composition in the editor: real video frames with sound, audio entering on cue, fades and slides in place.
  • Scrub the ruler to inspect any moment frame-accurately; click ✕ to exit preview and see all layers at once. Playback respects the export range when one is set.
  • Zoom the timeline with the −/+ controls (or Ctrl+wheel) for long compositions; video bars show a filmstrip of frames and audio bars a waveform once the media has loaded.
  • Reorder layers by dragging the grip in the timeline’s label column (or in the layers panel) — in Sequence mode this changes play order.

​
For agents and the API

Composer configuration is plain JSON on the node (config), so LLM copilots and API callers can build compositions directly: 
{
  "canvasSize": { "width": 1080, "height": 1920 },
  "canvasPreset": "tiktok",
  "backgroundColor": "#FFFFFF",
  "arrangement": "sequence",        // "overlay" | "sequence"
  "duration": null,                  // total seconds; null = automatic
  "sequenceCrossfade": 0,            // seconds of cross-dissolve between sequenced clips
  "outputStart": null,               // seconds; trims the whole exported video
  "outputEnd": null,
  "layers": [
    {
      "edgeId": "<react-flow edge id of the input>",
      "portId": "input_videos",      // input_images | input_texts | input_videos | input_audios
      "x": 0, "y": 0,
      "width": null, "height": null, // null = source size, auto-fit to canvas
      "startTime": null,             // seconds on the composition; null = whole video
      "endTime": null,               // null + startTime = play to the source's end
      "trimStart": null,             // seconds cut from the source's head
      "trimEnd": null,               // seconds into the source where it stops
      "transitionIn": { "type": "fade", "duration": 0.5 },   // fade | slide_left | slide_right | slide_up | slide_down
      "transitionOut": null,
      "fit": "stretch",              // stretch | contain | cover (needs width+height)
      "crop": null,                  // { top, right, bottom, left } fractions of the source
      "motion": "none",              // none | zoom_in | zoom_out (Ken Burns; needs width+height)
      "volume": 1,                   // 0–2; audio layers and video sound
      "opacity": 1, "rotation": 0, "zIndex": 0, "visible": true
    }
  ]
}
Key behaviors to rely on:
  • layers[].edgeId must equal the React Flow edge id feeding that input (sub-layers from multi-value edges use "<edgeId>:<index>").
  • In sequence arrangement, video layers’ startTime/endTime are ignored and recomputed from real durations at render time; order = zIndex descending (highest plays first).
  • All timing fields are optional and additive — omit them for an untimed, always-visible layer.
  • Media inputs resolve at run time, so a composition can be fully configured before any upstream video has been generated.