Skip to content
List of Awesome Web Components Built with StencilJS
Branch: master
Clone or download

Latest commit

blended-ideas Added New Resource (#36)
Added new component library.
Latest commit 1e8c5c5 Feb 26, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Sep 26, 2017
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jun 1, 2019
CONTRIBUTING.md Create CONTRIBUTING.md Jun 1, 2019
LICENSE Initial commit Sep 26, 2017
README.md Added New Resource (#36) Feb 26, 2020

README.md

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

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

Watch the video

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.

Component Libraries

Individual Components

  • 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

Awesome Web/Mobile Apps built Using StencilJS

Boilerplates and templates

Ionic official

Community

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

Awesome Articles Related

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.

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

You can’t perform that action at this time.