HTML View
The HTML View can render HTML
How to use
Pass an HTML string to the component just like a Text component. You can use just an HTML snippet or a full doc depending on your needs.
Basic Example
<h1>HTML Component</h1>
<p>Edit this HTML on the right</p>
<img src="https://static.draftbit.com/images/placeholder-image.png" style="width:100px"/>
Advanced Example
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<body class="p-4">
<h1 class="text-3xl font-bold text-indigo-600">This is a Heading</h1>
<p>Edit this HTML on the right</p>
<img class="w-24 rounded-xl" src="https://static.draftbit.com/images/placeholder-image.png"/>
</body>
</html>
Style Properties
Style properties allow you to customize the look and feel of the component. Combinations of styles applied to components can be saved as Stylesheets to easily reuse styles throughout your app. Styles can also be set dynamically using Variables. To learn more about all the different styling properties and how they work, take a look at Intro to Styling.
Configuration Properties
Basic
Property | Description |
---|---|
Component name | The name of the component as it appears in the Screen's component tree |
Enable cache | Sets whether browser caching should be used or not |
Use incognito mode | Does not store any data within the lifetime of the WebView. |
Advanced
Property | Description |
---|---|
Enable JavaScript | Boolean value to enable JavaScript. |
Allow new windows | A Boolean value indicating whether JavaScript can open windows without user interaction |
Horizontal scrollbars | Boolean value that determines whether a horizontal scroll indicator is shown or not |
Vertical scrollbars | Boolean value that determines whether a vertical scroll indicator is shown or not |
Media playback requires user interaction | Boolean that determines whether HTML5 audio and video requires the user to tap them before they start playing (Android API minimum version 17). |
Start in loading state | Boolean value that forces showing the loading view on the first load |
Allow file access from file URLs | Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from other file scheme URLs |
Allow universal access from file URLs | Boolean that sets whether JavaScript running in the context of a file scheme URL should be allowed to access content from any origin. Including accessing content from other file scheme URLs |
User agent | Sets the user-agent |
User agent app name | Append to the existing user-agent. Setting userAgent will override this. |
Data Properties
Property | Description |
---|---|
Input Text | The HTML to render |
Conditional Display
You can conditionally display a component based on a given condition. Learn more about conditionally displaying components in the Conditional Display doc.
Updated 5 months ago