Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-04-22 14:07:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8
ToolJet/docs/versioned_docs/version-3.16.0-LTS/widgets/html.md

91 lines
4.9 KiB
Markdown
Raw Normal View History

[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
---
id: html
title: HTML Viewer
---
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
The **HTML Viewer** component allows you to render custom HTML and CSS layouts within your ToolJet application. Use it to display rich formatted content, embed custom designs, or create visually distinct sections that go beyond standard components.
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
## Example Usage
A logistics company needs to display shipment tracking details with branded styling. The HTML Viewer renders a custom tracking card with the company's colors and layout that updates dynamically based on shipment data from the database.
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
## Properties
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
| <div style={{ width:"100px"}}> Property </div> | Description | Expected Value |
|:---------|:------------|:---------------|
| Raw HTML | The HTML content to render. Inline CSS can be added to HTML tags for styling. Content is sanitized using DOMPurify for security. | HTML string (e.g., `<div style="color: blue;">Hello</div>`) |
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
**Example:**
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
```html
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
<body>
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
<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>
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
</body>
```
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
:::info
Links in the HTML content automatically open in a new tab with `target="_blank"` and `rel="noopener"` for security.
:::
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
## Component Specific Actions (CSA)
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
The following actions of the component can be controlled using the component-specific actions (CSA):
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
| <div style={{ width:"120px"}}> Action </div> | <div style={{ width:"135px"}}> Description </div> | <div style={{width: "200px"}}> How To Access </div>|
| :------------ | :---------- | :------------ |
| setRawHTML( ) | Sets the Raw HTML content of the component. | `components.html1.setRawHTML('<h1>New Content</h1>')` |
| setVisibility( ) | Sets the visibility of the component. | `components.html1.setVisibility(false)` |
| setLoading( ) | Sets the loading state of the component. | `components.html1.setLoading(true)` |
| setDisable( ) | Disables or enables the component. | `components.html1.setDisable(true)` |
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
## Exposed Variables
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
| Variable | Description | How To Access |
|:--------|:-----------|:------------|
| rawHTML | The current HTML content of the component. | `{{components.html1.rawHTML}}` |
| isLoading | Indicates if the component is in loading state. | `{{components.html1.isLoading}}` |
| isVisible | Indicates if the component is visible. | `{{components.html1.isVisible}}` |
| isDisabled | Indicates if the component is disabled. | `{{components.html1.isDisabled}}` |
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
## Additional Actions
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
| <div style={{ width:"100px"}}> Action </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
|:------------------|:------------|:------------------------------|
| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Disable | Enables or disables the component. When disabled, the component appears faded and does not respond to interactions. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a display string. | String |
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
## Devices
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
|<div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Expected Value </div>|
|:---------- |:----------- |:----------|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
## Styles
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
### Container
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
| <div style={{ width:"100px"}}> Property </div> | <div style={{ width:"150px"}}> Description </div> | <div style={{ width:"250px"}}> Configuration Options </div>|
|:----------------|:------------|:--------------|
| Box shadow | Sets the box shadow properties of the component. | Select the box shadow color and adjust the related properties or set it programmatically using **fx**. |
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
:::info
Any property having an **fx** button next to its field can be **programmatically configured**.
:::
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
<br/>
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
---
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
## Need Help?
[docs]: LTS 3.16 Version
2025-08-04 06:49:49 +00:00
[docs]: App Builder Sprint (#14879) * [docs]: App Builder Sprint * minor formatting * html and reset query * form styles * minor updates * Components UI/UX style enhancements * table img updates
2026-01-21 05:53:40 +00:00
- Reach out via our [Slack Community](https://join.slack.com/t/tooljet/shared_invite/zt-2rk4w42t0-ZV_KJcWU9VL1BBEjnSHLCA)
- Or email us at [support@tooljet.com](mailto:support@tooljet.com)
- Found a bug? Please report it via [GitHub Issues](https://github.com/ToolJet/ToolJet/issues)
Reference in a new issue Copy permalink