The Editor

The editor is a set of panels docked edge to edge around a live preview: the header, the icon rail, the tool panel, the timeline, and the right column with Inspect and Agent. Drag the hairline between panels to give whichever one you're working in more room. The tool panel starts closed so the preview has the width; click a rail tile to open it. The timeline opens at about a third of the height and grows when you drag it.

The header

The header has three parts. On the left: the project menu (the Klipeo logo), the composition name (click to rename), and the save status. In the middle: the Video | Article | Moodboard switch and, while a shape or effect tool is armed, an Ellipse active · Exit Esc pill. On the right: the Agent toggle, credits, Capture from phone, Record, and Export. The logo menu has Back to Home, Duplicate composition (opens the copy in a new editor), Move to project, Save, View original media, Project info, Keyboard shortcuts, Delete composition, and Version history, which lists saved checkpoints and restores one in place.

The assets panel

On the left. This is where your media and your tools live. A narrow icon rail runs down its edge; hover a tile for its name. Click a tile to open that tool beside the rail; the open tile shows a collapse glyph on hover, and clicking it again (or the × in a panel header, or pressing Shift+P) closes the panel and gives the preview the width. A final tile, Edit log, appears only when the composition carries one:

Every panel shares the same sections, rows, sliders, toggles, and swatch grids, so a control works the same way wherever you meet it.

Assets is where you'll start. To add a file, drag it into Project, click the Import media tile, or pick Upload media from the composer's + menu. The limit is 50 MiB per file.

A few other views (Settings, Translation, Adjustment, Markers, Filters) share the same panel but aren't on the rail. The editor opens them for you when you use the feature that needs them.

The preview

In the middle. This is a live picture of your composition as it stands right now, not a render. Any change you or Vibe makes shows up here immediately.

Drag an element and it moves freely: there are no snap lines or pixel readouts over the picture, only the outline and its corner handles. Snapping to the canvas edges and centre still happens underneath.

You get the usual playback controls: play and pause with Space, step a frame at a time, jump to the start or end, and go fullscreen. You can set the zoom (Fit, 50%, all the way to 200%) and pick a frame rate (24, 25, 30, 50, or 60 fps). If you need to line things up, turn on guides like the rule of thirds, center lines, the golden ratio, or a safe area.

The right column: Inspect and Agent

On the right, one header row with Inspect | Agent at its left. Inspect follows what you select, and selecting anything on the preview or timeline brings it forward. A clip, image, text, shape, or audio element gets its own header and sub-tabs: Properties, Animation, and Audio for clips and audio. Every Properties group folds: Layout (six align-to-canvas buttons, then X, Y, W, H), Orientation (rotation, flip horizontal, flip vertical), and Appearance (opacity, a blend dropdown), with crop, colour, effects, masks, and speed below. Text adds Content, Typography (font, size / spacing / line height fields, colour, weight, style, alignment), Background (switch, colour, radius), Entrance (animation and duration), and Shadow (switch, colour, blur, X, Y). Animation has Enter and Exit cards (fade, slide with a direction, scale, blur) written as keyframes, and the keyframe list underneath. Image edits go through the agent's image tools. With nothing selected Inspect shows the project. Presets applies a whole look in a click (or None for the bare clip). Canvas is a grouped Size dropdown (standard ratios, then Instagram, Twitter, YouTube, Pinterest, Dribbble, App Store), W × H fields with Set, and a Frame rate dropdown; picking a size rescales every clip and title to the new canvas. Background opens on Image (3 × 3 wallpaper tiles in seven collections with a wallpaper blur), then Gradient (110), Magic (mesh and dark-glow gradients), Solid (33 colors), Blur (Light / Medium / Strong blurred-clip fills) and Custom (color picker, hex, or any CSS background). Style sets padding, corner radius, a Frame (glass, outline, border, or Safari / Chrome window with an address), a Device bezel, the shadow preset (None, Hug, Soft, Strong, or Custom depth), and Grain; 3D stickers drops a rendered shape at the playhead and Light & shadow sheets lays a soft light sheet over the whole frame. The backgrounds, sizes, frames, and shadows are adapted from screenshot-studio.com. While the Captions tool is open Inspect shows caption style instead. There's a full breakdown in Clip properties.

Agent is the Vibe chat. Its Klipeo, model, and mode controls sit on the same row as the tabs. The header's Agent toggle switches between the two, and a blue dot on Inspect means something is selected while you're in the chat.

The timeline, or Vibe

The bottom panel does double duty. Most of the time it's the timeline, where your clips sit on tracks and you do your hand editing. Drag its top edge to resize it, or collapse it with the arrow at the right of its toolbar (or Shift+Y) to leave just the transport controls and timecode while the preview takes the rest of the screen. Expanding brings back the height you had. When you dock the agent at the bottom from the chat header, the Vibe panel takes that spot and the right column keeps only Inspect.

A handful of shortcuts worth knowing now

Press ? any time for a searchable cheat sheet in the app. The complete list lives in Keyboard shortcuts.