# 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="setup" %}
[setup](https://codandotv.gitbook.io/craftd/setup)
{% 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="how-to-use" %}
[how-to-use](https://codandotv.gitbook.io/craftd/how-to-use)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codandotv.gitbook.io/craftd/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.