How to use inferno.js without Babel from CDN

How to use inferno.js without Babel from CDN

Inferno.js is a very lightweight React-like library for building high-performance user interfaces. This article shows you a legid trick how to do it from CDN.

As a developer I am always looking for interesting developments regarding frameworks. On my search for something light to manipulate the DOM in a React kind of way, but without all the "bloat" from Babel and NPM and such I found Inferno, a very lightweight ReactJS alternative.

Logo Inferno.js

About Inferno.js
Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server.

From CDN without Babel

I was looking for a solution to create DOM elements with JavaScript. I am not talking about a single page app, but just to add elements in a plugin I am building for Opencart CMS. That is, integration in a backend that is not mine, but for me to use.

I write this article very soon after I have discovered Inferno, but I want to share it, because I had some trouble finding a good example with just the CDN.

I hope this small example gets you started doing your own development without Babel.


  • [root]
  • index.html
  • inferno.js
  • src
  • BasicComponent.js


<!DOCTYPE html>
    <title>Inferno CDN Example</title>
    <div id="app"></div>
    <script src=""></script>
    <script src=""></script>
    <script type="module">
      import { render, createElement } from "./inferno.js";
      import { BasicComponent } from "./src/BasicComponent.js";

        createElement(BasicComponent, {
          title: "Inferno looks very promising"


Please notice the additional inferno.js.

While you use a CDN and not Babel, so you don't import Inferno, but it is a bit ugly to have the following in your code:

 let render = Inferno.render;
 let component = Inferno.Component;
 let createElement = Inferno.createElement;

that is why I have this small inferno.js, that simply makes the usability a bit more React'ish.

export const { render, createElement, Component } = Inferno;


import { createElement, Component } from "../inferno.js";

export class BasicComponent extends Component {
  render() {
    const children = createElement(
      "First conclusion: ",

    return createElement(
        className: "basic"

More from same category