vitepad creates a temporary Vite playground for one entry file. Use it to preview a component, test a small main entry, or compare the same file across different framework versions without creating a project or changing the current project's dependencies.

UnoCSS is enabled by default. Framework packages are resolved to exact npm versions, downloaded on demand, and cached under ~/.cache/vitepad/frameworks. No ESLint, Biome, Husky, or formatting pipeline is included.

Features

Single-file Vite runner

• Run App.tsx, App.vue, App.svelte, main.ts, demo.js, and similar files directly
• .js, .mjs, .cjs, .ts, .mts, and .cts are treated as main entry files
• .jsx, .tsx, .vue, and .svelte are treated as App component files and mounted into #root
• Extra Vite config can be merged with --config

Frameworks

• Built-in component wrappers for React, Preact, Solid, Vue, and Svelte
• JSX/TSX framework inference from imports, with React as the fallback
• Explicit framework selection with --framework react, --framework vue, etc.
• Version specs are supported, such as react@18, vue@3.4, svelte@5, or react@latest

Version testing

• Test the same component against different framework versions without touching package.json
• latest and semver ranges are resolved to exact versions before caching
• Cache keys use exact versions, for example react-19.2.6

Styling and environment

• UnoCSS is available by default through unocss/vite with presetUno
• Framework dependencies are exposed through the temporary Vite workspace
• Missing framework packages are linked into local node_modules for editor type resolution
• Existing local packages are left untouched, and package.json is not modified
• No linting or formatting toolchain is installed

Install

npm install -g @buding0904/vitepad

pnpm add -g @buding0904/vitepad

yarn global add @buding0904/vitepad

Quick Start

vitepad ./App.tsx
vitepad ./App.vue
vitepad ./App.svelte
vitepad ./main.ts

No install needed:

npx @buding0904/vitepad ./App.tsx
pnpm dlx @buding0904/vitepad ./App.vue

Framework Version Testing

Run the same entry with different framework versions:

vitepad ./App.tsx --framework react@18
vitepad ./App.tsx --framework react@19
vitepad ./App.tsx --framework react@latest

vitepad ./App.vue --framework vue@3.4
vitepad ./App.vue --framework vue@latest

vitepad ./App.svelte --framework svelte@4
vitepad ./App.svelte --framework svelte@5

CLI

vitepad <entry> [options]

Options

Examples:

vitepad ./App.tsx --framework react@18 --port 3000
vitepad ./App.vue --host 127.0.0.1
vitepad ./App.svelte --config ./vite.extra.js
vitepad ./App.tsx --framework react@latest

Editor Types

VSCode's TypeScript server resolves imports and JSX types from the opened file's directory tree, not from vitepad's temporary Vite workspace. To keep editor diagnostics aligned with the file you run, vitepad looks from the entry file directory up through its parent directories for framework packages before linking anything. If a package cannot be resolved from that directory tree, vitepad creates a lightweight symlink inside the entry file directory's node_modules.

For React, vitepad links react, react-dom, @types/react, and @types/react-dom when they are missing. Existing packages are left untouched, so a project that already has React installed keeps using its local version for editor types. Runtime dependencies still come from vitepad's cache, and vitepad does not write to package.json.

If multiple vitepad processes run React entries in the same directory with different React versions, runtime behavior is still isolated per process. Editor links are shared by that directory, so whichever version is linked first is the version VSCode sees; later runs keep existing local packages instead of replacing them.

Entry Rules

For main entry files, the file is responsible for mounting itself. For component entry files, vitepad creates the framework-specific mount code.

Cache

Framework versions are resolved before installation:

vitepad ./App.tsx --framework react
# react@latest -> react@19.2.6

Framework caches are stored in:

~/.cache/vitepad/frameworks

Example cache directory:

~/.cache/vitepad/frameworks/react-19.2.6

If a framework version is not cached, vitepad downloads it and prints install progress. The user's package.json is left untouched. Missing framework packages may be symlinked into local node_modules so editors can resolve imports and JSX types.

Local Development

pnpm install
pnpm run build
pnpm run typecheck
pnpm run smoke

pnpm run smoke starts temporary Vite servers for main, React, Preact, Solid, Vue, and Svelte entries. It downloads framework caches on first run.

To test the CLI globally before publishing:

pnpm run build
pnpm link --global

Then run it from another project:

cd /path/to/project
vitepad ./src/App.tsx

Uninstall the linked global command:

pnpm remove --global @buding0904/vitepad

License

MIT