> For the complete documentation index, see [llms.txt](https://codandotv.gitbook.io/craftd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codandotv.gitbook.io/craftd/overview.md).

# Overview

{% hint style="info" %}

## CraftD: A framework to implement Server-Driven UI quickly and easily to Android / iOS / Flutter / Km

{% endhint %}

## Features

#### 🔗 Compatibility

| Tech                            |       Support      |
| ------------------------------- | :----------------: |
| View System - Android           |   ✅ **Supported**  |
| Jetpack Compose - Android       |   ✅ **Supported**  |
| Widget - Flutter                |   ✅ **Supported**  |
| SwiftUi - iOS                   |   ✅ **Supported**  |
| Jetpack Compose - Multiplatform | ⚒️ **In Progress** |

### Components that already exist in the library

| Component | Compose | View System | Widget | SwiftUI |
| --------- | ------- | ----------- | ------ | ------- |
| Button    | X       | X           | X      | -       |
| Text      | X       | X           | X      | X       |
| CheckBox  | X       | -           | -      | -       |

#### Create your custom component( *android compose example* )

```kotlin
@JsonIgnoreProperties(ignoreUnknown = true)
@Immutable
@Stable
data class CheckBoxProperties(
    @JsonProperty("text") val text: String? = null,
    ... rest of your properties
)

```

**Add your Component json object in Dymanic.json**

```json
{
  "key": "CraftDCheckBox",
  "value": {
    ... rest of your properties
  }
}

```

**Create your Component**

```kotlin
@Composable
fun CraftDCheckBox(
    checkboxProperties: CheckBoxProperties,
    modifier: Modifier = Modifier,
    onChecked: (Boolean) -> Unit
) {
    ... Rest of your code
}
```

**Create your Component Builder**

```kotlin
class CraftDCheckBoxBuilder(
    override val key: String = CraftDComponentKey.CHECK_BOX_COMPONENT.key
) :
    CraftDBuilder {
    @Composable
    override fun craft(model: SimpleProperties, listener: CraftDViewListener) {
        val checkBoxProperties = model.value.convertToVO<CheckBoxProperties>()
        CraftDCheckBox(checkBoxProperties) {
            checkBoxProperties.actionProperties?.let { listener.invoke(it) }
        }
    }
}
```

More details check our itens

#### Samples

| [Android Compose](https://github.com/CodandoTV/CraftD/tree/main/android_kmp/app-sample/src/main/java/com/github/codandotv/craftd/app_sample/presentation/compose) | [Android View System](https://github.com/CodandoTV/CraftD/tree/main/android_kmp/app-sample/src/main/java/com/github/codandotv/craftd/app_sample/presentation/xml) | [iOS SwiftUI](https://github.com/CodandoTV/CraftD/tree/main/ios/sample/CraftDSample)    | [Flutter](https://github.com/CodandoTV/CraftD/tree/main/flutter/sample/lib)                         |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| ![android](https://github.com/CodandoTV/CraftD/assets/7690931/aa31d0a2-a998-402c-b2c2-4de5088ee30f)                                                               | ![android](https://github.com/CodandoTV/CraftD/assets/7690931/aa31d0a2-a998-402c-b2c2-4de5088ee30f)                                                               | ![iOS](https://github.com/user-attachments/assets/c8c653b2-1289-4437-85f2-f940d5135f27) | ![flutter](https://github.com/CodandoTV/CraftD/assets/7690931/dfabfda7-6501-4763-b040-3ee9fbf2a2be) |

#### Credits

> A Server Driven UI library for Android.

Inspired by the [DynamicView](https://github.com/rviannaoliveira/DynamicView/).

## Quick links

{% content-ref url="/pages/Y3VgbsJ04woLaHNfawD1" %}
[Setup](/craftd/setup.md)
{% endcontent-ref %}

## Get Started

We've put together some helpful guides for you to get setup with our product quickly and easily.

{% content-ref url="/pages/XyWM37FsimXhEkPKhOxH" %}
[How to use](/craftd/how-to-use.md)
{% endcontent-ref %}