Scriptable Widgets

Here are all of the scriptable widgets I have made ordered by oldest to newest:

• Reddit Text Subreddit Widget
• Daily Quote Widget
• Special Days Widget
• Word Of The Day Widget
• Urban Dictionary Word Of The Day Widget
• On This Day In History
• Routinehub Stats Widget
• Random Colour Generator Widget
• Weather Circles
• MDN Web Api Widget
• Can I Use
• Tildes Widget
• Commander Articles
• Pokemon Themes
• Lobsters Widget

And some scripts:

• HTML Widget
• Git Script Download & Update
• RSS Parser
• Widget Progress Circle
• Simple Calendar
• Widget Style Chaining
• HTML Gradient

Then an article:

• Scriptable Desktop Developer Environment

---

Widgets

Reddit Text Subreddit Widget

Reddit Text Subreddit Widget

This small widget is meant to showcase a random text post from your chosen subreddit.

• Easily change background and text colours
• Choose what text to show, such as hiding the footer or author name
• Shows the amount of comments, awards and upvotes

Daily Quote Widget

Daily Quote Widget

This small widget shows a daily quote and the author. The quote is scrapped from https://www.brainyquote.com/quote_of_the_day.

• Easily change text colours and the background colour
• Colours support dark and light mode changing
• Choose to show the author or not

Special Days Widget

Special Days Widget

This small widget shows today's special days. The days are scraped from https://www.daysoftheyear.com/. This widget will display up to 5 special days.

• Easily change text colours and the background colour
• Colours support dark and light mode changing

Word Of The Day Widget

Word Of The Day Widget

This small widget shows today’s word of the day. The word is scraped from https://www.merriam-webster.com/word-of-the-day/.

• Easily change text colours and the background colour
• Colours support dark and light mode changing
• Shows the type of word, pronunciation and syllables, as well as the definition

Urban Dictionary Word Of The Day Widget

Urban Dictionary Word Of The Day Widget

This small widget displays the word of the day from the Urban Dictionary. Because of this, some of the words could have poor definitions or be NSFW.

• Easily change text colours and the background colour
• Colours support dark and light mode changing

On This Day In History

On This Day In History

This small widget displays a random event that happened on this day in history scraped from https://www.onthisday.com/.

• Easily change text colours and the background colour
• Colours support dark and light mode changing

Routinehub Stats Widget

Routinehub Stats Widget

Routinehub Stats Widget Double

Both of these widgets display the stats from a Routinehub account. The Routinehub Stats Widget displays one person's stats in a small or medium widget. The Routinehub Stats Widget Double displays two people's stats on a medium widget.

[!WARNING] This widget is outdated and no longer updated.

• Easily change text colours and background colour/gradient
• Change text sizes and choose to display text instead of the symbols
• Shows the number of shortcuts posted, number of downloads, number of hearts (this might not work for all accounts) and the average downloads per shortcut
• You can set a download goal, and there is a progress bar at the bottom of the widget for it
• The progress bar can change colours when it is fully completed

Random Colour Generator Widget

Random Colour Generator Widget

This widget has two different setups. The first one is a small widget and will only display one colour and the hex of it. The second widget can be any size, displaying multiple colours and their hex values.

• Easily change text and background colours for the multiple-colour setup
• Multiple-colour set up has four colours for small, eight colours for medium, and 16 colours for large

Weather Circles

Weather Circles

[!WARNING]
This script no longer works because of changes in Open Weather Map unless you have an older API key.

This small widget displays your location's weather conditions and weather statistics in circular progress bars. This widget uses https://github.com/Normal-Tangerine8609/Scriptable-HTML-Widget to create the widget and https://openweathermap.org/ to get the weather data (you will need a free API key but it may not work with the latest api keys).

• Easily change text, background, circular progress bar and SF symbol colours
• Colours support dark and light mode changing
• Select the latitude and longitude for your location and choose to use metric or imperial data
• Change minimum and maximum levels of temperature and other types of weather provided to gear the percentages to you
• Easily change the order of circular progress bars and the interior symbols

MDN Web Api Widget

MDN Web Api

This small or medium widget displays a random web API from the MDN list.

• Easily change theme colours and SF symbols
• Colours support dark and light mode changing
• Catch the web API data for reuse if not connected to data

Can I Use

Can I Use

This Lock Screen and Home Screen widget displays the latest browser support data from caniuse.com.

• Easily change theme colours
• Colours support dark and light mode changing
• Choose what stats you want to view using the widget parameters

Tildes Widget

Tildes Widget

This small or medium widget displays recent posts from tildes.net.

• Easily change theme colours and sizing variables
• Catch data to use older posts when running offline
• Choose what posts you want to view using the widget parameters

Commander Articles

Commander Articles

This small or medium widget displays recent articles from EDHREC or Commander's Herald.

• Easily change theme colours
• Choose your preferred website to view articles from
• Highlight articles you follow

Pokemon Themes

Pokemon Themes

This medium widget displays a random pokemon using the PokeAPI and turns the image into a colour theme using Color Thief.

• Caches data to partially work offline
• Tap the widget to open a UI table for copying the colours
• Provides an example for using HTML Widget

Lobsters Widget

Lobsters Widget

This small or medium widget is mosly a copy of my Tildes Widget with a new source: lobste.rs.

• Easily change theme colours and sizing variables
• Catch data to use older posts when running offline
• Choose what posts you want to view using the widget parameters

Scripts

HTML Widget

HTML Widget

This script allows you to create widgets using an HTML-like syntax. Here is an example of the code and widget image for a Reddit widget.

Reveal Code

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,"<").replace(/>/g,">")
let body = post["selftext"].replace(/</g,"<").replace(/>/g,">")
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()

Git Script Download And Update

Git Script Download & Update

This script tracks downloaded scriptable scripts from Git Hub and updates them.

• Small widget and Lock Screen widgets
• Easy to use
• Works from Sharesheet or scriptable

RSS Parser

RSS Parser

This script parses RSS feeds into usable content for widgets.

• Small in size
• Works with all RSS feeds

Widget Progress Circle

Widget Progress Circle

This script is a function that creates a circular progress bar that can have ant widget elements within.

• Can change sizes
• Supports dark and light mode colours
• Can put any element within the circle

Simple Calendar

Simple Calendar

This script is a boilerplate for a simple calendar widget

• Customizable
• Inline documentation to explain processes
• Extendable

Widget Style Chaining

Widget Style Chaining

This script allows you to chain properties for widget-building. For example, previously, you would need to do:

const widget = new ListWidget()

const title = widget.addText("The Title")
title.centerAlignText()
title.font = Font.regularSystemFont(16)
title.minimumScaleFactor = 0.6
title.textColor = Color.blue()

widget.presentSmall()

And now you can type:

const widget = createChainWidget()

widget.addText("The Title")
  .centerAlignText()
  .font(Font.regularSystemFont(16))
  .minimumScaleFactor(0.6)
  .textColor(Color.blue())

widget.presentSmall()

HTML Gradient

HTML Gradient

This script is a function that easily creates a liniar gradient from a string similar to HTML linear gradients:

widget.backgroundGradient = await HTMLGradient(
  "to top right, #8a2387, rgb(233, 64, 87), hsl(23, 89%, 54%)"
);

• Supports word and number directions
• Supports dark and light mode colours
• Supports all HTML-supported colour formats and alpha values
• Allows locations to be set

Scriptable Desktop Developer Environment

• Set up your desktop for developing Scriptable scripts and widgets in your favourite text editor with JavaScript or TypeScript.

Read here!