docs: rebrand as devtools framework with dedicated Rolldown section (#250)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

docs/.vitepress/config.ts

@@ -32,7 +32,7 @@ const SocialLinks = [
 // https://vitepress.dev/reference/site-config
 export default extendConfig(withMermaid(defineConfig({
   title: 'Vite DevTools',
-  description: 'Visualize and analyze your Vite build process with powerful developer tools. Extensible architecture for building custom DevTools integrations.',
+  description: 'An extensible devtools framework for the Vite ecosystem. Build, compose, and integrate developer tools with a unified foundation.',
   head: [
     ['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
   ],
@@ -42,6 +42,12 @@ export default extendConfig(withMermaid(defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Guide', link: '/guide/' },
+      {
+        text: 'Builtin DevTools',
+        items: [
+          { text: 'DevTools for Rolldown', link: '/rolldown/' },
+        ],
+      },
       {
         text: 'DevTools Kit',
         items: DevToolsKitNav,
@@ -60,7 +66,13 @@ export default extendConfig(withMermaid(defineConfig({
         text: 'Guide',
         items: [
           { text: 'Getting Started', link: '/guide/' },
-          { text: 'Features', link: '/guide/features/' },
+        ],
+      },
+      {
+        text: 'DevTools for Rolldown',
+        items: [
+          { text: 'Introduction', link: '/rolldown/' },
+          { text: 'Features', link: '/rolldown/features' },
         ],
       },
       {
@@ -98,7 +110,7 @@ export default extendConfig(withMermaid(defineConfig({
           title: 'Vite DevTools',
           items: [
             { text: 'Guide', link: '/guide/' },
-            { text: 'Features', link: '/guide/features' },
+            { text: 'DevTools for Rolldown', link: '/rolldown/' },
             { text: 'Release Notes', link: 'https://github.com/vitejs/devtools/releases' },
             { text: 'Contributing', link: 'https://github.com/vitejs/devtools/blob/main/CONTRIBUTING.md' },
           ],
@@ -107,6 +119,12 @@ export default extendConfig(withMermaid(defineConfig({
           title: 'DevTools Kit',
           items: DevToolsKitNav,
         },
+        {
+          title: 'Builtin DevTools',
+          items: [
+            { text: 'DevTools for Rolldown', link: '/rolldown/' },
+          ],
+        },
       ],
       social: SocialLinks,
     },

docs/.vitepress/theme/Home.vue

@@ -11,16 +11,16 @@ import Spacer from '@components/shared/Spacer.vue'
 
   <HeadingSection
     heading="Inspect, Analyze, Extend"
-    subheading="Vite DevTools not only provides built-in features, but also a extensible architecture for custom integrations."
+    subheading="Vite DevTools provides an extensible framework with built-in integrations like DevTools for Rolldown, plus an open architecture for custom tools."
   />
 
   <FeatureGrid />
 
   <Spacer />
 
   <Footer
-    heading="Understand your Vite App Better"
-    subheading="Visually inspect modules, plugins, chunks, assets, packages..." button-text="Get Started"
+    heading="Understand Your Vite Ecosystem Better"
+    subheading="Inspect builds, analyze performance, extend with custom integrations..." button-text="Get Started"
     button-link="/guide/"
   />
 </template>

docs/guide/index.md

@@ -4,21 +4,33 @@ outline: deep
 
 # Getting Started
 
-> [!WARNING]
-> Vite DevTools currently only supports build mode of Vite 8+.
-> Dev mode and Vite versions under 8 are not supported yet.
-
 ## What is Vite DevTools?
 
-Vite DevTools is a comprehensive set of developer tools for visualizing and analyzing your Vite build process. It provides deep insights into your build pipeline, module dependencies, and build metadata, helping you understand and optimize your Vite applications.
+Vite DevTools is a devtools framework for the Vite ecosystem. Instead of each tool building its own devtools from scratch, Vite DevTools provides shared infrastructure — a unified dock system, type-safe RPC, shared state management, and flexible UI hosting — so that different tools compose together seamlessly, users get a consistent experience, and tool authors can focus on what makes their integration unique.
+
+Any Vite plugin can hook into Vite DevTools with just a few lines of code, instantly gaining access to the full platform: panels, action buttons, server-client communication, and more.
+
+### Built-in Integrations
+
+- **[DevTools for Rolldown](/rolldown/)** — Build analysis, module graphs, chunks, assets, plugins, and performance insights
+- **DevTools for Vite** — Vite-specific developer tools *(in development)*
+
+### Ecosystem
+
+Vite DevTools Kit is already powering a growing ecosystem of integrations:
+
+- **[Nuxt DevTools v4](https://github.com/nuxt/devtools)** — Built on top of Vite DevTools Kit
+- **[Oxc Inspector](https://github.com/yuyinws/oxc-inspector)** — Integrates via DevTools Kit with custom RPC functions
+- **[UnoCSS Inspector](https://github.com/unocss/unocss)** — Dock integration for UnoCSS
+- **[vite-plugin-vue-tracer](https://github.com/antfu/vite-plugin-vue-tracer)** — Action button that triggers a DOM inspector
 
 ### Key Features
 
-- **🔍 Build Analysis**: Visualize module graphs, dependencies, and build metadata
-- **📊 Performance Insights**: Understand build performance and bottlenecks
-- **🧩 Extensible**: Build custom DevTools integrations with the DevTools Kit
+- **🧩 Extensible Framework**: Any Vite plugin can extend the devtools with a simple hook
+- **🔍 [DevTools for Rolldown](/rolldown/)**: Built-in build analysis with module graphs, dependencies, and build metadata
 - **🎨 Unified Interface**: All DevTools integrations appear in a consistent dock interface
-- **⚡ Type-Safe**: Full TypeScript support with type-safe RPC communication
+- **🔌 Type-Safe RPC**: Built-in bidirectional communication between server and client
+- **⚡ Shared State**: Automatic synchronization of data between server and client
 
 ## Installation
 
@@ -129,26 +141,28 @@ When `build.withApp` is enabled, running `pnpm build` will automatically generat
 
 Now that you have Vite DevTools set up, you can:
 
-- **Explore the built-in tools**: Check out the various panels and visualizations available in the DevTools interface
-- **Build custom integrations**: Learn how to extend Vite DevTools with your own tools using the [DevTools Kit](/kit/)
+- **Explore the built-in tools**: Check out the [DevTools for Rolldown](/rolldown/) panels and visualizations
+- **Build custom integrations**: Learn how to extend the devtools with your own tools using the [Vite DevTools Kit](/kit/)
 - **Contribute**: Help improve Vite DevTools by checking out our [contributing guide](https://github.com/antfu/contribute)
 
 ## Current Limitations
 
 > [!NOTE]
-> Vite DevTools is currently in active development with the following limitations:
+> Vite DevTools is currently in active development.
 
-- **Build mode only**: Currently works with Vite-Rolldown's build mode
-- **Dev mode**: Not yet supported (planned for future releases)
-- **Vite Version**: Requires Vite 8 or higher versions for now
+- **[DevTools for Rolldown](/rolldown/)**: Currently supports build mode only, requires Vite 8+
+- **Dev mode**: Dev mode support is planned for future releases
 
 ## Architecture Overview
 
 Vite DevTools consists of several core packages:
 
-- **`@vitejs/devtools`**: The main entry point and CLI
-- **`@vitejs/devtools-kit`**: Utilities and types for building custom integrations
-- **`@vitejs/devtools-rolldown`**: Built-in UI panel for Rolldown
+- **`@vitejs/devtools`**: The core framework, CLI, and runtime hosts
+- **`@vitejs/devtools-kit`**: Vite DevTools Kit — utilities and types for building custom integrations
+- **`@vitejs/devtools-rolldown`**: [DevTools for Rolldown](/rolldown/) — built-in build analysis UI
+- **`@vitejs/devtools-vite`**: DevTools for Vite *(in development)*
 - **`@vitejs/devtools-rpc`**: RPC layer for server-client communication
 
-For more details on extending Vite DevTools, see the [DevTools Kit documentation](/kit/).
+Third-party integrations like [Oxc Inspector](https://github.com/yuyinws/oxc-inspector) can also integrate via the DevTools Kit plugin API.
+
+For more details on extending the devtools, see the [Vite DevTools Kit documentation](/kit/).

docs/index.md

@@ -4,8 +4,8 @@ theme: dark
 
 hero:
   name: Vite DevTools
-  text: DevTools for Vite.
-  tagline: Visualize and analyze your Vite build process with powerful developer tools
+  text: DevTools Framework for the Vite Ecosystem.
+  tagline: An extensible foundation for building and composing developer tools across the Vite ecosystem
   actions:
     - theme: brand
       text: Get Started
@@ -19,11 +19,11 @@ hero:
 
 features:
   - icon: 🔍
-    title: Build Analysis
-    details: Deep insights into your Vite-Rolldown build process. Visualize module graphs, dependencies, and build metadata to understand what's happening under the hood.
+    title: DevTools for Rolldown
+    details: Built-in integration for Rolldown build analysis. Visualize module graphs, dependencies, chunks, assets, and build metadata.
   - icon: 🧩
     title: Extensible Architecture
-    details: Build custom DevTools integrations with the DevTools Kit. Extend any Vite plugin with a simple devtools hook to add your own visualizations and tools.
+    details: Build custom DevTools integrations with the DevTools Kit. Any Vite plugin can extend the devtools with a simple hook to add visualizations, inspectors, and tools.
   - icon: 🚀
     title: Unified Dock System
     details: A familiar dock interface (like macOS Dock) where all DevTools integrations appear together. Switch between tools seamlessly in a consistent UI.

docs/kit/examples.md

@@ -4,9 +4,11 @@ outline: deep
 
 # Examples
 
+## Demo Examples
+
 A collection of example plugins built with `@vitejs/devtools-kit` that demonstrate different features and patterns.
 
-## A11y Checker
+### A11y Checker
 
 An accessibility auditing plugin powered by [axe-core](https://github.com/dequelabs/axe-core).
 
@@ -19,7 +21,7 @@ An accessibility auditing plugin powered by [axe-core](https://github.com/dequel
 
 **Source:** [`examples/plugin-a11y-checker`](https://github.com/vitejs/devtools/tree/main/examples/plugin-a11y-checker)
 
-## File Explorer
+### File Explorer
 
 A file explorer dock that lists, reads, and writes files through RPC.
 
@@ -33,7 +35,7 @@ A file explorer dock that lists, reads, and writes files through RPC.
 
 **Source:** [`examples/plugin-file-explorer`](https://github.com/vitejs/devtools/tree/main/examples/plugin-file-explorer)
 
-## Git UI
+### Git UI
 
 An interactive Git panel built entirely with server-side JSON specs — no client code at all.
 
@@ -47,3 +49,13 @@ An interactive Git panel built entirely with server-side JSON specs — no clien
 - Updating dock badge text reactively
 
 **Source:** [`examples/plugin-git-ui`](https://github.com/vitejs/devtools/tree/main/examples/plugin-git-ui)
+
+## Real-World Examples
+
+The docs might not cover all the details—please help us improve them by submitting PRs. In the meantime, refer to these existing DevTools integrations:
+
+- **[UnoCSS Inspector](https://github.com/unocss/unocss/blob/25c0dd737132dc20b257c276ee2bc3ccc05e2974/packages-integrations/inspector/src/index.ts#L140-L150)** - A simple iframe-based dock entry
+- **[vite-plugin-vue-tracer](https://github.com/antfu/vite-plugin-vue-tracer)** - An action button that triggers a DOM inspector
+  - [Plugin hook](https://github.com/antfu/vite-plugin-vue-tracer/blob/9f86fe723543405eea5d30588fe783796193bfd8/src/plugin.ts#L139-L157)
+  - [Client script](https://github.com/antfu/vite-plugin-vue-tracer/blob/main/src/client/vite-devtools.ts)
+- **[Oxc Inspector](https://github.com/yuyinws/oxc-inspector/blob/main/src/vite.ts)** - An iframe-based dock entry with custom RPC functions

docs/kit/index.md

@@ -100,14 +100,4 @@ If you're building a Vite plugin and want to add DevTools capabilities, or if yo
 4. **[Shared State](./shared-state)** - Share data between server and client with automatic synchronization
 
 > [!TIP] Help Us Improve
-> If you are building something on top of Vite DevTools, we invite you to label your repository with `vite-devtools` on GitHub to help us track usage and improve the project. Thank you!
-
-## Real-World Examples
-
-The docs might not cover all the details—please help us improve them by submitting PRs. In the meantime, refer to these existing DevTools integrations:
-
-- **[UnoCSS Inspector](https://github.com/unocss/unocss/blob/25c0dd737132dc20b257c276ee2bc3ccc05e2974/packages-integrations/inspector/src/index.ts#L140-L150)** - A simple iframe-based dock entry
-- **[vite-plugin-vue-tracer](https://github.com/antfu/vite-plugin-vue-tracer)** - An action button that triggers a DOM inspector
-  - [Plugin hook](https://github.com/antfu/vite-plugin-vue-tracer/blob/9f86fe723543405eea5d30588fe783796193bfd8/src/plugin.ts#L139-L157)
-  - [Client script](https://github.com/antfu/vite-plugin-vue-tracer/blob/main/src/client/vite-devtools.ts)
-- **[Oxc Inspector](https://github.com/yuyinws/oxc-inspector/blob/main/src/vite.ts)** - An iframe-based dock entry with custom RPC functions
+> If you are building something on top of Vite DevTools Kit, we invite you to label your repository with `vite-devtools` on GitHub to help us track usage and improve the project. Thank you!

docs/guide/features.md docs/rolldown/features.mddocs/guide/features.md renamed to docs/rolldown/features.md

@@ -2,9 +2,9 @@
 outline: deep
 ---
 
-# Features
+# DevTools for Rolldown
 
-Discover all the features Vite Devtools offers.
+DevTools for Rolldown provides comprehensive build analysis for Vite projects using Rolldown. Explore modules, chunks, assets, plugins, and more.
 
 ## Overview
 

docs/rolldown/index.md

@@ -0,0 +1,27 @@
+---
+outline: deep
+---
+
+# DevTools for Rolldown
+
+DevTools for Rolldown (`@vitejs/devtools-rolldown`) is a built-in integration that provides comprehensive build analysis for Vite projects using Rolldown. It comes included with Vite DevTools out of the box.
+
+> [!WARNING]
+> DevTools for Rolldown currently only supports build mode of Vite 8+.
+> Dev mode and Vite versions under 8 are not supported yet.
+
+## What It Does
+
+DevTools for Rolldown gives you deep insights into your Rolldown-powered build process:
+
+- **Module Analysis** — Visualize module graphs, dependencies, and transformation flows
+- **Plugin Insights** — Inspect plugin hook costs and processed modules
+- **Chunk & Asset Analysis** — Explore build output with list, graph, treemap, and flamegraph views
+- **Package Detection** — Detect duplicated packages and analyze dependency sizes
+- **Session Compare** — Compare bundle changes across builds
+
+See the [Features](/rolldown/features) page for a detailed walkthrough with screenshots.
+
+## Getting Started
+
+DevTools for Rolldown is automatically available when you set up Vite DevTools. Follow the [Getting Started](/guide/) guide to install and configure Vite DevTools, then the Rolldown build analysis panels will appear in the dock.