Renderly

Visual Editor

Build a Renderly video by hand — canvas, timeline, overlays, and animation presets. The same composition you'd assemble via the API, but visually.

The visual editor is what most people use to design a video before they automate it. You drag overlays onto a frame-accurate timeline, tweak their styles in side panels, and preview the result in real time. When you're happy, you export — or save the project and render variations of it via the API.

Layout

The editor has four regions:

RegionWhat it does
Canvas (center)Live preview of the current frame. Click an overlay to select it; drag its handles to resize, move, or rotate.
Timeline (bottom)Frame-accurate timeline organized into rows. Each overlay sits on a row at a specific from frame and runs for durationInFrames. Drag horizontally to move in time, drag vertically to change rows.
Library / Assets (left)Your uploaded media, plus stock-style sources (Pexels search, sticker library, sound library).
Properties (right)All editable fields for the currently-selected overlay — content, position, styles, animation, etc.

Overlays you can add

TypeWhat it is
TextTitle cards, subtitles, captions of your own writing. Supports per-character / per-word entrance animations (AnimatedText), typewriter effect, counters, and syntax-highlighted code blocks.
ImageStatic PNG / JPG / WebP. Supports crop, opacity, border radius, greenscreen removal, and 3D layout transforms.
VideoVideo clip. Trim with videoStartTime, change playback speed, crop, greenscreen, or chain multiple source segments.
SoundAudio track (music or voiceover). Trim from any in-point, set volume, add fade-in / fade-out.
ShapeGeometric primitives — rectangle, circle, triangle — with fill, stroke, gradient, and animated gradients.
StickerPre-designed graphic assets from the sticker library (shapes, discount badges, emoji, review elements).
CaptionWord-level synchronized captions with karaoke-style highlighting on the active word.
EffectParticle and grid effects: snow, confetti, rain, fireflies, sparkles, bubbles, matrix rain, grid stagger, fracture, scrolling columns.

Every overlay shares the same positional fields (top, left, width, height, rotation) and timing fields (from, durationInFrames). See Overlays reference for the full schema.

Working with the timeline

  • Rows are timeline tracks. Higher rows render above lower rows. styles.zIndex fine-tunes ordering within a row.
  • Drag the edges of a clip to extend or shrink its durationInFrames.
  • Drag the body to change its from frame.
  • Snap to grid is on by default; hold ⌥/Alt to bypass.
  • Multi-select with Shift-click to move several overlays at once.

Animations

Renderly animations are presets, not free-form keyframe animation. Each visual overlay can have an enter preset (plays in the first part of its visible window) and an exit preset (plays in the last part). Both have an optional enterDuration / exitDuration in seconds — omit and you get a default 15-frame ramp.

Available enter/exit presets include fade, slideUp, slideDown, slideLeft, slideRight, scale, bounce, flipX, zoomBlur, snapRotate, glitch, swipeReveal, floatIn, spin, drop, squeeze, roll, swing, twist, blur, spiral, shake, curtain, fold, zigzag, elastic, slingshot, skew, peek, vortex, pulse, wobble, and diagonalSlide. The Properties panel shows the full list with previews.

For text specifically, there are three richer modes that go beyond enter/exit:

  • AnimatedText — split the string by word, character, or line and stagger their entrance.
  • TypeWriter — type the string out character-by-character with an optional cursor and error-rate effect.
  • Counter — tween a numeric value from from to to over duration seconds.

Composition settings

The toolbar above the canvas controls the composition itself:

  • Resolution (width × height) — preset aspect ratios for 16:9, 1:1, 4:5, 9:16, or a custom size.
  • FPS — 24, 30, or 60.
  • Duration — defaults to "fit overlays" (composition ends with the last overlay) but you can pin a hard cap. Overlays that extend past the cap are automatically trimmed.
  • Background color — solid color shown behind every overlay. Use this with styles.opacity on an image or video for a tinted backdrop.

From editor to API

Every project you save is renderable by the API:

curl -X POST https://renderly.video/api/v1/renders \
  -H "Authorization: Bearer rnd_..." \
  -H "Content-Type: application/json" \
  -d '{
    "projectId": "proj_abc123",
    "replacements": {
      "headline": "New variation",
      "background": "https://your-cdn.example.com/bg-2.mp4"
    }
  }'

This lets a non-technical teammate design the composition in the editor while engineers automate the variations.

To make any overlay swappable from the API, open it in the Properties panel and toggle Use as variable. The editor sets isDynamic: true and uses the overlay's name as the variable key. See Templates for details.

Where to next