Skip to content

mappmechanic/awesome-stenciljs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Finally Good News - Stencil v3 has been released

Announcement Blog Post - https://ionic.io/blog/announcing-stencil-3

Awesome StencilJS

Awesome Stencil Components

State Management

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.
  • Telements - The Telements library offers a set of customizable UI components written with Stencil.js & TypeScript.

Component Libraries

State Management

  • Stencil Hooks - A React-hooks API for stencil components
  • Stencil Store - Store is a lightweight shared state library by the StencilJS core team.
  • Stencil Redux - A simple redux connector for Stencil-built web components inspired by react-redux.

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

Boilerplates and templates

Ionic official

Community

Tools (CLIs, scripts, etc.)

  • Kompendium: Documentation generator for Stencil components

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.
  • 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)

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

Website: http://utwo.ro

Twitter: https://twitter.com/splitinfinities

Github: https://github.com/Nudelsieb