> ## 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.

# Assets

> A Drive-like library for everything you upload and generate, with nested folders and search.

export const VideoPlayer = ({src, poster, aspectRatio = "16 / 9", title, className = ""}) => {
  const [playing, setPlaying] = useState(false);
  if (playing) {
    return <div className={`not-prose relative mx-auto my-6 w-full max-w-screen-md overflow-hidden rounded-2xl border border-gray-950/10 dark:border-white/10 ${className}`} style={{
      aspectRatio
    }}>
        <video src={src} controls autoPlay playsInline className="h-full w-full object-contain" />
      </div>;
  }
  return <button type="button" aria-label={title ? `Play video: ${title}` : "Play video"} style={{
    aspectRatio
  }} className={`not-prose group relative mx-auto my-6 block w-full max-w-screen-md cursor-pointer overflow-hidden rounded-2xl border border-gray-950/10 bg-gray-100 dark:border-white/10 dark:bg-white/5 ${className}`} onClick={() => setPlaying(true)}>
      <img src={poster} alt={title || "Video thumbnail"} className="h-full w-full cursor-pointer object-cover" />
      <div className="absolute inset-x-0 bottom-0 h-20 bg-gradient-to-t from-black/80 to-transparent sm:h-28" />
      <div className="absolute bottom-6 flex w-full items-center justify-between px-6">
        <p className="max-w-sm text-left text-lg font-semibold leading-tight text-white">
          {title}
        </p>
        <div className="rounded-full p-3 shadow-lg transition-all duration-300 group-hover:scale-110 group-active:scale-95" style={{
    backgroundColor: "#5C9987"
  }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="#ffffff" aria-hidden="true">
            <path d="M8 5v14l11-7L8 5z" />
          </svg>
        </div>
      </div>
    </button>;
};

The **Assets** page is your workspace's media library. Everything you upload and generate collects here, and you organize it the way you would a drive: nested folders, drag-and-drop moves, and search.

<VideoPlayer src="/videos/dashboard/assets.mp4" poster="/images/posters/dashboard/assets.jpg" title="Watch: organizing assets and using them on the canvas" />

## Browse the library

Assets display in a grid or a list — pick whichever suits the content. Narrow the view with filters for favorites, asset type, date range, and assets you created, or open search and type a few characters to find something by name. Your current folder, view, and search live in the URL, so a refresh puts you back exactly where you were, and links you share open the same view.

## Folders

Folders work the way you expect from a file drive:

* **Create folders** anywhere, including folders inside folders, to mirror how you think about the work.
* **Navigate** by clicking into a folder; the breadcrumb shows where you are, and your browser's back button steps you out again.
* **Move assets** with the **Move to folder** dialog, or drag them straight onto a folder card.

Flowy can also group assets by the project that generated them, using project folders labeled with each project's title. Folder cards show how many assets they hold — and when filters are active, the count updates to show how many assets *match*.

## Upload

Use the upload button to bring in your own media. Uploads land in whatever folder you're viewing, so you can file things correctly as they arrive rather than sorting later.

## Use assets on the canvas

The same library is available inside the editor. Open the **asset library** from the canvas toolbar, select one or more assets, and add them — they drop onto the canvas as nodes at the center of your current view, ready to [connect](/getting-started/concepts#nodes-and-connections) into your workflow. Multiple selections arrange themselves in a grid so nothing lands on top of anything else.

<Tip>
  Generate once, reuse everywhere: an asset in your library can feed any number of canvases across the workspace without regenerating it.
</Tip>