Kaioken

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