
Syntax-highlighted, foldable JSON viewer and editor with line numbers, real-time validation, formatting, key sorting, search across documents, and multiple color themes.
Kotlin Multiplatform Compose JSON viewer and editor component for Android, iOS, and JVM Desktop.
Add mavenCentral() to your repositories in settings.gradle.kts:
// settings.gradle.kts
dependencyResolutionManagement {
repositories {
mavenCentral()
google()
}
}Then add the dependency:
// build.gradle.kts
dependencies {
implementation("dev.skymansandy:json-cmp:1.0.0-beta1")
}@Composable
fun MyScreen() {
val state = rememberJsonEditorState(
initialJson = """{"name": "John", "age": 30}""",
)
JsonCMP(
modifier = Modifier.fillMaxSize(),
state = state,
)
}@Composable
fun MyEditor() {
val state = rememberJsonEditorState(
initialJson = """{"name": "John", "age": 30}""",
isEditing = true,
)
JsonCMP(
modifier = Modifier.fillMaxSize(),
state = state,
onJsonChange = { json, parsed, error ->
// React to JSON changes
},
)
}JsonCMP(
state = state,
colors = JsonCmpColors.Monokai, // Dark, Light, Monokai, Dracula, SolarizedDark
)@Composable
fun JsonCMP(
modifier: Modifier = Modifier,
state: JsonEditorState,
searchQuery: String = "",
colors: JsonCmpColors = JsonCmpColors.Dark,
onJsonChange: (json: String, parsed: JsonNode?, error: JsonError?) -> Unit = { _, _, _ -> },
)val state = rememberJsonEditorState(
initialJson = "...",
isEditing = false,
)
state.updateRawJson(newJson) // Update JSON content
state.format(compact = false) // Pretty-print or minify
state.sortKeys(ascending = true) // Sort object keys
state.collapseAll() // Collapse all foldable nodes
state.expandAll() // Expand all nodes
state.isEditing = true // Toggle editor modeKotlin Multiplatform Compose JSON viewer and editor component for Android, iOS, and JVM Desktop.
Add mavenCentral() to your repositories in settings.gradle.kts:
// settings.gradle.kts
dependencyResolutionManagement {
repositories {
mavenCentral()
google()
}
}Then add the dependency:
// build.gradle.kts
dependencies {
implementation("dev.skymansandy:json-cmp:1.0.0-beta1")
}@Composable
fun MyScreen() {
val state = rememberJsonEditorState(
initialJson = """{"name": "John", "age": 30}""",
)
JsonCMP(
modifier = Modifier.fillMaxSize(),
state = state,
)
}@Composable
fun MyEditor() {
val state = rememberJsonEditorState(
initialJson = """{"name": "John", "age": 30}""",
isEditing = true,
)
JsonCMP(
modifier = Modifier.fillMaxSize(),
state = state,
onJsonChange = { json, parsed, error ->
// React to JSON changes
},
)
}JsonCMP(
state = state,
colors = JsonCmpColors.Monokai, // Dark, Light, Monokai, Dracula, SolarizedDark
)@Composable
fun JsonCMP(
modifier: Modifier = Modifier,
state: JsonEditorState,
searchQuery: String = "",
colors: JsonCmpColors = JsonCmpColors.Dark,
onJsonChange: (json: String, parsed: JsonNode?, error: JsonError?) -> Unit = { _, _, _ -> },
)val state = rememberJsonEditorState(
initialJson = "...",
isEditing = false,
)
state.updateRawJson(newJson) // Update JSON content
state.format(compact = false) // Pretty-print or minify
state.sortKeys(ascending = true) // Sort object keys
state.collapseAll() // Collapse all foldable nodes
state.expandAll() // Expand all nodes
state.isEditing = true // Toggle editor mode