Eleventy Plus Vite is an open-source Eleventy (11ty) starter project that integrates Vite as a middleware for the development server and as a post-processor for production builds, giving static sites a modern JavaScript build pipeline. Created by Matthias Ott, the project combines Eleventy v3 with Vite v8 via the eleventy-plugin-vite plugin, so you get live reload in development and Rollup-bundled assets in production.
What is Eleventy Plus Vite?
Eleventy Plus Vite is a clean and fast Eleventy starter project that replaces Eleventy's default asset handling with Vite. It takes an Eleventy site as input, processes styles and scripts through Vite and Rollup, and outputs a static site with optimized, minified assets. The template runs on Node.js and is distributed as a GitHub repository you can generate from or deploy directly to Netlify.
Key Features
Eleventy Plus Vite ships with a performance-oriented set of features that cover the entire asset pipeline, from Sass processing to critical CSS injection.
- Eleventy v3 — Uses Eleventy's latest major version with its built-in development server and live reload.
- Vite v8 integration — Vite runs as middleware in Eleventy's dev server, and the production build is post-processed by Vite with Rollup.
- CSS/Sass pipeline — Includes Sass with an opinionated folder structure, processed through PostCSS with Autoprefixer and cssnano for autoprefixing and minification.
- Critical CSS injection — Generates and inlines critical CSS via rollup-plugin-critical, then loads the main stylesheet asynchronously using Scott Jehl's media attribute swap.
- Web font loading — Implements the critical FOFT with preload strategy to speed up font rendering.
- Fluid typography — Uses Utopia to create fluid type scales that scale smoothly between viewport sizes.
- Dark mode support — Built-in dark mode using the prefers-color-scheme media query and CSS Custom Properties.
- SEO and performance — Ships with an RSS feed, XML sitemap, focus-visible polyfill, and a reported Four Hundos (100/100/100/100) Lighthouse score.
Who is it for?
Eleventy Plus Vite is aimed at developers and teams building static sites who want a pre-configured, high-performance starting point without spending time on tooling setup.
- Eleventy developers — who want to adopt Vite's build tooling without manually wiring up the integration.
- Static site builders — who need a performance-focused starting point with critical CSS, font loading, and SEO basics already configured.
- Front-end developers — who prefer a structured Sass architecture or want to experiment with plain CSS and PostCSS nesting.
- Netlify users — who can deploy the template in one click using the Netlify button in the README.
What can you do with Eleventy Plus Vite?
This starter provides a solid foundation for quickly building a fast static website.
- Launch a new blog or content site — the starter includes RSS and sitemap generation, plus a fast-loading asset pipeline.
- Prototype a static site — use the npm start command to run Eleventy's dev server with Vite middleware and live reload.
- Experiment with CSS workflows — switch between the default Sass structure and plain CSS with PostCSS Nesting.
- Deploy to Netlify — fork the repository and deploy via the one-click button, or connect it to your own Netlify site.
How does Eleventy Plus Vite work?
After generating a repository from the template and running npm install, you start the development server with npm start, which invokes Eleventy with Vite as middleware. For production, npm run build runs Eleventy and then Vite post-processes the output. The README also lists npx @11ty/eleventy --serve and npx @11ty/eleventy as alternative commands.
Pros and cons
The template's strengths are its performance optimizations and modern build pipeline, while its current limitations are documented in the project roadmap.
Pros:
- Performance-first setup with critical CSS injection and asynchronous CSS loading.
- Modern build pipeline with Vite and Rollup.
- Includes RSS, sitemap, and a focus-visible polyfill out of the box.
- One-click Netlify deployment.
Cons/current limitations:
- The roadmap indicates a dark mode toggle button is not yet implemented; dark mode is automatic based on the user's system preference.
- More base styles and a demo page are planned but not included yet.
- The default Sass folder structure is opinionated, though you can replace it or use plain CSS instead.
FAQ
Is Eleventy Plus Vite free?
Yes, it is an open-source starter project on GitHub. You can generate a new repository, clone it, and use it without any cost. There are no paid tiers or licensing fees mentioned in the README.
What Eleventy version does it use?
It uses Eleventy v3, the latest major version at the time of writing. The project also uses Eleventy's built-in development server, which provides live reload during local development.
Does it support both Sass and plain CSS?
Yes. By default it uses Sass with a custom folder structure, but you can write plain CSS and use the PostCSS Nesting plugin for native CSS nesting. PostCSS with Autoprefixer and cssnano processes both approaches.
Does it include an RSS feed and sitemap?
Yes, the starter includes both an RSS feed and an XML sitemap, giving you basic SEO and content syndication features without additional plugins.
How do I deploy it to Netlify?
The README includes a "Deploy to Netlify" button that generates a new Netlify site from the repository with one click. Alternatively, you can connect your own GitHub repository to Netlify and use the standard build command.
