Since version 14 iOS supports different home screen widgets which can display different useful information for your installed apps.
Wouldn't it be cool if you can create your own widgets to display some custom information? Good news, with the great Scriptable iOS app you can create your own scripts and widgets for iOS using pure javascript.
The widget 📱
Reading some dev.to articles are an integral part of my daily routine, so I thought wouldn't it be cool if I get a random article directly on my home screen.
So I made a little script which fetches a random article out of the top ten articles of the day on dev.to based on the tags I have subscribed to.
After that, the article details like title, author, profile image and tags are displayed in a medium-sized widget. You can see the final widget in the following image.
Get the widget 🚀
If you want the widget on your home screen you will need to download the Scriptable iOS on your device. After that, you can create a new script inside the app and copy and paste the code from the following gist into your created script.
To fetch the dev.to articles you need to generate an API key in your dev.to settings and paste it at the beginning of the created script.
Now you can preview the widget by starting the script inside the Scriptable app.
Finally, you can add the widget to your home screen by adding a medium-sized Scriptable widget, after that you can configure the widget by long-pressing the empty widget and then choose the newly created script in the widget configuration.
I hope you like my widget, feel free to write to me if you encounter any issues or want to suggest some improvements.
Top comments (8)
Have you had much experience with the scriptable app?
No it was the first time I created a widget with Scriptable but the API is very straightforward.
I plan to publish another article in the next few days on how to create iOS widgets with Scriptable if you are interested in that.
In would be very interested! I found the Scriptable app last week but was intimidated to code on the phone. Are you able to develop on a desktop?
The answer is it depends, when you use macOS you can use the Scriptable Mac Beta to code on desktop. Another solution could be the iCloud sync of Scriptable --> edit the script on your desktop inside the iCloud folder and test the automatic synced script on your iPhone (never tested the second solution myself)
Thankfully I develop on a Mac! I will have to try that beta app out, thanks!
It took a while because I had a few stressful weeks but now the article is finally ready.
FYI
Create your own iOS widget with JavaScript
Matthias ・ Jan 26 ・ 6 min read
Thank you so much for sharing! It works great!
Hey Nick,
thanks for the kind reply, I'm glad you like it