Live Demo — press G to switch to the component gallery.

Ski is a presentation framework built on Compose Multiplatform. A slide is a composable function. A deck is a list of those functions plus navigation, theming, and a presenter view. If you can build it in Compose, you can present it.

Ski runs as a browser app (Wasm) or a desktop app (JVM), and the same deck runs on both.

• Kotlin and Compose engineers who give technical talks and want demos that are real UI, not screenshots or screen recordings.
• Teams that want talk code in the same repo as the product, reviewed and versioned like code.
• Anyone who wants slides driven by state (animated reveals, live counters, interactive examples) instead of duplicated slide files.

Ski is not a WYSIWYG editor. Slides are written in Kotlin.

Requirements: JDK 17+ and the Android SDK (only for the Android target). The Gradle wrapper is included.

# Web (Wasm) dev server
./gradlew :webApp:wasmJsBrowserDevelopmentRun

# Desktop: opens the presenter panel and the slides window
./gradlew :desktopApp:run

# Component gallery (desktop)
./gradlew :desktopApp:runGallery

On Windows, use gradlew.bat in place of ./gradlew.

Note: The web commands may appear to stall with no new output. Gradle keeps a background daemon running, so the terminal can sit quiet after the build finishes. Look for FAILED in the output to tell whether a run failed. If you don't see it, the run succeeded.

Allow popups: The web app opens the presenter notes window automatically, and browsers block it by default. Always allow popups for the site (for example localhost during development, or your Vercel domain once deployed). If the notes window doesn't appear, check the address bar for a blocked-popup icon. Once popups are allowed, refresh the page so the notes window opens.

./gradlew :webApp:wasmJsBrowserDistribution

The output is written under webApp/build/. The deployable folder is webApp/build/dist/wasmJs/productionExecutable/, and it already contains a vercel.json that rewrites all paths to index.html.

1. Install the Vercel CLI if you don't have it: npm i -g vercel
2. Build the bundle from the repo root: ./gradlew :webApp:wasmJsBrowserDistribution
3. Go to the output folder and deploy, naming the project explicitly:

   cd webApp/build/dist/wasmJs/productionExecutable
   vercel deploy --prod --project ski-slides

4. The first run asks you to log in. Vercel prints the production URL when it finishes.

Notes:

• Rebuild (step 2) before every deploy. The output folder is regenerated on each build, which also wipes any .vercel/project.json link vercel link would have written there — that's why --project ski-slides is passed explicitly every time instead of relying on a persisted link.
• Drop --prod to get a preview URL instead of updating production.
• Any other static host works too. Upload the same folder and keep the rewrite-to-index.html rule so direct links and /?slides load.

A deck is defined in one place. In this repo that is composeApp/src/commonMain/kotlin/ke/don/ski/presentation/ui/SkiPresentationSlides.kt:

fun skiPresentationSlides(sessionDuration: Duration = SESSION_DURATION): List<SlideConfig> {
    val timerController = rememberTimerController(sessionDuration)

    return remember(timerController) {
        generateDeck(timerController = timerController) {
            slide(
                label = "Introduction",
                transition = ScreenTransition.Fade,
                notes = listOf("Welcome. Set the agenda in one sentence.".toAnnotatedString()),
            ) {
                IntroductionScreen()
            }

            slide(label = "Code", notes = listOf("Walk through the Composable signature.".toAnnotatedString())) {
                KodeViewerSlide()
            }
        }
    }
}

• Put slide bodies in named composables (fun MyDemoSlide()) in segments/demos, and keep the slide { } block as a list of references.
• Reveal with state, not with duplicate slides. Use remember and Animatable inside the slide.
• Show code with KotlinCodeViewer, so it is highlighted and can be focused during the talk.
• Write presenter notes in SlidesNotes.kt, one named constant per slide. The audience never sees them. See docs/speaker-notes.md for how to write them.
• Use the session timer. Take the duration from SlidesConstants.SESSION_DURATION instead of hardcoding it.

These are the parts you interact with at runtime.

Navigation. DeckNavigator holds the current index and direction as Compose state. It exposes next(), previous(), and goTo(index). The deck renders the current slide inside AnimatedContent, and each slide's transition decides how it enters.

Modes. DeckMode.Local is the presenter panel: notes, timer, table of contents, shortcut guide, and hints. DeckMode.Presenter is the audience output with no chrome. Modes are provided through LocalDeckMode, so components can adapt to them without parameters being threaded through.

Two windows, synced.

• Desktop: two windows share one DeckNavigator in the same process, so they stay in sync automatically.
• Web: the main tab writes the current slide to localStorage and opens /?slides as a popup. The popup listens for the storage event and follows. This works, but is less robust than desktop; test it on the browser you present from.

Everything below is in :shared:components unless noted. The :core:domain module supplies the models these components use.

Frames are decorative borders. Build one with FrameBuilder:

val mainFrame = FrameBuilder()
    .setFrame { snake }        // or { basic }
    .setCurve(32.dp)           // optional corner radius
    .setOpacity(0.5f)          // optional
    .build()

Built-in frames: SnakeFrame (default) and BasicFrame. Frames are provided through LocalSkiFrames, so a new frame is added to defaultSkiFrames() in shared/components and then selected with setFrame { ... }.

val background = BackgroundBuilder()
    .setPattern(Pattern.AnimatedDiagonalWavyBackground(colors = PatternDefaults.colors))
    .setDecoratorImage(DecoratorImage(Resources.Images.ANDROID_ROBOT))
    .setAlignment(Alignment.BottomEnd)
    .build()

Patterns: Wavy, DiagonalWavy (the default), and AnimatedDiagonalWavyBackground. Each takes colors, waveHeight, waveLength, waveCount, and strokeWidth.

DeviceFrame wraps any composable in a phone mockup. Specs come from DeviceCatalog: Pixel8, GalaxyS26, IPhone17, PixelFold. Use it to show a live UI in context instead of a screenshot.

• ExpressivePictureFrame, ExpressiveFrame, ExpressiveFrameClipped: decorative photo frames with an animated outline.
• TimerComponent, TimerContent, with TimerController in :core:domain.
• LinearBullet, DotBullet, SkiLogo, NewBadge, IconButtonToken.

AppTheme(darkTheme, enableExpressive, isGallery) supplies the color scheme, Material 3 expressive motion, and typography. Dimensions come from Values.Dimens (tinyPadding to extraLargePadding).

Ski's components are published to Maven Central as io.github.donald-okara:ski. Add the dependency to your commonMain source set and pin the version in your version catalog.

Inside this repo, use_local_shared_components=true in gradle.properties makes the segments compile against :shared:components directly. Set it to false to test against the published artifact.

composeApp/     Deck runtime, gallery, and the Deck() entry point (commonMain for all targets)
shared/         components (the published library), design (theme), resources (images, fonts)
core/domain/    Models and DSL: SlideConfig, DeckBuilder, DeckNavigator, DeckMode, frames, timer
segments/       Slide content: demos (ke.don.demos) and introduction (ke.don.introduction)
webApp/         Web entry point (Wasm and JS)
desktopApp/     Desktop entry point (JVM), plus the gallery launcher
androidApp/     Android entry point
iosApp/         Xcode project that embeds the ComposeApp framework
build-logic/    Gradle convention plugins shared by all modules

Package names do not always match folders: core/domain is ke.don.domain, and shared/components is io.github.donald_okara.components.

If you are an AI coding agent working in this repo, read this section and context.md before changing anything. CLAUDE.md has build commands and architecture detail.

1. Reveals use Compose state. Never duplicate a slide to show more bullets.
2. Slide content lives in named composables, not inline in the DSL.
3. Code examples use KotlinCodeViewer or KotlinCodeViewerCard.
4. Every slide gets presenter notes. Keep them specific enough to speak from.
5. Presenter and audience windows keep separate animation state. Do not rely on one window's animation state in the other.
6. Use LocalSkiFrames and LocalDeckMode rather than passing theme or mode parameters down.
7. Take the timer duration from SlidesConstants.SESSION_DURATION.

• Build the target you changed: ./gradlew :desktopApp:run for deck behavior, ./gradlew :webApp:wasmJsBrowserDevelopmentRun for web-only code.
• There are no automated tests or lint rules yet. Check the slide visually in the presenter panel and in audience mode.

Releases are published from a tag: .github/workflows/publish.yml runs publishToMavenCentral with the tag as -Pversion. Only :shared:components is published. Update the ski version in gradle/libs.versions.toml when the published API changes.

Donald Okara · GitHub · Buy Me a Coffee

Licensed under the Apache License 2.0 (the published components). See the Maven POM for details.