Alternatives to Stencil logo

Alternatives to Stencil

React Router, styled-components, Ant Design, Angular CLI, and Vue CLI are the most popular alternatives and competitors to Stencil.
27
29
+ 1
0

What is Stencil and what are its top alternatives?

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 7.2K GitHub stars and 441 GitHub forks. Here鈥檚 a link to Stencil's open source repository on GitHub

Stencil alternatives & related posts

React Router logo

React Router

858
630
9
858
630
+ 1
9
A complete routing solution for React.js
React Router logo
React Router
VS
Stencil logo
Stencil

related React Router posts

Lee Benson
Lee Benson
React
React
GraphQL
GraphQL
Apollo
Apollo
JavaScript
JavaScript
TypeScript
TypeScript
Webpack
Webpack
React Helmet
React Helmet
styled-components
styled-components
Sass
Sass
Less
Less
PostCSS
PostCSS
Bootstrap
Bootstrap
Semantic UI
Semantic UI
Foundation
Foundation
React Router
React Router
Koa
Koa
#JSX
#React.
#Css
#StyledComponents.
#Async
#HTML
#GraphQL
#Apollo

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
styled-components logo

styled-components

369
167
1
369
167
+ 1
1
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps...
styled-components logo
styled-components
VS
Stencil logo
Stencil

related styled-components posts

Johnny Bell
Johnny Bell
Senior Software Engineer at StackShare | 14 upvotes 307.3K views
atStackShareStackShare
Markdown
Markdown
React
React
GraphQL
GraphQL
Ruby
Ruby
Showdown
Showdown
Glamorous
Glamorous
Emotion
Emotion
styled-components
styled-components
#Frontend
#CssInJs
#StackDecisionsLaunch

For Stack Decisions I needed to add Markdown in the decision composer to give our users access to some general styling when writing their decisions. We used React & GraphQL on the #Frontend and Ruby & GraphQL on the backend.

Instead of using Showdown or another tool, We decided to parse the Markdown on the backend so we had more control over what we wanted to render in Markdown because we didn't want to enable all Markdown options, we also wanted to limit any malicious code or images to be embedded into the decisions and Markdown was a fairly large to import into our component so it was going to add a lot of kilobytes that we didn't need.

We also needed to style how the markdown looked, we are currently using Glamorous so I used that but we are planning to update this to Emotion at some stage as it has a fairly easy upgrade path rather than switching over to styled-components or one of the other cssInJs alternatives.

Also we used React-Mentions for tagging tools and topics in the decisions. Typing @ will let you tag a tool, and typing # will allow you to tag a topic.

The Markdown options that we chose to support are tags: a, code, u, b, em, pre, ul, ol, li.

If there are anymore tags you'd love to see added in the composer leave me a comment below and we will look into adding them.

#StackDecisionsLaunch

See more
Lee Benson
Lee Benson
React
React
GraphQL
GraphQL
Apollo
Apollo
JavaScript
JavaScript
TypeScript
TypeScript
Webpack
Webpack
React Helmet
React Helmet
styled-components
styled-components
Sass
Sass
Less
Less
PostCSS
PostCSS
Bootstrap
Bootstrap
Semantic UI
Semantic UI
Foundation
Foundation
React Router
React Router
Koa
Koa
#JSX
#React.
#Css
#StyledComponents.
#Async
#HTML
#GraphQL
#Apollo

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
Angular CLI logo

Angular CLI

257
194
0
257
194
+ 1
0
A command line interface for Angular
    Be the first to leave a pro
    Angular CLI logo
    Angular CLI
    VS
    Stencil logo
    Stencil

    related Angular CLI posts

    Angular 2
    Angular 2
    Angular CLI
    Angular CLI
    TypeScript
    TypeScript
    Visual Studio Code
    Visual Studio Code
    Babel
    Babel
    Webpack
    Webpack

    Picked Angular 2 as framework since Angular CLI made it easy to get started on a self-contained frontend web project with TypeScript for easier development -- thanks to intellisense extensions for Visual Studio Code, hassle-free browser compatibility with the built-in Babel transpiler and packaging with the built-in Webpack configuration.

    See more
    Vue CLI logo

    Vue CLI

    169
    157
    0
    169
    157
    + 1
    0
    Standard Tooling for Vue.js Development
      Be the first to leave a pro
      Vue CLI logo
      Vue CLI
      VS
      Stencil logo
      Stencil
      AngularUI logo

      AngularUI

      147
      138
      0
      147
      138
      + 1
      0
      The companion suite(s) to the AngularJS framework
        Be the first to leave a pro
        AngularUI logo
        AngularUI
        VS
        Stencil logo
        Stencil
        Angular Material  logo

        Angular Material

        143
        128
        2
        143
        128
        + 1
        2
        Easy to use material design for angular
        Angular Material  logo
        Angular Material
        VS
        Stencil logo
        Stencil
        Storybook logo

        Storybook

        115
        59
        0
        115
        59
        + 1
        0
        Build bulletproof UI components faster
          Be the first to leave a pro
          Storybook logo
          Storybook
          VS
          Stencil logo
          Stencil

          related Storybook posts

          Robert Zuber
          Robert Zuber
          CTO at CircleCI | 16 upvotes 383.6K views
          atCircleCICircleCI
          Next.js
          Next.js
          React
          React
          Storybook
          Storybook
          TypeScript
          TypeScript
          Emotion
          Emotion
          GraphQL
          GraphQL
          Apollo
          Apollo
          Jest
          Jest
          Percy
          Percy
          Cypress
          Cypress

          We are in the process of adopting Next.js as our React framework and using Storybook to help build our React components in isolation. This new part of our frontend is written in TypeScript, and we use Emotion for CSS/styling. For delivering data, we use GraphQL and Apollo. Jest, Percy, and Cypress are used for testing.

          See more
          Vue Router logo

          Vue Router

          113
          69
          0
          113
          69
          + 1
          0
          The official router for Vue.js
            Be the first to leave a pro
            Vue Router logo
            Vue Router
            VS
            Stencil logo
            Stencil

            related Vue Router posts

            Tim Nolet
            Tim Nolet
            Founder, Engineer & Dishwasher at Checkly | 11 upvotes 32.1K views
            atChecklyHQChecklyHQ
            Vue.js
            Vue.js
            Intercom
            Intercom
            JavaScript
            JavaScript
            Node.js
            Node.js
            vuex
            vuex
            Vue Router
            Vue Router

            Vue.js Intercom JavaScript Node.js vuex Vue Router

            My SaaS recently switched to Intercom for all customer support and communication. To get the most out of Intercom, you need to integrate it with your app. This means instrumenting some code and tweaking some bits of your app's navigation. Checkly is a 100% Vue.js app, so in this post we'll look at the following:

            • Identifying a user with some handy attributes
            • Getting page views right with Vue Router
            • Sending events with Vuex
            • Some nice things you can now do in Intercom

            After finishing this integration, you can actively segment your customers into trial, lapsed, active etc. etc.

            See more
            Vue.js
            Vue.js
            vuex
            vuex
            Vue Router
            Vue Router
            Quasar Framework
            Quasar Framework
            Electron
            Electron
            Node.js
            Node.js
            npm
            npm
            Yarn
            Yarn
            Git
            Git
            GitHub
            GitHub
            Netlify
            Netlify

            Vue.js vuex Vue Router Quasar Framework Electron Node.js npm Yarn Git GitHub Netlify My tech stack that helps me develop quickly and efficiently. Wouldn't want it any other way.

            See more
            Angular Universal logo

            Angular Universal

            109
            104
            1
            109
            104
            + 1
            1
            A technology that renders Angular applications on the server
            Angular Universal logo
            Angular Universal
            VS
            Stencil logo
            Stencil
            Emotion logo

            Emotion

            74
            66
            0
            74
            66
            + 1
            0
            The Next Generation of CSS in JS
              Be the first to leave a pro
              Emotion logo
              Emotion
              VS
              Stencil logo
              Stencil

              related Emotion posts

              Robert Zuber
              Robert Zuber
              CTO at CircleCI | 16 upvotes 383.6K views
              atCircleCICircleCI
              Next.js
              Next.js
              React
              React
              Storybook
              Storybook
              TypeScript
              TypeScript
              Emotion
              Emotion
              GraphQL
              GraphQL
              Apollo
              Apollo
              Jest
              Jest
              Percy
              Percy
              Cypress
              Cypress

              We are in the process of adopting Next.js as our React framework and using Storybook to help build our React components in isolation. This new part of our frontend is written in TypeScript, and we use Emotion for CSS/styling. For delivering data, we use GraphQL and Apollo. Jest, Percy, and Cypress are used for testing.

              See more
              Johnny Bell
              Johnny Bell
              Senior Software Engineer at StackShare | 14 upvotes 307.3K views
              atStackShareStackShare
              Markdown
              Markdown
              React
              React
              GraphQL
              GraphQL
              Ruby
              Ruby
              Showdown
              Showdown
              Glamorous
              Glamorous
              Emotion
              Emotion
              styled-components
              styled-components
              #Frontend
              #CssInJs
              #StackDecisionsLaunch

              For Stack Decisions I needed to add Markdown in the decision composer to give our users access to some general styling when writing their decisions. We used React & GraphQL on the #Frontend and Ruby & GraphQL on the backend.

              Instead of using Showdown or another tool, We decided to parse the Markdown on the backend so we had more control over what we wanted to render in Markdown because we didn't want to enable all Markdown options, we also wanted to limit any malicious code or images to be embedded into the decisions and Markdown was a fairly large to import into our component so it was going to add a lot of kilobytes that we didn't need.

              We also needed to style how the markdown looked, we are currently using Glamorous so I used that but we are planning to update this to Emotion at some stage as it has a fairly easy upgrade path rather than switching over to styled-components or one of the other cssInJs alternatives.

              Also we used React-Mentions for tagging tools and topics in the decisions. Typing @ will let you tag a tool, and typing # will allow you to tag a topic.

              The Markdown options that we chose to support are tags: a, code, u, b, em, pre, ul, ol, li.

              If there are anymore tags you'd love to see added in the composer leave me a comment below and we will look into adding them.

              #StackDecisionsLaunch

              See more
              React Hot Loader logo

              React Hot Loader

              47
              36
              0
              47
              36
              + 1
              0
              Tweak React components in real time
                Be the first to leave a pro
                React Hot Loader logo
                React Hot Loader
                VS
                Stencil logo
                Stencil
                React Helmet logo

                React Helmet

                40
                27
                0
                40
                27
                + 1
                0
                A document head manager for React
                  Be the first to leave a pro
                  React Helmet logo
                  React Helmet
                  VS
                  Stencil logo
                  Stencil

                  related React Helmet posts

                  Lee Benson
                  Lee Benson
                  React
                  React
                  GraphQL
                  GraphQL
                  Apollo
                  Apollo
                  JavaScript
                  JavaScript
                  TypeScript
                  TypeScript
                  Webpack
                  Webpack
                  React Helmet
                  React Helmet
                  styled-components
                  styled-components
                  Sass
                  Sass
                  Less
                  Less
                  PostCSS
                  PostCSS
                  Bootstrap
                  Bootstrap
                  Semantic UI
                  Semantic UI
                  Foundation
                  Foundation
                  React Router
                  React Router
                  Koa
                  Koa
                  #JSX
                  #React.
                  #Css
                  #StyledComponents.
                  #Async
                  #HTML
                  #GraphQL
                  #Apollo

                  ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

                  ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

                  React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

                  styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

                  React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

                  Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

                  See more
                  React Starter Kit logo

                  React Starter Kit

                  39
                  50
                  4
                  39
                  50
                  + 1
                  4
                  A skeleton of an "isomorphic" web application / SPA built with React.js, Express, Flux, and more
                  React Starter Kit logo
                  React Starter Kit
                  VS
                  Stencil logo
                  Stencil
                  react-beautiful-dnd logo

                  react-beautiful-dnd

                  30
                  44
                  0
                  30
                  44
                  + 1
                  0
                  Beautiful and accessible drag and drop for lists with React (by Atlassian)
                    Be the first to leave a pro
                    react-beautiful-dnd logo
                    react-beautiful-dnd
                    VS
                    Stencil logo
                    Stencil
                    Buefy logo

                    Buefy

                    25
                    27
                    0
                    25
                    27
                    + 1
                    0
                    UI Components for Vue.js Based on Bulma
                      Be the first to leave a pro
                      Buefy logo
                      Buefy
                      VS
                      Stencil logo
                      Stencil
                      CSS Blocks logo

                      CSS Blocks

                      23
                      23
                      0
                      23
                      23
                      + 1
                      0
                      A component-oriented CSS authoring system by LinkedIn
                        Be the first to leave a pro
                        CSS Blocks logo
                        CSS Blocks
                        VS
                        Stencil logo
                        Stencil
                        angular-gantt logo

                        angular-gantt

                        18
                        29
                        0
                        18
                        29
                        + 1
                        0
                        Gantt chart component for AngularJS
                          Be the first to leave a pro
                          angular-gantt logo
                          angular-gantt
                          VS
                          Stencil logo
                          Stencil
                          Ember-cli logo

                          Ember-cli

                          15
                          15
                          0
                          15
                          15
                          + 1
                          0
                          The command line interface for ambitious web applications
                            Be the first to leave a pro
                            Ember-cli logo
                            Ember-cli
                            VS
                            Stencil logo
                            Stencil
                             Elemental UI logo

                            Elemental UI

                            14
                            20
                            0
                            14
                            20
                            + 1
                            0
                            A UI Toolkit for React.js Websites and Apps
                              Be the first to leave a pro
                               Elemental UI logo
                              Elemental UI
                              VS
                              Stencil logo
                              Stencil