docs(integrations): link package playgrounds

Add a Playgrounds table on the integrations index and tip callouts on
each package page with GitHub links and monorepo `dev` commands so the
existing packages/*/playground apps are easy to find and run.

Co-authored-by: Pavel Kuzmin <Virus191288@gmail.com>

Author: cursoragent

docs/integrations/astro-package.md

@@ -22,6 +22,12 @@ The `@i18n-micro/astro` package provides a lightweight, high-performance interna
 - **DevTools Integration** - Optional development tools via Vite plugin
 - **SEO Optimized** - Automatic meta tags and hreflang generation
 
+::: tip Playground
+Astro SSR app with middleware, islands (Vue/React/Svelte), and DevTools UI:
+
+[`packages/astro/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/astro/playground) — `pnpm -C packages/astro dev`
+:::
+
 ## Installation
 
 Install the package using your preferred package manager:
@@ -3016,6 +3022,7 @@ const { t } = useI18n(Astro)
 
 ## Resources
 
+- **Playground**: [`packages/astro/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/astro/playground)
 - **Repository**: [https://github.com/s00d/nuxt-i18n-micro](https://github.com/s00d/nuxt-i18n-micro)
 - **Documentation**: [https://s00d.github.io/nuxt-i18n-micro/](https://s00d.github.io/nuxt-i18n-micro/)
 

docs/integrations/index.md

@@ -41,6 +41,20 @@ Unlike the full Nuxt module, these packages:
 - **[Types Generator](./types-generator.md)** (`@i18n-micro/types-generator`) - For generating TypeScript types from translation files
 - **[DevTools UI Package](./devtools-ui-package.md)** (`@i18n-micro/devtools-ui`) - Development tools for managing translations
 
+## Playgrounds
+
+Each integration ships a small app under `packages/<name>/playground` so you can see wiring end-to-end (createI18n / provider, router adapter, components, locale switch) without building a project from scratch. Clone the monorepo, `pnpm install`, then run the package’s `dev` script.
+
+| Package | Playground | Run from monorepo root |
+| ------- | ---------- | ---------------------- |
+| Vue | [`packages/vue/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vue/playground) | `pnpm -C packages/vue dev` |
+| React | [`packages/react/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/react/playground) | `pnpm -C packages/react dev` |
+| Preact | [`packages/preact/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/preact/playground) | `pnpm -C packages/preact dev` |
+| Solid | [`packages/solid/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/solid/playground) | `pnpm -C packages/solid dev` |
+| Astro | [`packages/astro/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/astro/playground) | `pnpm -C packages/astro dev` |
+| VitePress | [`packages/vitepress/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vitepress/playground) | `pnpm -C packages/vitepress/playground dev` |
+| Node.js | [`packages/node/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/node/playground) | `pnpm -C packages/node dev` |
+
 ## Core Components
 
 All framework packages include the following essential components:
@@ -275,19 +289,22 @@ All packages provide:
 
 ## Getting Started
 
-1. **Choose your package** - Select the package for your framework
-2. **Install the package** - Use your preferred package manager
-3. **Read the documentation** - Each package has detailed setup instructions
-4. **Implement router adapter** - If you need routing features, implement the adapter
-5. **Start translating** - Use components and methods to add translations
+1. **Skim a playground** - Open the [table above](#playgrounds) for your stack to see a full setup
+2. **Choose your package** - Select the package for your framework
+3. **Install the package** - Use your preferred package manager
+4. **Read the documentation** - Each package has detailed setup instructions
+5. **Implement router adapter** - If you need routing features, implement the adapter
+6. **Start translating** - Use components and methods to add translations
 
 For detailed setup instructions, see the documentation for your specific package:
 
 - [Vue Package Documentation](./vue-package.md)
 - [React Package Documentation](./react-package.md)
+- [Preact Package Documentation](./preact-package.md)
 - [Solid Package Documentation](./solid-package.md)
 - [Astro Package Documentation](./astro-package.md)
 - [VitePress Package Documentation](./vitepress-package.md)
+- [VitePress Package Documentation](./vitepress-package.md)
 
 ## Comparison with Nuxt Module
 

docs/integrations/nodejs-package.md

@@ -8,6 +8,12 @@ outline: 'deep'
 
 Use `@i18n-micro/node` to add i18n translations to any Node.js application, CLI tool, or backend service. This package provides the same translation logic as the Nuxt module, but for pure Node.js environments.
 
+::: tip Playground
+CLI script that loads a locales folder and exercises `t` / `tc` / routes / reload:
+
+[`packages/node/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/node/playground) — `pnpm -C packages/node dev`
+:::
+
 ## 📦 Installation
 
 ```bash
@@ -540,6 +546,7 @@ export default defineEventHandler(async (event) => {
 
 ## 📚 Related Documentation
 
+- **[Playground](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/node/playground)** - Runnable Node demo in the monorepo
 - **[Folder Structure](../guide/folder-structure.md)** - Learn about translation file organization
 - **[Server Side Translations](../guide/server-side-translations.md)** - Nuxt server-side usage
 - **[API Reference](../api/methods.md)** - Complete method documentation

docs/integrations/preact-package.md

@@ -24,6 +24,12 @@ The `@i18n-micro/preact` package provides a lightweight, high-performance intern
 
 **Note:** The built-in router adapter (`createPreactRouterAdapter` / `createBrowserHistoryAdapter`) uses the native History API and works with any router that listens to `popstate` events (e.g., `wouter-preact`, `preact-router`). For custom routing needs, you can create your own adapter.
 
+::: tip Playground
+Pure Preact demo with history adapter, pages, and components:
+
+[`packages/preact/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/preact/playground) — `pnpm -C packages/preact dev`
+:::
+
 ## Installation
 
 Install the package using your preferred package manager:
@@ -1948,6 +1954,7 @@ export function Home() {
 
 ## Resources
 
+- **Playground**: [`packages/preact/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/preact/playground)
 - **Repository**: [https://github.com/s00d/nuxt-i18n-micro](https://github.com/s00d/nuxt-i18n-micro)
 - **Documentation**: [https://s00d.github.io/nuxt-i18n-micro/](https://s00d.github.io/nuxt-i18n-micro/)
 

docs/integrations/react-package.md

@@ -21,6 +21,12 @@ The `@i18n-micro/react` package provides a lightweight, high-performance interna
 - **Router-agnostic** - Works with any router or without a router
 - **DevTools Integration** - Vite plugin for managing translations during development
 
+::: tip Playground
+Mini React app with React Router, provider setup, pages, and locale switcher:
+
+[`packages/react/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/react/playground) — `pnpm -C packages/react dev`
+:::
+
 ## Installation
 
 Install the package using your preferred package manager:
@@ -1931,6 +1937,7 @@ See the "Full Application Setup" example above for a complete router integration
 
 ## Resources
 
+- **Playground**: [`packages/react/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/react/playground)
 - **Repository**: [https://github.com/s00d/nuxt-i18n-micro](https://github.com/s00d/nuxt-i18n-micro)
 - **Documentation**: [https://s00d.github.io/nuxt-i18n-micro/](https://s00d.github.io/nuxt-i18n-micro/)
 

docs/integrations/solid-package.md

@@ -21,6 +21,12 @@ The `@i18n-micro/solid` package provides a lightweight, high-performance interna
 - **Router-agnostic** - Works with any router or without a router via `I18nRoutingStrategy` interface
 - **DevTools Integration** - Built-in DevTools support for managing translations
 
+::: tip Playground
+SolidJS demo with router adapter, pages, and `I18n*` components:
+
+[`packages/solid/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/solid/playground) — `pnpm -C packages/solid dev`
+:::
+
 ## Installation
 
 Install the package using your preferred package manager:
@@ -1337,7 +1343,7 @@ i18n.t('greeting', { invalid: 'value' }) // ⚠️ Type error
 
 ### Complete SPA Example
 
-See the playground implementation in `packages/solid/playground/src/` for a complete working example.
+See the [Solid playground](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/solid/playground) for a complete working example.
 
 ### Router Integration Example
 
@@ -1455,6 +1461,7 @@ const LocaleHandler: Component<{ params: { locale?: string }; children?: unknown
 
 ## Resources
 
+- **Playground**: [`packages/solid/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/solid/playground)
 - **Repository**: [https://github.com/s00d/nuxt-i18n-micro](https://github.com/s00d/nuxt-i18n-micro)
 - **Documentation**: [https://s00d.github.io/nuxt-i18n-micro/](https://s00d.github.io/nuxt-i18n-micro/)
 

docs/integrations/vitepress-package.md

@@ -23,6 +23,12 @@ VitePress i18n is three separate problems. This package only solves **runtime UI
 @i18n-micro/vitepress ≠ markdown copier
 ```
 
+::: tip Playground
+Tiny VitePress site with `withI18nMicro`, theme `$t`, and FR locale pages:
+
+[`packages/vitepress/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vitepress/playground) — `pnpm -C packages/vitepress/playground dev`
+:::
+
 ### Compose with other helpers
 
 `withI18n` is already used by [`vitepress-i18n`](https://www.npmjs.com/package/vitepress-i18n). Our helper is intentionally named **`withI18nMicro`**:
@@ -245,6 +251,11 @@ Putting `<I18nSwitcher>` in `nav-bar-content-*` duplicates the control. Prefer p
 | `I18nT` / `I18nLink` / `I18nGroup` / `I18nSwitcher` / `useI18n` | Re-exported from `@i18n-micro/vue` |
 | `/node` → `loadMessages` / `loadTranslationBuckets` | Node FS loaders (scripts; prefer `/config` for site config) |
 
+## Resources
+
+- **Playground**: [`packages/vitepress/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vitepress/playground)
+- **Repository**: [https://github.com/s00d/nuxt-i18n-micro](https://github.com/s00d/nuxt-i18n-micro)
+
 ## License
 
 MIT

docs/integrations/vue-package.md

@@ -21,6 +21,12 @@ The `@i18n-micro/vue` package provides a lightweight, high-performance internati
 - **Router-agnostic** - Works with any router or without a router
 - **DevTools Integration** - Built-in Vue DevTools support for managing translations
 
+::: tip Playground
+Runnable SPA (+ optional SSR) with Vue Router, `I18nLink` / `I18nSwitcher`, and page dictionaries:
+
+[`packages/vue/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vue/playground) — `pnpm -C packages/vue dev`
+:::
+
 ## Installation
 
 Install the package using your preferred package manager:
@@ -1328,7 +1334,7 @@ i18n.t('greeting', { invalid: 'value' }) // ⚠️ Type error
 
 ### Complete SPA Example
 
-See the playground implementation in `packages/vue/playground/src/` for a complete working example.
+See the [Vue playground](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vue/playground) for a complete working example (`src/` pages, router adapter, SSR entry).
 
 ### Router Integration Example
 
@@ -1432,6 +1438,7 @@ watch(
 
 ## Resources
 
+- **Playground**: [`packages/vue/playground`](https://github.com/s00d/nuxt-i18n-micro/tree/main/packages/vue/playground)
 - **Repository**: [https://github.com/s00d/nuxt-i18n-micro](https://github.com/s00d/nuxt-i18n-micro)
 - **Documentation**: [https://s00d.github.io/nuxt-i18n-micro/](https://s00d.github.io/nuxt-i18n-micro/)