HtmlView

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.

HtmlView

Adding HtmlView to your project

To add the HtmlView widget to your project:

1. First, drag the HtmlView widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.

2. Move to the properties panel and scroll down to the HTML View section.

3. Enter your HTML and CSS content inside the HTML Content input field.

Adding HtmlView to your project

Setting HTML content from different sources

Sometimes you might want to display the HTML contents from other sources, such as app 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 app state variable with HTML and CSS contents looks like this:

HTML and CSS content in app state vaiable

To show the HTML contents from the variable:

1. Select the HtmlView widget from the widget tree or the canvas area.

2. Move to the properties panel and scroll down to the HTML Content section.

3. Click on Set from Variable. This will open a new panel.

   1. Set the Source to App State.

   2. Set the Available Options to the name of the app state variable.

   3. Click Confirm.

Setting HTML contents from variable

Changing the properties

The Properties Panel can be used to customize the behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Adjust The Alignment

Here are the instructions on adjusting the alignment.

Show/Hide WebView

Please find the instructions to show/hide the widget here.