ToolJet/docs/versioned_docs/version-2.18.0/widgets/html.md

---
id: html
title: HTML Viewer
---

# HTML Viewer

HTML widget can be used to create your own HTML-CSS layout.

<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/widgets/html/html.png" alt="HTML component" />

</div>

## Properties

### Raw HTML

The Raw HTML needs to be an HTML. In order to provide styles, one can add inline css to the respective HTML tags

**Example:**

```json
<!DOCTYPE html>
<html>
<body>
    <main>
        <section class="hero" style="height:306px;display:flex;justify-content: center;padding:0 1px;align-items: center;text-align:center">
          You can build your custom HTML-CSS template here
        </section>
    </main>
</body>
</html>

```

<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/widgets/html/raw.png" alt="HTML component" />

</div>

### General
#### Tooltip

A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.

Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.

<div style={{textAlign: 'center'}}>

<img className="screenshot-full" src="/img/tooltip.png" alt="HTML component" />

</div>

## Layout

| Layout          | description                               | Expected value                                                                                                |
| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile  | Toggle on or off to display mobile view.  | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |

## Styles

| Style      | Description                                                                                                                                                                                                                                              |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. |

:::info
Any property having `Fx` button next to its field can be **programmatically configured**.
:::

## Exposed variables

There are currently no exposed variables for the component.

## Component specific actions (CSA)

There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.
[docs] platform 5.x (#7427) * whtie label revamp * minor changes * updated beta info in copilot docs * renamed gds to ds in overview doc of v2.15 onwards * updated multienv: renamed gds to ds, updated screenshot * updated multienv: app state description * updated superadmin wrt new licensing updates * licensing update: free trial * updates in licensing * changes after review * [docs]updated restapi with bearer auth * Update kubernetes-aks.md * Update openshift.md * Update ecs.md * Update ecs.md * Update kubernetes-gke.md * Update kubernetes.md * Update docker.md * Update docker.md * Update ecs.md * Update google-cloud-run.md * Update kubernetes-aks.md * Update kubernetes-gke.md * Update kubernetes.md * Update openshift.md * Update kubernetes-gke.md * Update kubernetes-aks.md * fixed ecs, removed heroku from 2.15 onwards * updated digitalocean doc * licensing doc changes and location * Update digitalocean.md * Update digitalocean.md * added v2.18.0 --------- Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com> 2023-09-27 06:54:39 +00:00			`---`
			`id: html`
fix: Update the frontmatter of HTML and Rich editor components. (#7644) 2023-10-12 09:28:18 +00:00			`title: HTML Viewer`
[docs] platform 5.x (#7427) * whtie label revamp * minor changes * updated beta info in copilot docs * renamed gds to ds in overview doc of v2.15 onwards * updated multienv: renamed gds to ds, updated screenshot * updated multienv: app state description * updated superadmin wrt new licensing updates * licensing update: free trial * updates in licensing * changes after review * [docs]updated restapi with bearer auth * Update kubernetes-aks.md * Update openshift.md * Update ecs.md * Update ecs.md * Update kubernetes-gke.md * Update kubernetes.md * Update docker.md * Update docker.md * Update ecs.md * Update google-cloud-run.md * Update kubernetes-aks.md * Update kubernetes-gke.md * Update kubernetes.md * Update openshift.md * Update kubernetes-gke.md * Update kubernetes-aks.md * fixed ecs, removed heroku from 2.15 onwards * updated digitalocean doc * licensing doc changes and location * Update digitalocean.md * Update digitalocean.md * added v2.18.0 --------- Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com> 2023-09-27 06:54:39 +00:00			`---`

fix: Update the frontmatter of HTML and Rich editor components. (#7644) 2023-10-12 09:28:18 +00:00			`# HTML Viewer`
[docs] platform 5.x (#7427) * whtie label revamp * minor changes * updated beta info in copilot docs * renamed gds to ds in overview doc of v2.15 onwards * updated multienv: renamed gds to ds, updated screenshot * updated multienv: app state description * updated superadmin wrt new licensing updates * licensing update: free trial * updates in licensing * changes after review * [docs]updated restapi with bearer auth * Update kubernetes-aks.md * Update openshift.md * Update ecs.md * Update ecs.md * Update kubernetes-gke.md * Update kubernetes.md * Update docker.md * Update docker.md * Update ecs.md * Update google-cloud-run.md * Update kubernetes-aks.md * Update kubernetes-gke.md * Update kubernetes.md * Update openshift.md * Update kubernetes-gke.md * Update kubernetes-aks.md * fixed ecs, removed heroku from 2.15 onwards * updated digitalocean doc * licensing doc changes and location * Update digitalocean.md * Update digitalocean.md * added v2.18.0 --------- Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com> 2023-09-27 06:54:39 +00:00
			`HTML widget can be used to create your own HTML-CSS layout.`

			`<div style={{textAlign: 'center'}}>`

			`<img className="screenshot-full" src="/img/widgets/html/html.png" alt="HTML component" />`

			`</div>`

			`## Properties`

			`### Raw HTML`

			`The Raw HTML needs to be an HTML. In order to provide styles, one can add inline css to the respective HTML tags`

			`Example:`

			```json
			`<!DOCTYPE html>`
			`<html>`
			`<body>`
			`<main>`
			`<section class="hero" style="height:306px;display:flex;justify-content: center;padding:0 1px;align-items: center;text-align:center">`
			`You can build your custom HTML-CSS template here`
			`</section>`
			`</main>`
			`</body>`
			`</html>`

			```

			`<div style={{textAlign: 'center'}}>`

			`<img className="screenshot-full" src="/img/widgets/html/raw.png" alt="HTML component" />`

			`</div>`

			`### General`
			`#### Tooltip`

			`A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.`

			`Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.`

			`<div style={{textAlign: 'center'}}>`

			`<img className="screenshot-full" src="/img/tooltip.png" alt="HTML component" />`

			`</div>`

			`## Layout`

			`\| Layout \| description \| Expected value \|`
			`\| --------------- \| ----------------------------------------- \| ------------------------------------------------------------------------------------------------------------- \|`
			\| Show on desktop \| Toggle on or off to display desktop view. \| You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` \|
			\| Show on mobile \| Toggle on or off to display mobile view. \| You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` \|

			`## Styles`

			`\| Style \| Description \|`
			`\| ---------- \| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- \|`
			\| Visibility \| Toggle on or off to control the visibility of the widget. You can programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not visible after the app is deployed. By default, it's set to `{{true}}`. \|

			`:::info`
			Any property having `Fx` button next to its field can be programmatically configured.
			`:::`

			`## Exposed variables`

			`There are currently no exposed variables for the component.`

			`## Component specific actions (CSA)`

			`There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.`