Eleventy Base Webc is a minimalist, officially maintained Eleventy starter project for experimenting with WebC single-file components and the Eleventy v3 site generator.
What is eleventy-base-webc?
Eleventy Base Webc is a bare-bones starter project created by the Eleventy team that provides a minimal preconfigured setup for building sites with WebC components on Eleventy v3. It takes WebC component files and Markdown content as input and produces a static HTML site. The project runs on Node.js and uses npm scripts for building and serving. It is hosted on GitHub under the 11ty organization and follows the Eleventy v3 canary release.
Key Features
- Eleventy WebC plugin preconfigured — Enables single-file web components authored as .webc files, compiled by Eleventy during the build.
<is-land>component included — The official partial hydration WebC component is ready to use for progressive enhancement.- Custom components folder — Add your own .webc files to the _components directory, which is automatically processed by the plugin.
- JavaScript front matter — Uses the new js front matter type for arbitrary JavaScript front matter, enabling computed data at build time.
- Streamlined layout — The base WebC layout at _includes/layouts/base.webc bundles critical CSS and JS for performance.
- npm script workflow — Clone, install, and run npm start to serve the site locally on port 8080.
Who is it for?
- Eleventy developers experimenting with WebC — They can use this starter to quickly test how WebC components behave in an Eleventy v3 build.
- Builders creating demos or proofs-of-concept — The minimal structure lets them spin up a small prototype without configuration overhead.
- Developers learning Eleventy v3 features — They can inspect the preconfigured WebC plugin and JavaScript front matter to understand the new APIs.
What can you do with eleventy-base-webc?
- Test WebC components: Drop .webc files into _components and reference them in pages to see them compiled into the static output.
- Prototype a site quickly: Clone the repo, edit content/index.webc, and see changes refreshed in the browser via the dev server.
- Experiment with partial hydration: Use the included
<is-land>component to lazy-load or hydrate parts of the page.
How does eleventy-base-webc work?
The starter is set up so you clone or degit the repository, run npm install to fetch dependencies, and then start the development server with npm start. The root content/index.webc is the home page; edits appear at http://localhost:8080. For deployment, the repo includes demos on Cloudflare Pages and Netlify.
Pros and cons
- Pro: Official Eleventy project — maintained by the 11ty team, so it aligns with Eleventy's direction.
- Pro: Minimal dependencies — only what is needed for WebC and the dev server.
- Con: Deliberately bare-bones — it is designed for demos and experiments, not as a starting point for full-featured production sites.
FAQ
Is eleventy-base-webc free to use?
Yes, it is an open-source starter project hosted on GitHub under the 11ty organization. No payment or account is required to clone or use it.
What front matter formats does it support?
The starter uses Eleventy v3's new JavaScript front matter type, allowing arbitrary JavaScript to compute data at build time. Markdown content files remain supported.
Where do I put custom WebC components?
Place .webc files in the _components folder, which is preconfigured for the Eleventy WebC plugin. They become available for use in your layouts and pages.
Does it include a layout?
Yes, a simple WebC layout file at _includes/layouts/base.webc provides streamlined critical CSS and JS bundles so you can start building pages immediately.
