HTML Renderer

Display HTML content beautifully in your Adalo app. Render formatted text, images, tables, lists, links, embedded videos, and more — all from a single HTML text field. Perfect for displaying blog posts, help articles, product descriptions, email templates, or any content from an API or database that contains HTML.

Getting Started

Add the HTML Renderer component to your screen. By default, it shows sample HTML content so you can see how it renders. To display real content, bind the HTML Content field to a text property from your database or use Magic Text to pull HTML from an API.

Settings

HTML Content

The HTML string to render. Supports standard HTML tags including headings, paragraphs, bold, italic, lists, tables, images, links, iframes (for video embeds), and more.

You can set this to:

• Static HTML — Type or paste HTML directly

• Magic Text — Bind to a text field from your database (e.g., a "Body" field on a blog post collection)

• API response — Display HTML returned from an external API

Security: Script tags (<script>) and inline event handlers (onclick, onerror, etc.) are automatically stripped for security. Iframes are allowed for embedding videos and external content.

Base Font Size

Set the default font size for the HTML content (8 to 36, default is 16). Heading sizes scale relative to this value (e.g., H1 is 2x the base size). CSS or inline HTML styles override this setting.

Font Color

The default text color for all content. Uses your app's text color by default. CSS or inline HTML styles override this setting.

Link Color

The color of hyperlinks in the HTML content (default: #1a73e8). Links are underlined by default.

Background Color

The background color of the component. Uses your app's background color by default.

Padding

Internal padding around the HTML content (0 to 48, default is 0).

Line Height (x10)

Controls line spacing as a multiplier. The value is at 10x precision for fine control — 16 means 1.6x line height, 12 means 1.2x, 20 means 2.0x. Default is 16.

Custom CSS

Add custom CSS rules to further style the HTML content. These rules override the base font size, color, and other settings above.

Examples:

• h1 { color: red; font-size: 28px; }

• img { border-radius: 8px; margin: 10px 0; }

• table { font-size: 12px; }

• a { color: #00A898; text-decoration: none; }

• blockquote { background: #f9f9f9; padding: 16px; }

Scroll When Overflow

When enabled (default), the content scrolls if it exceeds the component's height. When disabled, the content expands beyond the bounding box to show everything at once.

Open Links in Browser

When enabled (default), tapping a link in the HTML opens it in the device's browser. When disabled, links are not clickable.

Actions

On Link Pressed

Fires when a user taps any link in the HTML content. Use this to track link clicks, show a confirmation, or handle navigation yourself.

Supported HTML Tags

The component supports all standard HTML tags including:

• Text: h1-h6, p, span, strong, em, u, s, br

• Lists: ul, ol, li

• Tables: table, thead, tbody, tr, td, th

• Media: img, iframe, video, audio

• Layout: div, section, article, header, footer

• Formatting: pre, code, blockquote, hr

• Links: a (with href)

How It Renders

On Web

Uses native HTML rendering with scoped CSS. Styles are isolated to the component and don't leak into the Adalo editor or other components.

On iOS & Android

Fallback

Tips & Best Practices

• Use the Custom CSS field for advanced styling rather than inline styles in your HTML. This keeps your HTML clean and makes styles easy to update.

• Embed YouTube videos using iframes: <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="100%" height="315"></iframe>

• Set Scroll When Overflow to off if the HTML Renderer is the only content on the screen and you want the page itself to handle scrolling.

• Use the On Link Pressed action to track which links users click, or to show a confirmation dialog before opening external URLs.

• Combine with the Rich Text Editor — use the Rich Text Editor for content creation (outputs HTML) and the HTML Renderer for content display.

Example Use Cases

• Blog Post Viewer: Bind the HTML Content to a "Body" field from a blog posts collection. Users create posts with a Rich Text Editor, and you display them with the HTML Renderer.

• Help Center / FAQ: Store formatted help articles as HTML in your database. Display them in a clean, readable layout with custom CSS for your brand.

• Email Template Preview: Show a preview of HTML email templates. Use Custom CSS to match your email styling.

• API Content Display: Render HTML responses from external APIs (news feeds, CMS content, product descriptions).

• Embedded Video Gallery: Use iframes to embed YouTube, Vimeo, or other video content directly in your app screens.