HTML Widget

HTML Widget allows you to create Scriptable widgets in HTML-like syntax. HTML Widget is easy to use and supports all widget features.

Documentation

Link

Example

const htmlWidget = importModule("html-widget")
const symbol = importModule("html-widget-symbol")
const addons = {symbol}

let json = await new Request("https://www.reddit.com/r/Showerthoughts.json").loadJSON()
let post = json["data"]["children"][Math.floor((Math.random() * 10) + 2)]["data"]
let title = post["title"].replace(/</g,"&lt;").replace(/>/g,"&gt;")
let body = post["selftext"].replace(/</g,"&lt;").replace(/>/g,"&gt;")
let ups = post["ups"]
let awards = post["all_awardings"].length
let comments = post["num_comments"]
let url = post["url"]

let widget = await htmlWidget(`
<widget refresh-after-date="15" url="${url}">
  <style>
    symbol {
      image-size: 11,11;
    }
    .title {
      font: system-ui, 13;
      align-text: center;
    }
    .content {
      font: system-ui, 11;
      minimum-scale-factor: 0.3;
    }
  </style>
  <text class="title">Showerthoughts</text>
  <spacer space="5"/>
  <text class="content">${title}</text>
  <text class="content">${body}</text>
  <stack align-content="center">
    <symbol>arrow.up.circle.fill</symbol>
    <spacer space="2"/>
    <text class="content">${ups}</text>
    <spacer/>
    <symbol>star.circle.fill</symbol>
    <spacer space="2"/>
    <text class="content">${awards}</text>
    <spacer/>
    <symbol>message.circle.fill</symbol>
    <spacer space="2"/>
    <text class="content">${comments}</text>
  </stack>
</widget>
`, true, addons)

Script.setWidget(widget)
widget.presentSmall()
Script.complete()

Module

If you would prefer to use a module instead of a function follow these steps:

1. Copy the file from the html-widget.js and paste it into a new Scriptable script
2. Rename the script to Scriptable-HTML-Widget
3. Create a new script and paste const htmlWidget = importModule("Scriptable-HTML-Widget") at the top of the file
4. Start to create the widget as you would normally

Bugs and Feedback

If you find any bugs please message me. My preferred mode of communication is Reddit but fell free to post the issues to this respiratory.

u/Normal-Tangerine8609

Support

Thanks for the support of the r/Scriptable community.

Thanks for u/TheLongConIsGone and u/Glassounds for answering some of my scriptable questions.

Thanks for henryluki, the creator of the HTML parser once used in the script.

Thanks for you visiting or trying out HTML Widget!