The HtmlView widget lets you show the HTML and CSS content inside your app. It's helpful if you want to have special formatting on a text.
To add the HtmlView widget to your project:
- First, drag the HtmlView widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
- Move to the properties panel and scroll down to the HTML View section.
- Enter your HTML and CSS content inside the HTML Content input field.
Adding HtmlView to your project
Sometimes you might want to display the HTML contents from other sources, such as local state variables and API responses. For the simplification purpose, let's see how you can display the HTML and CSS contents from the local variable that looks like the below:
HTML and CSS content
The local state variable with HTML and CSS contents looks like this:
HTML and CSS content in local state vaiable
To show the HTML contents from the variable:
- Select the HtmlView widget from the widget tree or the canvas area.
- Move to the properties panel and scroll down to the HTML Content section.
- Click on Set from Variable. This will open a new panel.
- Set the Source to Local State.
- Set the Available Options to the name of the local state variable.
- Click Confirm.
Setting HTML contents from variable