Web Components & Design System With Stenciljs

Build, Test, Document and Publish to NPM a Complete Design System/UI Lib for React, Angular, Vue & Vanilla JavaScript

What you'll learn

Build Web Components using StencilJS

Implement best practices for reusable UI libraries

Implement accessibility best practices in web components

Write unit and E2E tests for StencilJS components with Jest and Playwright

Document StencilJS components effectively using Storybook

Set up and manage a multi-package monorepo with Turborepo

Publish a StencilJS component library to NPM and integrate it into third-party applications

Integrate web components with frameworks like React, Angular and Vue

Requirements

Solid understanding of HTML, CSS, and JavaScript

Basic knowledge of TypeScript

Familiarity with Node.js and NPM

Some experience with React, Angular & Vue (definitely not mandatory)

Comfortable using the terminal and basic Git commands

Description

Master StencilJS & Build a Professional Design SystemGo beyond tutorials—build, test (unit, E2E, snapshot testing), document (Storybook), and publish (NPM) a complete Design System UI component library trusted by real-world apps. Using StencilJS, you’ll create high-performance, framework-agnostic Web Components that integrate seamlessly with React, Angular, Vue & Vanilla JavaScript/HTML.Inside, you’ll discover how to:Architect reusable, scalable UI components like a pro.Bake in accessibility from the start.Deliver polished documentation with Storybook.Ensure reliability with Jest & Playwright tests.Streamline development with Turborepo.Publish to NPM and ship production-ready code.This is not a surface-level introduction—you’ll follow a practical, project-based approach, building real components that follow modern best practices and industry standards. Along the way, you’ll gain insights into design systems, UI consistency, maintainability, and developer experience that will set you apart as a front-end developer.Whether you want to create a library for your company, contribute to open source, or sell your own premium component kit, you’ll leave this course with the tools, workflows, and confidence to make it happen—no matter your current skill level.By the end, you won’t just “know” StencilJS—you’ll have mastered it, with a fully functional design system ready for immediate use in professional projects or commercial products.

Overview

Section 1: Intro to the Course

Lecture 1 What you will learn with this course

Lecture 2 Important considerations before you start

Lecture 3 Useful Links

Section 2: Quick [very quick] Intro to Web Components and StencilJS

Lecture 4 Before we start

Lecture 5 What is StencilJS?

Lecture 6 StencilJS Component VS Custom Elements API Comparison

Section 3: Setup StencilJS environment, Libraries & Sandboxes

Lecture 7 An important note before the next video

Lecture 8 Getting Started With StencilJS

Lecture 9 Why are we going to use Turborepo instead of Lerna?

Lecture 10 Setting up a Mororepo with Turborepo

Lecture 11 Framework Integration using Output Targets

Lecture 12 npm link in a nutshell

Lecture 13 Creating the React Library with the React Output Target

Lecture 14 Creating the React Sandbox App

Lecture 15 Turbo Build Order

Lecture 16 Creating the Vue Library with the Vue Output Target

Lecture 17 Creating the Vue Sandbox App

Lecture 18 Why I’m Not Covering the Angular Output Target in This Course

Lecture 19 Creating the Angular Sandbox

Lecture 20 Creating the JavaScript Sandbox

Section 4: Stencil Components 101

Lecture 21 Intro to the Components API

Lecture 22 Component - Typography

Lecture 23 What is the Shadow DOM?

Lecture 24 Global Styles

Lecture 25 Component - Icon

Lecture 26 Component - Logo

Lecture 27 An HTML page for each component

Lecture 28 Component - Button

Lecture 29 Button Icons - Why the Icon component won’t work?

Lecture 30 Component - Stacks

Lecture 31 Component - Tooltip

Lecture 32 Component - Menu / Context Menu [PART 1]

Lecture 33 Component - Menu / Context Menu [PART 2]

Lecture 34 Component - Menu / Context Menu [PART 3]

Lecture 35 Component - Sidebar

Lecture 36 Component - Modal [PART 1]

Lecture 37 Component - Modal [PART 2]

Lecture 38 Form Associated API

Lecture 39 Component - Form - Label & Input [PART 1]

Lecture 40 Component - Form - Label & Input [PART 2]

Lecture 41 Component - Form - Textarea

Lecture 42 Component - Form - Select

Lecture 43 Component - Form - Fieldset, Checkbox & Radio

Lecture 44 Component - Tabs [PART 1]

Lecture 45 Component - Tabs [PART 2]

Lecture 46 Component - Tabs [PART 3]

Lecture 47 How Frameworks Consume Web Components

Lecture 48 Component - Table [PART 1]

Lecture 49 Component - Table [PART 2]

Section 5: Accessibility in StencilJS

Lecture 50 What is Accessibility and why it matters

Lecture 51 How do we test Accessibility

Lecture 52 Semantic HTML Is Already Accessible

Section 6: StoryBook & Documentation Generation

Lecture 53 Setting up Auto Documentation Generation - JSON & README files

Lecture 54 Setting up Storybook with StencilJS

Lecture 55 Adding our first Story

Lecture 56 Custom Storybook Documentation & Blocks

Lecture 57 Storybook Accessibility Addon

Lecture 58 Global Styles Setup

Lecture 59 Writing Stories for Composite Components (e.g. Tabs, Fieldset)

Section 7: Testing with Jest and Playwright

Lecture 60 Unit testing with Jest - Stencil Test Runner

Lecture 61 E2E testing with Playwright

Lecture 62 Accessibility testing with Playwright

Lecture 63 Visual Regression testing with Playwright

Section 8: Approaches To Server-Side Rendering In StencilJS

Lecture 64 Introduction to SSR with StencilJS

Lecture 65 When to use SSR? Decision Framework

Lecture 66 How to use SSR with StencilJS?

Lecture 67 Pitfalls and Best Practices (*If you proceed with SSR)

Lecture 68 Verdict & Final Conclusion

Section 9: Deploy to NPM packages and testing on all Frameworks

Lecture 69 The Same Dashboard in React, Vue, Angular & TypeScript

Lecture 70 Deploying to NPM the core-library, react-library & vue-library

Frontend developers who want to build reusable, framework-agnostic web components,Developers interested in creating and publishing UI component libraries,Engineers working on design systems or shared component libraries across multiple projects,Multiple Teams using React, Angular, Vue, or Vanilla JS looking to standardize and unify the UI of all apps,Anyone who wants to learn StencilJS as fast as possible without BS stuff and not waste their time on non important things