A ready config for Vite, Next.js or Astro in 30 seconds
You start a new project. You know you want TypeScript, Tailwind, the **@/* alias, maybe a dev proxy to your backend, maybe standalone output** for Docker. The "official" docs scatter all of that across six pages, and the snippets always assume some other snippet you have not read yet. So you end up copying half a config from one tutorial, half from another, and spending the next hour debugging why nothing works.
This builder gives you the one config file you actually need: pre-wired, commented, copy-paste-ready. Pick the framework (Vite, Next.js or Astro), flip the toggles for the features you want, and the generated config updates live on the right. Copy it into your project root, run npm install for the listed plugins, and you are ready to write code.
No file is ever sent anywhere. The whole thing runs in your browser, including the code generation. The output is a clean, modern config that matches what the framework teams themselves recommend in 2025.
How to use it
- Pick a framework at the top: Vite for a fast SPA, Next.js for a full-stack React app, Astro for a content-heavy static site.
- Flip the option toggles on the left. Each toggle changes the generated config on the right in real time, including the inline comments so you understand what each section does.
- For Vite, pick a flavor (React, Vue, Svelte, SolidJS, Vanilla). For Next, pick a router (App or Pages) and output mode (default, standalone, static export). For Astro, pick the integrations you want (React, Vue, Svelte).
- Need a dev proxy for Vite? Turn on the Proxy switch and type the path and target. Need to whitelist image domains in Next? Type one hostname per line in the textarea.
- When the preview looks right, click Copy at the top of the preview pane and paste it as vite.config.ts / next.config.ts / astro.config.mjs in your project root.
- Install the plugins the config imports (the names are in the `import` lines at the top). Most are official `@vitejs/plugin-react`, `@astrojs/react`, or `next-intl` style packages.
- You can also hit Reset to go back to a sensible default for the active framework, useful when you are experimenting.
When this is useful
Six common moments when the builder saves real minutes:
- Starting a new project from scratch. You ran `npm create vite@latest` and want to add Tailwind, an alias, and a proxy without reading three different blog posts. Pick Vite, flip the toggles, paste over the generated config. Done in 30 seconds.
- Migrating from Pages Router to App Router. Next.js 16 ships App Router as default. The builder shows the modern config with App Router, next-intl, typedRoutes, and standalone output all set up the way the Next team recommends in 2025. Copy and adapt.
- Setting up Docker for a Next.js app. You need output: 'standalone' so the Docker image is small, but you also want typedRoutes and image domains. The builder writes the whole thing in one block instead of you guessing the field names.
- Switching from create-react-app to Vite. CRA is unmaintained. The builder gives you a Vite + React + TS + Tailwind + @/* config that drops in cleanly, no Webpack config hell, no `craco` workarounds.
- Adding a dev API proxy. Your frontend is on localhost:5173, your Go/Python/Rust backend is on localhost:8080. You need /api to forward to the backend with the right CORS bypass. The builder writes the proxy block exactly right, including `changeOrigin` and `secure: false`.
- Spinning up a content site with Astro. You want static output, React islands for interactive bits, Tailwind, and an i18n routing setup. Astro's docs have all of this, but spread across five guides. The builder collapses it into one file.