> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tryflowy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Studio Overview

> Turn your canvas work into an edited, exportable video.

export const DemoVideo = ({src, poster, caption, aspectRatio = "16 / 10", className = ""}) => {
  return <figure className={`not-prose my-6 w-full ${className}`}>
      <div className="overflow-hidden rounded-2xl border border-gray-950/10 bg-gray-100 dark:border-white/10 dark:bg-white/5" style={{
    aspectRatio
  }}>
        <video src={src} poster={poster} loop autoPlay muted playsInline className="h-full w-full object-cover" />
      </div>
      {caption && <figcaption className="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
          {caption}
        </figcaption>}
    </figure>;
};

**Studio** is Flowy's timeline editor. The canvas is where you generate and connect assets; Studio is where you arrange them into a finished video you can render and share.

<DemoVideo src="/videos/studio/overview.mp4" poster="/images/posters/studio/overview.jpg" caption="Studio's preview player, timeline, and inspector working together on a composition" />

## From canvas to Studio

Switch between modes with the toggle in the editor header — it reads **Switch to Studio** on the canvas and **Switch to Canvas** in Studio. Your project stays in sync across both modes, so you can hop back to the canvas to generate a missing shot and return to your edit where you left off.

Every **Composition** node on your canvas becomes a **scene** in Studio. Pick which scene you're editing from the **Scene** dropdown at the left end of the timeline's transport bar — each scene has its own timeline, so longer projects stay organized as separate cuts.

## The Studio layout

* **Preview player** — plays your composition at the top of the workspace. Scrub, step frame by frame, loop a region, or go fullscreen to check a cut in context.
* **Timeline** — tracks and clips below the player. Move, trim, and split clips, and open keyframe rows to shape animation over time.
* **Inspector** — the right-hand panel with **Nodes**, **Media**, **Properties**, and **Plugins** tabs. Select a clip and the **Properties** tab opens with everything you can adjust on it.
* **AI assistant** — a docked chat sidebar that builds rough cuts, generates media, and applies keyframe animations from a plain-language description.

When the edit looks right, the **Export** button in the top bar renders the current scene into a downloadable video.

## Go deeper

<CardGroup cols={2}>
  <Card title="Timeline" icon="layer-group" href="/studio/timeline">
    Arrange tracks and clips, trim and split, and animate with keyframes.
  </Card>

  <Card title="Inspector" icon="sliders" href="/studio/inspector">
    Edit per-clip properties across transform, color, compositing, and audio.
  </Card>

  <Card title="Effects" icon="wand-magic-sparkles" href="/studio/effects/overview">
    Apply color grades, blur, vignette, chroma key, and more to any clip.
  </Card>

  <Card title="Export" icon="video" href="/studio/export">
    Render your scene to a finished file and download it.
  </Card>
</CardGroup>

<Tip>
  New to Studio? Do a first pass on the [timeline](/studio/timeline) — trim and order your clips — then polish with the [inspector](/studio/inspector) and [effects](/studio/effects/overview) before you [export](/studio/export).
</Tip>