Skip to main content

Official 11ty docs


WebC — Eleventy

39 posts in 'WebC'

Building with Eleventy

Re(re-re) building my personal site with Eleventy and web components

Categories: BloggingWebCWhy Eleventy?

Unveiling the Marvels of 11ty's WebC

Are you ready to dive deep into the world of web development and discover a game-changing tool that will revolutionise the way you build websites?

Categories: How to...PerformanceWebC

Elevating Video Transcripts as Searchable Content

A post by Zach Leatherman (zachleat)

Categories: How to...PluginsWebCYouTube

The Good, the Bad, the Web Components

A post by Zach Leatherman (zachleat)

Categories: WebC

Migrating my site from NextJS to Eleventy

I recently migrated my website from NextJS to Eleventy.

Categories: Migrating to EleventyWebCWhy Eleventy?

11ty Quick Tip: Minify inline JavaScript in WebC

For when you need to minify your WebC JavaScript

Categories: Asset PipelinesHow to...WebC

Under the hood

LostInBrittany's tech blog, reborn... again...

Categories: WebCWhy Eleventy?

Eleventy components woes

So far so good, in part one we managed to do a very basic setup of a blog website sticking to just... Tagged with frontend, javascript, react, webdev.

Categories: WebC

Eleventy Style Guide Generator with WebC Component Support

The simplicity and speed of Eleventy with the organization of a self documenting design system. Style guide generator that incorporates design tokens, fluid typography, and WebC components.

Categories: WebC

WebC Declarative Shadow DOM Slot Workarounds

A cheeky hack to make slot elements work as expected in 11ty's WebC framework.

Categories: WebCHow to...

Creating Bootstrap WebC Components in Eleventy

Using WebC to make working with Bootstrap simpler.

Categories: WebCHow to...

Extending 11ty’s page variable

I’ve had my eye on Astro, so I thought I’d take it for a spin by re-building this here website. I stuck with 11ty in the end for a variety of reasons, but th...

Categories: How to...WebC

WebC First Impressions

Thoughts from my first attempt at understanding the new WebC framework from 11ty

Categories: WebC

webc-starter-kit (Github repo)

A starter project for Eleventy (11ty) using WebC as a main template langage. Also includes opiniated assets processing and a few more bells and whistles. - solution-loisir/webc-starter-kit

Categories: WebC

3 Methods for scoped styles in web components that work everywhere

A post by Zach Leatherman (zachleat)

Categories: CSS/SassWebC

WebC Updates in Eleventy - Looping

A look at another new WebC feature - looping

Categories: WebC

WebC Updates in Eleventy

Description of updates to WebC

Categories: WebC

Rewriting the Eleventy Home Page in WebC

YouTube video

Categories: WebCYouTube


The posts below were published before the release of Eleventy v2.0.0 (Feb 8, 2023). Information in these posts may be out of date. The current stable release is 2.0.1. Eleventy v3.0 is currently under development and available for testing.

Using JavaScript in a WebC Component

Father, husband, developer relations and web standards expert, and cat demo builder.

Categories: WebC

Quick WebC Tip

How to enable better color coding for your WebC templates

Categories: WebC

Quick Tip for Eleventy's WebC support

YouTube video

Categories: WebCYouTube

Importing external components in WebC via NPM

The online journal of Ashur Cabrera.

Categories: WebC

Eleventy 2.0 & WebC

I look at my experiences trying out Eleventy and its new Web Component language, webc.

Categories: WebC

Exploring WebC

How to setup and create your first WebC component in a Nunjucks 11ty

Categories: WebC

Building a YouTube Embed Web Component (both vanilla and WebC flavored)

A look at a simple YouTube embed component built in traditional web components and Eleventy's WebC plugin.

Categories: YouTubeWebC

My notes on Eleventy WebC components

WebC is a compiler for single file Web Components that brings first-class component model to Eleventy!

Categories: WebC

Understanding WebC Features and Concepts

WebC is an exciting addition to the 11ty ecosystem as it enables first-class components. Putting the pieces together may be a little overwhelming, so let’s review some WebC features to help you be successful!

Categories: WebC


WebC, the latest addition to the Eleventy suite of technologies, is focused on making Web Components easier to use.

Categories: WebC

First Experience Building with Eleventy's WebC Plugin

My first attempt working with Eleventy's new Web Component plugin

Categories: WebCPlugins

Introduction to WebC

What is WebC and what does it have to do with Eleventy?

Categories: WebC

Crash Course in Eleventy's new WebC Plugin

YouTube video

Categories: WebCYouTube

Using Storybook With 11ty

Storybook is great for component-driven development. This blog post shows you how to use Storybook with 11ty.

Categories: How to...ShortcodesWebC

Get the blog by email (or RSS)

Powered by Buttondown