11ty Web Component Generator

11ty Web Component Generator is a boilerplate-style starter for Eleventy (11ty) that composes custom elements from Nunjucks templates, separate script files, and CSS, then outputs a single JavaScript module per component.

What is the 11ty Web Component Generator?

The 11ty Web Component Generator is an Eleventy-based starter template that builds web components using the static site generator's include and template system. It takes a component template file in src/components/ and per-component script.js and style.css files inside _includes/components/ as input, and produces a single .js file per component in public/components/. The project is authored by Stephanie Eckles (5t3ph), who also created the 11ty Netlify Jumpstart and the egghead course 'Learn to build an 11ty site in 20 mins'.

Key Features

• Eleventy-powered generation — Uses Eleventy's Nunjucks templates and _includes mechanism to composite the final component JavaScript rather than a separate build tool.
• Kebab-case file convention — Component template files in src/components/ must use kebab-case names, which determine the generated custom element and output filename.
• Separated script and style — Each component folder inside _includes/components/ holds script.js and style.css; the shared component.njk template injects their contents into the output.
• ES module output — Final components are written to public/components/ and are consumed with <script type='module'> and a matching custom tag.
• Browsersync hot-reload — Running npm start starts Eleventy locally with Browsersync for live reload during development.
• Production build script — npm run build runs Eleventy alone to generate a static production output suitable for Netlify or similar hosts.
• Demo and resources — The repository links to a live Hello World component demo and lists tutorials for Shadow DOM and custom elements.

Who is it for?

• Eleventy developers who want to author web components without adding a separate bundler or compiler.
• Web component beginners who prefer a clear per-component structure and can see generated results in a static site.
• Static site maintainers who need to generate small, dependency-free custom elements as plain ES modules.
• Component library authors who want a consistent template for producing multiple custom elements with the same file conventions.

What can you do with the 11ty Web Component Generator?

• Create reusable custom elements — Define a component in a Nunjucks file, add its script and CSS, and generate a portable JS module.
• Prototype components in a local static site — Use npm start to iterate with live reload and test components on pages in the same project.
• Package components for other projects — Copy the output .js file from public/components/ into any site and load it as an ES module.

How does the 11ty Web Component Generator work?

First, create a kebab-case component template in src/components/. Then add a matching folder in _includes/components/ containing script.js and style.css. Eleventy processes the Nunjucks template, which includes the script and style contents via component.njk, and writes the assembled component to public/components/. Pages in src declare the component through frontmatter, and the page.njk template links the generated script.

FAQ

Is the 11ty Web Component Generator free?

Yes, this is an open-source boilerplate project on GitHub, and the demo is hosted on Netlify.

What is the naming convention for components?

Component template files in src/components/ must be kebab-case (lowercase with hyphens). The output filename and custom element name follow the same kebab-case format.

Can I use the generated components without Eleventy?

Yes, the output in public/components/ is a standalone JavaScript module. It can be included in any project with a script tag pointing to the file.

Does the generator support multiple components?

Yes, the structure supports any number of components. Each has its own folder in _includes/components/ and template in src/components/.

What technologies does it use?

It uses Eleventy (11ty) with Nunjucks templating. The generated components are plain web components built with the Custom Elements API and Shadow DOM, using no framework.