Connect with us


JsonTree – A pretty Json in Compose

JsonTree is an Android library to display formatted JSON data in Compose. Users can expand/collapse objects and arrays, and show their count of child items. JsonTree offers several customizations for visual appearance like syntax highlighting, text style and icons.


See maven-central tag at the top for the latest version.

dependencies {
    implementation 'com.sebastianneubauer.jsontree:jsontree:latest-version'

How to use

Add JsonTree to your Compose UI and customize it with the following options. Get started by only providing your JSON data and using the default parameter.

    json = "{ \"key\": \"value\" }"

For more customization, use the following parameter.

    // Your json data
    json = "{ \"key\": \"value\" }",
    // The initial state of the tree. Expand the first item or expand/collapse all items
    initialState = TreeState.FIRST_ITEM_EXPANDED,
    // The color palette for your json tree
    colors = TreeColors(
        keyColor = Color.Blue,
        stringValueColor = Color.Red,
        numberValueColor = Color.Green,
        booleanValueColor = Color.Yellow,
        nullValueColor = Color.Yellow,
        symbolColor = Color.Black,
        iconColor = Color.Black,
    // The arrow icon for collapsable items
    icon = ImageVector.vectorResource(R.drawable.my_arrow_icon),
    // The size of the arrow icon
    iconSize = 20.dp,
    // The TextStyle to use for the json tree
    textStyle = TextStyle(...),
    // A callback method which is called when the provided json data can't be parsed.
    onError = { throwable -> /* Do something */ }

Tech Stack

  • Compose UI
  • Kotlinx Serialization
  • Detekt (Linting)
  • API validation
  • GitHub Actions
  • Gradle version catalog
JsonTree on GitHub:
Platform: Android
⭐️: 8