JsonComposeViewer

1.0.0indexed

Renders JSON elements as a collapsible, syntax‑colored tree with expandable objects/arrays, type‑based coloring, CompositionLocal-driven indentation, and configurable JsonViewerStyle (colors, spacing, counts).

AndroidJVMWasm·TactWareInc/JsonComposeViewer

Stars

—

Used by

dependents

—

Health

/ 100

JsonComposeViewer

JsonComposeViewer is a Kotlin Multiplatform component for rendering JSON data using Jetpack Compose / Compose Multiplatform.

It takes a kotlinx.serialization.json.JsonElement and renders it as a collapsible, syntax‑colored tree, with:

Objects and arrays rendered as expandable containers
Primitives (strings, numbers, booleans, null) color‑coded by type
Indentation driven by a CompositionLocal, so nested content lines up cleanly
A configurable JsonViewerStyle to control colors, spacing, and whether to show field/element counts

This repository contains:

core/ – the JsonComposeViewer library
sample/ – a small multiplatform sample app that demonstrates the viewer

Features

Getting started

JsonComposeViewer expects a JsonElement from kotlinx.serialization.json.Json. A typical flow is:

Parse a JSON string into a JsonElement
Pass it to JsonComposeViewer from your Compose UI

Example:

import androidx.compose.runtime.Composable
import kotlinx.serialization.json.Json
import net.tactware.jsoncomposeviewer.core.JsonComposeViewer
import net.tactware.jsoncomposeviewer.core.JsonViewerStyle

@Composable
fun MyJsonScreen(jsonString: String) {
    val element = Json.parseToJsonElement(jsonString)

    JsonComposeViewer(
        jsonElement = element,
        style = JsonViewerStyle(
            
            showElementCount = , 
        ),
        initiallyExpanded = 
    )
}

Note: Publishing coordinates for this library may change; for now, treat this repository as the source of truth and depend on it via a composite build or by copying the core module into your project.

`JsonComposeViewer` API overview

The main entry point is the JsonComposeViewer composable:

Package: net.tactware.jsoncomposeviewer.core

@Composable
fun JsonComposeViewer(
    jsonElement: JsonElement,
    modifier: Modifier = Modifier,
    style: JsonViewerStyle = JsonViewerStyle(),
    initiallyExpanded: Boolean = false
)

jsonElement – The JsonElement to render (object, array, or primitive)
modifier – Usual Compose for layout

Internally, JsonComposeViewer:

Provides an indentation level via a CompositionLocal
Dispatches to internal composables:
- JsonObjectView for JsonObject

You normally only use JsonComposeViewer and JsonViewerStyle directly.

`JsonViewerStyle`

JsonViewerStyle lets you customize how the viewer looks:

Package: net.tactware.jsoncomposeviewer.core

Key properties (see core/src/commonMain/.../JsonViewerStyle.kt for full list):

Example:

val style = JsonViewerStyle(
    showElementCount = true,   // show field/element counts in headers
    indentation = 20.dp,
    spacing = 6.dp
)

JsonComposeViewer(
    jsonElement = element,
    style = style,
    initiallyExpanded = false
)

Sample app

The sample module demonstrates JsonComposeViewer on multiple platforms.

Desktop (JVM)

Entry point: sample/src/jvmMain/kotlin/net/tactware/jsoncomposeviewer/sample/Main.kt
Main screen: sample/src/commonMain/kotlin/net/tactware/jsoncomposeviewer/sample/JsonViewerSampleScreen.kt

Run from the project root:

./gradlew :sample:run

Or run MainKt from your IDE in the sample module.

Android

Main activity: sample/src/androidMain/kotlin/net/tactware/jsoncomposeviewer/sample/MainActivity.kt
It simply sets JsonViewerSampleScreen() as its content.

Open the project in Android Studio or IntelliJ IDEA and run the sample Android configuration on a device/emulator.

Development

Build everything:

./gradlew build

Run tests:

./gradlew test

Open the project in IntelliJ IDEA or Android Studio for best Kotlin Multiplatform support.

Kotlin and Gradle versions are controlled via:

gradle/libs.versions.toml
gradle.properties

License

Unless otherwise specified, this project is provided under the license declared in the repository root (add or reference your license file/text here).