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

using powerful new HTML attributes.


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


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>


"I really like the ease and simplicity of Reken. It's great stuff!"

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>


"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">