# ionic-team/stencil

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ionic-team-stencil).**

13,100 stars · 845 forks · TypeScript · NOASSERTION

## Links

- GitHub: https://github.com/ionic-team/stencil
- Homepage: https://stenciljs.com
- awesome-repositories: https://awesome-repositories.com/repository/ionic-team-stencil.md

## Description

Stencil is a compiler used for authoring web component libraries and developing framework-agnostic user interface elements. It transforms TypeScript and JSX source code into standard custom elements that operate natively in the browser.

The project enables the implementation of design systems and enterprise component systems by sharing a single codebase across different JavaScript frameworks. It generates specific adapter layers that allow these custom elements to be used as native components in React, Angular, and Vue.

The toolset incorporates ahead-of-time compilation to minimize bundle size and utilizes lazy-loading component hydration to defer the initialization of logic until an element is rendered. It also employs virtual DOM diffing and a static type system to manage component properties and events.

## Tags

### Programming Languages & Runtimes

- [Component Compilers](https://awesome-repositories.com/f/programming-languages-runtimes/source-code-compilers/multi-target-compilers/component-compilers.md) — Transforms TypeScript and JSX source code into standard custom elements that run natively in the browser.
- [Ahead-Of-Time Compilation](https://awesome-repositories.com/f/programming-languages-runtimes/ahead-of-time-compilation.md) — Implements ahead-of-time compilation to remove runtime overhead and minimize final bundle size.
- [Component Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/type-systems/typescript-declaration-tooling/component-type-definitions.md) — Uses a static type system to ensure component properties and events remain consistent throughout the build process.

### User Interface & Experience

- [Cross-Framework Component Generators](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ui-framework-components/cross-framework-component-generators.md) — Compiles unified component source code into native implementations for multiple frontend frameworks. ([source](https://github.com/ionic-team/stencil#readme))
- [Framework-Agnostic UI Development](https://awesome-repositories.com/f/user-interface-experience/framework-agnostic-ui-development.md) — Allows creation of user interface elements that work in any environment, including React, Angular, Vue, or plain HTML.
- [Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/component-implementation-patterns/design-system-implementations.md) — Provides a technical codebase of components to turn a visual design language into a scalable implementation.

### Web Development

- [Framework Integration Wrappers](https://awesome-repositories.com/f/web-development/framework-integration-wrappers.md) — Generates specific adapter layers that allow custom elements to be used as native components in React, Angular, and Vue.
- [Framework Component Adapters](https://awesome-repositories.com/f/web-development/framework-integrations/framework-component-adapters.md) — Provides specialized wrapper layers that ensure UI components maintain functional consistency across different JavaScript frameworks.
- [Web Components](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/web-components.md) — Provides tools for authoring and distributing custom elements based on web standards for use across multiple applications.
- [Lazy Loading](https://awesome-repositories.com/f/web-development/lazy-loading.md) — Defers the downloading and initialization of component logic until the element is actually rendered on the screen.
- [Enterprise Component Systems](https://awesome-repositories.com/f/web-development/ui-component-libraries/enterprise-component-systems.md) — Enables the building of scalable libraries of reusable UI components that maintain consistent look and feel across company projects.
- [Virtual DOM Diffing](https://awesome-repositories.com/f/web-development/virtual-dom-diffing.md) — Tracks changes to a light representation of the UI to update only the necessary parts of the actual browser DOM.

### Part of an Awesome List

- [Component Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/component-libraries.md) — Compiler for generating standards-compliant web components.