Rich Text Editor

Let your users write and format text with a full toolbar — bold, italic, lists, headings, images, links, and more. The editor outputs HTML that you can save to your database and display elsewhere in your app. Perfect for blog posts, notes, descriptions, or any content that needs formatting.

Getting Started

Add the Rich Text Editor component to your screen. It appears as a text input area with a formatting toolbar. By default, the toolbar sits at the top with buttons for bold, italic, underline, strikethrough, lists, images, and links. Users type in the editor area, highlight text to format it, and the output is available as HTML and plain text form values.

Settings

Initial Value

Pre-populate the editor with HTML content. Use Magic Text to load existing content from your database (e.g., a blog post's body field). This sets the starting content only — it does not live-sync with external data.

Placeholder

Hint text shown when the editor is empty (e.g., "Start writing..."). Helps users understand what to type.

Form Values (Output)

The editor outputs two form values you can bind to other components or save to your database:

• HTML — The formatted content as HTML. Save this to a text field in your database to preserve formatting. Display it using a text component with "Render as HTML" enabled.

• Plain Text — The content with all HTML tags stripped. Useful for previews, search indexing, or character counting.

Height Settings

• Enable Auto-Height (default: on) — The editor grows taller as users type more content. When on, you can also set:

  • Editor Only - Input Height — Override height in the Adalo editor preview (doesn't affect the live app)

  • Enable Min Height — Set a minimum height so the editor doesn't shrink below a certain size

  • Min Height — The minimum height in pixels (default: 120)

  • Enable Max Height — Cap the editor's growth. Content scrolls when it exceeds this height.

  • Max Height — The maximum height in pixels (default: 500)

• When Auto-Height is off, use the Input Height slider to set a fixed height (default: 200px). The editor scrolls when content exceeds this height.

Max Characters

Set an optional character limit based on plain text length (ignoring formatting). Leave empty for no limit.

Auto Focus

When enabled, the editor automatically receives focus when the screen loads, opening the keyboard on mobile.

Display Only

Turn the editor into a read-only viewer. The toolbar is hidden and users cannot edit the content. Useful for displaying formatted content that was created elsewhere.

Toolbar

Toggle the toolbar on or off, and choose which formatting buttons to show.

Toolbar Position

• Top (default) — Toolbar sits above the editor

• Bottom — Toolbar sits below the editor

• Float Above Highlighted Text — Toolbar appears as a floating popup above selected text

• Float Below Highlighted Text — Floating popup below selected text

• Float + Static Top — A minimal static toolbar at top, with extra options in a floating popup on text selection

Formatting Buttons

Toggle each button on or off to customize the toolbar:

• Bold (default: on)

• Italic (default: on)

• Underline (default: on)

• Strikethrough (default: on)

• Headings (default: off) — When enabled, choose how headings are displayed: as individual Buttons, a Dropdown menu, or a Collapsible Group

• Image (default: on) — Insert images via URL. Choose pop-up or inline toolbar input.

• Link (default: on) — Insert hyperlinks. Choose pop-up or inline toolbar input.

• Undo / Redo (default: off)

• Ordered List (default: on) — Numbered lists

• Unordered List (default: on) — Bullet lists

• Text Alignment (default: off) — Left, center, right alignment. Display as Buttons, Dropdown, or Collapsible Group.

• Code (default: off) — Inline code formatting with customizable background and text colors

• Code Block (default: off) — Multi-line code blocks with customizable background, text color, font, size, padding, border color, and border radius

• Blockquote (default: off) — Indented quote blocks with customizable border and text colors

• Horizontal Rule (default: off) — Insert a horizontal divider line

• Remove Formatting (default: off) — Clear all formatting from selected text

• Indent/Outdent (default: off) — Increase or decrease text indentation

Toolbar Appearance

• Active Icon Color — Color of toolbar buttons when their formatting is active (default: #111111)

• Inactive Icon Color — Color of toolbar buttons in their default state (default: #555555)

• Toolbar Icon Size — Size of toolbar icons (12 to 36, default is 20)

• Toolbar Layout — Choose Wrap (buttons wrap to multiple rows) or Horizontal Scroll (single row, scroll for more)

• Toolbar/Tooltip Background — Background color of the toolbar and floating tooltips (default: white)

• Show Toolbar Underline — Add a divider line between the toolbar and the editor

• Toolbar Underline Color — Color of the divider line

• Toolbar-Editor Spacing — Padding between the toolbar and editor area (0 to 48, default is 0)

• Show Dividers — Thin vertical lines between button groups (default: on)

• Divider Color — Color of the group dividers

• Enable Keyboard Shortcuts — Allow Cmd/Ctrl+B for bold, Cmd/Ctrl+I for italic, etc. (default: on)

Editor Appearance

• Line Height — Controls line spacing as a multiplier of font size. Stored as 10x for precision (e.g., 15 = 1.5x). Default is 15.

• Editor Left/Right Padding — Horizontal padding inside the editor (0 to 48, default is 12 each)

• Editor Rounding — Border radius of the editor container (0 to 24, default is 4)

• Container Padding — Padding outside the editor border (0 to 48, default is 0)

• Editor Background — Background color of the editing area (uses your app's background color by default)

• Border Color — Color of the editor border (default: #DDDDDD)

• Show Scroll Indicators — Show scrollbar indicators when content is scrollable (default: on)

Actions

The Rich Text Editor doesn't have explicit action props — instead, use its form values (HTML and Plain Text) in your screen's submit/save actions. For example, add a "Save" button that creates or updates a record with the editor's HTML output.

Tips & Best Practices

• Save the HTML form value to a text field in your database. Display it elsewhere using a text component or web view with HTML rendering enabled.

• Use the Plain Text form value for search functionality or character count displays. It strips all formatting for a clean text-only version.

• Start with fewer toolbar buttons and add more as needed. Too many buttons can overwhelm users. Bold, italic, lists, and links cover most use cases.

• Use Display Only mode to show formatted content created by admins or other users. This turns the editor into a read-only rich text viewer.

• Set a Max Height when the editor is part of a form with other fields below it. This prevents the editor from pushing other fields off-screen as users type.

Example Use Cases

• Blog Editor: Full toolbar with headings, images, links, lists, and blockquotes. Save the HTML to a "Body" field on a Posts collection. Display it on a detail screen.

• Notes App: Minimal toolbar (bold, italic, lists). Auto-height enabled with no max height so notes can be any length.

• Product Description Editor: Toolbar with bold, italic, images, and links. Set a max character limit to keep descriptions concise.

• Help Center / FAQ: Use Display Only mode to show pre-written rich text answers. Admins edit content through a separate admin screen with the full editor enabled.