Inline text editor
The inline text editor lets you edit the content of any text element directly on the canvas. There is no need to find a separate content pane or switch to a code view — just double-click and type.
Entering edit mode
Double-click any text-containing element — a heading, paragraph, list item, button label, or any other element that holds text content. The element switches to edit mode, indicated by a text cursor inside the element and a slightly different selection border.
You can also:
- Select the element with a single click, then press Enter or F2 to enter edit mode.
- Right-click the element and choose Edit text from the context menu.
Typing and replacing content
Once in edit mode, the element’s text becomes fully editable:
- Type to insert text at the cursor position.
- Select all with ⌘A and type to replace the entire content.
- Drag to select a range of text, then type to replace just that range.
Placeholder text (shown when an element has no real content) is automatically cleared when you begin typing.
The mini formatting toolbar
When you select a range of text inside edit mode, a small floating toolbar appears above the selection. It provides the most common inline formatting options:
| Button | Effect | Shortcut |
|---|---|---|
| B | Bold (wraps in <strong>) | ⌘B |
| I | Italic (wraps in <em>) | ⌘I |
| U | Underline | ⌘U |
| Link | Wrap selection in an <a> tag | ⌘K |
| Clear | Remove all inline formatting from selection | — |
Applying bold or italic on text that already has that formatting removes it (toggle behavior).
Adding links
Select the text you want to link, then click the Link button in the mini toolbar or press ⌘K . A small input field appears where you can type or paste the URL. Press Enter to confirm. The selected text is wrapped in an <a> tag.
To edit an existing link, place the cursor inside the linked text and press ⌘K , or right-click the link and choose Edit link.
Line breaks
The behavior of the Enter key depends on the element type:
| Key | Result |
|---|---|
| Enter | Creates a new paragraph (<p>) — only works inside containers like <div>. Inside a <p>, it splits the paragraph. |
| ⇧Enter | Inserts a line break (<br>) within the current element. |
Use ⇧Enter when you want a soft line break within a single paragraph or heading, without creating a new block element.
Inserting special characters
To insert a special character or symbol, use your operating system’s character picker:
- macOS: Press ⌃⌘Space to open the Character Viewer.
- Windows: Press Win . (Windows key + period) to open the emoji and symbol picker.
Any character you insert from the picker is placed at the cursor position, encoded correctly in the HTML.
Exiting edit mode
-
Press Escape
Press Esc to exit text editing mode. The element returns to selected state (blue border), ready for other operations.
-
Click outside
Click anywhere outside the element on the canvas. This exits edit mode and deselects the element.
What you cannot do in the inline editor
The inline text editor handles content only. It does not change the element’s visual styles (font size, color, weight set at the CSS level) — those live in the Design pane. It also cannot:
- Change the element type (e.g., convert a
<p>to an<h2>). Use the Content pane for that. - Add or edit
classoridattributes. Use the Design pane’s Element sub-tab. - Insert block-level HTML tags inside inline elements.
