Swiper is a mature, modular touch slider library for the web, supporting hardware-accelerated transitions and a wide range of effects (fade, cube, coverflow, flip, cards, creative). It provides first-class framework bindings for React, Vue, and Web Components, each with its own package entry point. The core is a lightweight, event-driven class that manages slide positioning, touch/mouse input, loop mode, breakpoints, and responsive behavior. All optional features (navigation, pagination, scrollbar, zoom, virtual slides, autoplay, keyboard, mousewheel, a11y, etc.) are implemented as self-contained modules that augment the core via a consistent factory pattern and TypeScript declaration merging. The build pipeline produces ESM, IIFE, and minified bundles, along with per-module CSS and type declarations. The codebase is actively maintained with a comprehensive test suite covering SSR, cross-realm params, element DOM behavior, and consumer type resolution under multiple module resolution modes.
Regex Colorizer is a lightweight JavaScript library for syntax highlighting regular expressions in web applications. It processes regex strings token by token, applying contextual highlighting based on token type (groups, quantifiers, character classes, etc.) and active flags (like unicode). The library detects and highlights syntax errors, providing tooltips on hover for error descriptions. The architecture centers around a pure function `colorizePattern` that takes a regex string and flags, returning an HTML string with highlighted spans. This function is used by `colorizeAll` to highlight elements in the DOM. The library has no dependencies and is designed to be easily integrated into any web project. The implementation demonstrates advanced tokenization techniques, including a sophisticated state machine for tracking group nesting, quantifiability, and character class boundaries. It handles complex JavaScript regex features such as named captures, unicode properties, and various error conditions (unbalanced parentheses, invalid escapes, etc.) with precision. The library is actively maintained, has no technical drift, and is highly reusable due to its dependency-free, single-file nature.
ChatKit.js provides TypeScript type definitions and React bindings for the ChatKit web component, which is served from a CDN. The repository does not contain the actual web component implementation but offers ergonomic React integration via the `useChatKit` hook and `ChatKit` component, along with comprehensive type safety. Key functionality includes synchronizing React state with the web component, mapping custom events to React handler props, and providing imperative methods to control the chat UI (e.g., sending messages, managing threads). The library emphasizes stable references for options and event handlers to prevent stale closures in React, ensuring reliable integration with the external web component.
This is a monorepo centered on `@google/model-viewer`, a production web component that renders glTF/GLB 3D models in the browser using Three.js and Lit. The core package provides a `<model-viewer>` custom element with a rich feature surface: WebXR/Scene Viewer/Quick Look AR, animation controls, camera orbit/perspective controls, environment lighting, hotspots/annotations, a mutable scene-graph API, lazy loading, and post-processing via a companion `model-viewer-effects` package. In addition to the library itself, the repo contains `space-opera`, a Redux + Lit-based interactive editor for configuring model-viewer snippets and editing glTF materials, plus a full documentation/examples site and render-fidelity tooling that performs golden-image screenshot comparisons across renderers. Although the dominant character is an application/library monorepo, it also includes research-grade visual fidelity workflows and color science work around tone mapping.
Tencent/wujie is a production-grade micro-frontend framework that achieves native-level isolation by combining iframe sandboxing for JavaScript execution with Web Components (Shadow DOM) for CSS scoping. Unlike other micro-frontend solutions that rely on JavaScript sandbox polyfills (e.g., 'with' statements), Wujie leverages the browser's built-in iframe security model, making it robust against prototype pollution and global variable conflicts. The framework is implemented as a monorepo containing a core library (wujie-core), framework-specific integrations for Vue 2/3 and React, comprehensive examples, and an extensive test suite. The core provides lifecycle APIs (startApp, preloadApp, destroyApp) and supports multiple running modes: alive (keep-alive), singleton (lifecycle-based), and rebuild (full destroy each time). It includes a plugin system for custom asset loaders (HTML, CSS, JS), routing synchronization between main and sub-apps, and a decentralized EventBus for cross-application communication. The architecture handles degradation gracefully: if Proxy or WebComponent is unavailable, it falls back to a pure iframe with Object.defineProperty-based sandbox. The repository exhibits high craftsmanship in several areas: a dedicated EventCleanupTracker for preventing memory leaks, a custom proxy generator that patches cross-realm instanceof checks, and deferred style loading to support libraries like TinyMCE. Integration and unit tests cover lifecycle, plugins, routing sync, and memory leak scenarios. The accompanying documentation site provides detailed guides and API references. However, the codebase shows signs of maintenance burden: the example sub-apps use outdated frameworks (Angular 12, React 16/17), the integration test setup is complex and slow, and the dense patching of native DOM APIs introduces fragility across browser updates. Overall, it is a well-architected and actively maintained solution for micro-frontend orchestration.
Calx.js is a spreadsheet calculation engine that brings Excel-like functionality to web applications. It parses and evaluates formulas, manages workbooks/sheets/cells with dependency tracking, and provides both a programmatic API and jQuery plugin interface. The architecture features a modular Workbook→Sheet→Cell hierarchy with modern Chevrotain-based formula parsing, FormulaJS integration for function implementations, and efficient recalculation through dependency tracking. Key entry points include the main Calx class and jQuery plugin wrapper, with data flows proceeding from HTML attribute parsing through formula evaluation to DOM updates.
This repository provides a custom HTML element, `<clipboard-copy>`, that copies text or element content to the clipboard when clicked. Implemented as a web component extending `HTMLElement`, it supports multiple data sources: the `value` attribute, a `for` attribute that references another element by ID (including inputs, textareas, and anchor hrefs), or element text content. The element ensures accessibility by automatically adding `role="button"` and `tabindex="0"` if not present, and handles keyboard events (Enter/Space) for activation. Internally, it uses the modern `navigator.clipboard.writeText()` API when available, falling back to `document.execCommand('copy')` via a temporary hidden node. It also normalizes Unicode whitespace characters (e.g., non-breaking spaces, zero-width joiners) to plain spaces or strips them, ensuring the copied text matches visual expectations. A `clipboard-copy` custom event is dispatched on success, allowing external handlers to provide feedback. The source code is written in TypeScript, is well-structured with clear separation of concerns (clipboard logic in `clipboard.ts`, element definition in `clipboard-copy-element.ts`, and a side-effect module for registration), and includes a comprehensive test suite covering element creation, clipboard operations, shadow DOM contexts, and edge cases like disabled state and Unicode normalization. The project follows GitHub's engineering standards (eslint, prettier, CI via GitHub Actions) and is published as an npm package under `@github/clipboard-copy-element`.
The kotlin-playground repository provides a self-contained web component for embedding interactive Kotlin code editors in websites. It enables users to write, run, and see the output of Kotlin snippets directly in browser environments, supporting multiple target platforms (JVM, JavaScript, WebAssembly, Native) via communication with the Kotlin compiler service. The architecture follows a modular client-side design with clear separation between UI components (CodeMirror-based editor), execution logic, and API communication. Key features include automatic initialization via HTML attributes, configurable themes and compiler versions, extension points for custom event handlers, and iframe-based sandboxing for secure code execution. While dependent on the external kotlinlang.org compiler service, the frontend implementation demonstrates solid engineering practices with reusable patterns for API abstraction, configuration management, and platform-specific execution handling.
Gauge Card Pro is a Home Assistant Lovelace custom card that renders highly customizable gauge visualizations. It extends the native HA Gauge card with dual gauge layers (main and inner), gradient and severity modes, climate control features (HVAC, fan, swing, preset, temperature), template support, and a full visual editor. The card is built as a Lit web component and integrates deeply with Home Assistant's frontend, using internalized copies of HA and Mushroom dependencies for actions, entities, translations, and forms. Key entry points are `src/card/card.ts` (main card class) and `src/editor/editor.ts` (visual editor). Data flows from user configuration (YAML or UI) combined with HA entity state to compute gauge angles, gradient strings, indicators, and value displays. The system relies on external libraries like Lit, tinygradient, superstruct, and zod, and is distributed as a HACS plugin.
This repository is a Claude Code plugin and design system library for generating zero-dependency HTML presentations. It provides a structured workflow (SKILL.md) for an AI agent to create single-file slide decks with inline CSS/JS, featuring 34+ curated design templates (bold-template-pack) with detailed color palettes, typography scales, component definitions, and CJK internationalization guidance. The core runtime component is a reusable `<deck-stage>` web component that handles slide navigation, keyboard controls, auto-scaling, print support, and speaker notes. Supporting scripts enable Vercel deployment, PDF export via Playwright, and PowerPoint-to-JSON extraction. The repository is primarily a design specification library consumed by an AI coding agent, not a standalone application. It exhibits a hybrid nature: the templates are extensive design documentation (not executable code), while the plugin infrastructure and web component are functional code. The design philosophy emphasizes anti-generic aesthetics, fixed 16:9 stage scaling, and progressive disclosure of supporting files. Notable duplication exists between root and plugin paths, and all templates are marked alpha.
Sparnatural is a client-side, web-component-based visual SPARQL query builder. It allows non-technical users to construct complex SPARQL SELECT queries by selecting classes, properties, and values through an interactive criteria tree, with support for AND/OR, OPTIONAL, NOT EXISTS, aggregated variables, and geospatial filters. The system is configurable via SHACL or OWL shape definitions, which define available entities, properties, widgets, and datasources. It integrates with YASGUI for query editing and result display, and provides multiple built-in widget types (list, autocomplete, tree, map, date range, number, boolean, search). The core architecture is a custom HTML element (`<spar-natural>`) with a component-based UI, event-driven state management (ActionStore), and a SPARQL generation pipeline that converts an internal JSON query format to SPARQL algebra using sparqljs. The codebase demonstrates solid engineering with clean interfaces for specification providers and data providers, but carries technical debt from a legacy OWL configuration path, two query JSON formats (v1 and v13), heavy jQuery/DOM manipulation, and limited test coverage outside the SPARQL translator. It is actively maintained and well-documented, but its tight coupling to SPARQL endpoints and large dependency bundle may limit reuse in non-RDF contexts.
Firemote is a Home Assistant custom dashboard card that emulates physical remote controls for a wide range of media devices including Amazon Fire TV, Apple TV, Chromecast, NVIDIA Shield, Roku, Xiaomi, and more. The card provides realistic visual remotes with extensive customization: over 330 app launcher shortcuts, button overrides via Home Assistant scripts or actions, multiple remote styles, and support for device-specific compatibility modes. It integrates with Home Assistant's Android Debug Bridge, Android TV Remote, Apple TV, and Roku integrations. The repository contains the compiled JavaScript card and supporting data files for device definitions and translations, but the source is distributed as a single minified bundle. It is actively maintained with a large community and frequent updates.