Content pane
The Content pane lets you edit what an element contains — its visible text, the URL a link points to, the source of an image — without clicking directly on the canvas. It is the fastest way to update content across many elements in sequence.
Editable fields
The fields shown in the Content pane depend on the type of element selected. Common fields include:
| Field | Applies to | Description |
|---|---|---|
| Text | <p>, <h1>–<h6>, <span>, <li>, buttons | The visible text content of the element |
| href | <a> | The destination URL for a link |
| src | <img>, <video>, <iframe> | The file path or URL of the media source |
| alt | <img> | Accessibility description of the image |
| placeholder | <input>, <textarea> | The hint text shown before a user types |
| value | <input>, <button> | The default value or button label |
Link editor
When a <a> element is selected, the Content pane shows an expanded link editor with three fields:
- URL — The destination. Enter an absolute URL (
https://...), a relative path (/about), or an anchor (#contact). - Target — Controls how the link opens. Choose
_self(same tab, the default) or_blank(new tab). - Title — An optional tooltip shown on hover. Also used by screen readers when the link text alone is ambiguous.
Custom HTML attributes
Below the standard fields, the Content pane includes an Attributes section. Use it to add any non-standard attribute to the element’s HTML tag — without touching code.
Common use cases:
data-*attributes for JavaScript hooks (data-modal-target="my-modal")- ARIA attributes for accessibility (
aria-label,aria-expanded,aria-controls) - Form attributes (
name,id,required,disabled)
To add a custom attribute:
- Click + Add attribute at the bottom of the Attributes section.
- Type the attribute name in the left field (e.g.,
data-theme). - Type the value in the right field (e.g.,
dark). - Press Enter or click outside to confirm.
To remove an attribute, hover the row and click the × button.
When the Content pane is empty
If you select a structural or layout element — such as a <div>, <section>, or <nav> — the Content pane will show no editable fields. These elements contain other elements, not direct text or media. To edit their children, click an inner element to select it.
