Leanpub Header

Skip to main content

Master Frontend bundle

These books have a total suggested price of $299. Get them now for only $250!
About

About

About the Bundle

Frontend work has changed twice in a few years. The platform got much better: container queries, :has(), native masonry, workers and threads, Web Components that work. Then interfaces started to be written, and used, by AI agents. This bundle gives you 23 books that follow both changes, from the browser's own APIs up to agents that call tools on a web page.

Many of the books are built around one real project, and the code in them was run before it was printed. You build a booking agent, a component library, a design system or a photo gallery, and you finish with something that works.

Get the job

Frontend Interviews in the Agent Era has 1,048 questions on JavaScript, CSS, the browser, coding rounds, system design and agentic frontends, each with an answer you can say in 30 seconds and a deeper one for the follow-up. Advanced JavaScript for the Agent Era explains how JavaScript really works, then builds agents you can stop, trace and trust, and ends with 100 interview questions. Quick JavaScript Interview Questions is the short revision list.

Write modern CSS and JavaScript

Modern CSS: The Platform Grew Up replaces hacks, preprocessors and scripts with native CSS. CSS Grid Lanes covers native masonry layout, with a responsive, accessible gallery as the project. CSS Houdini in Practice builds an app with @property, the Typed OM and the Paint API. Beyond the Main Thread keeps an app responsive with workers, Atomics, WebAssembly threads, the Scheduler API, OPFS and Observables, with demos measured in real Chrome. Quick Web Worker With JavaScript is the short introduction to background threads.

Build components and design systems

Web Components Handson builds ten accessible, tested components with Lit 3, with exercises and solutions. Web Components with Lit starts from the browser's own component model and ends with a design system that is accessible, tested, server-rendered and published to npm. Web Components & Design Systems follows one project, Prism DS, to a component library ready for AI agents. Mastering Svelte 5 Component Development builds and publishes a production-grade Svelte 5 library with Runes, Snippets, TypeScript and WAI-ARIA 1.2.

Build for AI agents

Generative UI with OpenUI shows how to build screens that a language model writes: component libraries, prompts, streaming, safety and evals, with measured results. WebMCP in Practice turns a form into a tool that agents can call, then defends it against prompt injection, tests it and ships it. MCP Apps for Claude builds interactive cards, carousels and fullscreen views inside the chat. Building Agentic Applications Using Angular and Genkit builds a meeting-room booking agent with streaming UI, tools, memory, approvals, multi-agent delegation, evaluation and deployment. Angular Microfrontends with Nx and Native Federation goes from an empty workspace to deployment.

Tooling guides

Six short books cover older tools, and are useful where you still meet them: Quick Browserify, Quick ES2015 Scripting Using Babel.js, Quick Build System with Gulp, Quick CSS Authoring In SASS Way, Quick Start Handlebar Templating and Quick Desktop Application Development Using Electron.

Who it is for

  • Frontend engineers who want one reference from CSS to AI agents.
  • Candidates preparing for a frontend interview at any level.
  • Developers building agent interfaces with MCP, WebMCP, OpenUI or Genkit.
  • Teams building a component library or design system.

Books

About the Books

Frontend Interviews in the Agent Era

Frontend Interviews in the Agent Era

Prepare for the Questions Interviewers Ask in the AI Era

Frontend interviews now cover the web platform, JavaScript and algorithms, and the work of building products on top of AI models. This book prepares you for all three.

It has 1,048 questions in 61 chapters. Each one is laid out the same way: how it is usually asked, what the interviewer is testing, a 30-second answer you can say aloud, a deeper answer for the follow-ups, and the red flags that cost candidates points. Chapters end with a timed mock interview and a summary.

The traditional rounds are covered in depth: HTML and accessibility, CSS, JavaScript functions, objects, values and asynchronous code, TypeScript, the DOM and rendering, networking, security, performance, state and data fetching, polyfills and small libraries, UI machine coding, algorithm patterns, and frontend system design.

A part of its own covers agentic frontends: how models behave from the interface's point of view, streaming and chat state, tools and generated UI, sandboxed surfaces, approvals and agent state, tool design and failure modes, browser agents, safety, evaluation and cost, working with AI coding agents, and agentic system design interviews.

The code is real. Listings come from tested files, outputs are captured from real runs, and the diagrams are drawn in one style. A reading path for junior, mid, senior and agentic roles, and study plans for two, six and twelve weeks, are in the appendices.

Who it is for
  • Frontend engineers preparing for interviews at any level
  • Engineers moving into roles that build AI products
  • Interviewers who want a shared list of questions and red flags
Building Agentic Applications Using Angular and Genkit

Building Agentic Applications Using Angular and Genkit

Design, build, test and ship an AI agent with a streaming Angular front end, Genkit tools, memory, approvals and evaluation

Build a complete AI agent with a streaming Angular front end and a Genkit back end: tools, memory, retrieval with citations, planning, human approval, multi-agent delegation, evaluation and deployment. One working application, explained chapter by chapter, with every code listing checked against the repository.

What you will learn

  • Define an agent's contract once in Zod and share it between the server and the Angular page
  • Stream typed events over fetch and fold them into signal state with a pure, testable reducer
  • Write Genkit tools that act as a particular user, keep rules in code and return errors the model can use
  • Save conversations so they survive restarts, trim history safely, and answer questions from a document with citations
  • Add planning and self-checking, and measure what they cost in model calls and tokens
  • Let an agent answer with Angular components without ever letting a model write markup
  • Pause a tool call for human approval, resume it exactly once, and limit what an approver can change
  • Split work across specialist agents, and decide whether the team is worth its cost
  • Evaluate the agent with Genkit evaluators, break it on purpose, then rate-limit, validate, log and deploy it.

Who this book is for

Web developers who have built something in Angular and now need to add an agent to a product, and back-end TypeScript developers who want to know what the front end of an agent has to do. You should be comfortable with TypeScript. No API key is required: the example application includes an offline scripted model, so every chapter runs on a laptop and every test is deterministic.

Generative UI with OpenUI

Generative UI with OpenUI

Let Language Models Design the Screen

A model can answer with a paragraph. It can also answer with a screen.

This book shows how to build the second kind with OpenUI: a compact language the model writes, a component library you control, and a renderer that draws the screen while the answer is still streaming.

It is written for engineers who have built a React app and called an LLM API. It does not assume you have built a generative interface before.

What you will learn

  • How a component library becomes a prompt, and a stream of text becomes a live screen
  • Reading and writing OpenUI Lang, and what the parser does with wrong input
  • Designing a library a model can use, and what a large catalog costs
  • What examples and rules in a prompt change, measured over 180 runs on two local models
  • Streaming, state, queries and actions, and what runs without calling the model again
  • A backend that streams, aborts and reports upstream errors correctly
  • OpenUI in React, from a script tag, in email and in Vue
  • Hostile output, sandboxing, monitoring, tests, and evals sized to the effect you care about
  • When not to use generated screens
Advanced JavaScript for the Agent Era

Advanced JavaScript for the Agent Era

How the language really works, and how to build reliable AI agents with nothing but native JavaScript

Most agent bugs are really JavaScript bugs.

An agent juggles model calls that stream for a minute, tools that run in parallel and time out, users who press Stop halfway through, and conversations that outgrow memory and the model's context window. Frameworks hide those problems until they break in production. This book teaches you the language rules underneath, then shows you how to build the agent yourself.

Advanced JavaScript for the Agent Era goes from the inside out. Each chapter starts with a failure its own code reproduces, explains the mechanism behind it, and shows where that mechanism appears in nanoagent, a complete agent runtime with no dependencies that you build across the whole book.

What you will learn

  • How JavaScript really works: scope, closures, this, prototypes and classes, types, equality, and coercion.
  • Asynchronous JavaScript: the event loop, promises from the ground up, combinators, async/await patterns, generators and async generators, streams and fetch, and cancellation with AbortSignal.
  • Functional and metaprogramming techniques: higher-order functions, iterators and iterator helpers, Proxy, Reflect, symbols, and the observer pattern.
  • Modern JavaScript, ES2020 to ES2027: safer data handling, upgraded collections, binary data, resource management with using, and Temporal.
  • Architecture, memory, and performance: modules, garbage collection, workers, and shared memory.
  • Building AI agents with native JavaScript: the model loop, validated tools and schemas, streaming and stop controls, memory and context, multi-agent orchestration, and production guardrails, tracing, and tests.

How the book works

  • 29 chapters in six parts, plus six appendices, including 100 interview questions, an event-loop cheat sheet, and a guide to running against a real model.
  • The code runs on Node 24 or later. The examples were tested on Node 25.9 and 26.7.
  • No API key needed: the agent examples run against a scripted model, so results are the same on every machine.
  • No npm install anywhere in the main text.
  • Every chapter opens with what you will learn, and ends with a summary and exercises with solutions.

Who it is for

Developers with one to three years of JavaScript who know the syntax, arrays and objects, fetch, and async/await, and who want to understand why their code behaves the way it does and build agents they can trust without a framework they cannot see inside.

Angular Microfrontends with Nx and Native Federation

Angular Microfrontends with Nx and Native Federation

Building, Connecting, and Independently Deploying Angular Apps at Scale

Several teams, one product, separate deployments. This book builds Storefront, an online store in which a shell loads separately built Angular remotes at runtime with Native Federation, and it takes the case study from an empty Nx workspace to a deployed, tested and observable system. Angular 22, Nx 23 and Native Federation 22 are the versions in use. Every listing, measurement and screenshot comes from running the code.

Older tutorials no longer match the tools: Nx's Module Federation generators for Angular are deprecated, and Native Federation is the supported path. The book is written against the tools as they are today, and it says where they fall short.

What you will learn
  • How static and dynamic (manifest-driven) federation work, and when a static remote map stops being enough
  • How shared dependencies resolve, how version skew produces a blank page, and three defenses against it
  • A Platform API, a typed event bus with ordered replay, and module boundaries enforced by lint
  • State that survives a reload through a backend, and how to choose between the three ways to share it
  • Manifests served per tenant, with a bundled fallback when the server is down
  • Failure handling when a remote does not load or crashes while rendering
  • Independent deployment of one remote, what an open browser tab does when files change, and Nx affected builds in continuous integration
  • Sign-in with cookie sessions, rate limits, and error reports that name the remote at fault
  • A remote that lives in another repository, and a strangler migration of a legacy page
Mastering Svelte 5 Component Development

Mastering Svelte 5 Component Development

Building a Production-Grade UI Component Library & Design System from Scratch

Move beyond isolated toy tutorials. Architect, test, and publish a production-grade UI component library and design system with Svelte 5 from first principles.

Building internal application screens is forgiving: you control the container, data flow, CSS cascade, and lifecycle. Building a shared UI component library is entirely different. Your primitives must survive server-side rendering pipelines, hydrate without layout shift, adapt to nested theme overrides, coordinate complex multi-input forms, and adhere strictly to international accessibility standards—all while exposing clean, type-safe interfaces that bundlers can tree-shake down to the byte.

Mastering Svelte 5 Component Development is an engineering-first guide to building production design systems with modern Svelte. Svelte 5 replaces legacy compiler heuristics with a single-execution setup model, fine-grained reactive signals, first-class render delegation, and universal headless logic. Rather than toy examples, this book guides you step by step through engineering PulseUI, a complete, themeable, accessible component library built entirely from scratch.

What You Will Master:
  • Foundations of Fine-Grained Reactivity: Understand how Svelte 5 executes component setup once on mount to establish a direct-updating signal graph. Master deep reactive proxies versus reference-tracked immutable collections, synchronous derivations, and safe state snapshotting across library boundaries.
  • Design Tokens and Subtree Theming: Construct a multi-tier CSS Custom Property token architecture that prevents style leakage, supports zero-flash server hydration, adapts fluidly to runtime density scaling, and enables nested light and dark theme inversion without CSS specificity conflicts.
  • Polymorphic Primitives and Strict Typing: Build atomic components such as buttons, badges, and toggles using discriminated TypeScript unions, ensuring invalid prop combinations are caught at compile time while guaranteeing keyboard focus and accessibility parity.
  • Form Controls and State Coordination: Balance controlled props, two-way bindings, and native browser form submission. Coordinate multi-input selection sets, cardinality limits, and accessible validation states using type-safe context controllers.
  • Render Delegation with First-Class Snippets: Replace legacy template slots with parameterized render functions. Architect generic data tables, sortable grids, and flexible containers that delegate cell and toolbar rendering directly to consumer templates without brittle boolean configuration flags.
  • Compound Components and Accessible State Machines: Build coordinated component families such as tabs, accordions, and segmented controls. Extract state logic into standalone headless controllers, automate cross-referencing identifiers, and enforce orientation-aware roving keyboard navigation.
  • DOM Lifecycles, Floating Overlays, and Portals: Bridge declarative markup with imperative browser APIs. Implement collision-aware floating positioning, capture-phase outside-click detection, focus-trapping routines, and full-screen modal overlays with background inert isolation and deterministic focus restoration.
  • Motion, Automated Auditing, and Package Distribution: Add hardware-accelerated, vestibular-safe layout transitions that respect user motion preferences. Build an automated accessibility auditor to verify live DOM contracts, and configure packaging pipelines to ship tree-shakable packages ready for deployment.

Who This Book Is For:

Senior frontend engineers, design system architects, and full-stack SvelteKit developers who want an authoritative, real-world resource for building enterprise component libraries or migrating existing codebases to Svelte 5. Readers should be familiar with modern web standards, TypeScript, and foundational frontend concepts.

Beyond the Main Thread

Beyond the Main Thread

Workers, Shared Memory and Scheduling for JavaScript in the Browser

A page freezes when one long task holds the main thread. This book covers the browser's tools for keeping that work out of the way: dedicated, shared and service workers, OffscreenCanvas, SharedArrayBuffer and Atomics, WebAssembly threads, the Scheduler API, the Origin Private File System, and Observables.

Each chapter explains one tool, shows where it is used, and builds a demo you can run. The timings come from measurements in real Chrome, and the code is in a download that goes with the book. Where a result was surprising, the book says so: plain JavaScript beat our hand written WebAssembly on a single thread, and moving work to a worker didn't make it faster at all.

Some of what the demos measure

  • A 1.5-second job that freezes the page on the main thread, and the same job in a worker
  • Four workers losing more than half their updates to one shared counter
  • A crashed tab noticed in about 200 ms, where a pagehide handler never noticed
  • Eight threads rendering about six times faster than one, and a fixed split of the work taking twice as long as a shared counter
  • 20,000 small file writes in about 70 ms instead of about 3.5 seconds

Who this book is for

Web developers who know JavaScript and want to keep their pages responsive. You don't need to have used workers or shared memory before.

Modern CSS: The Platform Grew Up

Modern CSS: The Platform Grew Up

A working developer's guide to the features that replace hacks, preprocessors, and a surprising amount of JavaScript.

Your stylesheets are full of workarounds for things CSS could not do. Modern CSS: The Platform Grew Up shows you which ones you can delete.Between 2022 and 2026, browsers shipped more CSS than in the previous decade. Container queries, :has(), cascade layers, nesting, perceptual color, subgrid, popovers and view transitions are now Baseline, so you can use them in production. Many teams have not caught up. They still reach for the same preprocessor, the same class toggles and the same scroll listeners.

This book is for working front-end developers who already know flexbox and grid. It skips the basics and focuses on the features that replace hacks and JavaScript. Each of the seventeen chapters starts with a problem you have probably solved the hard way, shows the modern solution with working code, and ends with what you need to ship it: browser support, fallbacks, and the dependencies or glue code you can remove.

Every example is a working page you can open and change, and the code is free to use under the MIT licence. Most screenshots are real renders from Chrome. The book marks the two that are not, and it says so when a feature is still experimental.

The book covers architecture (cascade layers, native nesting, @scope and typed custom properties), layout (container queries, subgrid, intrinsic ratios and grid), selectors and state (:has(), context-aware styling and scroll-state queries), visual design (OKLCH color, light-dark(), typography and shape), motion (entry and exit animations, scroll-driven animations and view transitions), native components (popovers, dialogs, anchor positioning and widgets without JavaScript), and production (a capstone component kit and a migration playbook for real codebases).

Three appendices cover a dependency diet, a browser support matrix and a cheat sheet.

The aim is less code: fewer dependencies, fewer event listeners, and stylesheets you can still understand next year.

What you will learn

  • Replace specificity wars with @layer, native nesting, :where() and @scope
  • Build components that respond to their container, not the viewport
  • Style state with :has() instead of toggling classes in JavaScript
  • Use OKLCH, color-mix() and relative colors to build token systems
  • Animate height: auto, scroll position and page transitions
  • Ship popovers, dialogs, menus and tooltips with anchor positioning and little or no JavaScript
  • Migrate an existing codebase and delete the dependencies you no longer need
CSS Grid Lanes

CSS Grid Lanes

Native Masonry Layout for the Modern Web

Book Description

Cards of different heights that fit together without gaps, like a photo wall, used to need a JavaScript library or CSS tricks. With CSS Grid Lanes you build them in a few lines of CSS, starting with display: grid-lanes.

This book teaches it by building one project, a photo gallery. You start with a plain grid that leaves gaps, and you finish with a responsive gallery that works for keyboard and screen-reader users and still looks right in browsers without support.

Grid Lanes is new, and browsers do not agree on everything yet. Where they differ, the book shows the measurement instead of guessing.

Key Features
  • Build one project, a photo gallery, from a plain CSS Grid that leaves gaps to a finished masonry layout
  • Learn the exact placement rule behind display: grid-lanes, and test it with a short script
  • Handle what masonry does to keyboard and screen-reader order, and fall back cleanly in browsers without support
  • Every number and claim in the book is checked by a script in WebKit, Chromium and Firefox, and every screenshot is captured from the running project

What you will learn
  • Explain why CSS Grid cannot produce masonry and what the web did instead
  • Build grid lanes in columns and in rows, and switch between them with a media query
  • Predict where every item lands using the placement rule, spanning and pinning
  • Tune flow-tolerance to settle ties between lanes
  • Align captions across a layout with subgrid, and know where subgrid stops working
  • Count lanes, prevent overflow, and use container queries for responsive masonry
  • Reduce the keyboard and screen-reader order problem, and test for it with a script
  • Detect support with @supports and ship a fallback for every browser
  • Measure performance and use content-visibility without breaking the layout

Who this book is for

Front-end developers who are comfortable with HTML and CSS and have used Flexbox and CSS Grid. You do not need to have used a masonry library or to know anything about Grid Lanes. If your Grid is rusty, Chapter 2 covers what the rest of the book relies on. Two chapters include short JavaScript, for a fallback and for testing, and both are explained line by line.

WebMCP in Practice

WebMCP in Practice

A short guide to building websites AI agents can use

An AI agent on your website works the way a screen reader does: it reads the page and guesses which button to press. WebMCP is the alternative. Your page hands the agent a list of things it can do (search this catalog, add this to the cart, set this address), described in your words and running your code, in the tab the visitor already has open.

WebMCP in Practice is a short, hands-on guide for web developers. You build one small shop, Kiosk, and every runnable listing was run before it was written about. You start with a working tool from a few HTML attributes on a form you already have. Then you register tools in JavaScript, write descriptions and errors an agent can act on, make tools appear and disappear as the page changes, and test them.

The part that matters most: a tool runs as the logged-in user, with no API key and no sandbox in between. Chapter 6 shows a prompt-injection attack on the book's own shop, step by step. Chapter 7 covers the annotations the platform offers, what they do not enforce, and how your page can ask the shopper before a consequential tool runs.

WebMCP is a W3C Community Group draft with one implementation, behind an origin trial in Chrome (149 through 156) and a matching trial in Edge. This book is for someone who wants to build on it anyway, with their eyes open. Every claim that depends on a version carries the version and the date it was checked. The places where the shipping code disagrees with the spec are listed in an appendix. Where a number matters, the book gives you the command to check it yourself.

What you'll learn

  • Turn an ordinary HTML form into a WebMCP tool with a few attributes, and see it in Chrome DevTools.
  • Register tools in JavaScript, and write descriptions, schemas, return values and errors an agent can act on.
  • Make tools appear and disappear as the page changes, so an agent is only offered what makes sense right now.
  • See how a poisoned product review can steer an agent, and how to narrow a tool so it cannot.
  • Use the three annotations, and ask the shopper before a consequential tool runs.
  • Test tools against the real platform, in jsdom and in a real Chrome, instead of a mock that hides failures.
  • Ship it: feature detection, origin-trial tokens, the polyfill, keeping the site working with every tool off, and what production adds.
  • Tell what is settled in this API from what is still open.

Who this book is for

A web developer who knows the DOM and can read JavaScript. You do not need to have used the Model Context Protocol or built an agent. You do not need an AI account or an API key, and no chapter calls a model. A skeptical reader is welcome: the book argues its case and shows the costs.

MCP Apps for Claude

MCP Apps for Claude

Build interactive UI inside the conversation

Build interactive apps that live inside Claude's conversations.

Ask an AI assistant whether a meeting room is free and you usually get a sentence. With an MCP App, you get a card instead: the room, the next free half hour, and a Book button that works right there in the chat. MCP Apps for Claude shows you how to build that kind of interface, from the first tool to a listing in Claude's connector directory.

The book follows one real app, Snug, a meeting-room booking connector, from a text-only MCP server to a polished, tested app that runs in claude.ai, in Claude Desktop and in the Claude Android app. Every code example is cut from a real, tested file, and every screenshot was taken in Claude.

What you'll learn

  • How MCP Apps work: tools, ui:// resources, and the sandboxed card Claude shows in the conversation
  • How to build inline cards, carousels and fullscreen views that follow Claude's design guidelines
  • How to take Claude's theme, fonts and colors, in light and dark mode, and design for phones
  • How a card talks back to Claude: updateModelContext, sendMessage, app-only tools and links
  • How to handle many copies of one card, large results and live data
  • How the sandbox and content security policy work, and how to add sign-in with a threat model
  • How to test a card without a browser, debug it inside Claude, and prepare it for the directory

Who this book is for

Web developers who know JavaScript or TypeScript and want to build interactive connectors for Claude. You don't need to know MCP already: Chapter 2 teaches the parts you need.

What you get

  • 14 chapters, with diagrams, screenshots and exercises
  • Runnable solutions to every exercise
  • The complete companion code under the MIT License, with a copy of the app at the end of every chapter and a full test suite
Web Components Handson

Web Components Handson

Ten Accessible, Tested Components Built with Lit

Web Components Handson teaches web components by building ten of the hardest ones with Lit 3: tabs, dialogs and popovers, form-associated inputs, a combobox, a date range picker, a virtualized data table, a tree view, a carousel, a multi-step stepper and an image cropper. Each is a standalone package with its own tests and demo page, built on one shared set of design tokens.

The book explains each concept before the code, builds the component step by step, and ends every chapter with its styling API, accessibility behavior, real test output and the mistakes to avoid. Every listing is pasted from the real package files, and the tests pass against them: 270 in the chapters, plus tested solutions to all 55 exercises in Appendix E. Appendices cover token naming, packaging for npm, using the components in frameworks and an accessibility checklist, followed by a glossary and an index.

It is written for front-end developers who already know JavaScript or TypeScript. It is not an introduction to web components. The code was tested with Lit 3.3.3, in Google Chrome, and the components are browser only.

CSS Houdini in Practice

CSS Houdini in Practice

A tested guide to the browser's own drawing and styling APIs

CSS Houdini promised to let developers extend the browser's own styling engine. Ten years on, its five APIs have had five very different fates. @property works in every browser and is one of the most useful additions to CSS in years. The Typed OM works everywhere except Firefox. The Paint API runs only in Chrome and Edge. The Layout API and Animation Worklet never shipped, and native CSS now covers most of what people wanted them for.

In this practical book, Sandeep Kumar Patel shows you which parts of Houdini to build on today, which to use with care, and what to use instead. You learn by building: every chapter hands you a copy of the same small app, Gauge, an analytics panel with stat cards, sparklines, ring meters and a theme switch, exactly as the previous chapter left it, and you add that chapter's feature a few lines at a time, checking each step in the browser. Where the obvious code goes wrong, you write it, watch it fail, and fix it.

With this book, you'll:

  • Animate custom properties, gradients and whole themes with @property
  • Read and write CSS values as typed numbers with the Typed OM, with a fallback for Firefox
  • Write paint worklets that draw grids, charts, rings and patterns, each with a plain-CSS fallback
  • Build a masonry layout and a scroll effect as worklets, then replace them with display: grid-lanes and animation-timeline: scroll()
  • Measure what Houdini costs, test it in three browser engines, and roll it out with kill switches
  • Handle the real-world traps: shadow DOM, server rendering, Content Security Policy, caching, printing, high contrast and reduced motion

Every step of every chapter is a real file, run automatically in Chrome, Firefox and Safari's engine to confirm it does what the page says, and every browser-support claim is dated and traced to its source. You need only the basics of HTML, CSS and JavaScript. The complete code, including a starting copy of the app for every chapter, is a free download.

Web Components with Lit

Web Components with Lit

A hands-on guide to building web components and design systems

Frameworks come and go. The components you build on the browser's own element model don't have to.

Web Components with Lit teaches the platform first — custom elements, shadow DOM, slots, the upgrade problem, retargeted events — with no framework in sight, because Lit is a thin layer over those primitives and the layer makes more sense once you've felt the bare platform. Then it builds up Lit itself: reactive properties, the update lifecycle, templates and directives, reactive controllers, context, state management, and forms that work inside a native <form>.

One project runs through the whole book. Cinder is a small design system, published as cinder-ui. It starts in Chapter 6 as a button that does almost nothing and ends as a versioned, documented, server-renderable npm package with a React wrapper and written guidance for every other framework. Along the way you build an icon, a text field and checkbox that participate in form validation, an accessible dialog, a toast system, and a theming layer driven by design tokens.

The book is written to be read four ways. If you're new to web components, Part I teaches the platform from zero. If you're coming from React, Vue, or Angular, it shows you the parts of the browser your framework hides and where Lit's reactivity diverges from what you know. If you already ship Lit, it starts you at the patterns most Lit codebases get wrong — controllers, context, state, forms — and the delivery material that's hardest to find written down: accessibility, testing, visual regression, localization, server-side rendering, and publishing.

Every example is plain JavaScript. Lit needs no compiler and no build step to start, and the standards-only syntax — static properties, no decorators — is the version that will still run unchanged years from now. Where TypeScript changes the picture, a short callout shows the decorator equivalent, and an appendix collects all of it.

Every runnable listing in the book was actually run, in a real browser or a real terminal, before the text described what it does — including the listings that are meant to fail. Every cross-reference was checked. Every version number was verified against the live source. Where checking the code caught the first draft being wrong, the correction was left in the text.

Targets Lit 3.3.3. 36 chapters, 5 appendices, 102 figures.

You'll learn how to:

• Define custom elements and manage their lifecycle without a framework

• Use shadow DOM, slots, and CSS encapsulation deliberately

• Model reactive state with Lit's properties and update lifecycle

• Write templates, use built-in directives, and build your own

• Style and theme components with custom properties, parts, and design tokens

• Extract behavior into reactive controllers and share state with context and stores

• Build form-associated components that validate inside a native <form>

• Make components accessible: focus management, overlays, ARIA across the shadow boundary

• Test components, add visual-regression and end-to-end coverage, and wire up CI

• Localize, server-render and hydrate, and publish a component library to npm

• Consume the library from React and other frameworks

Who it's for: developers who can write modern JavaScript and have touched the DOM directly at least once. No TypeScript, no build tool, and no prior component-library experience required.

Web Components & Design Systems

Web Components & Design Systems

Built for Humans, Engineered to Be Agent-Ready

Web Components & Design Systems teaches you to build durable, framework-agnostic UI on the platform itself, through one running project: Prism DS, a genuinely real design system built up chapter by chapter — design tokens, themed components, an accessible form-control library, a component manifest, a documentation pipeline, and (in the book's second half) an MCP server that lets an AI coding agent consume your design system correctly instead of guessing at it.

You don't need prior web-components experience — Part I starts from the platform's own primitives (custom elements, shadow DOM, templates and slots). You do need to be comfortable with JavaScript and the DOM already.

What's inside:

  • Custom elements, shadow DOM, and templates — not the folklore version, the current one
  • Building robust, accessible, form-associated components with ElementInternals
  • Design tokens with the DTCG spec and Style Dictionary
  • Styling strategy: adopted stylesheets, ::part, custom states, container queries
  • Testing, packaging, versioning, and publishing web components for real consumers
  • Scoped custom element registries — and the exact collision bug they fix
  • Design-system process: adoption, governance, and what teams actually measure (and don't)
  • Part VI: agent-assisted workflows, MCP servers, and evaluating AI-generated component code

458 pages. Twenty-seven chapters plus three reference appendices. Every runnable example ships as a companion code download.

Quick Browserify

Quick Browserify

Bundle JavaScript code Using Browserify

This book is all about Browserify process to reuse NPM modules in a browser environment.This books Begins from the installation of browserify to applying it to a real time application.After reading this book you will know to develop Grunt/Gulp task to simplify the browserify process.This book also covers some handy tools like Beefy,watchify to simplify your development environment.Each and Every chapter has sufficient amount of coded example with screenshot.

Quick ES2015 Scripting Using Babel.js

Quick ES2015 Scripting Using Babel.js

Learn ES6 important features quickly

This book is all about ECMASCRIPT 2015/ES6 features.This book conatains 11 chapters and each chapter explain a new feature of ES6.Each chapter has coded example and proper screenshot to explain the detail of this chapter.The book has used Babel.js transpilar to run the coded example.However you can use other transpiler like Traceur.

Quick Web Worker With JavaScript

Quick Web Worker With JavaScript

Learn to work with HTML & web worker

Web Workers provide a simple means for web content to run scripts in background threads. The worker thread can perform tasks without interfering with the user interface.The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do things like fire up long-running scripts to handle computationally intensive tasks, but without blocking the UI or other scripts to handle user interactions.This book will take you through all the important feature of Web Worker with coded example.

Quick Desktop Application Development Using Electron

Quick Desktop Application Development Using Electron

Develop Desktop Application Using HTML CSS and JavaScript

Electron framework is built on 2 different processes named as browser and renderer process.Each of these process has a list of modules which handles specific area on desktop application development.Some of the modules are common to both of these processes.This book has focused some of the importnat module and explained it with coded examples.Some of the important topics are listed as follows:-

  • Introduction to Electron
  • Electron with AngularJS Integration
  • Working with Browser Window
  • Working with Menu
  • Working with Tray Icon Menu
  • Working with Remote Object
  • Inter Process Communication
  • Electron Dialog Window
  • Working with Shell and Screen
  • Electron Global Shortcut Registration
  • Electron Node Notification
  • Implementing Persistence Using Loki Database
  • Working with Power Monitor
  • Working with Clipboard
Quick CSS Authoring In SASS Way

Quick CSS Authoring In SASS Way

Quick look on SASS based CSS development

This book is a quick start guide for CSS authoring using SASS.SASS is also known as Syntactically Awesome Stylesheet. This book is very useful for font end developers who want to learn about SASS based CSS authoring. 

Quick JavaScript Interview Questions

Quick JavaScript Interview Questions

Learn Frequently Asked Questions

This book is all about key concepts in javascript.This book has a colloection of frequently asked question in a javascript interview.It covers sufficient amount of coded examples to understand the concepts of javascript.It will take you through all important questions quickly.

Quick Start Handlebar Templating

Quick Start Handlebar Templating

Learn HTML templating

Handlebar is a templating framework for HTML Code.Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.This book covers all the important features of this templating library.

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub