Kaioken
A powerful, easy-to-use rendering library with a tiny footprint
Get StartedGlobal 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
ArtistCreate 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 artistSecond album
Album artistThird album
Album artistMake 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