www.multitool.codeinca.com Open in urlscan Pro
209.172.2.30  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 * Demos
 * Blog
 * Apps
   * Full-Stack Web App with SQLite, Python & Tailwind
   * Master 25 Travel phrases in 26 Languages
   * Calculete - Share and save your calculations
   * WordroW - a fast paced word game
   * Ride PSI - a bicycle tire pressure calculator
   * Word Muse - Wordle Helper
   * TodoMVC - Todo Implementation
   * FTP Test - FTP Calculator
   * Advent of Javascript - 24 coding challenges
 * Repl
 * Documentation
   * Readme
   * Developer Guide
   * Handbook (Amazon)
 * More
   * Github
   * Tests


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>

Copy

--------------------------------------------------------------------------------


SIMPLE BUT POWERFUL ATTRIBUTES TO TURBO BOOST YOUR HTML


UPDATE THE COUNTER WITH THE BUTTON

Counter: 0 Increase Counter

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




DATA DRIVEN HTML

Use javascript style templates to update text in your HTML

data-text, data-html, data-attr-[attribute]


DATA DRIVEN STYLING

Dynamically set styles and classes on HTML elements

data-style, data-class


CONDITIONAL HTML

Hide and show HTML content

data-if


REPEAT HTML CONTENT

Repeat elements based on iterators such as arrays

data-for


IMPLICIT AND EXPLICIT EVENT HANDLING

Input controls automatically update data. Or register explicit handlers

data-value, data-action, data-on-[eventname]


TIMERS AND INTERVALS

With timers and intervals it is now simple for the application to execute code
automatically on a partical time or interval.

data-timer, data-interval


AUTOMATICALLY GET AND POST REST DATA

Load JSON from REST APIs, automically triggers new fetches when the url updates

data-rest, data-rest-options


COMPONENTS

Create and reuse components, pass arguments or bind to component attributes.
Components can be referenced with tagnames, including the component attributes.
You can infinitely nest components with the slot support.

data-component, data-arg-[argumentname], data-bind-[bindable argumentname]


MODULE SUPPORT

Modules with reusable components can be imported.

data-include

--------------------------------------------------------------------------------

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


DEMOS

Checkout our demos to get a feel of what kind of functionality you can build
with Reken


REPL

Ready to play with Reken? Use our REPL (Read, Evaluate, Print and Loop)
interactive environment, choose an existing example and tweak it or try an
example from scratch

the REPL environment is build with Reken


DOCUMENTATION

More detailed information about the Reken functionality can be found in the
documentation, including all the options and some more samples.

Also check out our Reken Developer Guide.


REKEN DEVELOPER HANDBOOK

Buy the book on Amazon


HOSTED REKEN LIBRARY

Easiest way to start with your own Reken enabled HTML page is to link to our
hosted javascrip library. Added the following tag at the bottom of your html
page between the closing body and html tag.

Off course you can also host the library yourself.

  ...
 </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

--------------------------------------------------------------------------------


ROTATE THE LOGO WITH THE SLIDER

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