Getting started

The Kotlin renderer (joydom) decodes a Joy DOM JSON document and renders it as Compose UI. It's a Compose Multiplatform library: the modules build for JVM (desktop), Android, and iOS. The public package root is com.j0y.joy.

Installing dependencies

The renderer is published to Maven Central under the com.j0y.joy group. The Compose binding — dom-render-compose — is the only artifact most apps need; it pulls in serialization, layout, and the platform-agnostic renderer transitively.

Add the dependency:

dependencies {
    implementation("com.j0y.joy:dom-render-compose:1.0.0")
}

The serialization model (Spec, JoyDomJson) comes in transitively, so you can decode documents without adding dom-serialization yourself. The optional Kotlin DSL and HTML & CSS converter modules ship as separate artifacts.

Render your first joy-dom

JoyDom is the entry point. Decode a document with the pre-configured JoyDomJson, then hand the Spec to the composable:

private val DOCUMENT = """
    {
      "version": 1,
      "style": {
        ".hello": { "display": "flex", "padding": { "value": 16, "unit": "px" } }
      },
      "breakpoints": [],
      "layout": {
        "type": "div",
        "props": { "className": ["hello"] },
        "children": [{ "type": "p", "children": ["Hello Joy DOM"] }]
      }
    }
""".trimIndent()

@Composable
fun HelloJoyDom() {
    val spec = JoyDomJson.decodeFromString(Spec.serializer(), DOCUMENT)
    JoyDom(spec = spec)
}

What's next

• Custom components, for the document's kebab-case node types.
• Events, wiring onclick/onfocus/onblur/onchange to a single onEvent callback.
• API reference (Dokka) ↗ — every entry point, type, and option.
• Kotlin DSL, building Spec documents in type-safe Kotlin instead of JSON.
• HTML & CSS converter, importing markup into a Spec or exporting one back to HTML.