https://github.com/ionic-team/stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://github.com/ionic-team/stencil

custom-elements ionic ssg ssr static-site-generator stencil stenciljs typescript webcomponents

Last synced: 4 days ago
JSON representation

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.

• Host: GitHub
• URL: https://github.com/ionic-team/stencil
• Owner: ionic-team
• License: other
• Created: 2017-02-15T18:57:07.000Z (almost 8 years ago)
• Default Branch: main
• Last Pushed: 2024-12-06T16:19:30.000Z (7 days ago)
• Last Synced: 2024-12-07T19:37:20.613Z (6 days ago)
• Topics: custom-elements, ionic, ssg, ssr, static-site-generator, stencil, stenciljs, typescript, webcomponents
• Language: TypeScript
• Homepage: https://stenciljs.com
• Size: 72.8 MB
• Stars: 12,609
• Watchers: 177
• Forks: 792
• Open Issues: 295
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

• awesome - stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team (TypeScript)
• awesome - ionic-team/stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase. (TypeScript)
• awesome-github-star - stencil - ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase. | ionic-team | 11938 | (TypeScript)
• awesome-list - stencil - ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase. | ionic-team | 9541 | (TypeScript)
• awesome-web-components - Stencil - Compiler for generating Web Components. (Libraries / Class Based)
• awesome-starred - ionic-team/stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and tradi (typescript)
• my-awesome-list - stencil - ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase. | ionic-team | 12614 | (TypeScript)
• jimsghstars - ionic-team/stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and tradi (TypeScript)
• awesome-stencil - Stencil on GitHub

README

        


  

    

  





  Stencil





  A compiler for generating Web Components using technologies like TypeScript and JSX, built by the Ionic team.





  

    

  

    

  

  

    

  

  

    

  

  

    

  





  Quick Start

   · 

  Documentation

   · 

  Contribute

   · 

  Blog

  


  Community:

  Discord

   · 

  Forums

   · 

  Twitter



### 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/ionic-team/stencil/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 (

      


        Hello, my name is {this.first} {this.last}

      

    );

  }

}

```


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

```html

```

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/ionic-team/stencil/blob/main/CONTRIBUTING.md).

Please note that this project is released with a [Contributor Code of Conduct](https://github.com/ionic-team/stencil/blob/main/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.