vite-plugin-livedocs-core

A zero-config, in-context component inspector for Vite and React. LiveDocs automatically reads your TypeScript AST and hooks up a real-time, in-browser property mutator using a Shadow DOM UI.

Installation

npm i -D vite-plugin-livedocs-core

Quick Start

Add the plugin to your `vite.config.ts` (or `.js`). Note: `liveDocsPlugin` should run before other React transformers.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import liveDocsPlugin from 'vite-plugin-livedocs-core';

export default defineConfig({
  plugins: [
    liveDocsPlugin(),
    react()
  ],
});

That's it!

1. Run your dev server (`npm run dev`).
2. Open your browser.
3. Click the floating ✨ LiveDocs button in the bottom right corner.
4. Use the Inspect 🔍 tool to click any React component on your screen and edit its props in real-time!

Features

• Zero Config: No manual story files or decorators needed.
• Component Inspector: Hover and click components directly on the screen to inspect them.
• Real-time Mutation: Edit props in the LiveDocs sidebar and watch your components instantly re-render without reloading the page.
• CSS Isolation: The LiveDocs UI renders inside a Shadow DOM, preventing CSS conflicts with your host application.