Siri Shortcut Preview for the Web.

Preview Shortcut renders a fairly accurate Siri Shortcut preview from JSON or property list (PLIST) Shortcut data. It works across frameworks, rendering to a single HTML element.

• Accepts JSON or Property List (.plist) data (will support encrypted in the future).
• Agnostic to any framework, written in vanilla TypeScript.
• Displays Shortcut metadata like the icon and name.
• Dark mode support.

Sites that use it:

• cherrilang.org
• playground.cherrilang.org

Usage

Install

NPM:

npm i preview-shortcut

Yarn:

yarn add preview-shortcut

HTML

<div id="shortcut-preview"></div>

Load a Shortcut

import 'preview-shortcut/css';
import {ShortcutPreview} from 'preview-shortcut';

const preview = new ShortcutPreview({
    selector? : string // default: #shortcut-preview
    name? : string
    url? : string
    data? : object
    header? : boolean // default: true
    meta? : boolean // default: true
    framework7 : Framework7 // defaults to internal instance
});

Dark Mode Support

Work in Progress

• [x] ~~Framework7 needs to be bundled: instead of borrowing only what we need, we need to bundle and purge what we don't use.~~
• [x] ~~Inline variables are not properly handled.~~
• [x] ~~Plans to display more metadata about the Shortcut, like what inputs it accepts, etc.~~
• [ ] Most actions are not defined, meaning raw action data shows up instead, or they do not look exactly like what they look like in the Shortcuts app.
• [ ] Optional components for JS frameworks instead of having to use a DOM selector.

These are growing pains and are planned to be resolved by version 1.0.

Dependencies

Colors

Colors are either picked from the Shortcuts app on Mac, pulled from the official Apple color palette, or from Framework7.

Icons

This package uses Framework7 Icons to achieve somewhat similar icons to what is available on Apple Platforms, as the official icons (SF Symbols) can only be used under license. The glyphs for Shortcut icons are provided by atnbueno/shortcut-icons under the MIT license.

Styling

This package includes CSS from Framework7 to make it look as close to iOS as possible with some custom styling added on top to make sure it also looks as close to the Shortcuts app as possible.