Resources to help you get more out of Stencil
Community Articles/Blogs
Disclaimer: these articles are community-created, and might contain inaccurate, or outdated information and code snippets.
- Creating and Integrating Design Systems with StencilJS
- Future-Proof Your Design System with StencilJS
- Develop A Konami Code For Any Apps With Stencil
- Build powerful frameworkless web components
- Meet Meridian, the 84.51° Design System
- Trying on different Design System: React vs. Stencil
- How we chose to build our Design System using StencilJS Web Component
- Stencil: I Think I Found My Frontend Home
- Storybook + StencilJS + Ionic 4 Angular under one roof?
- Using Your StencilJS Design System
- Create A React Custom Hooks For Your Web Components
- Creating a Progressive Web App with StencilJS and Workbox
- How to Build Reusable Web Components Using Stencil.js
- Using RxJS Observables with StencilJS and Ionic
- Apple Cements the Unlikely Rise of Web Components
- Create a Circle Progress Web Component with Conic Gradients in StencilJS
- The Basics of Unit Testing in StencilJS
- Building a Notepad Application from Scratch with Ionic (StencilJS)
- Understanding JSX for StencilJS Applications
- Publishing and Integrating a StencilJS Web Component in React
- Creating a Reusable Web Component with StencilJS
- Build Components Not Walls
- Basic and Advanced Tab Navigation with Ionic & StencilJS
- Routing with ion-router, ion-tabs, and how to pass params to tab pages
- Should Ionic & Angular Developers Learn StencilJS
- An Introduction into Stencil.js
- Using your StencilJS Design System in Framer X
- Using a Stencil-built component in Angular
- Create your First Stencil Component
- Getting Started with Stencil
- Stencil.js: It's finally time for vanilla web components!
- Stencil with MobX
- Webkomponenten mit Stencil – Ein erster Überblick (in German)
- Stencil’e Giriş (in Turkish)
- Stencil’de Bileşenler Arası Haberleşme (in Turkish)
- Stencil Bileşen Yaşam Döngüsü (in Turkish)
- Stencil Tricks - A collection of community-written articles on how to do awesome things in Stencil JS
- Stencil Testing Cheatsheet - A collection of useful code snippets and examples for writing End to End tests in a Stencil project.
Videos
- Stencil: a built-time approach to the web by Manu Martinez-Almeida | JSConf EU 2019
- Architecting A Component Compiler
- How to create a web component in StencilJS - VERY SMALL BUNDLE SIZE!
- Getting Started with Ionic + Stencil (Creating Ionic Applications with StencilJS)
- A Review of Stencil Web Components
- StencilJS fundamentals
- Introduction to Stencil: Styling Components using SASS, LESS, Shadow DOM & CSS Variables
- Stencil - Getting Started (video)
- Building StencilJS with TypeScript
- Announcing Stencil.js
Templates & Tools
- Official Stencil App Starter Project
- Official Stencil Component Starter Project
- Angular Stencil: use Stencil-built components in Angular
- Stencil + Firebase + Stencil Store Web App Starter Project
- How Stencil and Storybook help build fast, accessible web apps with Web Components
- Enhance your Stencil Web Components in Storybook with Knobs, Actions and JSX
- xLayers Lite
- yo Stencil: A yeoman generator for Stencil
- Stencil Snippets: A Stencil snippets package for VS Code
- tslint-stencil: TSLint rules for Stencil components
- stencil-lerna: lerna based Stencil monorepo starter project
- WebComponents.dev: Online Component IDE - Try Stencil right away
- @nxext/stencil: Use stencil projects in Nx
3rd Party Components, Templates and Tools
- Animatable components with Web Animations API
- Stencil Router
- Stencil Card Component
- st-image: lazy loaded images
- st-payment: Stencil Payment API Component
- st-fetch: A simple component for performing http fetch calls
- web-photo-filter: Use webGL for amazing instagram like filters
- stencil-flip-images: Awesome animated image gallery
- d3-stencil: Charts built with D3 and Stencil. Framework-agnostic, simple.
- 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 🎮
- Stace Editor: 📖 A web component wrapper for Ace Editor, using Stencil + brace
- <s-swipe /> A web component to detect swipe events. Framework-agnostic, simple.
- <smt-progress-spinner /> Stencil progress spinner component is a circular indicators of progress and activity. It is inspired from material progress bar indicator. Framework-agnostic, simple.
- Step by step guide of using stencil component in Vue
- Step by step guide of using stencil component in React
- Step by step guide of using stencil component in Angular
- Step by step guide of using stencil component in Html
- A showcase of product list and cart components in Stencil js to demonstrate Framework-agnostic approach and implement as a Micro frontend.
- RevoGrid "excel like" complex virtual grid with amazing performance
- Alert Component
- Badge Component
- Progress Component
- A small collection of Awesome Stencil UI components
- Soft Components (Neumorphism design inspired web components)
Demos
Demos of apps built using Stencil and Ionic
Present Stencil
A forkable presentation for your next meetup or conference talk on Stencil. Built with Reveal.js
Stencil PresentationSource