Phials developer documentation
User guide
AI Notice: Most documentation right now was auto-generated by an LLM. Handwritten documentation will be implemented over time on the road to 1.0

Svelte & Phoundry UI

The recommended stack for building Phials plugins is Svelte 5 with Phoundry UI.

Why Svelte 5

Plugin UI surfaces — previews, views, modules, fullscreen providers — accept Svelte components directly: the provider types in the SDK use import("svelte").Component and import("svelte").Snippet. Building with Svelte 5 means your components mount natively in the app, and component <style> blocks are scoped by default so your styles can’t leak into the rest of the app (see Scoped styles).

The phials-plugin-example repository is already set up as a Vite + Svelte 5 + TypeScript project — start there.

Why Phoundry UI

Phoundry UI (phoundry-ui on npm) is the Svelte component library Phials itself is built with. Using its components in your plugin gets you:

  • Native look and feel — buttons, menus, empty states, and form controls match the app chrome out of the box.
  • Automatic theming — components are driven by the same CSS theme variables as the rest of the app, so your plugin follows the user’s active theme with no extra work.
  • Shared types — parts of the SDK build on Phoundry UI shapes: ThemeProvider extends its ThemeDefinition, and Command.toastData uses its ToastEntry.

Browse the component list and usage guides in the Phoundry UI documentation.

Practical notes

  • Pin a compatible phoundry-ui version in your plugin project. Component and type shapes follow Phoundry UI releases, so pinning keeps your build reproducible (see Themes).
  • Prefer Svelte component <style> over global CSS. Global rules in styles.css affect the whole app — keep them minimal and documented (public API contract).