Samples
The samples repository shows Picard.js in all kinds of applications: single-page apps, server-side rendering with streaming, static site generators, backends written in other languages, desktop and mobile apps, a browser extension, and unit tests. Every sample has a README explaining what Picard.js does there and exactly where it is integrated.
TIP
Looking for a starting point? Pick the sample closest to your stack, then read the matching integration guide: Single-Page Apps, Server-Side Rendering, Desktop & Mobile Apps, or Testing.
Rendering in the Browser
| Sample | Stack | Where Picard.js is integrated |
|---|---|---|
| Angular SPA | Angular 19 | main.ts next to bootstrapApplication, CUSTOM_ELEMENTS_SCHEMA |
| React SPA | React 19, Vite | main.tsx, JSX typing for pi-component |
| Svelte SPA | Svelte 5, Vite | main.ts, no configuration needed |
| Vue SPA | Vue 3, Vite | main.ts, isCustomElement |
| Rsbuild | Rsbuild 2, Module Federation | a Module Federation host sharing its remotes with Picard.js |
Rendering on the Server
| Sample | Stack | Where Picard.js is integrated |
|---|---|---|
| Angular SSR | Angular 19, Express | server.ts decorates the response of the Angular engine |
| ASP.NET Core | .NET 10 | a middleware calls a decorator service |
| Bun | Bun | Bun.serve routes, incl. Native Federation on the server |
| Deno | Deno 2 | Deno.serve with an npm: import |
| Hotwire Turbo | Express, Turbo 8 | each route decorates its page; Turbo swaps the body |
| htmx | Python, FastAPI | a middleware decorates pages and htmx fragments via a decorator service |
| Next.js | Next.js 16 | async Server Components in Suspense (streaming) |
| Nuxt | Nuxt 4 | a Nitro plugin (render:html, render:response) |
| React Router | React Router 8 | loaders return decorate promises, rendered with Await (streaming) |
| SolidStart | SolidStart 2 | a middleware; a signal bound to data |
| SvelteKit | SvelteKit 3 | transformPageChunk in hooks.server.ts |
| TanStack Start | TanStack Start 1 | server functions called by isomorphic loaders, rendered with Await (streaming) |
Rendering at Build Time
| Sample | Stack | Where Picard.js is integrated |
|---|---|---|
| Astro | Astro 7 | a middleware and a static endpoint for the islands script |
| Hugo | Hugo | a decorator CLI runs after hugo |
| Qwik | Qwik City 1 | a server$ function in a component |
Desktop, Mobile, and Other Environments
| Sample | Stack | Where Picard.js is integrated |
|---|---|---|
| Browser extension | Chromium, Manifest V3 | browser script and micro frontends bundled into the extension |
| Capacitor | Capacitor 8 | picard-js/client with a feed combining bundled and remote micro frontends |
| Electron | Electron 35 | browser script in the renderer |
| React Native | Expo 57 | a WebView on iOS / Android, the DOM on the web |
| Tauri | Tauri 2 | main.ts in the webview |
| Vitest | Vitest 5, jsdom, happy-dom | the page under test starts picard-js/client |
The Demo Micro Frontends
All samples use the picard-demos feed (https://feed.piral.cloud/api/v1/microfrontends/picard-demos). Its micro frontends are framework-less on purpose, and each one uses a different format:
| Micro frontend | Format | Component | Rendering |
|---|---|---|---|
mf-simple-html | Module Federation | column | client only |
nfsimplehtml | Native Federation | column | client only |
pi-simple-html | Pilet | counter | client only |
pi-ssr-html | Pilet | ssr-counter | server and client (hydrated) |
nf-ssr-html | Native Federation | ssr-likes | server and client (hydrated) |
The sources of the two server-renderable micro frontends are part of the samples repository. They're a compact reference for writing a component lifecycle that supports stringify, hydration, and update.
The repository also contains picard-decorator, a small Node.js tool that renders micro frontends into HTML produced by something other than a Node.js server. It runs as an HTTP service or as a build step.
Examples in the Picard.js Repository
The Picard.js repository has more examples, which focus on individual features rather than on frameworks: