27
27
+ 1
0

What is Stencil?

Stencil combines some of the best features from traditional frameworks, but outputs 100% standards-compliant Custom Elements, part of the Web Component spec.
Stencil is a tool in the JavaScript Framework Components category of a tech stack.
Stencil is an open source tool with 6.9K GitHub stars and 429 GitHub forks. Here’s a link to Stencil's open source repository on GitHub

Who uses Stencil?

Companies
6 companies reportedly use Stencil in their tech stacks, including Saloon Platform, Just, and Fontumi.

Developers
21 developers on StackShare have stated that they use Stencil.

Stencil Integrations

jQuery, Node.js, React, npm, and AngularJS are some of the popular tools that integrate with Stencil. Here's a list of all 9 tools that integrate with Stencil.

Why developers like Stencil?

Here’s a list of reasons why companies and developers use Stencil
Top Reasons
Be the first to leave a pro
Stencil Reviews

Here are some stack decisions, common use cases and reviews by companies and developers who chose Stencil in their tech stack.

Pierre Chapuis
Pierre Chapuis
at Pierre Chapuis Β· | 6 upvotes Β· 11.2K views
atChilliChilli
Angular 2
Angular 2
Stencil
Stencil
Sass
Sass
TSLint
TSLint

We chose Angular 2+ because our product has a rather complex back-office, most of which is visible only to our employees and contractors.

The "full featured" approach of Angular as well as the way it deals with the data model suited this business case well. We also use the Reactive Forms module a lot, as well as Clarity (an Open Source design system by VMWare) for the internal parts of the product. We also intend to use Angular's offline features.

For user-facing parts of the product we are now considering implementing views as Web Components with Stencil. We use Sass (SCSS syntax) for styling and TSLint to enforce a style guide close to Angular's default.

See more
Michael Solati
Michael Solati
Developer Advocate at Typeform Β· | 4 upvotes Β· 11.1K views
atTypeformTypeform
Polymer
Polymer
Stencil
Stencil
#Frontend
#BootstrapCDN
#GoogleMaps
#WebComponents

As a #Frontend developer I'm used to using tools like #BootstrapCDN or some APIs/Library like #GoogleMaps to create or have styled elements with cool functionality. But this requires me remembering Bootstrap classes, or trying to get Google Maps to work in #Angular. 😒

And that's just framework agnostic solutions... If you look at framework specific libraries you end up dealing with the fact you are pigeon holed into using framework specific libraries!

Libraries like Polymer or Stencil for #WebComponents are definitely the way to go!

See more
Aaron Hans
Aaron Hans
Lead Front End Engineer at ZapLabs Β· | 1 upvotes Β· 2.8K views
atZapLabsZapLabs
Stencil
Stencil
Lit
Lit

We are leveraging @WebComponents to build front end widgets that work across all our web properties easily even when there is no other commonality in the underlying frontend stack.

Being able to ship small, self contained UI elements has allowed us to strategically eliminate technical debt in small bites while shipping highly interactive, fast to render fully reusable components constantly.

We've built some components with Stencil and Lit but the majority are still vanilla @CustomElements with the styles namespaced by the custom element name to keep them contained.

We are really happy with our ability to make forward progress without requiring any big bang rewrites of our site's underlying frameworks and to share the latest component packages across the company.

See more

Stencil Alternatives & Comparisons

What are some alternatives to Stencil?
React Router
React Router is a complete routing solution designed specifically for React.js. It painlessly synchronizes the components of your application with the URL, with first-class support for nesting, transitions, and server side rendering.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…
Ant Design
An enterprise-class UI design language and React-based implementation. Graceful UI components out of the box, base on React Component. A npm + webpack + babel + dora + dva development framework.
Angular CLI
A command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications. You can use the tool directly in a command shell, or indirectly through an interactive UI such as Angular Console.
AngularUI
UI-Modules Standalone AngularUI modules.
See all alternatives

Stencil's Followers
27 developers follow Stencil to keep up with related blogs and decisions.
jeremie olivier
Aleix Ventayol
i-arkhan
Jesus Cuesta
Ryan Hicks
John Alton
MarcinKwiatk
Mohamma76685757
Gleecus TechLabs
MikiP85