Scriptable TS Boilerplate

A boilerplate for creating remote-updatable Scriptable widgets. Includes setup, components, utils and examples to develop in the comfort of TypeScript.

Try the examples

1. Pick an example widget

These widget examples are included in the boilerplate.

Sticky Widget

Just a simple sticky widget

Simple Analytics

Page views widget

Covid19

Coronavirus stats in a country

Kitchen Sink

Demoing included components

More examples coming soon!
2. Provide its default input

This is not required and can also be filled into the Widget Setting after adding the widget

3. Copy the snippet
4. Paste the snippet
Open the Scriptable App
And paste the snippet in a new Script.
Now it's ready to be added as a widget. Just go in wiggle mode and add it to your homescreen!

A bit of background

Intrigued by the possibilities offered by the Scriptable App to create custom iOS Widgets in Javascript, I wondered whether this would also be useful for prototyping product-services requiring real widget interactions. The other route, publishing a actual native iOS app to TestFlight, just felt way to convoluted.

I decided to set up this boilerplate to create such prototypes in a developer and end-user friendly manner.
  • One time setup, continuous updates: To allow rapid prototyping, only an initial setup is required for the end-user. After this setup any new widget code deployed is downloaded the next time the widget refreshes (inspiration). This is also great for when all is still in flux (e.g. the UX, the API).
  • Minimize code failures: During prototyping enough soft failures will, and should, already happen, it's an experiment. But minimizing the noise of hard/code failures is something to always strive for. Using TypeScript helps with this (I think), ensuring you don't mistakingly put in a Foo where a Bar was expected.
  • Even more rapid local prototyping: Loading the code from a (local) server also helps to make the roundabout between your editor and your phone also a lot faster. No longer you need to wait on iCloud to sync on both sides.
  • Offloading to the server: As Nextjs is included, custom API's are also simple to implement. This can keep the data-wrangling on the server and the actual widget code simple.

Of course, there are also some drawbacks. Regular widgets for instance can be informed by their related app that they should update. For widgets created in Scriptable, this only happens periodically. But besides such minor points there's just a lot you can do with Scriptable!

Try the boilerplate

Visit the Github repo or the official Scriptable Documentation. Follow any updates on Twitter @jasperhartong.