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
- @stencil/eslint-plugin: ESLint rules for Stencil components
- 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
- 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
- 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
Thanks for your interest!
We just need some basic information so we can send the guide your way.