Kaioken

A powerful, easy-to-use rendering library with a tiny footprint

Get Started

Global state via blazingly fast signals & stores

Comprehensive routing & CSR utilities by default

Granular control of reactivity & state

Build modular user interfaces with reusable components

Kaioken uses unflavoured JSX syntax, making it familiar and approachable to anyone with knowledge of HTML and Javascript.

Album.jsx

function Album({ album }) {
  return (
    <div>
      <Thumbnail album={album} />
      <a href={album.url}>
        <h4>{album.title}</h4>
        <span>{album.artist}</span>
      </a>
      <LikeButton album={album} />
    </div>
  )
}

Album title

Artist

Create dynamic experiences with simple control flow

Kaioken components are Javascript functions, so control flow and dynamic rendering requires no additional knowledge.

AlbumList.jsx

function AlbumList({ albums }) {
  let title = "0 albums"
  if (albums.length === 1) title = "1 album"
  if (albums.length > 1) title = `${albums.length} albums`

  return (
    <section>
      <h2>{title}</h2>
      {albums.map((album) => (
        <Album key={album.id} album={album} />
      ))}
    </section>
  )
}

3 albums

First album

Album artist

Second album

Album artist

Third album

Album artist

Make interactivity easy

Kaioken components use simple, declarative syntax to make interactivity easy. Changing the state of a component automatically updates the UI.

SearchableAlbumList.jsx

function SearchableAlbumList({ albums }) {
  const [searchText, setSearchText] = useState("")
  const filteredAlbums = filterAlbums(albums, searchText)

  return (
    <>
      <SearchInput value={searchText} onChange={setSearchText} />
      <AlbumList
        albums={filteredAlbums}
        emptyMessage={`No matches for "${searchText}"`}
      />
    </>
  )
}

Albums

5 matches

First album

Album artist

Second album

Album artist

Third album

Album artist

Fourth album

Album artist

Fifth album

Album artist