HTML View

The HTML View can render HTML

How to use

You can 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>

Configuration Properties

Basic


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


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

Updated 2 months ago