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.
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
- 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.
- Stencil Components: Web UI components built on top of StencilJS
- Stencil Mobx: Manage states with Mobx on stencil components (unstable release)
- Cryptocurrency Data: Web Component to display list of prices of popular Crypto Currencies
- Stencil Components: Minor Reusable components like Buttons etc.
- BlazeUI: Fully featured CSS / web component framework
- SplitMe: Universal web component to create resizable split layouts
- Simple Buttons: Beautiful interactive buttons inspired by Material Design
- Stencil Fragment: Allows the use of to render multiple elements without the need of a wrapping div or returning an array.
- Stencil Styled Components Small library to bring the concept of styled-components to StencilJS
- o-demo-bar: Development toolbox for web components made with stencil demo
- Bruit.io: Fully customizable web component, collecting user feedback with screenshot and technical data to a compatible API. Try it out here.
- Stencil Components: Minor Reusable components like Buttons etc.
- 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.
- ST-Voice2Text: Web Component which allows you to use the Web Speech API in browsers where it is supported.
- LithiumJS (Under Development): A set of Web Components for building UI Screens like Drawer, Inputs, Modal, Notifications etc.
- 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.
- Knitter UI: A set of UI building blocks as web components to create amazing UIs. Right now it has an extensive set of buttons.
- 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>.
- 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.
- 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
- 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.
- Stencil cheatsheet: Overview of Stencil best practices.
- 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.
- 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 :).
LinkedIn Bio: https://linkedin.com/in/rahatkh
Website: http://utwo.ro
Twitter: https://twitter.com/splitinfinities