epub4kmp-compose-ui

Compose Multiplatform UI for rendering EPUBs loaded with epub4kmp-core. Ships a batteries-included reader screen plus building-block composables you can arrange yourself. Chapters render in a platform WebView with images, CSS, and fonts inlined.

Try it live: the EPUB reader running on Wasm »

implementation("com.darkrockstudios:epub4kmp-compose-ui:0.2.0")

Drop-in reader

Load a Book with epub4kmp-core, then hand it to EpubReader — it wires up a table-of-contents sidebar, prev/next controls, and chapter rendering for you:

@Composable
fun ReaderScreen(book: Book) {
    EpubReader(
        book = book,
        modifier = Modifier.fillMaxSize(),
    )
}

Building your own layout

Drive navigation with EpubReaderState (via rememberEpubReaderState) and compose the pieces yourself — TableOfContents, EpubContent, CoverImage, and MetadataCard:

@Composable
fun TwoPaneReader(book: Book) {
    val state = rememberEpubReaderState(book)

    Row(Modifier.fillMaxSize()) {
        TableOfContents(
            book = book,
            onSelect = { ref -> state.goto(ref) },
            modifier = Modifier.width(280.dp),
        )
        state.currentResource?.let { chapter ->
            EpubContent(
                book = book,
                resource = chapter,
                fragmentId = state.currentFragmentId,
                modifier = Modifier.weight(1f),
            )
        }
    }
}

Handling link taps

Pass onLinkClicked to EpubContent to intercept <a> taps. A LinkClick resolves in-book links to a Resource (with optional fragment) so you can navigate, while external links carry just their href:

EpubContent(
    book = book,
    resource = chapter,
    onLinkClicked = { click ->
        click.resource?.let { state.gotoResource(it, click.fragmentId) }
    },
)

Packages

io.documentnode.epub4kmp.compose

common

The reader UI: the all-in-one EpubReader and its EpubReaderState, plus the building blocks (EpubContent, TableOfContents, CoverImage, MetadataCard) and the LinkClick model for handling link taps.