kaiku

From Finnish kaiku /ˈkɑi̯ku/, meaning echo.

A lightweight JSX-based UI framework with a freely mutable, boilerplate-free global state management.

Try it out!

Getting started

Kaiku is packaged to be easily used in both browser and as a module, no build tools required:

<script type="module">
  import { h, render, createState } from 'https://unpkg.com/kaiku'

  const state = createState({ greeting: 'Hello world' })
  const App = () => h('span', null, state.greeting)

  render(h(App), document.body)
</script>

Or, just install the package using your favorite package manager:

# With NPM
npm i -s kaiku

# With yarn
yarn add kaiku

Example

A simple ticker component with global state management.

import { render, createState } from 'kaiku'

const state = createState({ ticks: 0 })

const Ticker = () => (
  <div>
    <div>
      There have been <b>{state.ticks} ticks</b> since last update.
    </div>
    <button onClick={() => { state.ticks = 0 }}>Reset</button>
  </div>
)

setInterval(() => state.ticks++, 1000)

render(<Ticker />, document.body)

Documentation

See the official website.

License

Copyright (c) 2021 Teemu Pääkkönen

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.