# HTML View

The **HTML View** widget renders a string of HTML content inside your app.\
It’s useful when you want to display **rich text content** that comes from a server, CMS, or external source in HTML format, without manually building UI with multiple Text widgets.

{% embed url="<https://www.youtube.com/watch?v=MOUqbzSAOAs>" %}

Watch this on Youtube: <https://www.youtube.com/watch?v=MOUqbzSAOAs>

### Core Concepts

The HTML View widget:

* Takes a **raw HTML string** from the `content` property.
* Parses it into a styled widget tree.
* Renders it as readable, formatted text inside your app.
* Allows you to **override styles** for specific tags like `<body>`, `<span>`, and `<p>` using style override properties.

This is ideal when:

* Your backend or CMS returns HTML.
* You need to show “About”, “Terms & Conditions”, “Help”, or “Blog-like” content in the app.
* You don’t want to manually convert HTML into multiple UI components.

### Properties

| Property          | Description                                                                                                                       |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `Content`         | The HTML content string and shrinkwrap setting. The content includes the HTML string and whether the widget should shrink to fit. |
| `Body Style`      | Style overrides for the `<body>` tag, including font, color, and other text styling properties.                                   |
| `Span Style`      | Style overrides for `<span>` tags, allowing customization of inline text styling.                                                 |
| `Paragraph Style` | Style overrides for `<p>` tags, controlling paragraph-level text formatting.                                                      |

### Children of HTMLView

This is a leaf widget that does not support children.

### Default Properties

The HTML View widget supports the following section of [default-properties](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention"):

**Layout**

* `width`
* `height`
* `padding`
* `margin`
* `align`

### Use Cases

The **HTML View** widget is used to render **HTML content** (like `<p>`, `<h1>`, `<a>`, `<img>`, `<ul>`, etc.) directly inside your app.

Use **HTML View** when you want to:

* **Display content from the web or CMS**
  * Blog posts, landing page sections, marketing content
  * Help center articles, FAQs, privacy policy, terms & conditions
* **Render pre-built HTML snippets**
  * Email templates, notification templates, or CMS blocks
  * Embedded descriptions from third-party tools or dashboards
* **Show rich formatted user/admin content**
  * Descriptions, announcements, or banners stored as HTML in your backend
  * Legacy content that already exists in HTML (no need to convert to Markdown or rich text manually)
* **Preview HTML-based layouts**
  * Quick preview of newsletters, web copy, or small HTML fragments inside the app
