Skip to main content
Back to Tools
Web Tools

Vite Config Generator

Visual vite.config.ts builder with framework presets, plugin selection, server/build/resolve options, and live output. Runs entirely in your browser — your data never leaves your machine.

vite config generator build-tool javascript typescript

Published May 29, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Configure your Vite project visually and get a ready-to-use vite.config.ts file. Select a framework preset, add plugins, configure server and build options, set up path aliases and proxy rules — all with instant live output.

Features

  • 6 presets: Vanilla, React + TS, Vue + TS, Svelte, React + Tailwind, Library mode
  • 8 plugins: React, Vue, Svelte, Tailwind CSS, Legacy, PWA, SVG Loader, Inspect
  • Server options: custom port, host exposure, auto-open, proxy rules with changeOrigin and rewrite
  • Build options: output directory, sourcemaps, minification (esbuild/terser/disabled), build target, library mode
  • Resolve aliases: visual path alias editor with add/remove
  • CSS options: CSS Modules, Sass/SCSS and Less preprocessor config
  • Define constants: compile-time string replacements
  • Env prefix and base path: configurable environment variable prefix and deployment base
  • Validation: real-time validation of port range, alias patterns, proxy targets
  • Private: runs entirely in the browser — no data transmitted

Use Cases

  • Bootstrapping a new Vite project with the right configuration
  • Exploring Vite options without reading documentation
  • Sharing Vite config snippets with team members
  • Migrating from webpack or other bundlers to Vite