Vite Config Generator
Build vite.config.ts online for free with React, Vue or Svelte presets, dev-server port and proxy, @ alias, sourcemaps and minify options - copy-paste TypeScript, entirely client-side.
Loading tool...
What is Vite Config Generator?
The Vite Config Generator composes a ready-to-use vite.config.ts in your browser: pick React, Vue or Svelte for the matching official plugin, toggle the /api dev-server proxy toward your backend, enable the @ to /src alias, and choose sourcemap and minify behavior - all output live as copy-paste TypeScript.
Key Benefits
- Skip boilerplate when starting a new Vite project
- Framework presets load the correct official plugins
- Proxy API calls in development without CORS errors
- Live TypeScript output with copy and download
- Private and instant - everything runs in the browser
Common Use Cases
- •Starting a new React, Vue or Svelte project quickly
- •Standardizing Vite configs across a team
- •Wiring a development proxy to a local backend
- •Setting path aliases for cleaner imports
How to Generate a Vite Config
- Pick the framework: Choose React, Vue or Svelte to load the matching official plugin.
- Tune the dev server: Set the port, enable the /api proxy toward your backend, and map the @ alias to /src.
- Review the output: The TypeScript config updates live with plugins, proxy and build options.
- Copy into your project: Copy or download vite.config.ts and place it at your project root.
Key Features
- React, Vue and Svelte plugin presets
- Dev-server port selection with /api proxy support
- Path alias configuration for @ imports
- Sourcemap and minify build options
- Live TypeScript output with copy and download
- No upload, no account - fully client-side