Preact preset for the vite bundler

Downloads in past


16372.4.0a month ago2 years agoMinified + gzip package size for @preact/preset-vite in KB


An all in one preset for writing Preact apps with the vite bundler.


First intall the preset package from npm:
npm install --save-dev @preact/preset-vite
# or
yarn add -D @preact/preset-vite

Enhance your vite config with the Preact preset plugin in your vite.config.ts or vite.config.js:
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";

export default defineConfig({
  plugins: [preact()]


Options can be passed to our preset plugin via the first argument:
export default defineConfig({
  plugins: [
    preact({ devtoolsInProd: true })

Available options

| Option | Type | Default | Description | |---|---|---|---| | devtoolsInProd | boolean | false | Inject devtools bridge in production bundle instead of only in development mode |

Babel configuration

The babel option lets you add plugins, presets, and other configuration to the Babel transformation performed on each JSX/TSX file.
  babel: {
    presets: [...],
    // Your plugins run before any built-in transform (eg: Fast Refresh)
    plugins: [...],
    // Use .babelrc files
    babelrc: true,
    // Use babel.config.js files
    configFile: true,


MIT, see the license file.