jsonCMP
1.0.0-RC3indexedSyntax-highlighted, foldable JSON viewer and editor with line numbers, real-time validation, formatting, key sorting, search across documents, and multiple color themes.
4
Stars
1
Used by
dependents
—
Health
/ 100
JsonCMP
Kotlin Multiplatform Compose JSON viewer and editor component for Android, iOS, and JVM Desktop.
⚠️ Experimental: This library is in an experimental state. APIs may change without notice between releases. Use in production at your own discretion.
Features
- JSON Viewer — Read-only, syntax-highlighted, foldable JSON tree with virtualized rendering (virtually no size limit)
- JSON Editor — Editable JSON with real-time validation, formatting, and sorting (50 KB write limit)
- Search — Highlight matching text across the JSON document
- Multiple Themes — Dark, Light, Monokai, Dracula, Solarized Dark (+ custom themes)
- KMP — Android, iOS, and JVM Desktop support via Compose Multiplatform
Installation
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-RC3")
}
Quick Start
JSON Viewer
@OptIn(ExperimentalJsonCmpApi::class)
@Composable
fun MyViewer() {
val state = rememberJsonViewerState(
json = """{"name": "John", "age": 30}""",
)
JsonViewerCMP(
modifier = Modifier.fillMaxSize(),
state = state,
)
}
JSON Editor
@OptIn(ExperimentalJsonCmpApi::class)
@Composable
fun MyEditor() {
val state = rememberJsonEditorState(
initialJson = """{"name": "John", "age": 30}""",
)
JsonEditorCMP(
modifier = Modifier.fillMaxSize(),
state = state,
)
// Observe state reactively — no callbacks needed
// state.json, state.parsedJson, state.error
}
Themes
| Dark | Light | Monokai | Dracula | Solarized Dark |
|---|
JsonViewerCMP(
state = state,
theme = JsonTheme.Monokai, // Dark, Light, Monokai, Dracula, SolarizedDark
)
// Or use a custom theme
JsonEditorCMP(
state = editorState,
theme = JsonTheme.Custom(myColors),
)
API
JsonViewerCMP
@Composable
fun JsonViewerCMP(
modifier: Modifier = Modifier,
state: JsonViewerState,
searchQuery: String = "",
theme: JsonTheme = JsonTheme.Dark,
)
JsonEditorCMP
@Composable
fun JsonEditorCMP(
modifier: Modifier = Modifier,
state: JsonEditorState,
searchQuery: String = "",
theme: JsonTheme = JsonTheme.Dark,
)
State
// Viewer — responds to changes in the json parameter
val viewerState = rememberJsonViewerState(json = "...")
// Editor — initialJson is used once to seed; editor owns its text state
val editorState = rememberJsonEditorState(initialJson = "...")
// Both expose observable properties:
// state.json — current raw JSON text
// state.parsedJson — parsed JsonNode tree, or null if invalid
// state.error — parse error, or null if valid
