Scriptable Widgets using JSX-like syntax

This is using htm tagged-template JSX-like syntax in plain JavaScript to create widgets in Scriptable.

Gettings Started:

Basic structure of a widget:

const widget = render`
  <ListWidget> 
    <Text color=${Color.blue()}>Hello World</Text>
  </ListWidget>
`;

// Library code omitted...

Examples

Apple Calendar Widget

Source Code

Showcase

Source Code

Build-in Elementes:

ListWidget

See Scriptable docs for available attributes

Text

See Scriptable docs for available attributes In addition you can use these aliases too:

color => 'textColor'
opacity => 'textOpacity'
center => 'centerAlignText'
left => 'leftAlignText'
right => 'rightAlignText'

Stack

See Scriptable docs for available attributes In addition you can use these aliases too:

vertical => 'layoutVertically'
horizontal => 'layoutHorizontally'

VStack

Convenience element for <Stack vertical />

VStack

Convenience element for <Stack horizontal />

Spacer

See Scriptable docs for available attributes

Image

See Scriptable docs for available attributes In addition you can use these aliases too:

size => 'imageSize'
opacity => 'imageOpacity'
fill  => 'applyFillingContentMode'
fitting  => 'applyFittingContentMode'
center  => 'centerAlignImage'
left  =>'leftAlignImage'
right  => 'rightlignImage'

Symbol

Convenience element for putting an SFSymbol into an image.<Symbol name="[Symbol Name]" /> The attributes bold, black, heavy, light, medium, regular, semibold, thin, ultralight will be mapped to the corresponding apply[name]Weight function. The attribute color will be applied as the tintColor of the image