Fonts & Assets
Open the Assets panel in the left rail to manage everything your project
serves from its public/ folder — files under the Files tab, typefaces
under the Fonts tab.
The Fonts tab 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 machine.
Project fonts
Section titled “Project fonts”The Project fonts section lists every family that is already in your
project, grouped by name. Each family also shows its 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 Add files… 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 is registered as a font-* class and appears in
the Typography font dropdown automatically.
Fonts on this machine
Section titled “Fonts on this machine”Click Fonts on this machine to expand a list of every font installed on your computer. Use the Search families… 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 Add files….
Assets
Section titled “Assets”The Files tab 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 or Explorer 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 Fonts, markdown to
Project docs,
everything else into public/ by type.
When you drag an asset tile from the panel onto the canvas, Plyy 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 assets… field to filter by name. The All / Images / Other buttons below it narrow by file type.
Creating folders
Section titled “Creating folders”Click the folder icon (▣+) in the panel header, 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 Plyy 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.