# 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](/ui-building-blocks/widgets/default-properties.md):

**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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digia.tech/ui-building-blocks/widgets/media-async-widgets/htmlview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
