VS Code extension support for building widgets for the Scriptable iOS app.

Features

Adds a Scriptable language mode for .js files.
Highlights Scriptable globals such as ListWidget, WidgetStack, Color, Font, Request, and Script.
Provides snippets for common widget and stack patterns.
Shows completions and hovers for common Scriptable widget APIs.
Runs a local preview runtime for ListWidget scripts and renders the result in a VS Code webview or an external browser window.
Adds diagnostics for syntax errors, preview runtime errors, browser/Node globals that Scriptable does not provide, and missing Script.setWidget(widget) calls.

Usage

Open a .js file and set the language mode to Scriptable if VS Code has not selected it automatically.
Run Scriptable: Preview Widget from the Command Palette for the default VS Code preview pane.
Use Scriptable: Preview Widget in Browser when you want the preview in a browser window instead.
Use Scriptable: Create Sample Widget to create a starter widget in the current workspace.

If you want to turn the preview feature off explicitly, run Scriptable: Disable Preview.

The preview command infers the widget size from calls such as presentLarge() and from checks like config.widgetFamily === "large". You can also force a size with Scriptable: Preview Small Widget, Scriptable: Preview Medium Widget, Scriptable: Preview Large Widget, or Scriptable: Preview Extra Large Widget.

The preview runtime mocks the widget APIs used for layout and styling. It is designed for fast local feedback while editing; the Scriptable app remains the final authority for iOS-specific behaviour.

Type Hints

The extension includes types/scriptable.d.ts. You can reference it from a JavaScript file if you want richer JS IntelliSense:

/// <reference path="./types/scriptable.d.ts" />

Scriptable files use their own language mode, so this declaration file is mainly provided as a reusable reference if you keep scripts in standard JavaScript mode.