Rich Text

Display and edit rich text

With the Rich text input element, you can:

• display rich text on a page,
• allow users to input and edit rich text,
• allow users to mention other users in the text.

In the screenshot above, you can see two sections with:

1. the element in editing mode, where users can type and style content
2. the element in read-only mode, where users can see what the content will look like on an HTML page.

Style rich text

When using the Rich text input element, you can:

• type markdown,
• show or hide the style bar,
• add bullet points, ordered lists, links, quotes, and code blocks, and
• tag / mention other users.

Here's what it looks like in action:

Add mentions

If you want to allow users to tag other users, you'll need to define a list of users who can be tagged.

In order to do that, you'll need to:

• select the element on the page
• go to the Settings > Mentions
• provide a list of users with an Id and Label,
• map the Id and Label values of the element to the correct columns (or keys) in your list of users.

In the example above, we have an array variable (i.e. a list) with two users. Each user has an id and a name.

In the element settings, we bound the users variable to the Mentions Lists property, and mapped the id and name values to the Id and Label properties of the element.

Update or create record

A really cool way to use the Rich text input element is to allow users to create or update content.

For example, users could:

• write articles for you,
• update their user profile, or
• create a product page.

In order to do that, you'll need to:

1. add a button with a workflow triggered On click, and
2. send the value from the Rich text - value variable.

In the example above, we make an API request to POST the value of the Rich text - value variable to an article column in our backend.

You can follow the same logic to send data to an Airtable database, Xano, Supabase, or any other backend.

Custom menu

In the design tab of the rich text input element, you can choose to enable Custom menu:

This option allows you to design your own editing menu, to match your brand's design system for example:

You can add the buttons you want with the style you want and use the Execute component action to trigger the desired behavior:

Here's what it looks like in action with the Toggle Bold, Toggle Italic, and Toggle Underline actions:

Rich text component actions include:

• Focus Rich text to focus the user on the rich text element
• Set link to add a link to the selected text
• Set tag to choose the HTML tag of the selected text
• Toggle bold to make the selected text bold
• Toggle italic to make the selected text italic
• Toggle underlineto underline the selected text
• Toggle strike to strike out the selected text
• Set color to choose a color for the selected text
• Toggle bullet list to create an unordered list of items
• Toggle ordered list to create a numbered list of items
• Toggle Code Block to create a code block
• Toggle Blockquote to create a blockquote
• Undo to undo the previous user action
• Redo to redo the previous user action

Paste text without formatting

When users paste text from another source into the Rich text input element, the original styling and formatting might be preserved. If you prefer to have the text inserted without any external styling, you can encourage users to use the "Paste as plain text" option. The shortcut is typically Ctrl + Shift + V on Windows or Cmd + Shift + V on Mac. This bypasses any formatting and pastes the text directly.

Rich text input variables

The Rich text input element exposes various specialized variables that help you work with both the content and formatting state of the editor.

Understanding rich text variables

The rich text editor always exposes these key variables:

Rich text - value:

• Contains the complete HTML content of the editor
• This is what gets stored in your database
• Example: <p>Hello <strong>world</strong>!</p>

Rich text - mentions:

• Array of people/items tagged in the content
• Useful for notification systems or user tagging features

Rich text - states:

• Object containing the editor's current formatting states
• Helpful for creating custom editing toolbars
• Each state is a boolean (true/false) indicating if a formatting option is active

Rich text state variables

The rich text editor exposes these state variables:

Variable	Description
states.textType	Current text style (paragraph, heading1-6, etc.)
states.textColor	Current selected text color
states.bold	Whether bold formatting is active
states.italic	Whether italic formatting is active
states.underline	Whether underline formatting is active
states.strike	Whether strikethrough formatting is active
states.bulletList	Whether bullet list formatting is active
states.orderedList	Whether numbered list formatting is active
states.checkList	Whether checklist formatting is active
states.link	Whether link insertion mode is active
states.codeBlock	Whether code block formatting is active
states.blockquote	Whether block quote formatting is active
states.textAlign	Current text alignment (left, center, right, justify)
states.table	Whether table insertion mode is active

TIP

For the best organization and to avoid confusion with multiple variables, always:

1. Give your rich text input a meaningful name in its settings
2. Use the Rich text - value variable when you need to access or store the content
3. Use the state variables (Rich text - states.bold, etc.) when creating custom toolbars