Editing on the Canvas

Plyed edits your real project as you work. Select something in the live canvas, make a change, and it is saved into the matching page or component source. You do not need a separate design file or an export step.

The editor — canvas, rails, and inspector on a live Astro preview.

Select and edit

Click an element in the canvas to select it. Its outline, breadcrumb, and row in Elements stay in sync, and the right sidebar shows the controls that apply to that element.

• Use Style for layout, spacing, size, typography, colours, borders, effects, Flex, and Grid.
• Use Inspector for text, links, attributes, component properties, and actions such as duplicate, wrap, detach, or delete.
• Double-click editable text in the canvas to type directly in the preview. Press Enter to save or Esc to discard it.

While you are moving things around the canvas, Plyed prevents accidental text selection. Text selection is enabled only when you deliberately enter inline text editing.

The left sidebar has two tabs: Elements, the tree of everything on the current page, and Source, your project’s file tree. Collapse or reopen it with ⌘S. Right-click a row in Elements (or the equivalent canvas selection) for Copy, Cut, Paste inside, Duplicate, Create component…, Wrap in div, Unwrap, and Delete.

Keep the panel you are using

Selecting a different element updates the information in the open right-side panel; it does not switch you back to Style.

Use the switcher at the bottom of the window whenever you want to focus on one task:

• Canvas (⌘1) for visual work
• Chat (⌘2) for asking AI to make or explain a change
• Code (⌘3) opens a separate window for working directly in the project’s files, alongside the canvas.

Style values and units

Type values the way you think about them. Plyed accepts Tailwind-scale values and CSS values such as 16px, 1.5rem, 50%, 100vh, calc(...), and var(...) where the property supports them. The unit beside a field tells you exactly what will be saved.

For simple numbers, use the arrow keys to nudge a value. More complex values such as fractions, variables, and calculations stay intact rather than being silently converted. Press Enter or click away to save a field; Esc restores what was there before.

Next to the class field, the State dropdown lets you style how an element looks on hover, focus, and similar states (Hover, Focus, Active, Focus-visible, Focus-within, Disabled, Visited, Before, After, Placeholder) instead of only its default appearance. Pick a state, make the change, and Plyed saves it as that state’s variant.

Choose what a style change applies to

The row of buttons above Classes controls how far a style change reaches:

• This … (for example This div) — the default for ordinary elements. Only the selected element changes. It’s labeled Instance instead when you’ve selected a component, or the page’s <body>/<html>.
• All <tag> — a site-wide baseline for every element of that tag (for example every <a> or <h2>), stored once and applied everywhere. Body and page-root tags default to this scope, since a per-element style there rarely makes sense.
• A shared class, shown as .classname — appears once an element already uses one. Click the + button next to Classes to turn the element’s current classes into a new named class; styling it there updates every element that uses that class.

Selecting a component instance adds one more option, the component’s name, and starts there: changes restyle every instance of the component until you click Instance. See One instance, or every instance for the details.

Element-specific options

A few kinds of element get extra controls at the top of Style:

• Headings and paragraphs — switch the Type (H1–H6, P).
• Lists — switch a list between Bulleted and Numbered. The List section sets the Marker (None, Disc, Numbers, Square, Circle) and its Position (Outside or Inside). Set these on the list and every item follows; select a single item to override it. An item that sets nothing shows From list with the list’s marker.
• Links — edit where the link goes. The full link editor is in the Inspector; see Pages & Links.

Check responsive styles honestly

Use Fill to work at the available canvas width, or choose Desktop, Tablet, Mobile landscape, or Mobile for a fixed viewport. The toolbar always shows that viewport’s actual width.

When a fixed viewport is too wide for the available editor space, Plyed scales the preview down only for display. The toolbar explicitly shows Scaled to …%. Your site still lays out at the labelled viewport width, so its media queries and responsive styles behave as they will in a browser.

Choose a smaller viewport before making a responsive change. Plyed keeps the wider value and saves your narrower change only for that view, so you can override a desktop style without losing it.

⌘-click a second viewport button to compare it side by side with the active one — useful for checking a change across two breakpoints at once. Click a viewport normally, or Fill, to leave comparison view.

Preview your site as a visitor would

The canvas favours editing over interaction: hover and click mostly select things rather than trigger them. Click Preview site (▶) in the toolbar to reload the page with its real animations, hover effects, and interactive behaviour, and browse it like a visitor would. Your selection is kept, so you can click Return to editing (⏸) and pick up exactly where you left off.

Rearrange and reuse elements

To add new elements, use the Add panel or Quick Insert (⌘E, or / with something selected) — see Adding Elements, including how adding straight into <body> reaches every page that shares the layout.

Use the Elements tree or drag an element in the canvas to move it. For a larger section, select its parent container first; copying that container includes everything inside it.

⌘C, ⌘X, and ⌘V work in the canvas when you are not editing text:

• Same page or another page in the same project: the pasted copy keeps the project’s component structure, including any imports it needs.
• Another open project: the paste becomes an independent, editable copy of the rendered section. Its text and Tailwind styling come with it, but it is not linked to the original component or project.

For cross-project copies, add any project-specific images, custom styles, or code in the destination project if it does not already have them. Plyed never creates an import that reaches back into the source project.

Plyed currently copies one selected element and its descendants. To copy a group of siblings, wrap them in a container first, then copy that container.

Design tokens and the Stylesheet view

Site-wide values — colours, fonts, spacing, and other Tailwind theme tokens — live in the Theme panel in the left rail, grouped as Typography, Colors, Spacing, and Other. Add, edit, or remove a token there and every element using it updates. (Font files themselves are managed here too — see Fonts & Assets.)

The Stylesheet panel shows those tokens as live specimens at your current breakpoint — text styles, color swatches, spacing steps, and the layout grid. It needs the project’s dev preview running. Click a specimen to jump straight to editing its token in Theme.

If a change cannot be saved

Plyed protects your files from stale edits. If the underlying source changed while a panel was open, you will see a message asking you to reselect the element and try again. Your newer source stays intact; no change is applied to the wrong element.

Use ⌘Z to undo a saved canvas change, and ⌘⇧Z to redo. The History panel lists every change in order — click any entry (or Session start) to jump straight to that point; entries after it are crossed out and redone automatically if you jump forward again.