Quickly create data-driven HTML pages with an 'HTML First' approach,

using powerful new HTML attributes.


Download Reken ↗ Download reken.min.js (5kb) ↗


Reken is celebrating ⭐️s on GitHub

Quick start Add this code near the bottom of your HTML file:

<script src="https://cdn.jsdelivr.net/gh/hbroek/reken/dist/reken.min.js"></script>


Simple but powerful attributes to turbo boost your HTML

<script>counter = 0</script>
<span data-text="Counter: ${counter}"></span>
<button data-action="counter++">Increase Counter</button>

Support the Reken project

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

Book cover Reken Developer Handbook


"Simplicity is the soul of efficiency."
- Austin Freeman

Getting started

No tooling needed, you don't even have to install anything. To get started first play with our demos to get a feel what power Reken provides, and more importantly, how you can unleash it. Once you get a feel for that, try out Reken for yourself in our REPL environment. If you need help with the functionality scan through our documentation to get an overview of the various features. When ready to start with a new or existing HTML document, add the link to our hosted library file (5kb) and sprinkle in some Reken goodness.

  ...
 </body>
 <script src="https://cdn.jsdelivr.net/gh/hbroek/reken/dist/reken.min.js"></script>
</html>


"Make it work, make it right, make it fast."
– Kent Beck

<script>degrees = 0</script>
<img alt="Logo" data-style="transform: rotate(${degrees}deg);" src="./assets/reken-logo.png"
<input type="range" min="0" max="1080" data-value="degrees">