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, inputs, details and setup.
- Click action references to jump to that action.
- Dark mode support.

Sites that use it:
- cherrilang.org
- playground.cherrilang.org

Usage

$3

NPM:

``console
npm i preview-shortcut
`

Yarn:

`console
yarn add preview-shortcut
`

$3

`html


`

$3

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

const preview = new ShortcutPreview({
data: {...} // plist data or object
// or...
url: 'https://example.com/example.plist'

header: true,
meta: true
});
``

Learn more on the project wiki.

$3

$3

Clicking on the info circle will pop a modal containing Details and Setup tabs similar to the Shortcuts app.

$3

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.

Dependencies

$3

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

$3

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.

$3

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.