# @stencil/core

> A Compiler for Web Components and Progressive Web Apps

Latest version **4.45.0** (published 2026-09-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @stencil/core
pnpm add @stencil/core
yarn add @stencil/core
bun add @stencil/core
```

Provides the command `stencil`.

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score; popular repo.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 4.45.0 |
| Published | 2026-09-12 |
| First published | 2017-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 0 |
| Unpacked size | 21.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 13126 |
| Author | Ionic Team |
| Maintainers | ionicjs, gm-os, vmfo, gnbm, johnny.jenkins, stencil-bot |
| Keywords | web components, components, stencil, ionic, webapp, custom elements, pwa, progressive web app |

## Links

- npm: https://www.npmjs.com/package/@stencil/core
- Repository: https://github.com/stenciljs/core
- Homepage: https://stenciljs.com/
- Issues: https://github.com/stenciljs/core/issues
- npm.io page: https://npm.io/package/@stencil/core

## Recent versions

- 4.45.0 (latest) — 2026-09-12
- 4.45.0-dev.1790053718.1c81131 (nightly) — 2026-09-22
- 5.0.0-beta.12 (beta) — 2026-09-16
- 5.0.0-alpha.35 (alpha) — 2026-08-24
- 4.43.4-dev.1780415238.cd4f59d (dev) — 2026-06-02
- 4.0.0 (v4-next) — 2023-06-26
- 4.0.0-rc.0 (v4.0.0_rc.0) — 2023-06-16
- 4.0.0-beta.2 (v4.0.0_beta.2) — 2023-06-07
- 4.0.0-beta.1 (v4.0.0_beta.1) — 2023-06-02
- 4.0.0-beta.0 (v4.0.0_beta.0) — 2023-05-30
- 3.2.1 (UNKNOWN) — 2023-04-10
- 3.0.0 (v3-next) — 2023-01-25
- 3.0.0-rc.1 (v3.0.0_rc.1) — 2023-01-23
- 3.0.0-rc.0 (v3.0.0_rc.0) — 2023-01-17
- 3.0.0-beta.1 (v3.0.0_beta.1) — 2023-01-09
- … 1916 more at https://npm.io/package/@stencil/core/versions

## README

<p align="center">
  <a href="#">
    <img alt="stencil-logo" src="https://github.com/stenciljs/core/blob/main/stencil-logo.png" width="60">
  </a>
</p>

<h1 align="center">
  Stencil
</h1>

<p align="center">
  A compiler for generating <a href="https://www.webcomponents.org/introduction" target="_blank" rel="noopener noref">Web Components</a> using technologies like TypeScript and JSX, built by the <a href="https://ionic.io/">Ionic team</a>.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@stencil/core">
    <img src="https://img.shields.io/npm/v/@stencil/core.svg" alt="StencilJS is released under the MIT license." /></a>
  <a href="https://github.com/stenciljs/core/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-yellow.svg" alt="StencilJS is released under the MIT license." />
  </a>
  <a href="https://github.com/stenciljs/core/blob/main/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
  </a>
  <a href="https://twitter.com/stenciljs">
    <img src="https://img.shields.io/badge/follow-%40stenciljs-1DA1F2?logo=twitter" alt="Follow @stenciljs">
  </a>
  <a href="https://chat.stenciljs.com">
    <img src="https://img.shields.io/discord/520266681499779082?color=7289DA&label=%23stencil&logo=discord&logoColor=white" alt="Official Ionic Discord" />
  </a>
</p>

<h2 align="center">
  <a href="https://stenciljs.com/docs/getting-started#starting-a-new-project">Quick Start</a>
  <span> · </span>
  <a href="https://stenciljs.com/docs/introduction">Documentation</a>
  <span> · </span>
  <a href="https://github.com/stenciljs/core/blob/main/CONTRIBUTING.md">Contribute</a>
  <span> · </span>
  <a href="https://ionicframework.com/blog/tag/stencil/">Blog</a>
  <br />
  Community:
  <a href="https://chat.stenciljs.com">Discord</a>
  <span> · </span>
  <a href="https://forum.ionicframework.com/c/stencil/21/">Forums</a>
  <span> · </span>
  <a href="https://twitter.com/stenciljs">Twitter</a>
</h2>

### Getting Started

Start a new project by following our quick [Getting Started guide](https://stenciljs.com/docs/getting-started).
We would love to hear from you!
If you have any feedback or run into issues using Stencil, please file an [issue](https://github.com/stenciljs/core/issues/new) on this repository.

### Examples
A Stencil component looks a lot like a class-based React component, with the addition of TypeScript decorators:
```tsx
import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'my-component',            // the name of the component's custom HTML tag
  styleUrl: 'my-component.css',   // css styles to apply to the component
  shadow: true,                   // this component uses the ShadowDOM
})
export class MyComponent {
  // The component accepts two arguments:
  @Prop() first: string;
  @Prop() last: string;

   //The following HTML is rendered when our component is used
  render() {
    return (
      <div>
        Hello, my name is {this.first} {this.last}
      </div>
    );
  }
}
```

The component above can be used like any other HTML element:

```html
<my-component first="Stencil" last="JS"></my-component>
```

Since Stencil generates web components, they work in any major framework or with no framework at all.
In many cases, Stencil can be used as a drop in replacement for traditional frontend framework, though using it as such is certainly not required.

### Contributing

Thanks for your interest in contributing!
Please take a moment to read up on our guidelines for [contributing](https://github.com/stenciljs/core/blob/main/CONTRIBUTING.md). We've created comprehensive technical documentation for contributors that explains Stencil's internal architecture, including the compiler, runtime, build system, and other core components in the [/docs](/docs/) directory.
Please note that this project is released with a [Contributor Code of Conduct](https://github.com/stenciljs/core/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

---
_Source: https://npm.io/package/@stencil/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._