Reken logo; blue html representing elements intertwined with orange reken elements

Reken Dutch singular verb for calculate. Pronounce: Ray - ken

Quickly create data-driven HTML pages with an 'HTML First' approach, using powerful new HTML attributes.

For live demos, REPL and more information, visit the Reken website.

Support the Reken project

Support the Reken project by purchasing the Reken Developer Handbook↗, all you need to get up to speed with Reken. Support the Reken project by purchasing the Reken Developer Handbook, all you need to get up to speed with Reken

Why use Reken?

Easy creation of Dynamic Web pages with just HTML, CSS and a few sprinkles of Javascript.

Who is Reken for?

How does Reken work?

Reken relies on a few data-* attributes that empower any HTML element to:

When a page with Reken attributes is loaded, Reken will build a setup controller and a runtime controller.

It will then run the setup controller once to register any event listeners.

After setup is completed it will run the runtime controller which will update any dynamic DOM when needed. The runtime controller will run again after any Reken-managed event listener fires or rest call finishes.


    let name = 'World';

<h1 data-text="Hello ${name}"></h1>


Install Reken.js on your server and add a script tag at the bottom of your web page between the the end body and before the end html tag.

  <script src="reken.js"></script>

Browser support

Reken relies on a number of ES6 features and therefor supports the following browsers:

Attribute API

Look at the demos and the Reken REPL for more examples and usages.

JavaScript API

On the global namespace you can find the reken object.

It has the following public members:



Distributed under the MIT license. See the License file for details.