Tauri Plugin Widgets

Native widgets for Android, iOS, macOS, Windows, and Linux from one declarative JSON configuration.

Full documentation: https://s00d.github.io/tauri-plugin-widgets

Two CLIs (read this first)

	Using the plugin in your app	Developing this repository
Entry	`npx tauri-widgets` / `pnpm tauri-widgets`	`pnpm -C scripts cli` / `pnpm hosts`
Code	published `dist-cli/` (from `src-cli/`)	`scripts/` (TypeScript + `scripts/sh`)
Examples	`init`, `preview`, `signing`, `doctor`, `validate`, `trace`, `clean`	`hosts up`, `shot`, `test`, `docs-generate`, `triage`

If you are building an app: ignore pnpm test:android:visual and the rest of the root test:* / *-up scripts — those are for plugin maintainers.

Maintainer map: scripts/README.md · Contributing.

Install

pnpm tauri add tauri-plugin-widgets

# src-tauri/Cargo.toml
[dependencies]
tauri-plugin-widgets = "0.5"

pnpm add tauri-plugin-widgets-api

Consumer CLI (app authors)

npx tauri-widgets init                 # detect platforms → init-macos / ios / windows
npx tauri-widgets preview ./widget.json --size medium --watch
npx tauri-widgets signing              # identities + transport verdict
npx tauri-widgets signing --apply      # write plugins.widgets
npx tauri-widgets validate ./widget.json --platforms ios,android
npx tauri-widgets doctor
npx tauri-widgets trace --follow
npx tauri-widgets clean --group group.com.example.app
npx tauri-widgets clean --cache

Preview needs no native build — edits to the JSON reload in the browser.

JSON Schema (IDE autocomplete):

{
  "$schema": "https://s00d.github.io/tauri-plugin-widgets/schemas/widget-config.v1.json"
}

Example

import { setWidgetConfig } from "tauri-plugin-widgets-api";

await setWidgetConfig(
  {
    $schema: "https://s00d.github.io/tauri-plugin-widgets/schemas/widget-config.v1.json",
    small: {
      type: "vstack",
      padding: 12,
      background: "#1a1a2e",
      children: [
        { type: "text", content: "72°", fontSize: 36, fontWeight: "bold", color: "#fff" },
        { type: "progress", value: 0.7, tint: "#4CAF50", label: "Humidity" },
      ],
    },
  },
  "group.com.example.myapp",
  "weather",
);

Platform setup

Platform	Docs
Android	Setup
iOS	Setup
macOS	Setup
Windows	Setup
Linux	Setup
Desktop webview	Setup

Or: npx tauri-widgets init / init-macos / init-ios / init-windows.

Try from zero

Minimal widget JSON + preview (no Tauri app required for layout):

# clone / degit this folder
npx degit s00d/tauri-plugin-widgets/templates/starter my-widget
cd my-widget
npx tauri-widgets preview ./widget.json --watch --open

Full app: use the example or pnpm tauri add then npx tauri-widgets init.

Developing this plugin (maintainers)

pnpm hosts status
pnpm hosts up ios android
pnpm shot weather.small linux
pnpm cli:test -- --platform desktop
pnpm docs:generate

See scripts/README.md.

License

MIT

tauri-plugin-widgets 0.5.0