# HTML

Drops raw HTML into a page. Use it for embeds (video, maps, third-party widgets), formatted content the standard blocks can't produce, or quick prototypes.

In edit mode, the block shows a card with the title and description so you can identify it on the canvas. At runtime, the HTML you've configured is rendered directly into the page.

## Available in

* All module types

## When to use

* Embedding a YouTube video, Google Maps view, or a Vimeo player.
* Pasting an iframe or third-party widget snippet (chat tools, analytics widgets that need an HTML container, embedded forms).
* Formatted content the existing blocks don't cover (custom tables, definition lists, anchor links).
* Quick prototyping while a proper component is being built.

If you find yourself reaching for HTML often for the same pattern, it's a sign that pattern deserves a real component — flag it to your implementation team.

## Settings

| Setting          | Description                                                  |
| ---------------- | ------------------------------------------------------------ |
| **Title**        | Identifier shown on the editor card. Not visible at runtime. |
| **Description**  | Short note for the editor card. Not visible at runtime.      |
| **HTML Content** | The HTML to render at runtime.                               |

## How it works

* **In the editor**, the block renders a card showing Title + Description, so you can spot it on the canvas without seeing the HTML output.
* **At runtime**, the block renders the HTML Content directly into the DOM (via `dangerouslySetInnerHTML`).
* Style and script tags work the same as in any HTML — but be careful with both (see hint below).

{% hint style="warning" %}
The HTML block renders content as-is. If you embed scripts, they execute. If you paste untrusted content, it can run in your users' browsers. Only embed HTML from trusted sources, and prefer the **JavaScript** block for any logic — it's clearer where the script came from.
{% endhint %}

## Examples

**Embed a video.** Paste a `<iframe>` snippet from YouTube. Set Title to "Welcome video" so the editor card is identifiable.

**Add a custom callout box.** A `<div>` with inline styling for a coloured box, used as a one-off announcement banner on a dashboard.

**Quick branding header.** A small HTML snippet for a logo + tagline in a non-standard layout the Hero block doesn't quite cover.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>JavaScript</strong></td><td>For logic and behaviour, not just markup.</td><td><a href="/pages/DEHisLtYVyC4YEOvJrO0">/pages/DEHisLtYVyC4YEOvJrO0</a></td></tr><tr><td><strong>CSS</strong></td><td>For page-level styling — pair with HTML when you need both.</td><td><a href="/pages/LXJAsk3WqG8zH44UmBR0">/pages/LXJAsk3WqG8zH44UmBR0</a></td></tr><tr><td><strong>Best Practices</strong></td><td>When to reach for advanced components vs standard blocks.</td><td><a href="/pages/vAbsWdSLiwdLsG7BZSoq">/pages/vAbsWdSLiwdLsG7BZSoq</a></td></tr></tbody></table>


---

# 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.in8sync.com/client-admin-guide/active-workflows/getting-started/advanced-components/html.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.