Compose-like UI for Svelte

A Compose-inspired UI toolkit for Svelte, focused on explicit composition, immutable modifiers, and theme-driven design.

Inspired by Jetpack Compose, built natively for the web using Svelte and standard web technologies.

✨ Goals

• Explicit and predictable UI composition
• Immutable, chainable Modifiers
• Strong separation between core, layout and components
• Theme-driven design (tokens, not raw CSS)
• No virtual DOM abstractions
• No hidden magic

This is not a Material clone.
It is a Compose-like system that can be styled beyond Material Design.

Why Compose-like for Svelte?

Jetpack Compose introduced a clear, explicit and composable mental model for UI. This project explores how that same philosophy translates to the web, using Svelte as a native, compiler-driven foundation.

The goal is not to replicate Android UI, but to bring Compose’s clarity and composability to modern web applications.

🚀 Installation

npm install compose-svelte

🧭 Minimal Example

<script>
  import {
    ComposeTheme,
    AppRoot,
    Surface,
    Text,
    Modifier
  } from "compose-svelte";
</script>

<ComposeTheme mode="system">
  <AppRoot>
    <Surface modifier={Modifier.fillMaxSize()}>
      <Text>Hello Compose</Text>
    </Surface>
  </AppRoot>
</ComposeTheme>

🧱 Layout

Column

<Column modifier={Modifier.padding(16)}>
  <Text textStyle="titleLarge">Title</Text>
  <Text>Body text</Text>
</Column>

Row

<Row horizontalArrangement={Arrangement.spacedBy(8)}>
  <Text>Left</Text>
  <Text>Right</Text>
</Row>

Box

<Box modifier={Modifier.size(120)}>
  <Text modifier={Modifier.align(Alignment.Center)}>Centered</Text>
</Box>

🎨 Theme

ComposeTheme

Provides theming for the entire app.

• Light / Dark / System modes
• Tokens exposed as CSS variables
• Inspired by MaterialTheme

<ComposeTheme mode="dark">
  <AppRoot>
    <Surface>
      <Text>Dark mode</Text>
    </Surface>
  </AppRoot>
</ComposeTheme>

📝 TextField

Filled

<TextField
  label="Email"
  placeholder="[email protected]"
  value={email}
  onValueChange={(v) => email = v}
/>

Outlined

<OutlinedTextField
  label="Email"
  value={email}
  onValueChange={(v) => email = v}
/>

🔘 Buttons

<Button onClick={submit}>
  Submit
</Button>

<TextButton onClick={cancel}>
  Cancel
</TextButton>

<OutlinedButton>
  Outlined
</OutlinedButton>

🧩 Modifiers

Modifiers are immutable and chainable.

Modifier
  .padding(16)
  .fillMaxWidth()
  .background(ColorScheme.Surface)

Available categories

• Layout: size, width, height, fill, weight
• Spacing: padding, margin
• Drawing: background, border, clip
• Interaction: clickable
• Transform: offset
• Scroll: verticalScroll, horizontalScroll

🔲 Shapes

RoundedCornerShape(12)
RoundedCornerShape({ topStart: 16, topEnd: 16 })

Shapes are value objects and reusable across components.

🎨 Theme Tokens

ColorScheme

ColorScheme.Primary
ColorScheme.Surface
ColorScheme.OnSurface

TextStyle

TextStyle.TitleLarge
TextStyle.BodyMedium
TextStyle.LabelSmall

🖼️ Images & Icons

<Image
  painter={painterResource(Res.image("logo.png"))}
  contentScale={ContentScale.Fit}
/>

<Icon
  painter="https://api.iconify.design/mdi/home.svg"
  modifier={Modifier.size(24)}
/>

📦 Project Status

• Core v0.0.1: stable
• Layout system: stable
• Theme system: stable
• Modifiers: stable
• Lazy layouts: experimental

🧠 Philosophy

Clarity over cleverness.

If something is not explicit, it is probably not part of the API.

📄 License

MIT