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

PropertyDescription
Component nameThe name of the component as it appears in the Screen's component tree
Enable cacheSets whether browser caching should be used or not
Use incognito modeDoes not store any data within the lifetime of the WebView.

Advanced

PropertyDescription
Enable JavaScriptBoolean value to enable JavaScript.
Allow new windowsA Boolean value indicating whether JavaScript can open windows without user interaction
Horizontal scrollbarsBoolean value that determines whether a horizontal scroll indicator is shown or not
Vertical scrollbarsBoolean value that determines whether a vertical scroll indicator is shown or not
Media playback requires user interactionBoolean 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 stateBoolean value that forces showing the loading view on the first load
Allow file access from file URLsBoolean 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 URLsBoolean 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 agentSets the user-agent
User agent app nameAppend to the existing user-agent. Setting userAgent will override this.

Data Properties

PropertyDescription
Input TextThe 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.