diff --git a/docs/app/app.config.ts b/docs/app/app.config.ts
index 12f0146ef..cac01f465 100644
--- a/docs/app/app.config.ts
+++ b/docs/app/app.config.ts
@@ -21,6 +21,7 @@ export default defineAppConfig({
         sections: ['adapters', 'frameworks'],
       },
       { label: 'Add-ons', sections: ['add-ons'], link: 'section' as const },
+      { label: 'Ecosystem', sections: ['ecosystem'], link: 'section' as const },
       { label: 'Reference', sections: ['references'], link: 'section' as const },
       { label: 'Errors', sections: ['errors'], link: 'section' as const },
       { label: 'Blog', sections: ['posts'], link: 'section' as const },
@@ -143,10 +144,6 @@ export default defineAppConfig({
             '/guide/build-your-own-hub-ui',
           ],
         },
-        {
-          title: 'Ecosystem',
-          items: ['/guide/built-with'],
-        },
       ],
     },
     ogImage: {
diff --git a/docs/app/components/global/EcosystemCta.vue b/docs/app/components/global/EcosystemCta.vue
new file mode 100644
index 000000000..bf9e022b7
--- /dev/null
+++ b/docs/app/components/global/EcosystemCta.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="not-prose mt-14 flex flex-col gap-4 rounded-lg border border-default bg-muted p-6 md:flex-row md:items-center md:justify-between">
+    <div>
+      <p
+        v-if="$slots.title"
+        class="text-base font-semibold text-highlighted"
+      >
+        <slot name="title" unwrap="p" />
+      </p>
+      <p
+        v-if="$slots.description"
+        class="mt-1 text-sm text-muted"
+      >
+        <slot name="description" unwrap="p" />
+      </p>
+    </div>
+
+    <div
+      v-if="$slots.ctas"
+      class="flex shrink-0 items-center gap-3"
+    >
+      <slot name="ctas" />
+    </div>
+  </div>
+</template>
diff --git a/docs/app/components/global/EcosystemList.vue b/docs/app/components/global/EcosystemList.vue
new file mode 100644
index 000000000..bff254a15
--- /dev/null
+++ b/docs/app/components/global/EcosystemList.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
+
+type Category = 'All' | 'Devframes' | 'Hosts' | 'Services'
+
+interface EcosystemPackage {
+  name: string
+  description: string
+  /** GitHub login: powers the avatar. */
+  author: string
+  category: Exclude<Category, 'All'>
+  /** `owner/name`: the row link when `url` is absent. */
+  repo?: string
+  /** Docs path or external page; wins over `repo`. */
+  url?: string
+  official?: boolean
+  icon?: string
+  /** Upstream logo under `public/`; wins over `icon`. */
+  image?: string
+  /** Tints the icon and its hover glow. Omitted entries get a neutral tile. */
+  color?: string
+}
+
+const props = defineProps<{ packages: EcosystemPackage[] }>()
+
+const categories: Category[] = ['All', 'Devframes', 'Hosts', 'Services']
+
+const route = useRoute()
+const router = useRouter()
+
+const query = ref('')
+const officialOnly = ref(false)
+const category = ref<Category>('All')
+
+// Content is ISR-cached, so the query string cannot drive the first render.
+onMounted(() => {
+  const q = route.query.q
+  if (typeof q === 'string')
+    query.value = q
+  if (route.query.official === '1')
+    officialOnly.value = true
+  const cat = route.query.category
+  if (typeof cat === 'string') {
+    const match = categories.find(c => c.toLowerCase() === cat)
+    if (match)
+      category.value = match
+  }
+})
+
+const debouncedQuery = refDebounced(query, 200)
+
+watch([debouncedQuery, officialOnly, category], ([q, official, cat]) => {
+  const next = { ...route.query }
+  if (q)
+    next.q = q
+  else delete next.q
+  if (official)
+    next.official = '1'
+  else delete next.official
+  if (cat !== 'All')
+    next.category = cat.toLowerCase()
+  else delete next.category
+  router.replace({ query: next })
+})
+
+const searchPool = computed(() => {
+  const q = debouncedQuery.value.trim().toLowerCase()
+  return props.packages.filter((pkg) => {
+    if (officialOnly.value && !pkg.official)
+      return false
+    if (!q)
+      return true
+    return (
+      pkg.name.toLowerCase().includes(q)
+      || pkg.description.toLowerCase().includes(q)
+      || pkg.author.toLowerCase().includes(q)
+    )
+  })
+})
+
+const counts = computed(() => {
+  const map = new Map<Category, number>([['All', searchPool.value.length]])
+  for (const cat of categories.slice(1))
+    map.set(cat, searchPool.value.filter(pkg => pkg.category === cat).length)
+  return map
+})
+
+const visible = computed(() => {
+  const pool = category.value === 'All'
+    ? searchPool.value
+    : searchPool.value.filter(pkg => pkg.category === category.value)
+  // Community entries first: the official ones already have their own docs pages.
+  return [...pool].sort((a, b) => {
+    if (!!a.official !== !!b.official)
+      return a.official ? 1 : -1
+    return a.name.localeCompare(b.name)
+  })
+})
+
+function href(pkg: EcosystemPackage) {
+  return pkg.url ?? (pkg.repo ? `https://github.com/${pkg.repo}` : undefined)
+}
+
+function isExternal(pkg: EcosystemPackage) {
+  return !href(pkg)?.startsWith('/')
+}
+
+function monogram(name: string) {
+  const cleaned = name.replace(/^@[^/]+\//, '').replace(/^(?:plugin|service)-/, '')
+  return (cleaned || name).slice(0, 2).toUpperCase()
+}
+</script>
+
+<template>
+  <div class="not-prose">
+    <div class="flex gap-3">
+      <UInput
+        v-model="query"
+        icon="i-lucide-search"
+        size="lg"
+        placeholder="Search packages"
+        class="flex-1"
+        :ui="{ base: 'rounded-lg' }"
+      />
+      <button
+        type="button"
+        role="switch"
+        :aria-checked="officialOnly"
+        class="flex shrink-0 items-center gap-2 rounded-lg border border-default px-3 text-sm font-medium text-toned transition-colors hover:text-highlighted"
+        @click="officialOnly = !officialOnly"
+      >
+        <span
+          class="flex size-3.5 items-center justify-center rounded-xs border border-default transition-colors"
+          :class="officialOnly ? 'border-inverted bg-inverted' : 'bg-default'"
+        >
+          <UIcon
+            v-if="officialOnly"
+            name="i-lucide-check"
+            class="size-2.5 text-inverted"
+          />
+        </span>
+        Official only
+      </button>
+    </div>
+
+    <div class="mt-4 flex flex-wrap gap-2">
+      <button
+        v-for="cat in categories"
+        :key="cat"
+        type="button"
+        :aria-pressed="category === cat"
+        class="flex h-8 items-center gap-1.5 rounded-full px-3 text-sm font-medium transition-colors"
+        :class="category === cat ? 'bg-inverted text-inverted' : 'border border-default text-toned hover:border-accented'"
+        @click="category = cat"
+      >
+        {{ cat }}
+        <span
+          class="font-mono text-xs tabular-nums"
+          :class="category === cat ? 'text-inverted/60' : 'text-dimmed'"
+        >
+          {{ counts.get(cat) }}
+        </span>
+      </button>
+    </div>
+
+    <UCard
+      variant="outline"
+      class="mt-6"
+      :ui="{ body: 'p-0 sm:p-0 divide-y divide-default' }"
+    >
+      <NuxtLink
+        v-for="pkg in visible"
+        :key="pkg.name"
+        :to="href(pkg)"
+        :target="isExternal(pkg) ? '_blank' : undefined"
+        :class="pkg.color ? 'eco-row' : 'hover:bg-muted'"
+        :style="pkg.color ? { '--eco-color': pkg.color } : undefined"
+        class="grid grid-cols-[2.25rem_minmax(0,1fr)_auto] items-center gap-x-4 px-4 py-3.5 transition-colors md:grid-cols-[2.25rem_minmax(0,1fr)_6rem_1.25rem]"
+      >
+        <div
+          class="eco-tile flex size-9 shrink-0 items-center justify-center rounded-lg border border-default bg-muted"
+          :style="pkg.color ? { color: pkg.color } : undefined"
+        >
+          <img
+            v-if="pkg.image"
+            :src="pkg.image"
+            alt=""
+            width="20"
+            height="20"
+            class="size-5"
+          >
+          <UIcon
+            v-else-if="pkg.icon"
+            :name="pkg.icon"
+            class="size-5"
+            :class="!pkg.color && 'text-toned'"
+          />
+          <span
+            v-else
+            class="font-mono text-xs font-medium"
+            :class="!pkg.color && 'text-toned'"
+          >{{ monogram(pkg.name) }}</span>
+        </div>
+
+        <div class="min-w-0">
+          <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5">
+            <span class="text-sm font-medium text-highlighted">{{ pkg.name }}</span>
+            <span
+              v-if="pkg.official"
+              class="rounded-xs bg-primary-50 px-1.5 py-px text-xs font-medium text-primary-700 dark:bg-primary-900/15 dark:text-primary-400"
+            >
+              Official
+            </span>
+            <span class="inline-flex min-w-0 items-center gap-1.5 text-xs text-muted">
+              <img
+                :src="`https://github.com/${pkg.author}.png?size=64`"
+                :alt="pkg.author"
+                width="16"
+                height="16"
+                loading="lazy"
+                class="size-4 shrink-0 rounded-full"
+              >
+              <span class="truncate">{{ pkg.author }}</span>
+            </span>
+          </div>
+          <p class="mt-0.5 truncate text-sm text-muted">
+            {{ pkg.description }}
+          </p>
+        </div>
+
+        <span class="justify-self-end rounded-md border border-default px-2 py-0.5 font-mono text-xs text-muted">
+          {{ pkg.category }}
+        </span>
+
+        <UIcon
+          :name="isExternal(pkg) ? 'i-lucide-arrow-up-right' : 'i-lucide-arrow-right'"
+          class="hidden size-4 text-dimmed md:block"
+        />
+      </NuxtLink>
+
+      <p
+        v-if="!visible.length"
+        class="py-10 text-center text-sm text-muted"
+      >
+        No packages match.
+      </p>
+    </UCard>
+  </div>
+</template>
+
+<style scoped>
+.eco-tile {
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.eco-row:hover {
+  background-color: color-mix(in oklab, var(--eco-color) 6%, transparent);
+}
+
+.eco-row:hover .eco-tile {
+  border-color: color-mix(in oklab, var(--eco-color) 45%, var(--ui-border));
+  box-shadow:
+    0 0 0 3px color-mix(in oklab, var(--eco-color) 10%, transparent),
+    0 6px 16px -8px color-mix(in oklab, var(--eco-color) 35%, transparent);
+}
+</style>
diff --git a/docs/app/components/global/EcosystemShowcase.vue b/docs/app/components/global/EcosystemShowcase.vue
new file mode 100644
index 000000000..e53effc59
--- /dev/null
+++ b/docs/app/components/global/EcosystemShowcase.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+interface EcosystemSite {
+  name: string
+  description: string
+  /** GitHub login: powers the avatar. */
+  author: string
+  url: string
+  /** 16:9 image under `public/`. */
+  screenshot: string
+}
+
+defineProps<{
+  sites: EcosystemSite[]
+  /** Where the "Your project" card sends contributors. */
+  addUrl: string
+}>()
+
+const cardUi = {
+  root: 'overflow-hidden',
+  container: 'p-0 sm:p-0 gap-0',
+  wrapper: 'items-stretch',
+  header: 'mb-0',
+  body: 'p-4',
+  title: 'text-sm font-medium',
+  description: 'mt-1 text-sm leading-relaxed',
+  footer: 'mt-auto px-4 pb-4 pt-0',
+}
+</script>
+
+<template>
+  <div class="not-prose mt-14">
+    <div
+      v-if="$slots.title || $slots.description"
+      class="flex items-baseline justify-between gap-4"
+    >
+      <h2
+        v-if="$slots.title"
+        class="text-2xl font-semibold tracking-tight text-highlighted"
+      >
+        <slot name="title" unwrap="p" />
+      </h2>
+      <span
+        v-if="$slots.description"
+        class="text-sm text-muted"
+      >
+        <slot name="description" unwrap="p" />
+      </span>
+    </div>
+
+    <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <UPageCard
+        v-for="site in sites"
+        :key="site.name"
+        :to="site.url"
+        target="_blank"
+        :title="site.name"
+        :description="site.description"
+        :ui="cardUi"
+      >
+        <template #header>
+          <img
+            :src="site.screenshot"
+            :alt="`${site.name} screenshot`"
+            width="960"
+            height="540"
+            loading="lazy"
+            class="aspect-video w-full object-cover object-top"
+          >
+        </template>
+
+        <template #footer>
+          <div class="flex items-center gap-1.5 text-xs text-muted">
+            <img
+              :src="`https://github.com/${site.author}.png?size=64`"
+              :alt="site.author"
+              width="16"
+              height="16"
+              loading="lazy"
+              class="size-4 rounded-full"
+            >
+            {{ site.author }}
+          </div>
+        </template>
+      </UPageCard>
+
+      <UPageCard
+        :to="addUrl"
+        target="_blank"
+        title="Your project"
+        description="Shipping something on Devframe? Add a card and it shows up here."
+        :ui="{ ...cardUi, root: 'overflow-hidden border-dashed' }"
+      >
+        <template #header>
+          <div class="flex aspect-video w-full items-center justify-center bg-muted">
+            <UIcon
+              name="i-lucide-plus"
+              class="size-8 text-dimmed"
+            />
+          </div>
+        </template>
+      </UPageCard>
+    </div>
+  </div>
+</template>
diff --git a/docs/content/1.guide/23.built-with.md b/docs/content/1.guide/23.built-with.md
deleted file mode 100644
index 5bff2ccc5..000000000
--- a/docs/content/1.guide/23.built-with.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: 'Built with Devframe'
-navigation:
-  icon: i-lucide-blocks
-description: 'Real-world devtools and hub UI providers built on devframe, from Vite DevTools to ESLint Config Inspector.'
----
-
-## Real-world DevTools
-
-- [**Vite DevTools**](https://devtools.vite.dev/) bundles many devframes into one UI. Mount your own via the [`vite` adapter](/adapters/vite).
-- [**Nuxt DevTools**](https://devtools.nuxt.com/) bundles many devframes into a Nuxt-specific UI. Mount your own via the [`nuxt` framework kit](/frameworks/nuxt).
-- [**ESLint Config Inspector**](https://github.com/eslint/config-inspector) inspects flat configs.
-- [**node-modules-inspector**](https://github.com/antfu/node-modules-inspector) visualizes your `node_modules` dependency graph.
-- [**medula**](https://github.com/posva/medula) lets AI agents inspect and mutate a running app's live state over MCP.
-- [**Pinia Colada devtools**](https://github.com/posva/pinia-colada/tree/main/devtools) inspects Pinia Colada queries and mutations.
-- [**UnoCSS Inspector**](https://github.com/unocss/unocss/tree/main/packages-integrations/inspector) inspects generated utility classes and matched rules.
-
-## Built-in Devframes
-
-The [built-in devframes](/add-ons) are real tools built on Devframe, each in a different UI framework:
-
-| Devframe | UI framework | What it does |
-|--------|--------------|--------------|
-| [Data Inspector](/add-ons/devframes/data-inspector) | Vue | Query live server-side objects with jora. |
-| [Devframe Inspector](/add-ons/devframes/inspect) | Vue | Browse RPC, shared state, and the agent-consumable API. |
-| [Open Graph Viewer](/add-ons/devframes/og) | Vue | Inspect Open Graph / Twitter metadata and card previews. |
-| [Accessibility Inspector](/add-ons/devframes/a11y) | Solid | Run axe-core; list WCAG violations. |
-| [Git](/add-ons/devframes/git) | React (Next.js) | Repository dashboard: status, graph, branches, diffs. |
-| [Terminals](/add-ons/devframes/terminals) | Svelte | Stream output and run interactive PTY shells. |
-| [Code Server](/add-ons/devframes/code-server) | Vue | Run VS Code in the browser. |
-| [Assets](/add-ons/devframes/assets) | Vue | Browse, preview, upload, rename, and delete files. |
-
-## Playable Examples
-
-Runnable examples in the [repository](https://github.com/devframes/devframe/tree/main/examples), each a single node-side definition behind a different UI. Run one with:
-
-```sh
-pnpm install
-pnpm --filter <example-name> dev
-```
-
-| Example | UI | Shows |
-|---------|----|-------|
-| [files-inspector](https://github.com/devframes/devframe/tree/main/examples/files-inspector) | Preact | Lists cwd files over RPC. |
-| [json-render](https://github.com/devframes/devframe/tree/main/examples/json-render) | Vue | Server-authored view via `@devframes/json-render-ui`; live state + action bridge. |
-| [streaming-chat](https://github.com/devframes/devframe/tree/main/examples/streaming-chat) | Preact | Streams tokens; history in shared state. |
-| [next-runtime-snapshot](https://github.com/devframes/devframe/tree/main/examples/next-runtime-snapshot) | React (Next.js) | App Router SPA surfacing the Node runtime. |
-| [custom-hub-vite](https://github.com/devframes/devframe/tree/main/examples/custom-hub-vite) | Vanilla TS (Vite) | ~120-line Vite host wiring `@devframes/hub`; hand-built hub UI provider. |
-| [custom-hub-next](https://github.com/devframes/devframe/tree/main/examples/custom-hub-next) | React (Next.js) | Same protocol, Next.js route. |
-
-The **minimal** family mounts `initHub({ ui: createUi() })` with `@devframes/hub-ui`:
-
-| Example | Host framework | Shows |
-|---------|------|-------|
-| [hub-vite](https://github.com/devframes/devframe/tree/main/examples/hub-vite) | Vite | Dev middleware. |
-| [hub-next](https://github.com/devframes/devframe/tree/main/examples/hub-next) | Next.js | App Router route. |
-| [hub-nitro](https://github.com/devframes/devframe/tree/main/examples/hub-nitro) | Nitro | Catch-all route. |
-| [hub-hono](https://github.com/devframes/devframe/tree/main/examples/hub-hono) | Hono | Node and Bun. |
-| [hub-fastify](https://github.com/devframes/devframe/tree/main/examples/hub-fastify) | Fastify | `nodeMiddleware`. |
-| [hub-sveltekit](https://github.com/devframes/devframe/tree/main/examples/hub-sveltekit) | SvelteKit | Catch-all endpoint. |
-| [hub-deno](https://github.com/devframes/devframe/tree/main/examples/hub-deno) | Deno | `Deno.serve` + upgrade socket. |
-| [hub-rsbuild](https://github.com/devframes/devframe/tree/main/examples/hub-rsbuild) | Rsbuild | Dev middleware. |
diff --git a/docs/content/1.guide/index.md b/docs/content/1.guide/index.md
index bd813cf27..5ceb64940 100644
--- a/docs/content/1.guide/index.md
+++ b/docs/content/1.guide/index.md
@@ -106,7 +106,7 @@ The mounted devframes share one RPC registry, state store, connection, auth gate
 
 ## Inheriting the ecosystem
 
-[Vite DevTools](https://devtools.vite.dev/) is the first flagship hub UI provider, using `initHub()` alongside its own Vite, Rolldown, Vitest, and Oxc tooling. The [framework kits](/frameworks) ([`@devframes/vite`](/frameworks/vite), [`@devframes/nuxt`](/frameworks/nuxt), [`@devframes/next`](/frameworks/next)) add conventions over the same handler. See [Built with Devframe](/guide/built-with).
+[Vite DevTools](https://devtools.vite.dev/) is the first flagship hub UI provider, using `initHub()` alongside its own Vite, Rolldown, Vitest, and Oxc tooling. The [framework kits](/frameworks) ([`@devframes/vite`](/frameworks/vite), [`@devframes/nuxt`](/frameworks/nuxt), [`@devframes/next`](/frameworks/next)) add conventions over the same handler. See the [Ecosystem](/ecosystem) page.
 
 ## Install
 
diff --git a/docs/content/4.ecosystem.md b/docs/content/4.ecosystem.md
new file mode 100644
index 000000000..8d2d5856b
--- /dev/null
+++ b/docs/content/4.ecosystem.md
@@ -0,0 +1,227 @@
+---
+title: Ecosystem
+description: Devtools, hosts and services built on Devframe by the community and the core team.
+navigation:
+  layout: page
+  icon: i-lucide-blocks
+seo:
+  title: "Devframe ecosystem: devtools, hosts and services"
+  description: "Browse devtools built on Devframe, the hub UI providers that host them, wire services, and real products running Devframe in production."
+---
+
+::ecosystem-list
+---
+packages:
+  - name: ESLint Config Inspector
+    description: Inspects ESLint flat configs
+    author: eslint
+    repo: eslint/config-inspector
+    category: Devframes
+    image: /images/ecosystem/logos/eslint-config-inspector.svg
+    color: "#4b32c3"
+  - name: node-modules-inspector
+    description: Visualizes the node_modules dependency graph
+    author: antfu
+    repo: antfu/node-modules-inspector
+    category: Devframes
+    image: /images/ecosystem/logos/node-modules-inspector.svg
+    color: "#3f8f4a"
+  - name: vite-plugin-inspect
+    description: Inspects the intermediate state of Vite plugins
+    author: antfu-collective
+    repo: antfu-collective/vite-plugin-inspect
+    category: Devframes
+    icon: i-carbon-search-advanced
+    color: "#646cff"
+  - name: medula
+    description: Lets AI agents inspect and mutate live app state over MCP
+    author: posva
+    repo: posva/medula
+    category: Devframes
+    icon: i-octicon-mcp-24
+    color: "#d97706"
+  - name: Pinia Colada devtools
+    description: Inspects Pinia Colada queries and mutations
+    author: posva
+    url: https://github.com/posva/pinia-colada/tree/main/devtools
+    category: Devframes
+    image: /images/ecosystem/logos/pinia-colada.svg
+    color: "#e0b000"
+  - name: UnoCSS Inspector
+    description: Inspects generated utility classes and matched rules
+    author: unocss
+    url: https://github.com/unocss/unocss/tree/main/packages-integrations/inspector
+    category: Devframes
+    image: /images/ecosystem/logos/unocss-inspector.svg
+  - name: Vite DevTools
+    description: Hosts many devframes in one dock for any Vite app
+    author: vitejs
+    url: https://devtools.vite.dev
+    category: Hosts
+    image: /images/ecosystem/logos/vite-devtools.svg
+    color: "#8b5cf6"
+  - name: Nuxt DevTools
+    description: Nuxt DevTools v4, built on Devframe and Vite DevTools
+    author: nuxt
+    url: https://devtools.nuxt.com
+    category: Hosts
+    image: /images/ecosystem/logos/nuxt-devtools.svg
+    color: "#00dc82"
+  - name: "@devframes/plugin-data-inspector"
+    description: Queries live server objects with jora
+    author: devframes
+    url: /add-ons/devframes/data-inspector
+    category: Devframes
+    icon: i-ph:crosshair-duotone
+    official: true
+  - name: "@devframes/plugin-inspect"
+    description: Browses RPC, shared state and the agent surface of a connection
+    author: devframes
+    url: /add-ons/devframes/inspect
+    category: Devframes
+    icon: i-ph:stethoscope-duotone
+    official: true
+  - name: "@devframes/plugin-og"
+    description: Inspects Open Graph metadata and previews social cards
+    author: devframes
+    url: /add-ons/devframes/og
+    category: Devframes
+    icon: i-ph:image-square-duotone
+    official: true
+  - name: "@devframes/plugin-a11y"
+    description: Runs axe-core and highlights accessibility issues in the page
+    author: devframes
+    url: /add-ons/devframes/a11y
+    category: Devframes
+    icon: i-ph:person-simple-circle-duotone
+    official: true
+  - name: "@devframes/plugin-git"
+    description: Git dashboard for status, log, branches and diffs
+    author: devframes
+    url: /add-ons/devframes/git
+    category: Devframes
+    icon: i-ph:git-branch-duotone
+    official: true
+  - name: "@devframes/plugin-terminals"
+    description: Terminal panels for streamed output and interactive PTY shells
+    author: devframes
+    url: /add-ons/devframes/terminals
+    category: Devframes
+    icon: i-ph:terminal-window-duotone
+    official: true
+  - name: "@devframes/plugin-code-server"
+    description: Runs VS Code in the browser as an embedded editor panel
+    author: devframes
+    url: /add-ons/devframes/code-server
+    category: Devframes
+    icon: i-ph:code-duotone
+    official: true
+  - name: "@devframes/plugin-assets"
+    description: Browses, previews, uploads and manages static assets
+    author: devframes
+    url: /add-ons/devframes/assets
+    category: Devframes
+    icon: i-ph:images-duotone
+    official: true
+  - name: "@devframes/plugin-messages"
+    description: Browses, filters and dismisses the hub message feed
+    author: devframes
+    url: https://github.com/devframes/devframe/tree/main/plugins/messages
+    category: Devframes
+    icon: i-ph:chat-circle-dots-duotone
+    official: true
+  - name: "@devframes/service-open"
+    description: Opens files in the editor or reveals them in the file explorer
+    author: devframes
+    url: /add-ons/services/open
+    category: Services
+    icon: i-ph:file-arrow-up-duotone
+    official: true
+  - name: "@devframes/service-git"
+    description: Read and write git operations over RPC
+    author: devframes
+    url: /add-ons/services/git
+    category: Services
+    icon: i-ph:git-branch-duotone
+    official: true
+  - name: "@devframes/service-shiki"
+    description: Server-side Shiki highlighting shared by every devframe
+    author: devframes
+    url: /add-ons/services/shiki
+    category: Services
+    icon: i-ph:paint-brush-duotone
+    official: true
+---
+::
+
+::ecosystem-showcase
+---
+addUrl: https://github.com/devframes/devframe/edit/main/docs/content/4.ecosystem.md
+sites:
+  - name: Vite DevTools
+    description: One dock for any Vite app, with Rolldown bundle analysis, Vitest UI, Oxc tooling and the devframes you mount.
+    author: vitejs
+    url: https://devtools.vite.dev
+    screenshot: /images/ecosystem/vite-devtools.webp
+  - name: Nuxt DevTools
+    description: Nuxt DevTools v4 builds on Devframe and Vite DevTools and adds Nuxt-specific panels.
+    author: nuxt
+    url: https://devtools.nuxt.com
+    screenshot: /images/ecosystem/nuxt-devtools.webp
+  - name: ESLint Config Inspector
+    description: Visualizes ESLint flat configs, the rules each file gets and where they come from.
+    author: eslint
+    url: https://github.com/eslint/config-inspector
+    screenshot: /images/ecosystem/eslint-config-inspector.webp
+  - name: node-modules-inspector
+    description: Interactive dependency graph of node_modules with versions, duplicates and module types.
+    author: antfu
+    url: https://github.com/antfu/node-modules-inspector
+    screenshot: /images/ecosystem/node-modules-inspector.webp
+  - name: vite-plugin-inspect
+    description: Shows how each Vite plugin transforms a module, step by step.
+    author: antfu-collective
+    url: https://github.com/antfu-collective/vite-plugin-inspect
+    screenshot: /images/ecosystem/vite-plugin-inspect.webp
+  - name: Pinia Colada devtools
+    description: Inspects Pinia Colada queries and mutations, with refetch, invalidate and simulated errors.
+    author: posva
+    url: https://github.com/posva/pinia-colada/tree/main/devtools
+    screenshot: /images/ecosystem/pinia-colada-devtools.webp
+---
+
+#title
+Built with Devframe
+
+#description
+Devtools that run Devframe in production
+::
+
+::ecosystem-cta
+#title
+Add your project
+
+#description
+Building on Devframe? Open a pull request that adds a card, or open an issue first if you are not sure it fits.
+
+#ctas
+  :::u-button
+  ---
+  to: https://github.com/devframes/devframe/edit/main/docs/content/4.ecosystem.md
+  icon: i-lucide-plus
+  target: _blank
+  color: neutral
+  ---
+  Add your project
+  :::
+
+  :::u-button
+  ---
+  to: https://github.com/devframes/devframe/issues/new
+  target: _blank
+  color: neutral
+  variant: outline
+  ---
+  Open an issue
+  :::
+::
diff --git a/docs/content/9.posts/1.pluggable-extensible-playful-devtools.md b/docs/content/9.posts/1.pluggable-extensible-playful-devtools.md
index fd30f0846..31f4ea04b 100644
--- a/docs/content/9.posts/1.pluggable-extensible-playful-devtools.md
+++ b/docs/content/9.posts/1.pluggable-extensible-playful-devtools.md
@@ -113,7 +113,7 @@ export const buildReport = () => createBuild(myDevframe, { outDir: 'dist-static'
 
 A package can ship several of these entry points at once. For example, a build inspector could offer a standalone CLI for any project, generate static reports in CI, appear as a dock entry inside Vite DevTools, and let a coding agent query the active build, all backed by the same definition.
 
-We are already using this model in [Node Modules Inspector](https://github.com/antfu/node-modules-inspector), [ESLint Config Inspector](https://github.com/eslint/config-inspector), and [Vite Plugin Inspect](https://github.com/antfu-collective/vite-plugin-inspect). They remain focused tools with their own interfaces, while sharing Devframe underneath. You can find more examples on the [Built with Devframe](/guide/built-with) page.
+We are already using this model in [Node Modules Inspector](https://github.com/antfu/node-modules-inspector), [ESLint Config Inspector](https://github.com/eslint/config-inspector), and [Vite Plugin Inspect](https://github.com/antfu-collective/vite-plugin-inspect). They remain focused tools with their own interfaces, while sharing Devframe underneath. You can find more examples on the [Ecosystem](/ecosystem) page.
 
 The browser side is up to each tool as well. Devframe handles the protocol and runtime, while the tool can choose whichever UI framework and design system suits it. To dogfood that promise, the [built-in devframes](#built-in-devframes) span Vue, Svelte, Solid, React, and Next.js.
 
@@ -203,7 +203,7 @@ It is heavily inspired by [`@nuxt/a11y`](https://github.com/nuxt/a11y), which br
 
 Other built-in devframes cover a [VS Code editor on the web](/add-ons/devframes/code-server), [asset management](/add-ons/devframes/assets), a [Git panel](/add-ons/devframes/git), [Open Graph previews](/add-ons/devframes/og), and [Devframe's own RPC and state inspector](/add-ons/devframes/inspect). They share the devframe definition and protocol while each chooses its own UI framework.
 
-These built-in devframes show what Devframe can support and offer starting points for communities to build their own. We believe many more interesting DevTools will emerge over time. You can follow the growing list on [Built with Devframe](/guide/built-with).
+These built-in devframes show what Devframe can support and offer starting points for communities to build their own. We believe many more interesting DevTools will emerge over time. You can follow the growing list on the [Ecosystem](/ecosystem) page.
 
 ## From One Devframe to a DevTools Host
 
diff --git a/docs/package.json b/docs/package.json
index f86a96f51..970a7ff10 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,6 +17,7 @@
     "@iconify-json/twemoji": "catalog:frontend",
     "@iconify-json/unjs": "catalog:frontend",
     "@shikijs/magic-move": "catalog:frontend",
+    "@vueuse/core": "catalog:frontend",
     "comark-docs": "catalog:docs",
     "d3-shape": "catalog:frontend",
     "nuxt": "catalog:build",
diff --git a/docs/public/images/ecosystem/eslint-config-inspector.webp b/docs/public/images/ecosystem/eslint-config-inspector.webp
new file mode 100644
index 000000000..89ddddd57
Binary files /dev/null and b/docs/public/images/ecosystem/eslint-config-inspector.webp differ
diff --git a/docs/public/images/ecosystem/logos/eslint-config-inspector.svg b/docs/public/images/ecosystem/logos/eslint-config-inspector.svg
new file mode 100644
index 000000000..33562b4c2
--- /dev/null
+++ b/docs/public/images/ecosystem/logos/eslint-config-inspector.svg
@@ -0,0 +1,12 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8_7)">
+<path d="M441.23 486.379C452.945 498.095 471.94 498.095 483.656 486.379C495.372 474.663 495.372 455.668 483.656 443.953L441.23 486.379ZM483.656 443.953L379.014 339.311L336.588 381.737L441.23 486.379L483.656 443.953Z" fill="#8080F2"/>
+<path d="M159.743 149.857L255.316 124.264C256.492 123.949 257.729 123.949 258.905 124.264C260.081 124.579 261.153 125.198 262.013 126.058L331.986 196.01C332.846 196.87 333.465 197.942 333.78 199.117C334.095 200.292 334.095 201.529 333.781 202.704L308.18 298.249C307.539 300.639 305.669 302.506 303.278 303.149L207.705 328.742C206.529 329.057 205.291 329.057 204.115 328.742C202.94 328.427 201.868 327.808 201.007 326.947L131.035 256.996C130.175 256.136 129.556 255.064 129.241 253.889C128.925 252.714 128.925 251.477 129.24 250.302L154.841 154.756C155.484 152.364 157.351 150.5 159.743 149.857Z" fill="#8080F2"/>
+<path d="M448.193 276.171L395.325 77.4659C393.397 70.2775 387.984 63.9046 380.793 61.9776L182.784 8.92143C175.593 6.99443 167.716 9.80644 162.452 15.0679L17.4171 160.338C12.1529 165.601 10.0471 173.46 11.9746 180.65L65.2194 377.944C67.1473 385.132 72.9409 390.096 80.1326 392.023L278.139 445.078C285.331 447.005 292.803 445.699 298.065 440.435L442.9 295.919C448.167 290.66 450.123 283.36 448.191 276.171L448.193 276.171ZM344.028 336.999C343.35 339.529 341.199 341.463 338.665 342.143L193.068 381.084C191.815 381.415 190.498 381.412 189.246 381.077C187.995 380.742 186.853 380.085 185.934 379.172L79.2165 272.624C77.3629 270.769 76.4546 268.016 77.1334 265.483L116.111 120.017C116.79 117.483 118.93 115.55 121.464 114.871L267.055 75.9261C268.307 75.5939 269.624 75.5955 270.876 75.9308C272.127 76.2661 273.269 76.9234 274.187 77.8371L380.911 184.389C382.768 186.245 383.685 188.998 383.006 191.531L344.028 336.999Z" fill="#4B32C3"/>
+</g>
+<defs>
+<clipPath id="clip0_8_7">
+<rect width="500" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/public/images/ecosystem/logos/node-modules-inspector.svg b/docs/public/images/ecosystem/logos/node-modules-inspector.svg
new file mode 100644
index 000000000..1cd279ae7
--- /dev/null
+++ b/docs/public/images/ecosystem/logos/node-modules-inspector.svg
@@ -0,0 +1,11 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M51.0493 39.7968C51.2419 38.0956 52.7771 36.8726 54.4783 37.0652C57.1596 37.3687 59.8248 38.2804 62.3434 39.6078C63.858 40.406 64.4388 42.2809 63.6405 43.7955C62.8423 45.3101 60.9674 45.8909 59.4528 45.0926C57.4759 44.0508 55.5516 43.4263 53.7809 43.2258C52.0797 43.0332 50.8567 41.498 51.0493 39.7968ZM49.9171 39.8967C50.7086 41.4149 50.1195 43.2872 48.6013 44.0787C47.8734 44.4581 47.1643 44.9713 46.4876 45.6479C45.2768 46.8584 43.3139 46.8581 42.1035 45.6473C40.893 44.4365 40.8933 42.4737 42.1041 41.2632C43.211 40.1566 44.4281 39.2623 45.7352 38.5809C47.2533 37.7894 49.1257 38.3785 49.9171 39.8967ZM64.4369 44.4032C65.5782 43.127 67.538 43.0176 68.8142 44.1588C70.7074 45.8518 72.4764 47.7874 74.0529 49.9026C75.0761 51.2753 74.7927 53.2176 73.4199 54.2407C72.0472 55.2638 70.1049 54.9804 69.0818 53.6077C67.7476 51.8177 66.2582 50.1905 64.6813 48.7805C63.4051 47.6392 63.2957 45.6794 64.4369 44.4032ZM73.9341 55.0805C75.4823 54.3497 77.3299 55.0123 78.0607 56.5606C79.1738 58.9187 80.0493 61.4123 80.6104 63.9855C80.9751 65.6583 79.9147 67.31 78.2419 67.6747C76.5692 68.0395 74.9174 66.9791 74.5527 65.3063C74.0994 63.2277 73.384 61.1775 72.4539 59.2071C71.7231 57.6589 72.3858 55.8113 73.9341 55.0805ZM78.3494 68.6698C80.0587 68.7666 81.3659 70.2308 81.2691 71.9402C81.1192 74.5861 80.584 77.2452 79.5925 79.8511C78.9836 81.4513 77.1929 82.2549 75.5927 81.646C73.9925 81.0372 73.1889 79.2464 73.7978 77.6463C74.5521 75.6639 74.9632 73.633 75.079 71.5895C75.1758 69.8801 76.64 68.5729 78.3494 68.6698ZM75.0848 82.5031C76.4398 83.5496 76.6898 85.4964 75.6433 86.8514C74.8517 87.8764 73.973 88.8749 73.0045 89.8434C71.7939 91.0541 69.8311 91.0541 68.6205 89.8434C67.4098 88.6328 67.4098 86.67 68.6205 85.4594C69.4077 84.6721 70.1109 83.8715 70.7364 83.0616C71.783 81.7066 73.7298 81.4565 75.0848 82.5031Z" fill="#469B18"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M32.6756 9.04568C33.8861 10.2564 33.8859 12.2192 32.6752 13.4297C31.8879 14.2169 31.1847 15.0175 30.5591 15.8273C29.5125 17.1822 27.5657 17.4322 26.2108 16.3856C24.8558 15.339 24.6059 13.3921 25.6525 12.0372C26.4442 11.0123 27.3229 10.0137 28.2915 9.04527C29.5023 7.83476 31.4651 7.83494 32.6756 9.04568ZM25.7029 17.2426C27.3031 17.8514 28.1068 19.6421 27.498 21.2423C26.7438 23.2246 26.3328 25.2555 26.2173 27.2991C26.1206 29.0084 24.6565 30.3158 22.9472 30.2191C21.2378 30.1224 19.9305 28.6583 20.0272 26.949C20.1768 24.3029 20.7117 21.6437 21.7032 19.0377C22.3119 17.4375 24.1027 16.6338 25.7029 17.2426ZM23.0547 31.2141C24.7275 30.8493 26.3793 31.9095 26.7442 33.5823C27.1976 35.6609 27.9131 37.711 28.8433 39.6815C29.5741 41.2297 28.9115 43.0773 27.3633 43.8082C25.815 44.539 23.9674 43.8764 23.2366 42.3282C22.1235 39.9701 21.2478 37.4767 20.6866 34.9036C20.3217 33.2308 21.382 31.579 23.0547 31.2141ZM27.8774 44.648C29.2502 43.6248 31.1924 43.9083 32.2155 45.281C33.5497 47.0711 35.0391 48.6984 36.6159 50.1086C37.892 51.2499 38.0013 53.2097 36.86 54.4859C35.7186 55.762 33.7589 55.8713 32.4827 54.73C30.5896 53.0369 28.8208 51.1013 27.2443 48.9861C26.2212 47.6133 26.5047 45.6711 27.8774 44.648ZM59.1917 53.241C60.4025 54.4514 60.4028 56.4143 59.1924 57.6251C58.0857 58.7321 56.8688 59.6267 55.5617 60.3084C54.0437 61.1002 52.1713 60.5114 51.3795 58.9934C50.5878 57.4754 51.1765 55.603 52.6946 54.8112C53.4222 54.4317 54.1311 53.9184 54.8077 53.2416C56.0181 52.0308 57.9809 52.0305 59.1917 53.241ZM37.6563 55.0936C38.4547 53.5791 40.3297 52.9985 41.8442 53.7969C43.8211 54.839 45.7453 55.4637 47.5158 55.6642C49.217 55.8568 50.4399 57.3921 50.2472 59.0933C50.0546 60.7945 48.5193 62.0175 46.8181 61.8248C44.1368 61.5211 41.4716 60.6092 38.953 59.2815C37.4385 58.4831 36.8579 56.6082 37.6563 55.0936Z" fill="#469B18"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M69.3161 22.2976C69.4128 20.5883 70.8769 19.281 72.5863 19.3777C75.2322 19.5274 77.8912 20.0623 80.4971 21.0538C82.0973 21.6625 82.901 23.4533 82.2922 25.0535C81.6834 26.6536 79.8927 27.4573 78.2925 26.8486C76.3103 26.0944 74.2795 25.6834 72.2361 25.5678C70.5267 25.4711 69.2194 24.007 69.3161 22.2976ZM68.3214 22.4051C68.6863 24.0779 67.626 25.7297 65.9533 26.0946C63.8748 26.548 61.8248 27.2636 59.8545 28.1937C58.3063 28.9247 56.4587 28.2621 55.7278 26.7139C54.9969 25.1657 55.6594 23.3181 57.2076 22.5871C59.5655 21.474 62.0589 20.5983 64.6319 20.037C66.3047 19.6722 67.9565 20.7324 68.3214 22.4051ZM83.149 25.5612C84.1955 24.2062 86.1423 23.9561 87.4973 25.0026C88.5223 25.7942 89.5208 26.6728 90.4893 27.6413C91.6999 28.8519 91.6999 30.8147 90.4893 32.0254C89.2786 33.236 87.3158 33.236 86.1052 32.0254C85.318 31.2382 84.5174 30.535 83.7076 29.9095C82.3526 28.863 82.1025 26.9162 83.149 25.5612ZM54.8883 27.2279C55.9115 28.6006 55.6282 30.5429 54.2555 31.5661C52.4656 32.9003 50.8386 34.3897 49.4286 35.9665C48.2873 37.2428 46.3276 37.3522 45.0513 36.211C43.7751 35.0697 43.6656 33.11 44.8069 31.8337C46.4998 29.9406 48.4352 28.1716 50.5502 26.5951C51.9228 25.5719 53.8651 25.8552 54.8883 27.2279ZM44.4438 37.0071C45.9584 37.8054 46.5391 39.6803 45.7409 41.1949C44.699 43.1718 44.0745 45.0959 43.8741 46.8663C43.6815 48.5676 42.1463 49.7906 40.4451 49.598C38.7439 49.4054 37.5209 47.8702 37.7134 46.169C38.0169 43.4879 38.9286 40.8227 40.256 38.3041C41.0543 36.7895 42.9292 36.2088 44.4438 37.0071ZM40.545 50.73C42.0629 49.9381 43.9354 50.5267 44.7273 52.0447C45.1068 52.7722 45.6202 53.4809 46.297 54.1573C47.5079 55.3676 47.5085 57.3304 46.2982 58.5414C45.0879 59.7524 43.1251 59.7529 41.9142 58.5427C40.807 57.4361 39.9122 56.2193 39.2304 54.9124C38.4385 53.3944 39.0271 51.5219 40.545 50.73Z" fill="#469B18"/>
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M53.8913 41.458C55.1019 40.2474 57.0647 40.2474 58.2754 41.458C59.3822 42.5648 60.2767 43.7819 60.9582 45.089C61.7497 46.6071 61.1606 48.4795 59.6425 49.271C58.1244 50.0625 56.252 49.4734 55.4605 47.9553C55.0811 47.2276 54.5679 46.5186 53.8913 45.842C52.6807 44.6314 52.6807 42.6686 53.8913 41.458ZM59.7422 50.4031C61.4434 50.5959 62.6663 52.1312 62.4736 53.8324C62.1698 56.5135 61.2579 59.1786 59.9304 61.6971C59.1321 63.2117 57.2571 63.7923 55.7426 62.994C54.228 62.1957 53.6474 60.3207 54.4457 58.8061C55.4877 56.8292 56.1124 54.905 56.313 53.1345C56.5057 51.4333 58.041 50.2104 59.7422 50.4031ZM55.1349 63.7903C56.4111 64.9315 56.5205 66.8913 55.3792 68.1675C53.6862 70.0606 51.7507 71.8296 49.6356 73.4061C48.2629 74.4292 46.3207 74.1458 45.2975 72.7731C44.2743 71.4004 44.5577 69.4581 45.9305 68.435C47.7204 67.1008 49.3476 65.6114 50.7577 64.0346C51.899 62.7583 53.8587 62.649 55.1349 63.7903ZM9.69548 67.9746C10.9061 66.764 12.8689 66.764 14.0795 67.9746C14.8668 68.7619 15.6674 69.4651 16.4772 70.0906C17.8322 71.1371 18.0823 73.0839 17.0358 74.4389C15.9893 75.7939 14.0425 76.044 12.6875 74.9974C11.6625 74.2058 10.664 73.3272 9.69548 72.3587C8.48485 71.1481 8.48485 69.1853 9.69548 67.9746ZM44.4578 73.2872C45.1887 74.8354 44.5261 76.683 42.9778 77.4139C40.6198 78.527 38.1263 79.4026 35.5532 79.9637C33.8805 80.3286 32.2287 79.2682 31.8639 77.5955C31.499 75.9227 32.5594 74.2709 34.2321 73.9061C36.3107 73.4528 38.3608 72.7373 40.3312 71.8072C41.8794 71.0763 43.727 71.739 44.4578 73.2872ZM17.8927 74.9467C18.5015 73.3466 20.2923 72.5429 21.8925 73.1517C23.8748 73.9059 25.9056 74.317 27.9491 74.4327C29.6585 74.5295 30.9657 75.9936 30.8689 77.703C30.7722 79.4123 29.308 80.7196 27.5987 80.6228C24.9528 80.473 22.2937 79.938 19.6877 78.9465C18.0875 78.3377 17.2839 76.5469 17.8927 74.9467Z" fill="#469B18"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M58.501 50.8345C56.5885 46.9001 53.7084 44.7667 50 44.7667C48.2879 44.7667 46.9 43.3788 46.9 41.6667C46.9 39.9546 48.2879 38.5667 50 38.5667C56.7083 38.5667 61.4323 42.6832 64.0771 48.1239C66.684 53.4867 67.4581 60.3871 66.5068 67.1015C64.6137 80.4652 55.4655 94.7667 37.5 94.7667C35.7879 94.7667 34.4 93.3788 34.4 91.6667C34.4 89.9546 35.7879 88.5667 37.5 88.5667C51.2012 88.5667 58.7197 77.8682 60.3681 66.2319C61.1878 60.4463 60.4514 54.8466 58.501 50.8345Z" fill="#579E4B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.799 49.1655C44.7115 53.0999 47.5916 55.2333 51.3 55.2333C53.0121 55.2333 54.4 56.6213 54.4 58.3333C54.4 60.0454 53.0121 61.4333 51.3 61.4333C44.5917 61.4333 39.8677 57.3168 37.2229 51.8761C34.616 46.5133 33.8419 39.6129 34.7932 32.8985C36.6863 19.5348 45.8345 5.23334 63.8 5.23334C65.5121 5.23334 66.9 6.62125 66.9 8.33334C66.9 10.0454 65.5121 11.4333 63.8 11.4333C50.0988 11.4333 42.5803 22.1318 40.9319 33.7682C40.1122 39.5537 40.8486 45.1534 42.799 49.1655Z" fill="#579E4B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50.8345 42.799C46.9001 44.7115 44.7667 47.5916 44.7667 51.3C44.7667 53.0121 43.3788 54.4 41.6667 54.4C39.9546 54.4 38.5667 53.0121 38.5667 51.3C38.5667 44.5917 42.6832 39.8677 48.1239 37.2229C53.4867 34.616 60.3871 33.8419 67.1015 34.7932C80.4652 36.6863 94.7667 45.8345 94.7667 63.8C94.7667 65.5121 93.3788 66.9 91.6667 66.9C89.9546 66.9 88.5667 65.5121 88.5667 63.8C88.5667 50.0988 77.8682 42.5803 66.2319 40.9319C60.4463 40.1122 54.8466 40.8486 50.8345 42.799Z" fill="#3E863D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.33334 34.4C10.0454 34.4 11.4333 35.7879 11.4333 37.5C11.4333 51.2012 22.1318 58.7197 33.7682 60.3682C39.5537 61.1878 45.1534 60.4514 49.1655 58.501C53.0999 56.5885 55.2333 53.7084 55.2333 50C55.2333 48.2879 56.6213 46.9 58.3333 46.9C60.0454 46.9 61.4333 48.2879 61.4333 50C61.4333 56.7083 57.3168 61.4324 51.8761 64.0771C46.5133 66.684 39.6129 67.4581 32.8985 66.5069C19.5348 64.6137 5.23334 55.4655 5.23334 37.5C5.23334 35.7879 6.62125 34.4 8.33334 34.4Z" fill="#3E863D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M50 45.0167C47.2478 45.0167 45.0167 47.2478 45.0167 50C45.0167 52.7522 47.2478 54.9833 50 54.9833C52.7522 54.9833 54.9833 52.7522 54.9833 50C54.9833 47.2478 52.7522 45.0167 50 45.0167ZM38.3167 50C38.3167 43.5475 43.5475 38.3167 50 38.3167C56.4525 38.3167 61.6833 43.5475 61.6833 50C61.6833 56.4525 56.4525 61.6833 50 61.6833C43.5475 61.6833 38.3167 56.4525 38.3167 50Z" fill="#579E4B"/>
+</svg>
diff --git a/docs/public/images/ecosystem/logos/nuxt-devtools.svg b/docs/public/images/ecosystem/logos/nuxt-devtools.svg
new file mode 100644
index 000000000..ead151fc7
--- /dev/null
+++ b/docs/public/images/ecosystem/logos/nuxt-devtools.svg
@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z" fill="#00DC82"/>
+</svg>
diff --git a/docs/public/images/ecosystem/logos/pinia-colada.svg b/docs/public/images/ecosystem/logos/pinia-colada.svg
new file mode 100644
index 000000000..ad5a89f49
--- /dev/null
+++ b/docs/public/images/ecosystem/logos/pinia-colada.svg
@@ -0,0 +1 @@
+<svg fill="none" height="898" viewBox="0 0 800 898" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="420.89" width="423.181" x="188.521" y="361.908"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="10"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1637_47"/><feBlend in="SourceGraphic" in2="effect1_backgroundBlur_1637_47" mode="normal" result="shape"/></filter><linearGradient id="b"><stop offset="0" stop-color="#7fd5e3"/><stop offset=".770833" stop-color="#aeeff0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="233.326" x2="241.809" xlink:href="#b" y1="243.792" y2="284.95"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="277.296" x2="304.128" y1="275.972" y2="302.009"><stop offset=".385417" stop-color="#ffdb5c"/><stop offset="1" stop-color="#ecb732"/></linearGradient><linearGradient id="e"><stop offset="0" stop-color="#52ce63"/><stop offset="1" stop-color="#51a256"/></linearGradient><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="233.887" x2="230.388" xlink:href="#e" y1="136.565" y2="147.767"/><linearGradient id="g"><stop offset="0" stop-color="#8ae99c"/><stop offset="1" stop-color="#52ce63"/></linearGradient><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="256.561" x2="245.971" xlink:href="#g" y1="138.333" y2="152.754"/><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="214.536" x2="213.733" y1="167.529" y2="168.196"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".282022" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><radialGradient id="j" cx="0" cy="0" gradientTransform="matrix(1.36208147 1.63937714 -3.1980157 2.65708103 190.872 141.075)" gradientUnits="userSpaceOnUse" r="1"><stop offset=".52747"/><stop offset=".63688" stop-opacity="0"/></radialGradient><linearGradient id="k" gradientUnits="userSpaceOnUse" x1="227.082" x2="238.714" y1="159.803" y2="238.05"><stop offset=".078125" stop-color="#fff"/><stop offset=".473958" stop-color="#fffaa5"/><stop offset=".84375" stop-color="#fffed4"/></linearGradient><linearGradient id="l" gradientUnits="userSpaceOnUse" x1="366.94" x2="366.161" xlink:href="#e" y1="93.3179" y2="168.2"/><linearGradient id="m" gradientUnits="userSpaceOnUse" x1="617.826" x2="542.939" xlink:href="#e" y1="189.364" y2="188.567"/><linearGradient id="n" gradientUnits="userSpaceOnUse" x1="514.204" x2="476.049" xlink:href="#g" y1="62.4891" y2="171.814"/><linearGradient id="o" gradientUnits="userSpaceOnUse" x1="451.43" x2="376.146" y1="255.419" y2="495.027"><stop offset="0" stop-color="#ffe56c"/><stop offset="1" stop-color="#ffc63a"/></linearGradient><linearGradient id="p" gradientUnits="userSpaceOnUse" x1="394.756" x2="394.756" xlink:href="#b" y1="712.519" y2="888"/><linearGradient id="q" gradientUnits="userSpaceOnUse" x1="399.85" x2="399.85" y1="375.856" y2="706.195"><stop offset=".078125" stop-color="#fff" stop-opacity="0"/><stop offset=".276042" stop-color="#fffaa5"/><stop offset=".84375" stop-color="#fffed4"/></linearGradient><linearGradient id="r" gradientUnits="userSpaceOnUse" x1="553.538" x2="536.097" y1="426.455" y2="349.514"><stop offset="0" stop-color="#ecb732"/><stop offset=".653943" stop-color="#ffe56c"/></linearGradient><path d="m587.128 385.531c-188.875-56.155-178.038-57.025-366-.69 27.292 44.834 27.992 84.84 15.395 143.469 159.33 0 321.213.69 321.213.69-11.897-44.834-13.996-79.322 29.392-143.469z" fill="#f0fcfc" stroke="#7fd5e3" stroke-linejoin="round" stroke-width="6"/><path d="m226.182 243.95c1.207 1.485 12.678-.331 15.477-3.19-.971 4.681-.049 27.776 2.27 29.801 1.926 1.125 11.494 2.535 15.481 2.306 2.533.154 3.397 1.7 3.335 2.863-.183 3.42-16.585 8.279-19.54 8.932-3.539.778-22.748 2.743-24.34.112-.244-.795.359-2.949 2.934-4.156 5.603-2.169 12.681-6.649 13.617-8.302 1.816-2.15-6.526-25.035-9.234-28.366z" fill="url(#c)"/><path d="m229.202 244.511c.072 2.53 10.388 27.359 8.133 29.281-.724.758-18.017 8.099-14.603 9.002 2.559.677 21.937 1.143 33.378-4.442.96-.194 1.649.618 2.569.753-12.996 6.227-18.27 6.471-30.28 6.917-1.998.133-7.604.499-9.221-1.291-1.048-1.161 1.238-3.3 1.776-3.516 1.215-.49 12.498-6.296 14.115-8.236 3.369-1.345-6.992-26.883-8.621-28.915 1.328.572 1.742.233 2.754.447z" fill="#fdfffe"/><path d="m245.125 229.52c3.064-16.516 10.925 68.722 73.375 44.98-4.085 9.807-7.851 14.032-15 29-29.416 15.761-54.974-17.288-61.714-32.604-22.163 23.228-31.229-63.028 3.339-41.376z" fill="url(#d)"/><path d="m237.24 267.66c.365 1.043 1.506 1.593 2.548 1.228 1.043-.365 1.592-1.506 1.227-2.548zm-2.063-22.409 1.996.128zm1.043-9.251c-1.979-.289-1.979-.289-1.979-.289h-.001v.001.004c-.001.003-.001.007-.002.012-.002.012-.004.028-.007.049-.006.042-.015.105-.027.185-.022.16-.055.392-.095.682-.08.58-.189 1.393-.305 2.324-.232 1.853-.499 4.215-.623 6.156l3.992.255c.116-1.816.37-4.08.6-5.914.114-.912.22-1.707.299-2.275.039-.284.071-.51.093-.665.011-.077.019-.137.025-.177.003-.02.005-.035.006-.045.001-.005.002-.008.002-.011 0-.001 0-.002 0-.002v-.001h.001s-.001 0-1.979-.289zm-3.039 9.124c-.303 4.738.748 10.42 1.816 14.792.541 2.212 1.099 4.141 1.522 5.517.212.689.39 1.241.517 1.623.063.191.113.34.148.442.017.051.031.09.04.118.005.013.009.024.011.031.002.004.003.007.003.009.001.001.001.002.001.003 0 0 .001.001.001.001s0 0 1.888-.66c1.887-.66 1.888-.66 1.888-.66s-.001 0-.001-.001-.001-.003-.001-.005c-.002-.005-.005-.013-.009-.024-.007-.022-.019-.056-.035-.102-.031-.091-.077-.229-.136-.408-.119-.358-.289-.883-.491-1.543-.406-1.32-.942-3.171-1.46-5.291-1.049-4.292-1.973-9.484-1.71-13.587z" fill="#ecb732"/><path d="m251.735 157.143c-18.944.673-29.761 1.26-48.29 6.174l7.698 10.409 37.203-5.531z" fill="#f0fcfc" stroke="#7fd5e3" stroke-linejoin="round" stroke-width="2"/><path clip-rule="evenodd" d="m236.905 164.814c5.895-1.691 7.114-7.182 6.481-15.018-.633-7.835-6.768-13.931-8.773-13.356s-7.062 9.882-6.429 17.717 2.826 12.348 8.721 10.657z" fill="url(#f)" fill-rule="evenodd"/><path clip-rule="evenodd" d="m239.765 163.743c4.527 3.325 8.761-.25 13.416-7.254 4.655-7.005 4.982-16.979 3.442-18.11-1.539-1.131-10.461 2.531-15.117 9.535-4.655 7.005-6.269 12.504-1.741 15.829z" fill="url(#h)" fill-rule="evenodd"/><path d="m189.664 143.157c.546-1.355 1.074-2.004 2.977-2.68l35.096 42.471c-1.448.624-2.06 1.27-2.978 2.681z" fill="#000"/><path d="m189.664 143.157c.546-1.355 1.074-2.004 2.977-2.68l35.096 42.471c-1.448.624-2.06 1.27-2.978 2.681z" fill="url(#i)"/><path d="m189.664 143.157c.546-1.355 1.074-2.004 2.977-2.68l35.096 42.471c-1.448.624-2.06 1.27-2.978 2.681z" fill="url(#j)"/><path d="m203.21 163.352c17.042 1.234 33.703-.573 48.538-6.127-2.89 11.732-.974 20.321.043 23.938 13.681 25.929 9.045 37.199 6.308 42.43-12.077 18.707-29.009 17.121-38.344 9.132-12.411-8.787-14.05-20.348-9.152-45.439-1.242-8.355-3.142-14.687-7.393-23.934z" fill="url(#k)"/><path d="m203.21 163.352c17.042 1.234 33.703-.573 48.538-6.127-2.89 11.732-.974 20.321.043 23.938 13.681 25.929 9.045 37.199 6.308 42.43-12.077 18.707-29.009 17.121-38.344 9.132-12.411-8.787-14.05-20.348-9.152-45.439-1.242-8.355-3.142-14.687-7.393-23.934z" fill="#aeeff0" fill-opacity=".19"/><path d="m203.21 163.352c17.042 1.234 33.703-.573 48.538-6.127-2.89 11.732-.974 20.321.043 23.938 13.681 25.929 9.045 37.199 6.308 42.43-12.077 18.707-29.009 17.121-38.344 9.132-12.411-8.787-14.05-20.348-9.152-45.439-1.242-8.355-3.142-14.687-7.393-23.934z" stroke="#7fd5e3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3.60929" stroke-width="2"/><path d="m237.553 179.428 7.114.03c2.753 9.618 4.634 14.26 8.807 24.31-1.669 3.444-3.949 5.03-8.655 5.724-6.286-9.521-7.762-16.177-7.266-30.064z" fill="#fdfee9" fill-opacity=".82"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m433.39 260.331c34.69-21.154 33.266-56.933 16.134-103.631s-66.376-72.6719-78.174-65.477c-11.799 7.1949-28.415 73.33-11.283 120.028s38.633 70.234 73.323 49.08z" fill="url(#l)"/><path d="m457.425 269.514c13.994 38.145 45.087 32.053 87.555 6.156s70.995-86.964 66.235-99.938c-4.76-12.973-59.855-24.326-102.323 1.571s-65.462 54.066-51.467 92.211z" fill="url(#m)"/><path d="m449.798 248.545c34.374 11.996 55.339-17.616 73.255-68.949 17.915-51.332 3.313-112.8622-8.378-116.9425s-62.35 34.6736-80.265 86.0055c-17.915 51.333-18.986 87.889 15.388 99.886z" fill="url(#n)"/><path d="m394.608 499.418c74.042 16.061 138.754 7.579 159.913-89.964 21.16-97.542-21.524-190.61-95.565-206.671-74.042-16.062-151.405 50.965-172.564 148.507-21.16 97.543 34.174 132.066 108.216 148.128z" fill="url(#o)"/><path d="m522.686 417.137c-1.544-2.298-4.659-2.909-6.957-1.365l-80.798 54.292c-2.298 1.544-2.91 4.659-1.365 6.957 1.544 2.299 4.659 2.91 6.957 1.366l80.798-54.292c2.298-1.545 2.909-4.659 1.365-6.958z" fill="#ecb732"/><path d="m457.194 411.286c-2.374 1.425-3.142 4.505-1.717 6.879l32.206 53.622c1.425 2.373 4.505 3.142 6.879 1.716 2.373-1.425 3.142-4.505 1.716-6.879l-32.205-53.622c-1.426-2.373-4.506-3.142-6.879-1.716z" fill="#ecb732"/><path d="m481.033 244.015c1.498 2.329.825 5.431-1.503 6.929l-53.118 34.181c-2.328 1.498-5.43.825-6.929-1.504-1.498-2.328-.825-5.43 1.503-6.928l53.118-34.181c2.328-1.498 5.43-.825 6.929 1.503z" fill="#ffc73b"/><path d="m461.153 292.661c2.329-1.499 3.001-4.601 1.503-6.929l-34.18-53.118c-1.499-2.328-4.601-3.001-6.929-1.503-2.328 1.499-3.001 4.601-1.503 6.929l34.18 53.118c1.499 2.328 4.601 3.001 6.929 1.503z" fill="#ffc73b"/></g><path d="m353.029 341.568c10.219 3.566 19.848 2.604 21.507-2.149s-5.281-11.497-15.5-15.063c-10.218-3.567-19.847-2.605-21.506 2.148s5.28 11.497 15.499 15.064z" fill="#eaadcc"/><path d="m487.451 376.393c10.578 2.295 20.017.166 21.085-4.753 1.067-4.92-6.643-10.768-17.22-13.063-10.577-2.294-20.017-.166-21.085 4.754-1.067 4.919 6.643 10.768 17.22 13.062z" fill="#eaadcc"/><path clip-rule="evenodd" d="m308.341 370.64c2.357-1.451 5.446-.717 6.897 1.641l51.04 82.891c1.452 2.357.717 5.445-1.64 6.897-2.358 1.452-5.446.718-6.898-1.64l-51.04-82.891c-1.451-2.358-.717-5.446 1.641-6.898z" fill="#ecb732" fill-rule="evenodd"/><path clip-rule="evenodd" d="m370.371 392.452c1.57 2.281.993 5.402-1.288 6.972l-51.529 35.458c-2.281 1.569-5.403.992-6.972-1.289-1.57-2.281-.993-5.402 1.288-6.971l51.529-35.458c2.281-1.57 5.403-.993 6.972 1.288z" fill="#ecb732" fill-rule="evenodd"/><path d="m446.846 345.706c-2.512 11.581-17.225 19.067-28.049 16.719-10.823-2.348-17.994-14.591-15.482-26.171 1.388-6.396 12.532-7.545 23.355-5.197 10.824 2.348 21.564 8.254 20.176 14.649z" fill="#e77777"/><path clip-rule="evenodd" d="m350.974 295.736c-1.403.56-2.087 2.15-1.527 3.553 2.817 7.066 8.43 11.911 16.412 14.622 8.043 2.731 15.879 2.226 23.332-1.549 1.347-.683 1.886-2.328 1.204-3.676-.682-1.347-2.328-1.886-3.675-1.203-6.107 3.093-12.416 3.52-19.102 1.25-6.746-2.291-10.968-6.143-13.091-11.469-.56-1.403-2.15-2.087-3.553-1.528z" fill="#755400" fill-rule="evenodd"/><path clip-rule="evenodd" d="m467.183 331.205c-1.403.559-2.087 2.15-1.528 3.553 2.817 7.065 8.431 11.911 16.413 14.622 8.042 2.731 15.878 2.225 23.332-1.55 1.347-.682 1.886-2.328 1.204-3.675-.683-1.347-2.328-1.886-3.675-1.204-6.108 3.093-12.416 3.521-19.102 1.25-6.746-2.291-10.968-6.143-13.092-11.469-.559-1.403-2.15-2.087-3.552-1.527z" fill="#755400" fill-rule="evenodd"/><path d="m357.784 712.429c8.796 7.093 53.534 9.337 86.6 0-18.895 18.328-18.562 108.272 0 118.509 16.533 6.225 49.378 20.057 88.742 22.478 24.406 2.766 29.73 9.818 26.785 14.524-8.661 13.832-120.799 19.879-150.954 20.056-36.095.2-160.033-7.953-170.268-20.056-.787-3.458 9.431-11.758 36.985-14.524 59.047-4.15 72.889-15.017 82.11-22.478 16.726-13.534 19.726-102.602 0-118.509z" fill="url(#p)"/><path d="m386.44 719.378c-4.391 10.407 1.999 124.959-23.881 130.918-8.589 2.492-90.278 12.597-70.981 14.744 23.978 2.667 118.162 13.419 241.041.22 9.761.016 5.99 2.602 14.696 3.932-139.349 14.514-87.658 19.497-205.751 11.197-19.762-1.139-69.983-6.298-87.479-11.197-7.888-5.63 22.31-9.369 27.994-9.798 12.838-.982 50.307-10.225 69.983-16.796 32.892-10.983 20.207-117.687 8.398-127.369 11.809 3.458 16.537 2.421 25.98 4.149z" fill="#fdfffe"/><g filter="url(#a)"><path d="m220.493 384.908c166.135 49.457 212.377 48.131 366.712 0-46.889 72.44-30.792 132.268-25.894 167.26 3.5 41.29 44.04 64.991 19.596 113.372-63.349 125.383-282.733 125.971-359.714 0-28.111-46 13.997-59.463 13.997-113.372 0-51.788 13.647-126.455-14.697-167.26z" fill="url(#q)"/><path d="m220.493 384.908c166.135 49.457 212.377 48.131 366.712 0-46.889 72.44-30.792 132.268-25.894 167.26 3.5 41.29 44.04 64.991 19.596 113.372-63.349 125.383-282.733 125.971-359.714 0-28.111-46 13.997-59.463 13.997-113.372 0-51.788 13.647-126.455-14.697-167.26z" fill="#aeeff0" fill-opacity=".19"/><path d="m220.493 384.908c166.135 49.457 212.377 48.131 366.712 0-46.889 72.44-30.792 132.268-25.894 167.26 3.5 41.29 44.04 64.991 19.596 113.372-63.349 125.383-282.733 125.971-359.714 0-28.111-46 13.997-59.463 13.997-113.372 0-51.788 13.647-126.455-14.697-167.26z" stroke="#7fd5e3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="3.60929" stroke-width="6"/></g><path d="m466.834 529.074 63.684-9.798c6.603 81.838-.322 64.494 20.296 95.177-6.998 13.297-25.894 49.688-63.685 31.493-26.365-42.668-11.38-21.251-20.295-116.872z" fill="#f9fef9"/><path d="m262.483 425.499c15.396 54.586 16.096 113.372-7.698 180.556-18.006 50.84 32.276 98.184 84.679 112.673" stroke="#f9fef9" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".85" stroke-width="12"/><path d="m557.837 340c7.454 1.653 14.108 5.426 21.643 14.157 5.638 6.531 10.895 15.712 12.452 24.099 1.35 7.267.26 15.843-5.839 20.673 0 0-15.924 4.99-24.903 6.233-45.386 6.286-24.42 2.481-32.055 25.462-5.517 16.578-40.485-10.033-39.391-24.32 1.732-22.849 41.613-20.232 54.766-21.153 6.994-.493 20.65 1.456 24.074-4.799 1.085-1.982-4.837-10.368-9.757-12.852z" fill="url(#r)"/><path d="m531.746 392.401c.295 1.711-19.64 4.473-26.98 5.763-7.34 1.291-11.12 6.426-11.415 4.715-.295-1.71 2.518-7.091 9.858-8.382 4.151-.73 8.301-1.572 12.452-2.096 6.227-1.047 15.931-.891 16.085 0z" fill="#ffefa3"/></svg>
\ No newline at end of file
diff --git a/docs/public/images/ecosystem/logos/unocss-inspector.svg b/docs/public/images/ecosystem/logos/unocss-inspector.svg
new file mode 100644
index 000000000..7b268ca33
--- /dev/null
+++ b/docs/public/images/ecosystem/logos/unocss-inspector.svg
@@ -0,0 +1,5 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M117.444 167.888C117.444 140.273 139.83 117.888 167.444 117.888V117.888C195.058 117.888 217.444 140.273 217.444 167.888V167.888C217.444 195.502 195.058 217.888 167.444 217.888V217.888C139.83 217.888 117.444 195.502 117.444 167.888V167.888Z" fill="#858585"/>
+<path d="M117.444 53C117.444 25.3858 139.83 3 167.444 3V3C195.058 3 217.444 25.3858 217.444 53V98C217.444 100.761 215.205 103 212.444 103H122.444C119.683 103 117.444 100.761 117.444 98V53Z" fill="#CCCCCC"/>
+<path d="M102 167.888C102 195.502 79.6142 217.888 52 217.888V217.888C24.3858 217.888 2 195.502 2 167.888L2.00001 122.888C2.00001 120.126 4.23859 117.888 7.00001 117.888L97 117.888C99.7614 117.888 102 120.126 102 122.888L102 167.888Z" fill="#4D4D4D"/>
+</svg>
diff --git a/docs/public/images/ecosystem/logos/vite-devtools.svg b/docs/public/images/ecosystem/logos/vite-devtools.svg
new file mode 100644
index 000000000..0f2bdacd0
--- /dev/null
+++ b/docs/public/images/ecosystem/logos/vite-devtools.svg
@@ -0,0 +1,130 @@
+<svg width="48" height="46" viewBox="0 0 48 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.9456 44.9383C25.2821 45.7827 23.925 45.3131 23.925 44.2403V33.9369C23.925 32.6875 22.9126 31.6751 21.6631 31.6751H10.287C9.36714 31.6751 8.83075 30.6346 9.36713 29.8871L16.8464 19.4157C17.917 17.9185 16.8464 15.8376 15.0046 15.8376H1.23731C0.317479 15.8376 -0.218913 14.7972 0.317475 14.0497L10.0134 0.4741C10.2266 0.176825 10.5692 0.000183105 10.9332 0.000183105H39.8271C40.7469 0.000183105 41.2833 1.04065 40.7469 1.78814L33.2676 12.2595C32.197 13.7567 33.2676 15.8376 35.1094 15.8376H46.4856C47.4291 15.8376 47.959 16.9255 47.3753 17.6687L25.9478 44.9404L25.9456 44.9383Z" fill="#863BFF" style="fill:#863BFF;fill:color(display-p3 0.5252 0.2300 1.0000);fill-opacity:1;"/>
+<mask id="mask0_2002_17158" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="46">
+<path d="M25.8416 44.9381C25.1781 45.7825 23.821 45.3129 23.821 44.2401V33.9368C23.821 32.6873 22.8085 31.6749 21.5591 31.6749H10.183C9.26313 31.6749 8.72674 30.6344 9.26313 29.8869L16.7424 19.4155C17.813 17.9184 16.7424 15.8374 14.9006 15.8374H1.1333C0.213475 15.8374 -0.322917 14.797 0.213471 14.0495L9.90938 0.473917C10.1226 0.176641 10.4652 0 10.8292 0H39.7231C40.6429 0 41.1793 1.04046 40.6429 1.78796L33.1636 12.2594C32.093 13.7565 33.1636 15.8374 35.0054 15.8374H46.3816C47.3251 15.8374 47.855 16.9253 47.2713 17.6685L25.8438 44.9402L25.8416 44.9381Z" fill="black" style="fill:black;fill-opacity:1;"/>
+</mask>
+<g mask="url(#mask0_2002_17158)">
+<g filter="url(#filter0_f_2002_17158)">
+<ellipse cx="5.50802" cy="14.7043" rx="5.50802" ry="14.7043" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 -4.46924 31.5157)" fill="#EDE6FF" style="fill:#EDE6FF;fill:color(display-p3 0.9275 0.9033 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter1_f_2002_17158)">
+<ellipse cx="10.3995" cy="29.8514" rx="10.3995" ry="29.8514" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 -39.3281 7.88272)" fill="#EDE6FF" style="fill:#EDE6FF;fill:color(display-p3 0.9275 0.9033 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter2_f_2002_17158)">
+<ellipse cx="5.50802" cy="30.4868" rx="5.50802" ry="30.4868" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 -40.4673 11.3212)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter3_f_2002_17158)">
+<ellipse cx="5.50802" cy="30.5986" rx="5.50802" ry="30.5986" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 -35.8721 29.3204)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter4_f_2002_17158)">
+<ellipse cx="5.50802" cy="30.5986" rx="5.50802" ry="30.5986" transform="matrix(0.00324134 0.999995 0.999995 -0.00324134 -34.3398 30.4693)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter5_f_2002_17158)">
+<ellipse cx="14.0715" cy="22.0783" rx="14.0715" ry="22.0783" transform="matrix(0.0584509 -0.99829 -0.99829 -0.0584509 74.3486 26.8633)" fill="#EDE6FF" style="fill:#EDE6FF;fill:color(display-p3 0.9275 0.9033 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter6_f_2002_17158)">
+<ellipse cx="3.47034" cy="21.5008" rx="3.47034" ry="21.5008" transform="matrix(-0.0172986 -0.99985 -0.99985 0.0172986 75.7944 18.0627)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter7_f_2002_17158)">
+<ellipse cx="3.47034" cy="21.5008" rx="3.47034" ry="21.5008" transform="matrix(-0.0172986 -0.99985 -0.99985 0.0172986 75.7944 18.0627)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter8_f_2002_17158)">
+<ellipse cx="0.386861" cy="8.97156" rx="4.40666" ry="29.1076" transform="rotate(39.5103 0.386861 8.97156)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter9_f_2002_17158)">
+<ellipse cx="47.5226" cy="-6.09166" rx="4.40666" ry="29.1076" transform="rotate(37.8923 47.5226 -6.09166)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter10_f_2002_17158)">
+<ellipse cx="41.4121" cy="6.3335" rx="5.9715" ry="9.66515" transform="rotate(37.8923 41.4121 6.3335)" fill="#47BFFF" style="fill:#47BFFF;fill:color(display-p3 0.2799 0.7480 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter11_f_2002_17158)">
+<ellipse cx="-1.87921" cy="38.3321" rx="4.40666" ry="29.1076" transform="rotate(37.8923 -1.87921 38.3321)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter12_f_2002_17158)">
+<ellipse cx="-1.87921" cy="38.3321" rx="4.40666" ry="29.1076" transform="rotate(37.8923 -1.87921 38.3321)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter13_f_2002_17158)">
+<ellipse cx="35.6511" cy="29.9069" rx="4.40666" ry="29.1076" transform="rotate(37.8923 35.6511 29.9069)" fill="#7E14FF" style="fill:#7E14FF;fill:color(display-p3 0.4922 0.0767 1.0000);fill-opacity:1;"/>
+</g>
+<g filter="url(#filter14_f_2002_17158)">
+<ellipse cx="38.4178" cy="32.4" rx="5.9715" ry="15.2974" transform="rotate(37.8923 38.4178 32.4)" fill="#47BFFF" style="fill:#47BFFF;fill:color(display-p3 0.2799 0.7480 1.0000);fill-opacity:1;"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2002_17158" x="-19.7697" y="16.1493" width="60.0452" height="41.6535" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.65926" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter1_f_2002_17158" x="-54.613" y="-7.53303" width="90.3397" height="51.4368" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.65926" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter2_f_2002_17158" x="-49.6403" y="2.03032" width="79.3554" height="29.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter3_f_2002_17158" x="-45.0451" y="20.0292" width="79.579" height="29.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter4_f_2002_17158" x="-43.5129" y="21.1781" width="79.579" height="29.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter5_f_2002_17158" x="15.7557" y="-17.9006" width="74.7493" height="58.852" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="7.65926" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter6_f_2002_17158" x="23.5481" y="2.28368" width="61.3773" height="25.3622" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter7_f_2002_17158" x="23.5481" y="2.28368" width="61.3773" height="25.3622" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter8_f_2002_17158" x="-27.6359" y="-22.8531" width="56.0453" height="63.6493" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter9_f_2002_17158" x="20.1155" y="-38.4147" width="54.8139" height="64.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter10_f_2002_17158" x="24.6414" y="-11.3229" width="33.5414" height="35.3129" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter11_f_2002_17158" x="-29.2863" y="6.00905" width="54.8139" height="64.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter12_f_2002_17158" x="-29.2863" y="6.00905" width="54.8139" height="64.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter13_f_2002_17158" x="8.24395" y="-2.41615" width="54.8139" height="64.646" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+<filter id="filter14_f_2002_17158" x="18.7132" y="10.5885" width="39.4091" height="43.6229" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="4.59556" result="effect1_foregroundBlur_2002_17158"/>
+</filter>
+</defs>
+</svg>
diff --git a/docs/public/images/ecosystem/node-modules-inspector.webp b/docs/public/images/ecosystem/node-modules-inspector.webp
new file mode 100644
index 000000000..9924a9cac
Binary files /dev/null and b/docs/public/images/ecosystem/node-modules-inspector.webp differ
diff --git a/docs/public/images/ecosystem/nuxt-devtools.webp b/docs/public/images/ecosystem/nuxt-devtools.webp
new file mode 100644
index 000000000..0a2a660e3
Binary files /dev/null and b/docs/public/images/ecosystem/nuxt-devtools.webp differ
diff --git a/docs/public/images/ecosystem/pinia-colada-devtools.webp b/docs/public/images/ecosystem/pinia-colada-devtools.webp
new file mode 100644
index 000000000..8ac51263c
Binary files /dev/null and b/docs/public/images/ecosystem/pinia-colada-devtools.webp differ
diff --git a/docs/public/images/ecosystem/vite-devtools.webp b/docs/public/images/ecosystem/vite-devtools.webp
new file mode 100644
index 000000000..fb55e7424
Binary files /dev/null and b/docs/public/images/ecosystem/vite-devtools.webp differ
diff --git a/docs/public/images/ecosystem/vite-plugin-inspect.webp b/docs/public/images/ecosystem/vite-plugin-inspect.webp
new file mode 100644
index 000000000..a053d035f
Binary files /dev/null and b/docs/public/images/ecosystem/vite-plugin-inspect.webp differ
diff --git a/docs/vercel.json b/docs/vercel.json
index 55305c45f..f444d5b6d 100644
--- a/docs/vercel.json
+++ b/docs/vercel.json
@@ -9,6 +9,7 @@
     { "source": "/guide/terms", "destination": "/references/terms", "permanent": true },
     { "source": "/guide/when-clauses", "destination": "/references/when-clauses", "permanent": true },
     { "source": "/guide/events", "destination": "/references/events", "permanent": true },
+    { "source": "/guide/built-with", "destination": "/ecosystem", "permanent": true },
     { "source": "/plugins", "destination": "/add-ons", "permanent": true },
     { "source": "/plugins/data-inspector", "destination": "/add-ons/devframes/data-inspector", "permanent": true },
     { "source": "/plugins/inspect", "destination": "/add-ons/devframes/inspect", "permanent": true },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 565fbd6a9..8ad08c512 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -718,6 +718,9 @@ importers:
       '@shikijs/magic-move':
         specifier: catalog:frontend
         version: 4.5.0(react@19.2.8)(shiki@4.5.0)(solid-js@1.9.15)(svelte@5.57.0(@typescript-eslint/types@8.69.0))(vue@3.5.43(typescript@6.0.3))
+      '@vueuse/core':
+        specifier: catalog:frontend
+        version: 14.4.0(vue@3.5.43(typescript@6.0.3))
       comark-docs:
         specifier: catalog:docs
         version: https://codeload.github.com/comarkdown/comark-docs/tar.gz/f97dc864b0aa702d54c600f868589b7a2c185b3a(patch_hash=5f1078be206123f957de74141ae02eaae510555cc7444404bffbfaae8d407e33)(82db2e45faa43624590d83dfe0c71ad0)