Skip to main content

Beautify HTML

How to configure and use the HTML Beautify feature in the Reactiv dashboard. This setting helps you control how HTML content is processed and displayed throughout your mobile app.

Reactiv App avatar
Written by Reactiv App
Updated over 2 months ago

The HTML Beautify feature ensures HTML content looks clean, consistent, and aligned with your app’s design system. When enabled, Reactiv removes unwanted inline styling and specific HTML elements so your app’s typography, spacing, and colors stay uniform.

HTML Beautify is enabled by default, but you can turn it on or off at any time from your App Settings.

How to Access the Beautify HTML Setting

You’ll find this setting in the Brand page of your App Settings. To get there:

  1. Open the Reactiv Dashboard.

  2. In the Reactiv Dashboard select App Studio.​

  3. Click your company logo at the top of the page and select App Settings.​

  4. From the top menu, click Brand.

  5. Scroll to the Beautify HTML option.

  6. Toggle the setting On or Off.

  7. Click Save to apply your changes.

What HTML Beautify Does

When HTML Beautify is enabled, Reactiv automatically cleans and restyles HTML content to ensure a consistent appearance across your app.

1. Style Stripping

Reactiv removes the following inline CSS properties:

  • Font properties: fontFamily, fontStyle, fontVariant, fontWeight, fontSize

  • Borders: all border widths and colors

  • Text alignment: textAlign

  • Background colors

  • Spacing: all margins and paddings

Exception: Images hosted at dashboard.reactivapp.com/assets keep their inline styles.

2. Element Removal

The following elements are removed automatically:

  • <br> (line breaks)

  • <button>

  • <iframe>

  • <center>

  • <meta>

3. Empty Element Cleanup

Reactiv removes empty HTML elements such as:

  • Empty <p>

  • Empty <span>

  • Empty <em>

  • Empty <strong>

  • Empty headings (<h1>–<h6>)

4. Consistent Styling

When enabled, Reactiv applies your app’s theme automatically:

  • Typography follows your design system

  • Colors adjust for light/dark mode

  • Spacing is standardized

  • Lists and headings receive clean, predictable margins

When HTML Beautify Is Disabled

If you disable this setting:

  • Most inline HTML styles are preserved

  • Only <button> and <iframe> elements are removed

  • CSS stripping is disabled

  • Empty elements are not automatically cleaned up

This mode is useful when you need precise control over styling or are displaying complex third‑party HTML.

Use Cases

Enable HTML Beautify When:

  • You want a consistent, brand‑aligned look across all HTML content

  • Your HTML includes conflicting or messy inline styling

  • You need theme‑aware content (light/dark mode)

  • You want content to follow accessibility and readability standards

  • Your team uses rich text editors that add heavy or unnecessary styling

Disable HTML Beautify When:

  • Your HTML includes custom layouts or precise styling

  • You’re displaying third‑party content that must remain unchanged

  • Your content depends on intentional inline styles

Troubleshooting

Problem: HTML looks different than expected

Solution: HTML Beautify may be enabled. Set to false to preserve original styling.

Problem: Custom HTML layouts appear broken

Solution: Disable HTML Beautify to prevent stripping of inline styles.

Problem: Missing line breaks or spacing

Solution: <br> tags are removed when Beautify is enabled. Disable this setting if you need to keep manual line breaks.

Support

If you need help configuring this setting, contact the Reactiv App Mobile support team. Include:

  • Your app UUID

  • Your current configuration settings

  • Examples of HTML content to review

  • Screenshots (if helpful)

We’re here to make sure your HTML content looks and performs exactly how you want it to.

Did this answer your question?