Compose Svelted is an experimental UI framework that brings the Jetpack Compose mental model to the Svelte ecosystem. If you have built Android UIs with Jetpack Compose and now need to build for the web, Compose Svelted gives you the same compositional primitives —Documentation Index
Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt
Use this file to discover all available pages before exploring further.
Column, Row, Box, Modifier, Surface, Scaffold, and more — running natively on Svelte 5. No Skia, no virtual DOM, no hidden magic: just Svelte reactivity and CSS flexbox doing exactly what you tell them to do.
Compose Svelted is currently in alpha (v0.2.8-alpha01). The API is evolving and breaking changes may occur between releases. It is not yet recommended for production-critical applications.
Core Philosophy
Compose Svelted is built around three rules that mirror Jetpack Compose’s own contract:- UI is a function of state. Components render deterministically from their props and reactive state. There are no lifecycle hooks that fire at unpredictable times.
- No implicit behavior. Layout, scroll, motion, and navigation are always opt-in. Nothing happens unless your code explicitly asks for it.
- Everything composes. Layouts nest arbitrarily. Modifiers stack immutably. Motion wraps structure. Navigation is modeled as state transitions, not imperative route changes.
Library Structure
Compose Svelted is organized into versioned core layers, each of which builds on the one before it.Core V1 — Layout & Styling
The foundation of every screen. Core V1 provides:- Layout primitives —
Column,Row,Box,Scaffold,LazyColumn,LazyRow - Immutable Modifier chain —
Modifier.padding(16).fillMaxWidth().clip(RoundedCornerShape(12)) - Theme system —
ComposeTheme,ColorScheme,TextStyletokens,Density - Typography —
Textwith Material 3 text-style tokens (headlineMedium,bodyLarge, etc.) - UI components —
Button,TextField,Card,Surface,Icon,Image, and more
Core V2 — Motion & Navigation (Closed)
Core V2 is complete and ships as part of the package, but its internal implementation is closed to external extension. It includes:- Structural motion —
AnimatedVisibility,AnimatedContent - Declarative animation specs — composable enter/exit transitions with
AnimationSpec - Navigation as state —
NavHost,NavController,rememberNavController, route composables with an internal backstack
Core V3 — Planned
Core V3 is on the roadmap and will introduce nested navigation, directional transitions, and shared-element transitions.Key Differentiators
| Feature | Compose Svelted |
|---|---|
| Rendering target | Native DOM via Svelte 5 |
| Virtual DOM | None — Svelte compiles to vanilla JS |
| Skia / Canvas | Not used — layouts are CSS flexbox |
| Modifier system | Immutable, chainable, type-safe |
| Navigation | State-based, no external router needed |
| Tailwind dependency | Internal implementation detail only — consumers do not need it |
Get Started
Installation
Add the package to your Svelte 5 project and configure the required CSS baseline.
Quickstart
Build a working login screen with Column, TextField, and Button in under 5 minutes.
Modifier
Learn the immutable modifier chain — the central API for describing layout, size, and appearance.
Theme
Customize colors, typography, and density tokens through the ComposeTheme provider.