Skip to main content

Betting on WebC

WebC is a new tool by Eleventy that is one of the most exciting developments in a long time.

WebC as a standalone tool generates markup for custom elements and Web Components, which unlocks server-rendering for Web Components and brings many quality-of-life features while following web standards.

As someone who most enjoys working in good old HTML, CSS, and vanilla JS, this is a dream. I've used plenty of frontend frameworks throughout my career, but I've always been frustrated by the complexity, bloat, and damage to the user experience they cause. WebC has the potential to become my go-to approach for building websites.

WebC as a plugin for Eleventy allows for single-file components and tons of new templating and rendering possibilities. It can be used for layouts, pages, and components, meaning Eleventy sites can now be built entirely with WebC without other templating languages such as Nunjucks or Liquid.

In fact, I recently rebuilt this website using WebC instead of Nunjucks, and the authoring experience was so empowering, simple, and fun. I'm using WebC for layouts (including nested layouts), pages, and components that have fully replaced Nunjucks partials/includes.

Enhancing Web Components

Web Components have a strong future, but the main arguments against them have been server-side rendering and the ergonomics. WebC solves this, allowing for progressive enhancement, while also providing rendering flexibility, simple CSS scoping, critical CSS and JS bundling, and more.

Probably my favorite benefit of WebC with Eleventy is the default behavior of simply rendering an HTML-only partial. You simply write markup in a .webc file, and the custom element tag will be replaced with the markup when rendered. This is the main use case for HTML templating, and keeps the DOM clean and simple. I'll dig into and compare all the rendering options WebC offers in a future post, as there are so many useful options available.

As with all projects by Eleventy, performance and web standards are top of mind with WebC. An Eleventy site with WebC won't ship any client-side JavaScript, unless you intentionally author it in a component. Even if you add scoped CSS to a component, WebC will render it with a custom element tag, but there's no JavaScript needed. This is a major win for performance, web standards, and simplicity.

Future potential

WebC unlocks a lot of possibilities for static sites using Eleventy and I'm interested in what's now possible for even more interaction-heavy experiences. I have an ambitious personal project in the works, so I'm going to take things as far as I can with WebC and Eleventy, sharing my learnings and ideas along the way.

Because WebC addresses the limitations of Web Components, I'm optimistic that it can be used to build robust web apps and can gain strong adoption in the community.

I don't care about tech trends, but it'd be great to have a project that's committed web standards and progressive enhancement grow in use to improve the web for everyone.

Learn more about WebC