https://github.com/oamaok/kaiku

Lightweight JSX-based UI framework with boilerplate-free state managament.
https://github.com/oamaok/kaiku

javascript jsx kaiku mutable no-boilerplate state-management tsx typescript ui-library

Last synced: 23 days ago
JSON representation

Lightweight JSX-based UI framework with boilerplate-free state managament.

• Host: GitHub
• URL: https://github.com/oamaok/kaiku
• Owner: oamaok
• License: mit
• Created: 2021-07-11T22:26:36.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2025-12-02T08:36:09.000Z (3 months ago)
• Last Synced: 2025-12-05T03:55:00.337Z (3 months ago)
• Topics: javascript, jsx, kaiku, mutable, no-boilerplate, state-management, tsx, typescript, ui-library
• Language: TypeScript
• Homepage: https://kaiku.dev
• Size: 1.06 MB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          






![CI](https://github.com/oamaok/kaiku/actions/workflows/main.yaml/badge.svg)

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!](https://kaiku.dev/playground.html)

## Getting started

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

```html

  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)

```

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

```shell

# With NPM

npm i -s kaiku

# With yarn

yarn add kaiku

```

## Example

A simple ticker component with global state management.

```jsx

import { render, createState } from 'kaiku'

const state = createState({ ticks: 0 })

const Ticker = () => (

  


    


      There have been {state.ticks} ticks since last update.

    

     { state.ticks = 0 }}>Reset

  

)


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

render(, document.body)

```

## Documentation

See the [official website](https://kaiku.dev/guide.html).

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

```