Haka front end toolkit

Our functional Javascript HTML and DOM manipulation toolkit. The whole library is only 2K minified and is very light weight and fast. Works in all browsers, including IE.

Once included, the script loads several functions into the window object to make them available everywhere.


Add this file to your app/assets/js folder and include with:

<script src="/js/haka-min.js"></script>

Add it to your bundle instead if you're using that.


Haka uses document.querySelector and document.querySelectorAll behind the scenes.

// Get first element from document

// Get first element from #app
q('#el', '#app')

// Get all elements from document

// Get all elements from #app
qa('.els', '#app')

// Chaining, apply to one
q('#el', el => el.innerHTML = '<span>Hello</span>')

// Chaining, apply to all
qa('li', el => el.innerHTML = '<span>Hello</span>')

Text content

Sets and gets the text content of elements.

// Insert text into element
text('#el', 'Hello')

// Get text from element

HTML content

Sets and gets the HTML content of elements.

// Get HTML from element

// Insert HTML into element
html('#el', '<div>Hello</div>')

// Insert HTML before element
html('#el', '<div>Hello</div>', 'before')

// Insert HTML after element
html('#el', '<div>Hello</div>', 'after')

// Insert HTML at top of element
html('#el', '<div>Hello</div>', 'top')

// Insert HTML at end of element
html('#el', '<div>Hello</div>', 'end')

// Works with HTML elements as well
html(q('button'), '<span>Loading</span>')


Add and remove CSS styles from elements.

// Get css value
css('#el', 'backgroundColor')

// Replace css values
css('#el', 'background-color: yellow; color: red')

// Remove all css values
css('#el', '')

// Merge css values
css('#el', { backgroundColor: 'yellow', color: null })


Sets and gets the attributes of elements.

// Get all attributes

// Get specific attribute
attr('#app', 'class')

// Set attributes
attr('#app', { class: 'hello', id: 'bye' })

Time format

Formats date objects into date strings.

var date = new Date()

// Default format is dd/mm/yyyy

// Custom format
time(date, 'hh:MM:ss dd/mm-yy')

Query params

Get URL query parameters.

// Get the id parameter (?id=1)


Sets, gets and deletes browser cookies.

// Get a cookie

// Set a cookie, expires in 30 days
cookie('name', 'hello')

// Set a cookie with expiry in days
cookie('name', 'hello', 7)

// Delete a cookie
cookie('name', '', -1)

Form serialization

Collects values from <form> elements.

// Serialize form
var data = serialize(form)

Flash messages

Displays flash message notifications. Depends on the cookie function.

The default class name for the container is flash and requires an initial opacity of 0. The message will automatically fade out after 5 seconds.

<div class="flash">Messages will be displayed here</div>

Run the flash function to display the messages.

// Display flash message

// With default options
flash('hello', { el: '.flash', time: 5000, name: 'flash' })

// Prepare flash message on next page load
cookie('flash', 'hello')

// Display flash message from cookie above