Skip to content
PlyedPlyedPlyed DocsBeta

Fonts & Assets

Fonts live in the Theme panel in the left rail, under Typography. Everything else your project serves from its public/ folder — images, video, and other files — is managed in the Assets panel, also in the left rail.

Fonts

Section titled “Fonts”

The Typography section of the Theme panel keeps track of every typeface in your project and lets you pull in new ones from your files or from fonts already installed on your Mac.

Project fonts

Section titled “Project fonts”

Every family already in your project is listed by name. Each one is registered as a font-* utility class — for example font-inter — which you can use anywhere in your markup or in the Typography settings.

To remove a family, hover its row and click ×. This removes the @font-face declarations and deletes the font files from public/fonts/.

Importing font files

Section titled “Importing font files”

Click Upload fonts to open a file picker filtered to supported font formats: TTF, OTF, WOFF, and WOFF2. You can also drag font files straight onto the editor window without opening the panel first.

  • TTF and OTF files are converted to WOFF2 on import. The original file is not kept — the project always stores the modern format.
  • WOFF and WOFF2 files pass through unchanged.
  • Imported files land in public/fonts/. If a file with the same name is already there, a numeric suffix (-1, -2, …) is added so nothing is overwritten.

Once imported, each family appears in the Typography font dropdown automatically.

Fonts already on your Mac

Section titled “Fonts already on your Mac”

Expand On this Mac to see every font installed on your computer. Use the search field to narrow the list by name. When you find a family you want, click Add next to it. All of its faces are imported and converted to WOFF2 using the same rules as uploaded files.

Assets

Section titled “Assets”

The Assets panel shows everything in your project’s public/ folder. Files here are served directly at / — an image at public/images/hero.png is available as /images/hero.png.

Importing assets

Section titled “Importing assets”

Click Import to pick one or more files. You can also drag files from Finder directly onto the Assets panel — a Drop to upload overlay confirms you’re in the right place. Dropping onto the window itself also imports: fonts go to the Theme panel’s Typography section, markdown to Project docs, everything else into public/ by type.

When you drag an asset tile from the panel onto the canvas, Plyed inserts the matching HTML for you: an <img> tag for images, an <a> link for everything else.

If an imported file has the same name as an existing asset, a numeric suffix is added automatically — for example photo-1.jpg — so no file is ever overwritten silently.

Browsing and filtering

Section titled “Browsing and filtering”

The panel shows the contents of your current folder. Sub-folders appear as tiles above the file grid; click one to enter it. The breadcrumb bar at the top shows your current path and lets you jump back to any level.

Use the search field to filter the current view by name.

Creating folders

Section titled “Creating folders”

Click the folder icon next to the breadcrumb bar, type a name, and press Create. Use slashes in the name to create nested folders in one step (for example images/icons). Only letters, digits, and dashes are allowed in folder names.

You can also reorganize by dragging an asset tile onto a folder tile — the file is moved into that folder.

Working with individual assets

Section titled “Working with individual assets”

Click any asset tile to copy its URL to the clipboard. For more options, hover the tile and click the ⓘ icon to open the details popover.

From the details popover you can:

  • Rename the file — type a new name and press Enter or ↵.
  • Replace — swap the file’s contents with a new file from your computer, keeping the same name and path.
  • Copy URL — copies the asset’s public path to the clipboard.
  • Delete — permanently removes the file (a confirmation is required).
  • Find usage — scans your project’s source files and lists every file that references this asset, so you know what would break before you delete.
  • Alt text — for images, store a description that Plyed uses when inserting the image onto the canvas.

If you have an <img> element selected on the canvas, the popover also shows Apply to selected image, which sets that element’s src (and alt if you filled it in) in one click.

Selecting multiple assets

Section titled “Selecting multiple assets”

Hold ⌘ and click to select several tiles at once. A bulk bar appears with a Delete button to remove all selected files in one step.