Scriptable Widget Playground

I made a custom widget with Scriptable a while ago. One of the issues I noticed was that it was hard to write JS from an iPhone, and even if I were to edit the script on a Mac, it would be difficult to preview it while editing it. Setting out to solve this problem in the most complicated way possible, I decided to re-implement many of the relevant Scriptable APIs in browser-based JavaScript, which enables rendering widgets in the browser.

It’s definitely not pixel-perfect and it’s missing a bunch of APIs, but hopefully it will be a little useful!

I’ve included a number of example widgets from the widget examples thread, and they mostly work!


I should probably describe how to use it.

First, change the widget = runWidget(widgets[widgetName]) line to widget = runWidget(myWidget). Then, put your widget code inside of the myWidget function. Make sure to call Script.setWidget(widget) to display the widget. You can pick a widget size from the radio buttons at the top.

Observable is a fairly good platform for development, but if there’s interest in this I think it would make more sense as a dedicated web page that would be less visually overwhelming.

1 Like