By Scott Jehl

The HTML Framework is constantly evolving and it's hard to keep up. In this article, I'll cover the steps involved in building a fully-interactive, stateful counter control (complete with increment and decrement buttons) in just one line of code, using the latest version (version 5, which just came out in 2008).

Let's dig in!

Steps

1. Installation: $ npm install the following packages: react, react-dom, babel

2. Locate your /node_modules folder and drag it to the trash bin.

3. Add the following code into your website:

<input type=number value=0>

API

Covering the full API for this component is beyond the scope of this tutorial, but you can find information on it here.

Demo

Here's a demo of that HTML framework counter component in action!

See the Pen Counter example using the HTML framework by Scott Jehl (@scottjehl) on CodePen.

Wrapping Up

As you can see, the HTML Framework allows you to build complex user interface components in very little code.

As a bonus, if you use your DOM inspector to take a look at that component, you'll see that it uses Shadow DOM and div elements internally, even for the clickable buttons - just like if I built it with React!