Pick a framework preset and options → a commented Vite config plus npm create vite@latest / plugin install commands. Astro is special — it wraps Vite internally.

About this tool

Vite is the dev server and bundler behind React, Vue, Svelte, and many other stacks. A good vite.config.ts sets plugins, path aliases, dev proxy rules, and build output — but the docs scatter options across many pages.

Pick a framework preset and toggles here to get a commented starting config plus npm create vite@latest and plugin install commands. Optional blocks cover @ path aliases, an /api proxy, Vitest, vendor chunk splitting, and import.meta.env notes.

Astro projects configure Vite through astro.config.mjs, not a standalone vite.config.ts — select the Astro preset for that reminder.

Related tools

ESLint Flat Config Generator

Answer a few questions, get a commented eslint.config.js for JS or TS, React, Vue, or Astro — plus the exact install command.

Keyboard Event Codes

Press any key and see event.key, event.code, and modifiers live — with a reference table and copy-ready JS snippets.

JSONPath Tester

Test JSONPath expressions against your JSON — wildcards, recursive descent, slices, and filters, with matched paths shown.

TypeScript Utility Types Explorer

Partial, Pick, Omit, Record, ReturnType and friends — before/after examples, when to use each, and how they work.

JSON Schema Validator

Validate a JSON document against a JSON Schema in your browser — every error with its path, keyword, and message.

JSON to Zod Schema

Paste JSON, get a Zod v4 schema — nested objects, unions, nullable fields, optional email and datetime detection.

Vite config generator

Scaffold

About this tool

Read more

Free books, courses, and software