Fast reactive HTML-First web pages

without virtual DOM overhead or the need for build tools


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>


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