Finally Good News - Stencil v1 has been released

Announcement Blog Post - https://ionicframework.com/blog/introducing-stencil-one-1-0-0/

Awesome StencilJS

Awesome Stencil Components

• Component Libraries
• Individual Components

Boilerplates

Tools

Awesome IDE Plugins

Awesome Stencil Articles

Miscellaneous

What is StencilJS ?

StencilJS is the new compiler to build standards compliant Web Components using the current age principles like Typescript, JSX, Virtual DOM, asynchronous rendering pipleline and lazy-loading.

What are Web Components ?

Web Components is a combination of multiple HTML & JS Specs like Custom Elements & Shadow DOM which enable us to create highly standardised reusable components which can work similarly accross any framework like React, Angular, Ember, Vue or Vanilla JS.

An Awesome Talk to Know more about #StencilJS

List of Awesome Components Made using StencilJS

We are dividing the list into 3 categories for better readibility. Also the most recent ones are on the top and older ones in the bottom.

Design Systems

• Duet Design System - A complete Stencil Based Design System component library which can be used with any SPA Framework like Angular/React etc.
• Telements - The Telements library offers a set of customizable UI components written with Stencil.js & TypeScript.

Component Libraries

• RevoGrid - Powerful data grid library built with StencilJS for reactive excel like data representation. Millons of cells support and design themes included.
• Calcite App Components - A collection of calcite components for building single page applications of certain types.
• Fitness Dashboard Components - Fitness Dashboard Components built using StencilJS
• D3-Stencil - Library of web components over popular D3 graph library
• Material Web Components: UI Components built using Material Design principles and StencilJS (https://github.com/san2beerelli/material-webcomponents)
• Stencil Components: Web UI components built on top of StencilJS
• Stencil Components: Minor Reusable components like Buttons etc.
• BlazeUI Atoms: Fully featured CSS / web component framework (https://github.com/BlazeSoftware/blaze/tree/master/packages/atoms)
• Stencil Styled Components Small library to bring the concept of styled-components to StencilJS
• Assister Chat Web Components resembling WhatsApp and Telegram for creating chatbot and live chat applications
• stencil-react: Generate React bindings for Stencil 1.x component libraries
• Bulmil: UI library based on Web Components, made with Bulma & stencil.
• Aleph: Aleph is a 3D object viewer and annotation/measurement tool built with A-Frame, AMI, StencilJS, and Ionic
• Shoelace: A forward-thinking library of web components

Individual Components

• Web Social Share - An amazing component to initiate sharing of a Web Page/URL at multiple Social Media Networks
• Elsa Workflow Designer - An amazing component to design a Workflow visually and then export it.
• Rating Component - An amazing and flexible star rating component with lots of options. There is a blog post how to create such a component too. https://www.logisticinfotech.com/blog/custom-rating-component/
• Image Comparison Slider - Slider component to compare images before and after
• Trombone Component - An amazing Trombone Component that makes music when you resize the window. It's A showcase on how StencilJs and the Web Audio API can collaborate to create awesome things.
• Fast Morph An awesome morhping UI web component to help you animate your elements from one UI state to another using Light DOM.
• Web Photo Filter An amazing high performance Photo filter web component made using StencilJS.
• Lazy Iframe: A iframe based web component which lazy load iframes as the user scrolls over them.
• Loading Spinner: A variety of loading spinners rendered using the same web component without the need of using different styles or images.
• ST-Flippy: A web component to add Flip events to any HTML element. It has a smooth animation implemented.
• ST-Signature: A Stencil component that allows the user to sign on screen and to get the bitmap of the signature.
• Web Audio: Web Audio API as a set of web components! Provides <web-audio>, <web-audio-source>, <web-audio-effect>, <web-audio-visualizer>, <web-audio-sequencer>, and <web-audio-debugger>.
• Smile To Unlock(Unique): Web Component which captures an image from the users camera and uses the Azure Cognitive Services Emotive API to figure out how happy the person is.
• Bruit.io: Fully customizable web component, collecting user feedback with screenshot and technical data to a compatible API. Try it out here.
• Stencil-Apollo - A set of Web Components based on Apollo Client
• Stencil Mobx: Manage states with Mobx on stencil components (unstable release)
• Stencil Reflector: Synchronizes decorated object members to their stencil component (alternative to stencil-mobx)
• Stencil Payment: A Web Component which allows any web app to use the Payment Request API
• Web Share: WC that makes it super easy to use the web share api.
• ST Image: WC to Lazy Load Images as user scrolls them into the view port.
• ST Muse: WC to that connects into Muse device using muse.js.
• FWT Slider: Slider Stencil Component demonstrated to work with Angular or any other framework
• ST Fetch: WC To make a Fetch API call to the backend.
• Video Player: WC for rendering an ioperable video player with controls and full screen mode too.
• Cryptocurrency Data: Web Component to display list of prices of popular Crypto Currencies
• SplitMe: Universal web component to create resizable split layouts
• Simple Buttons: Beautiful interactive buttons inspired by Material Design
• Stencil Fragment: Allows the use of <Fragment> to render multiple elements without the need of a wrapping div or returning an array.
• o-demo-bar: Development toolbox for web components made with stencil demo
• ST-Voice2Text: Web Component which allows you to use the Web Speech API in browsers where it is supported.
• STX-ABTest: A Web Component to help you implement A/B Test for your web app
• UI Avatar: A web component to render User Avatar in your web app for all your users. It has an amazing feature to show Initials of name if no image is set.
• Animatable: Animate any HTML Element using Web Animations API in a declarative way! 💅
• IonPhaser: A web component to integrate Phaser Framework with Angular, React, Vue, etc 🎮
• nice-anim: A Web Component to add "animate/reveal on scroll" by wrapping elements with it.
• always-avatar: Generate nice replacement for avatar by username or email or whatever
• Katex Expression: A web component to render KaTeX expressions.
• web-complete: A lightweight, dependency-free, styleable autocomplete web component
• word-spectrum: A tiny Web Component library built with Stencil to generate beautiful and colorful text placeholders
• Mastodon Share Button: A user friendly web component to share in mastodon.
• Remote Table: A web component table that load JSON Array data from any URL, adding search and pagination function
• Spotify Login: A web component for Spotify Login
• fa-icon: A web component for Font Awesome 5

Awesome Web/Mobile Apps built Using StencilJS

• DeckDeck Go - An awesome online Presentation maker with a mobile remote control and everything implemented using StencilJS and awesome node based APIs. Source - https://github.com/deckgo/deckdeckgo/tree/master/webcomponents

Boilerplates and templates

Ionic official

• Stencil Component Starter: Minimal boilerplate to create Stencil components.
• Stencil App Starter: Basic boilerplate for Stencil components or apps.
• Ionic PWA Toolkit Beta: Great starter template for building true PWAs with the power of Ionic and StencilJS.

Community

• Stencil Web Component Starter - A nice web components started which also tells how documentation is auto generated too.

Tools (CLIs, scripts, etc.)

Ionic official

• Create Stencil: A simple but effective npm script to start off a StencilJS project. Useful for complete apps, not just components. Uses the above starter packs Boilerplates

Awesome IDE Specific Stencil Plugins/Snippets

Visual Studio Code

• Stencil Snippets - Stencil Snippets like st-component(generate component), st-prop(add new prop), st-event (add new @Event) etc.
• Stencil Tools - Makes working with Stencil projects a breeze. Features new project, component, and test generators, snippets with automatic imports, and other helpful utilities.

Miscellaneous

• Stencil cheatsheet: Overview of Stencil best practices.

Awesome Articles Related

• Build a Fast Offline first PWA with StencilJS This is an awesome article by Christian with a good brief explanation of What are Web Components, why StencilJS and how to build an offline PWA using it. Must read if anyone is planning to build a #ProgressiveWebApp.
• Building a Modal Component using StencilJS via TDD An awesome read for anyone who is looking to create Enterprise ready Web Components using Test Driven Development approach and for all the people who always create a Modal component for React/Angular/Vue separately.
• Building a web-component library using StencilJS This is the most popular use case for all the enterprises, to use Web Components as a reusable shared library.
• How Stencil Fit Into Micro Frontend Ideas - An interesting read to know about usability of stenciljs
• Stencil with AngularJS(v1) - Using Stencil Component with AngularJS v1. Please feel free to add any component to this list by raising a PR.
• Faster Web Apps Using Stencil - An article with a small video explaining how you can develop faster web apps using StencilJS.
• How I built Smile to Unlock- How Asim built SmileToUnlock using StencilJS components.
• Stencil Todo with Redux - Awesome article explaining how to use stencil todo with redux.
• Getting Started with StencilJS - Great resource to get started with StencilJS development.
• Stencil components in React, Vue, and Angular - Step by step guide to use stencil components in the most popular JavaScript frameworks.

List of Awesome Websites Built using StencilJS

• CodeCraft Smile To Unlock Video: Asim has developed this awesome Web Component used in the videos of his course which allows users to view video only if they Smile :).
• Venue Genie: Venue Genie is the Airbnb for venues. The entire app is built with StencilJS and ReduxJS for state management.
• Stencil with Admob (via Capacitor): Very good documentation to use Admob in StencilJS, by integrating with Capacitor or Cordova. Supports mobile and web apps development. The docs webpage is built with StencilJS from markdown sources, similarly to capacitor website.

Curated By (Contributors)

mAppmechanic:

LinkedIn Bio: https://linkedin.com/in/rahatkh

Utwo

Website: http://utwo.ro

William M. Riley

Twitter: https://twitter.com/splitinfinities

Falk (Nudelsieb)

Github: https://github.com/Nudelsieb