Media browser
The media browser is Studio’s visual tool for managing the static assets in your project’s public/ directory — images, documents, audio, video, and archives. Open it from the Media icon in the Studio nav rail.
Browsing media
Section titled “Browsing media”Files in the current directory are shown as a grid. Image files render as thumbnails; other file types show a typed icon (PDF, archive, generic file). Folder cards open the folder when clicked.
Filtering
Section titled “Filtering”Use the chips in the toolbar to narrow the view. Folders are always shown so you can navigate.
| Filter | Includes |
|---|---|
| All | Every file in the current directory |
| Images | jpg, jpeg, png, gif, svg, webp, avif |
| Documents | pdf, doc, docx, xls, xlsx, csv, txt, zip, gz, mp4, webm, mp3 |
Searching
Section titled “Searching”Type in the Search files box to filter the current directory by filename. Filtering happens inline — the view updates as you type.
Navigating folders
Section titled “Navigating folders”The breadcrumb at the top shows your location relative to public/. Click any segment to jump up the path. A back arrow appears once you’re below the root. You can’t navigate above public/.
Uploading
Section titled “Uploading”Upload a file in one of two ways:
- Click Upload in the toolbar to open the file picker.
- Drag and drop a file anywhere on the breadcrumb/grid area. While dragging, the drop zone highlights and a “Release to upload” hint appears.
Uploads commit straight into the current directory on the active branch. File types known to be dangerous (php, phtml, phar, sh, exe, bat, jsp, asp, cgi, htaccess, and similar) are rejected.
Creating a folder
Section titled “Creating a folder”Click the new-folder icon next to the breadcrumb. An inline input appears — type a folder name and click Create (or press Enter). Press Escape or click Cancel to dismiss.
Image preview
Section titled “Image preview”Click an image card to open it full-size in an overlay. The overlay shows the filename and a Close button; pressing Escape also closes it.
Deleting
Section titled “Deleting”Each non-image card has a delete icon. Click it, confirm in the dialog, and the file is removed from the active branch. The confirmation prompt names the file and warns that the action can’t be undone.
How fields use the media browser
Section titled “How fields use the media browser”Image fields in the entry editor open the media browser in selection mode. The filter defaults to Images, and clicking a thumbnail returns its path to the field (with the leading public/ stripped, so frontmatter stores /images/hero.jpg rather than /public/images/hero.jpg).
Next steps
Section titled “Next steps”- File browser — edit project source files outside of
public/. - Content management — reference media from your content entries.
- AI assistant — the AI assistant can list and upload media assets.