Skip to main content

HTML Viewer

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.

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.

Properties​

Property
DescriptionExpected Value
Raw HTMLThe 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>)

Example:

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

Links in the HTML content automatically open in a new tab with target="_blank" and rel="noopener" for security.

Component Specific Actions (CSA)​

The following actions of the component can be controlled using the component-specific actions (CSA):

Action
Description
How To Access
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)

Exposed Variables​

VariableDescriptionHow To Access
rawHTMLThe current HTML content of the component.{{components.html1.rawHTML}}
isLoadingIndicates if the component is in loading state.{{components.html1.isLoading}}
isVisibleIndicates if the component is visible.{{components.html1.isVisible}}
isDisabledIndicates if the component is disabled.{{components.html1.isDisabled}}

Additional Actions​

Action
Description
Configuration Options
Loading stateEnables 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.
VisibilityControls component visibility.Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression.
DisableEnables 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.
TooltipProvides additional information on hover. Set a display string.String

Devices​

Property
Description
Expected Value
Show on desktopMakes 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 mobileMakes 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.

Styles​

Container​

Property
Description
Configuration Options
Box shadowSets the box shadow properties of the component.Select the box shadow color and adjust the related properties or set it programmatically using fx.
info

Any property having an fx button next to its field can be programmatically configured.


Need Help?​