Overview
The Rich Text element provides a WYSIWYG (What You See Is What You Get) editing experience for content that requires inline formatting. It renders as a <div> containing HTML content and supports bold, italic, underline, links, and other formatting through the FloatingToolbar.
Unlike the Text element, Rich Text stores HTML content directly and cannot have nested element children. This makes it ideal for paragraphs with mixed formatting, such as blog post content or descriptions with inline links.
Click a Rich Text element on the canvas to enter edit mode. A floating toolbar appears with formatting options when you select text within the editor.
Use Rich Text for content with inline formatting needs (bold, italic, links). Use the regular Text element for simple paragraphs without formatting.
Settings
Configure the Rich Text element using these options:
| Setting | Description | Default |
|---|---|---|
| Content | HTML content edited via the WYSIWYG toolbar. Click the element to edit. | <p>Start writing your content here.</p> |
| Formatting | Bold, italic, underline, and strikethrough applied via the floating toolbar. | None |
| Links | Insert hyperlinks via the toolbar. Select text and click the link button. | None |
Toolbar Features
The FloatingToolbar appears when you select text within the Rich Text editor. It provides these formatting options:
| Feature | Shortcut | Description |
|---|---|---|
| Bold | Ctrl+B | Make selected text bold |
| Italic | Ctrl+I | Make selected text italic |
| Underline | Ctrl+U | Underline selected text |
| Strikethrough | – | Apply strikethrough to selected text |
| Link | Ctrl+K | Insert or edit a hyperlink |
Inserting Links
- Select the text you want to turn into a link
- Press Ctrl+K or click the link icon in the toolbar
- Enter the URL in the popup field
- Press Enter to apply the link
Examples
Formatted Paragraph with Bold and Italic
A paragraph containing mixed inline formatting for emphasis.
<div class="prose">
<p>
This product is <strong>built for performance</strong> and
designed with <em>attention to detail</em>. Every feature
has been carefully crafted.
</p>
</div>Rich Text with Inline Link
Content that includes a hyperlink to another page or external resource.
<div class="prose">
<p>
Learn more about our approach in our
<a href="/about" class="text-primary hover:underline">about page</a>
or contact us directly.
</p>
</div>Rich Text content is stored as HTML in your page data. This allows for complex formatting but means the element cannot contain other builder elements as children.