Horizontal and vertical alignment with Scriptable

Josh Sherman
3 min read
Software Development Apple

While I am a huge fan of widgets on iOS, most apps miss the mark in terms of what they offer via their widgets. Because I’m not one to settle, I have been on a quest to build my own widgets so that I can get exactly what I desire.

Fortunately, I happened upon Scriptable (thanks Geoff!), which makes it extremely easy to write your own iOS widgets with good ol’ JavaScript!

Sadly, the documentation kinda sucks, at least in terms of providing examples. There is a gallery of scripts other folks have written, but it was pretty thin. The content available was more in line with existing scripts that you could leverage, and not clean examples of how to do things.

While writing my own widget, I had to figure out how to get things to align the way I wanted them. Specifically, I wanted to be able to utilize the entire widget area, and have everything space itself out accordingly. Essentially, I wanted things to function like they do when using the flexible box (flexbox) in CSS.

Fortunately, Scriptable provides an addSpacer() method, that you can pass in a length value to. If you omit the length argument, or pass it a null value, the spacer will become flexible, and will consume any left over space.

Armed with this, you can center text or build out a grid system that will span the entirety of the widget!

For demonstration purposes, I put together a script that creates a 9 by 9 grid, that will stretch both horizontally and vertically to full the widget. Each area has text that tells you which part of the widget it is (like a compass):

async function createWidget() {
  const widget = new ListWidget();

  const layoutStack = widget.addStack();

  const topStack = layoutStack.addStack();
  const northWestEl = topStack.addText('NW');
  const northEL = topStack.addText('N');
  const northEastEl = topStack.addText('NE');


  const middleStack = layoutStack.addStack();
  const westEl = middleStack.addText('W');
  const centerEl = middleStack.addText('Center');
  const eastEl = middleStack.addText('E');


  const bottomStack = layoutStack.addStack();
  const southWestEl = bottomStack.addText('SW');
  const southEl = bottomStack.addText('S');
  const southEastEl = bottomStack.addText('SE');

  return widget;

const widget = await createWidget();

if (config.runsInWidget) {
} else {


The resulting widget looks like this (captured from the Scriptable macOS beta app):

Scriptable.app alignment demo

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.

Currently Reading

Parasie Eve

Previous Reads

Buy Me a Coffee Become a Sponsor

Related Articles