Skip to main content
This guide helps you integrate Joyfill Android SDK into either a new or existing Android project. It shows you how to install the SDK and display your first form using Jetpack Compose.

​
Install Joyfill SDK

Creating or opening your project If you already have an Android project, open it in Android Studio. Otherwise, create a new one by following the steps below.
  1. Open Android Studio, select File > New > New Project.
  2. Choose the Empty Activity (Jetpack Compose) template.
  3. Set your app name (for example, Joyfill Demo), desired save location, language (Kotlin), and minimum SDK (21+ recommended).
  4. Click Finish to create the project.
Adding Joyfill to your project In your app/build.gradle.kts file, add the Joyfill dependency: 
dependencies {
    implementation("io.joyfill:compose:<version>")
}
Check versions for the latest version.
⚠️ See migration notes in migration-guide if you are upgrading from v1
Sync your project After adding the dependency, sync your project by clicking the Sync Now button that appears at the top of the file, or by selecting File > Sync Project with Gradle Files.

​
Load your first form

Download the sample JSON Download the sample JSON to get started without any API calls: first-form.json This JSON file contains a simple form with:
  • A text field for “Full Name”
  • A number field for “Age”
  • A multi-select field for “Do you like football?”

​
Provide JSON

After downloading first-form.json, you have two ways to use it in your app: Method 1: Copy JSON content directly Open the downloaded file, copy its entire content, and paste it into your code: 
val json = """
    {
      "_id": "68d101ee8f5793b7cd6031fc",
      "type": "template",
      "name": "New Template",
      // ... rest of your JSON content from first-form.json ...
    }
""".trimIndent()
Method 2: Load from assets (recommended)
  1. Place first-form.json in your app/src/main/assets/ folder
  2. Load it in your code:
@Composable
fun loadJsonFromAssets(context: Context, fileName: String): String {
    return remember(fileName) {
        context.assets.open(fileName).bufferedReader().use { it.readText() }
    }
}

// Usage
val context = LocalContext.current
val json = loadJsonFromAssets(context, "first-form.json")
Create your DocumentEditor Once you have the JSON, create a DocumentEditor: 
val editor = rememberDocumentEditor(json = json)
Display the Form Add the Form to your UI: 
Form(editor = editor)

​
Listen for form changes

Track user interactions and form modifications using event callbacks: Basic change tracking 
val editor = rememberDocumentEditor(
    json = json,
    onChange = { changeEvent ->
        println("Form changed! ${changeEvent.changelogs.size} updates")
        
        // Access the updated document
        val updatedDocument = changeEvent.document
        
        // Process each change
        changeEvent.changelogs.forEach { change ->
            println("Field '${change.fieldId}' was modified")
        }
    }
)
Field-level events You can also listen for specific field interactions: 
Form(
    editor = editor,
    onFieldChange = { event ->
        println("Field changed: ${event.fieldId}")
    },
    onFocus = { event ->
        println("Field focused: ${event.fieldId}")
    },
    onBlur = { event ->
        println("Field lost focus: ${event.fieldId}")
    }
)
 💡 Learn more: For detailed information about all available events and their parameters, see the Form Events Documentation.