You're viewing documentation for Draftbit Classic (v1), our previous platform. See the current Draftbit docs.

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.