Docs Islands for VitePress

Cross-framework Islands Architecture for VitePress

⚛️

React in Markdown

Import and use React components directly in VitePress Markdown files with zero configuration. Full JSX/TSX support with complete TypeScript typing.

🎯

Flexible Rendering Strategies

Currently supports ssr:only (default, static), client:load (immediate hydration), client:visible (hydrate on visible), client:only (client-only) — extensible for additional strategies.

⚡

SPA Navigation Optimization

spa:sync-render directive designed specifically for VitePress SPA mode. Synchronizes with Vue rendering cycle to inject pre-rendered template, eliminating component flicker during route transitions and optimizing CLS metrics.

🚀

Static-First, Progressive Enhancement

Built on VitePress SSG architecture, pre-renders component templates at build time. Selective client-side hydration only where interaction is needed, optimizing first-paint performance.

🧩

Full VitePress Ecosystem Compatibility

Seamless integration with VitePress themes and plugins without breaking existing functionality. Supports MPA mode and works with any VitePress project.

🛠️

Developer Experience First

Full HMR support with instant hot updates for React components and Markdown files, preserving component internal state. Consistent dev/prod rendering behavior prevents production surprises.