For making nicer looking Shortcuts
Clone or download
Latest commit 9e640e8 Jan 16, 2019



For making nicer looking Shortcuts

Special thanks to /u/matthewr_1987 for using OutputKit in his Powr Shortcut, and all the promotion/support, and to /u/ROPit for sorting out my logo

OutputKit Showcase

Shortcuts that use OutputKit

  • PowR - A shortcut to add text, audio, image, video and more content to your reminders! by /u/matthewr_1987
  • EXIF Details - Displays EXIF data for a photo sent from a share sheet, or if no photo is sent will use the photo selected.
  • Short Weather - Weather Shortcut by /u/Jpasholk
  • Tatort - for Tatort fans, a traditional german crime tv show from public television /u/marco79cgn
  • Trello Status - For visualising the status of all your Trello boards
  • News Search - Will search several news sources for any articles matching the keyword.
  • Rain - Check the probability of rain for the day

OutputKit Getting Started

OutputKit is a bit of JSON (a dictionary in the form of text) that contains the markup for Bootstrap componnents, you put into a variable at the start of your Shortcut. You can then refer to the different elements with the tags listed below. It's best to look at the OutputKit Examples Shortcut to get an idea of how it works, then to start with the OutputKit Template to start making your own. Once you have a better idea, you can create you're own html templates, or update to the latest set of tags using the OutputKit Build Shortcut.

How to set tags

Shown here is choosing the variable you've assigned the OutputKit json to, and entering the corresponding key/OutputKit tag.


Menu Lists

These are for creating lists containing pictures which can then be used like a menu to make a selection. It's important that they all remain on the same line (although it will of course wrap on the screen) with no carraige returns between them. All tags must be used, ie even if not using the Subtitle. You might notice that another dictionary item is used Media. It's sometimes a good idea to have a dictionary at the beginning of your Shortcut contatining a dictionary with any media items like an image, or sounds at the beginning of your Shortcut.

  • ml mlsub mlimage(required even if not using. /ml.



  • bar /bar Bars are simple percentage lines. The first number you put is the text displayed, the second one inside the tags is the number used to work out what is shown.



A Jumbotron is a big banner usually used at the top of your page.

  • jumbotron /jumbotron



A sticky header at the top of the page.

  • topbar /topbar




Groups of list items should be enclosed in a listgroup tag.

  • listitem /listitem
  • listgroup /listgroup



  • card /card
  • cardbody /cardbody
  • cardtext /cardtext
  • cardheader /cardheader
  • card link?

Different color cards are all closed by /card

  • cardred /card
  • cardblue /card
  • cardyellow /card
  • cardblack /card
<cardheader>Card Title</cardheader>



Three tags are needed for links




  • badgeblue /badge
  • badgegray /badge
  • badgegreen /badge
  • badgered /badge
  • badgeyellow /badge
  • badgelight /badge
  • badgeblack /badge



  • button /button
  • buttonblue /button
  • buttondark /button
  • buttongreen /button
  • buttonyellow /button
  • buttonred /button
  • buttonblack /button

Example of a button with a badge inside.



<buttonblue>Unread Mail <badgegray>4</badge></button>


The table tag will make your table responsive, ie works better on mobile screens of variable sizes. You wont need the normal table html tag, you can use the thead tbody th tr html mark up to make your table, or you can use Markdown to generate your table first. If you're just making a static table you might find this site useful.

  • table /table


  • Images imgb64 /imgb64
  • Video vidb64 /vidb6
  • Audio audb64 /audb64



Example of how to show an icon using Material Design


Example of how to show an icon using Font Awesome



These are used mostly by the template builder, and you dont need to know them, unless you've rolled your sleeves up to get a look under the hood.

  • viewport - sets up the page
  • bootstrapminimal - for including the bootstrap files
  • webapp - for when creating a page with no address bar, eg like a home screen launcher
  • topbarspace - adds space needed for a navbar
  • fa:icon - The includes for Font Awesome icons
  • md:icon - The includes for Material Design
  • disableselection - Disables selection of text in the web page
  • disablezoom - Disables zooming of web page

Logo by Rop

Made with OutputKit