stencil VS turbo

Compare stencil vs turbo and see what are their differences.


A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase. (by ionic-team)


The speed of a single-page web application without having to write any JavaScript (by hotwired)
Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Access the most powerful time series database as a service
  • Sonar - Write Clean JavaScript Code. Always.
stencil turbo
45 112
11,498 4,894
1.3% 4.9%
9.8 9.3
3 days ago 6 days ago
TypeScript TypeScript
GNU General Public License v3.0 or later MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.


Posts with mentions or reviews of stencil. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-03-24.
  • Is there a plugin that abstracts registering web components with React?
    3 projects | | 24 Mar 2023
    I guess my problem is more specific to my overall architecture. I have components that when are placed in the DOM, have props rendered on them by their parent elements. I'm using stencil to do this.
  • The benefits of Web Component Libraries
    4 projects | | 27 Feb 2023
    Web component browser APIs aren't that many, and not that hard to grasp (if you don't know about them, have a look at Google's Learn HTML section and MDN's Web Components guide); but creating a web component actually requires taking care of many small things. This is where web component libraries come in very handy, freeing us of having to think about some of those things by taking care of them for us. Most of the things I'll mention here are handled one way of another by other libraries (GitHub's Catalyst, Haunted, Hybrids, Salesforce's LWC, Slim.JS, Ionic's Stencil) but I'll focus on Google's Lit and Microsoft's FAST here as they probably are the most used web component libraries out there (ok, I lied, Lit definitely is, FAST not that much, far behind Lit and Stencil; but Lit and FAST have many things in common, starting with the fact that they are just native web components, contrary to Stencil that compiles to a web component). Both Lit and FAST leverage TypeScript decorators to simplify the code even further so I'll use that in examples, even though they can also be used in pure JS (decorators are coming to JS soon BTW). I'll also leave the most apparent yet most complex aspect for the end.
  • Web Components
    5 projects | | 9 Dec 2022
    Look into .
    5 projects | | 9 Dec 2022
    We used for web components to be consumed by angular, AEM and react at a previous employer. It uses tsx/jsx. Components are easy to write and it has good documentation.
  • Hexagonal architecture as a solution to the obsolescence of UI frameworks
    4 projects | | 7 Nov 2022
    For the creation of web components, even though writing in vanilla js is an option, we have chosen to do it via a dedicated framework, which will solve many potential integration/bundling problems. The choice of the framework will be made according to different factors that are not part of the scope of this article.
  • Ask HN: Help me pick a front-end framework
    13 projects | | 11 Sep 2022
    Maybe have a look at Stencil (+ Ionic).


    - Simple to learn

    - Doesn't change all the time

    - First-class TypeScript support

    - Good default UI via Ionic

    - Compiles to Web Components (although to be honest, this doesn't really matter)

    - Easy testing

    - Ionic as a company invests in Ionic the framework + Stencil the compiler. Might be around in 10 years, altough things could change. But this is true for all frameworks.

    - You basically get an iOS/Android app for free, if you just dump the output in Capacitor (also developed by Ionic the company).


    - Stencil is not very widespread as a frontend framework.

  • A Letter to D1sc0rd for not Supporting the Linux Desktop
    7 projects | | 29 May 2022
    because react-native is only reactlike. I may or may not want to stick with that. I think something like this is leading us towards a better and less UI lib specific approach. . I don't think is 100% where we end up, but it is based on web components, so it's moving the entire ecosystem forward, not just a slice of it.
  • By Crayons and For Crayons
    12 projects | | 13 May 2022
    The app is built using vanilla Web Components without using any component publishing libraries like Stencil, Lit and so on. The reason being I met with some roadblocks in building a drag-n-drop editor using these libraries. Actually the Crayons Team itself is using Stencil to build the Crayons components using TypeScript and React-like component semantics and finally publish them as platform native Web components and React wrappers for the same. You can find out more about this in the Stencil documentation.
  • Why we chose WebComponents for our Design System
    4 projects | | 5 May 2022
  • A Quick Guide to Mitosis: Why You Need It and How You Can Use It
    5 projects | | 4 May 2022
    This might sound very similar to the work the Ionic team did with Stencil. The one main difference is that we're not just outputting web components. Rather full framework-ready JavaScript. You can even compile the output to Stencil as well.


Posts with mentions or reviews of turbo. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2023-03-28.
  • Show HN: I built developer tooling for the Airtable API that I needed
    2 projects | | 28 Mar 2023
    It's built using Go and html/template from the standard library.

    For interactivity I wrote some custom JS, I think it's similar to libraries like or, this stuff is inside the application though.

    Let me know if there's anything you were particularly interested in knowing.

  • How to use View Transitions in Hotwire Turbo
    10 projects | | 16 Feb 2023
    So let’s add the following CSS to the index template (Slim recognizes a css: block that just renders a normal tag):
    / app/views/counter/index.html.slim
    / (anywhere outside the Turbo Frame tag)
      /* (1) */
      #counter {
        view-transition-name: counter;
        contain: layout;
      /* (2) */
      @keyframes rotate-out {
        to {
          transform: rotate(90deg);
      @keyframes rotate-in {
        from {
          transform: rotate(-90deg);
      /* (3) */
      ::view-transition-old(counter) {
        animation-duration: 200ms;
        animation-name: -ua-view-transition-fade-out, rotate-out;
      ::view-transition-new(counter) {
        animation-duration: 200ms;
        animation-name: -ua-view-transition-fade-in, rotate-in;
    Enter fullscreen mode Exit fullscreen mode

    Let’s break this code down a bit:

    1. The CSS selector #counter matches the counter div and the view-transition-name property names this area of the screen, for the purpose of View Transitions, as counter. This name will be used in the animation declarations below.

      The clone property currently must be added here for some reasons internal to the current View Transitions implementation in Chrome and must be set to paint or layout. This restriction is planned to be removed from the specification, though, and in fact I’ve heard that it is not needed in Chrome Canary any more.

    2. The rotation animation keyframes are defined here. Note that while the transition also uses fade-in and fade-out animations, they don’t have to be defined here because the spec requires browsers to implement them natively under the name -ua-view-transition-fade-in/out.

    3. The CSS animations for the counter (the View Transition area named counter) are configured here. The CSS selectors here are some of the pseudo-elements automatically created during the transition. The -old pseudo-element represents a screenshot of the old DOM state that should somehow disappear or ”go away“ from the viewport and the -new pseudo-element represents a live version of the final DOM state that should be brought into sight.

    So, overall, this code selects a portion of the page and animates it independently from the rest of the page during Turbo Frames DOM updates. Behind the scenes, the default cross-fade for the rest of the page still also takes place, it just is not visible because all its elements are visually identical. The result looks like this:

    A few initial tips & tricks

    Does this work for Turbo Drive visits, too?

    Sure it does and it’s actually pretty easy! All we have to do is define the same event handler as we did above but attach it to the turbo:before-render event instead. By default we’ll get a cross-fade animation of the whole page during Turbo Drive page visits.

    Do not try to ”name“ the Turbo Frame itself

    When playing with Turbo Frame View Transitions I first tried to use a custom animation for the whole Turbo Frame element by naming it via the view-transition-name property. For some reason, this does not work and you end up with a very cryptic and misleading error message in the console (yes I did have the contain property in the CSS declaration):

    Aborting transition. Element must contain paint or layout for view-transition-name : counter

    So, when using custom animations, an element from inside the Frame must be selected and named.

    Debugging View Transitions

    Since View Transitions are technically just normal CSS animations, they can be inspected with the Animations panel in the Dev Tools. Also, the automatically created pseudo-elements are visible in the Elements tab during the transitions:


    I confess I am quite excited about the new View Transitions API. Among the things I particularly like about it are the following:

    • It is surprisingly easy to plug this inside Hotwire Turbo and you get the default cross-fade transition animation immediately for free (in latest Chrome-like browsers, that is).
    • Since this is implemented natively in the browser, the animations are highly optimized and performant.
    • View Transitions should allow (today or in the future) building highly interactive transitions similar to those in Material Design.
    • There is some initial support for Multi-Page Applications, too, which is great news because we can bring transition animations declared in CSS to our old but gold apps.
    • It should be possible to use a different animation based on the ”direction“ of the visit (Back/Forward) using the Navigation API (also still experimental and not very well supported, though).

    Things I am still concerned about:

    • Browser support: the Firefox team evaluates it, the Safari team is silent. This will be a log run and making a polyfill is probably too difficult. For web sites where transition animations are critical, this is still a no go.
    • If you’re not careful enough, the transition feels more fluid but also a little bit slower. The reason for it is that View Transitions start the animations at the moment when both the old and new DOM states are already rendered. This means that the exit animation is delayed until new content is available and until that time, nothing happens. Also, the entry animations for the new state usually delay its appearance a little bit more.

      This is not a problem of View Transitions themselves but rather a more generic one. If the exit animation (e.g. a fade out) started immediately after user interaction (e.g. a link click), sometimes the user would have to stare at a blank page until the new page content is grabbed, rendered and run through an entry animation. Still, some kind of support for this scenario (possibly with custom loaders or skeletons) would be nice.

    • Tailwind support: I think the current Tailwind syntax does not allow targeting the HTML document-connected pseudo-elements so we have to resort to custom CSS (which is not a big problem, actually).

    • All transitions target the whole page, there is currently no option to make, say, two components (Frames) animate totally independently. An initial proposal for ”scoped transitions“ can be found here.

    Overall, I like this feature and wish it matures enough and gets wider support soon!

  • Progressively Enhanced Turbo Native Apps in the App Store
    4 projects | | 9 Feb 2023
    As long as your website is running Turbo 7, the JavaScript library, then you can interact with Turbo Native. You aren't limited to Ruby on Rails.

  • Smooth Page Transitions in 2023
    4 projects | | 31 Jan 2023
    Is my replacement? Or Swup.js?
  • Ask HN: What would be your stack if you are building an MVP today?
    47 projects | | 26 Jan 2023
    Hotwire is pretty new but there are some guides out there. it's a progressive enhancement thing generally so you build it normally and then sprinkle in the extra stuff.

    1000 foot overview:

    a tutorial:

    a video tutorial:

    probably a good paid option:

    and then there is the main site:


  • Laravel Ecommerce Tutorial: Part 1, Introduction
    2 projects | | 12 Jan 2023
    First, this package allows us to use Turbo within our application.
  • We're breaking up with JavaScript front ends
    18 projects | | 10 Dec 2022
    I agree that Rails 7 has fantastic options for achieving fantastic "UI Fidelity" with traditional Rails high developer productivity.

    The official docs are decent:

  • System Notifications with Noticed and CableReady in Rails
    3 projects | | 30 Nov 2022
    With the introduction of Turbo, the web development community received a powerful toolbox to craft server-rendered reactive applications. Being essentially a frontend technology with powerful server-side bindings for Rails, it fits well into the standard Model-View-Controller (MVC) stack. Thus, it can cover most of your typical app's requirements.
  • Migrating my website from Gatsby to Astro
    13 projects | | 25 Nov 2022
    Like Gatsby or Next, Astro does not have any client side navigation. So each link click triggers a full page reload. Astro recommends to use Swup as mentioned here. Turbo is also another option though the team does not recommend it. I'm currently using Swup which I'll probably switch from or completely remove it as I have added TOC to MDX and clicking on a title is not redirecting the page to that particular section.
  • Using hotwired/turbo but patch the DOM vs Replacing
    3 projects | | 23 Nov 2022
    Fortunately, since this PR was merged, you now have access to the internal pageRenderer internal object from Turbo.

What are some alternatives?

When comparing stencil and turbo you can also consider the following projects:

lit - Lit is a simple library for building fast, lightweight web components.

Svelte - Cybernetically enhanced web apps

htmx - </> htmx - high power tools for HTML

Turbolinks - Turbolinks makes navigating your web application faster

vite-ssg - Static site generation for Vue 3 on Vite

hotwire-rails - Use Hotwire in your Ruby on Rails app

css-modules - Documentation about css-modules

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

importmap-rails - Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.

shoelace-css - A collection of professionally designed, every day UI components built on Web standards. Works with all framework as well as regular HTML/CSS/JS. 🥾

stimulus_reflex - Build reactive applications with the Rails tooling you already know and love.

turbo-rails - Use Turbo in your Ruby on Rails app