Add Milano to an app you already have.

$ npx milano bindings vocabulary.json \
    --swift-prefix Promo \
    --swift-out ../MyApp/Milano/PromoBindings.swift

$ npx milano bindings vocabulary.json \
    --kotlin-package com.example.myapp.milano --kotlin-prefix Promo \
    --kotlin-out ../app/src/main/kotlin/com/example/myapp/milano/PromoBindings.kt

$ npx milano bindings vocabulary.json \
    --ts-prefix Promo \
    --ts-out ../src/milano/bindings.ts

dependencies: [
    .package(url: "https://github.com/get-milano/sdk.git", from: "2.1.0")
]

repositories {
    mavenCentral()
}

dependencies {
    implementation("dev.get-milano:engine-compose:2.1.0")
    implementation("io.coil-kt:coil-compose:2.7.0")   // the image loader the bridge below uses
}

// The producer folder's files travel with the app: copied into the assets
// before every build, so an edited document is in the next build.
val copyMilanoDocuments by tasks.registering(Copy::class) {
    from("../milano") { include("vocabulary.json", "documents/banner.json") }
    into("src/main/assets/milano")
}
tasks.named("preBuild") { dependsOn(copyMilanoDocuments) }

$ npm install @get-milano/core @get-milano/react

import MilanoSDK
import SwiftUI

/// The bridge: one renderer per vocabulary type, each mapping a typed node
/// onto a view the app already has. Milano draws nothing itself.
enum PromoBridge {
    static func registry() -> MilanoRegistry {
        var registry = MilanoRegistry()
        registry.register(ColumnRenderer(), for: "Column")
        registry.register(TextRenderer(), for: "Text")
        registry.register(ImageRenderer(), for: "Image")
        registry.register(ButtonRenderer(), for: "Button")
        return registry
    }
}

final class ColumnRenderer: MilanoRenderer {
    func render(_ node: MilanoNode) -> AnyView {
        AnyView(
            VStack(alignment: .leading, spacing: 12) {
                ForEach(node.children) { $0 }
            }
            .padding(16)
        )
    }
}

final class TextRenderer: MilanoRenderer {
    func render(_ node: MilanoNode) -> AnyView {
        let text = PromoTextNode(node)
        switch text.role {
        case .title:
            return AnyView(Text(text.text).font(.title2.bold()))
        case .body:
            return AnyView(Text(text.text).font(.body).foregroundStyle(.secondary))
        }
    }
}

final class ImageRenderer: MilanoRenderer {
    func render(_ node: MilanoNode) -> AnyView {
        let image = PromoImageNode(node)
        return AnyView(
            AsyncImage(url: URL(string: image.url)) { phase in
                if case .success(let loaded) = phase {
                    loaded.resizable().scaledToFill()
                } else {
                    Color.gray.opacity(0.2)
                }
            }
            .frame(height: image.height.map(CGFloat.init))
            .clipShape(RoundedRectangle(cornerRadius: CGFloat(image.cornerRadius ?? 0)))
        )
    }
}

final class ButtonRenderer: MilanoRenderer {
    func render(_ node: MilanoNode) -> AnyView {
        let button = PromoButtonNode(node)
        return AnyView(
            Button(button.label) { button.emitTap() }
                .buttonStyle(.borderedProminent)
                .disabled(!button.enabled)
        )
    }
}

package com.example.myapp.milano

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.key
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage
import dev.getmilano.MilanoNode
import dev.getmilano.MilanoRegistry
import dev.getmilano.MilanoRenderer

/**
 * The bridge: one renderer per vocabulary type, each mapping a typed node
 * onto a composable the app already has. Milano draws nothing itself.
 */
fun promoRegistry(): MilanoRegistry {
    val registry = MilanoRegistry()
    registry.register("Column", ColumnRenderer)
    registry.register("Text", TextRenderer)
    registry.register("Image", ImageRenderer)
    registry.register("Button", ButtonRenderer)
    return registry
}

object ColumnRenderer : MilanoRenderer {
    @Composable
    override fun Render(node: MilanoNode) {
        Column(
            verticalArrangement = Arrangement.spacedBy(12.dp),
            modifier = Modifier.padding(16.dp),
        ) {
            for (child in node.children) {
                key(child.key) { child.Render() }
            }
        }
    }
}

object TextRenderer : MilanoRenderer {
    @Composable
    override fun Render(node: MilanoNode) {
        val text = PromoTextNode(node)
        when (text.role) {
            PromoTextRole.Title -> Text(text.text, style = MaterialTheme.typography.titleLarge)
            PromoTextRole.Body ->
                Text(
                    text.text,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                )
        }
    }
}

object ImageRenderer : MilanoRenderer {
    @Composable
    override fun Render(node: MilanoNode) {
        val image = PromoImageNode(node)
        var modifier: Modifier = Modifier.fillMaxWidth()
        image.height?.let { modifier = modifier.height(it.toInt().dp) }
        image.cornerRadius?.let { modifier = modifier.clip(RoundedCornerShape(it.toInt().dp)) }
        AsyncImage(
            model = image.url,
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = modifier,
        )
    }
}

object ButtonRenderer : MilanoRenderer {
    @Composable
    override fun Render(node: MilanoNode) {
        val button = PromoButtonNode(node)
        Button(onClick = { button.emitTap() }, enabled = button.enabled) {
            Text(button.label)
        }
    }
}

import { createMilanoRegistry } from "@get-milano/react";
import type { MilanoReactRegistry, MilanoRenderer } from "@get-milano/react";
import { Image, Pressable, Text, View } from "react-native";

import { PromoButtonNode, PromoImageNode, PromoTextNode } from "./bindings.ts";

/**
 * The bridge: one renderer per vocabulary type, each mapping a typed node
 * onto a component the app already has. Milano draws nothing itself.
 */

const ColumnRenderer: MilanoRenderer = ({ node }) => (
  <View style={{ gap: 12, padding: 16 }}>{node.children}</View>
);

const TextRenderer: MilanoRenderer = ({ node }) => {
  const text = new PromoTextNode(node);
  if (text.role === "title") return <Text style={{ fontSize: 22, fontWeight: "700" }}>{text.text}</Text>;
  return <Text style={{ fontSize: 15, color: "#6b6b6b" }}>{text.text}</Text>;
};

const ImageRenderer: MilanoRenderer = ({ node }) => {
  const image = new PromoImageNode(node);
  return (
    <Image
      source={{ uri: image.url }}
      resizeMode="cover"
      style={{
        width: "100%",
        height: image.height === null ? 160 : Number(image.height),
        borderRadius: Number(image.cornerRadius ?? 0),
      }}
    />
  );
};

const ButtonRenderer: MilanoRenderer = ({ node }) => {
  const button = new PromoButtonNode(node);
  return (
    <Pressable
      accessibilityRole="button"
      disabled={!button.enabled}
      onPress={() => button.emitTap()}
      style={{
        alignSelf: "flex-start",
        backgroundColor: "#d12360",
        borderRadius: 999,
        paddingHorizontal: 18,
        paddingVertical: 10,
        opacity: button.enabled ? 1 : 0.5,
      }}
    >
      <Text style={{ color: "#fff", fontWeight: "600" }}>{button.label}</Text>
    </Pressable>
  );
};

export function promoRegistry(): MilanoReactRegistry {
  const registry = createMilanoRegistry();
  registry.register("Column", ColumnRenderer);
  registry.register("Text", TextRenderer);
  registry.register("Image", ImageRenderer);
  registry.register("Button", ButtonRenderer);
  return registry;
}

import MilanoSDK
import SwiftUI

/// One engine for the whole app, created once with the vocabulary the
/// bridge implements; every screen builds its views from it.
enum Milano {
    static let engine: MilanoEngine = {
        do {
            let engine = try MilanoEngine(
                vocabularyJSON: resource("vocabulary"),
                registry: PromoBridge.registry())
            // Refuses to run against a vocabulary the bindings were not generated from.
            PromoVocabulary.assertMatches(engine)
            return engine
        } catch {
            fatalError("Milano setup failed: \(error)")
        }
    }()

    /// The banner: the document from the producer folder, bundled with
    /// the app, plus the context it declared and the handler for its actions.
    static func bannerBuilder() -> MilanoViewBuilder {
        engine.viewBuilder(document: resource("banner"))
            .context(["userName": .string("Ada")])
            .actionHandler(handle(_:))
            .label("banner")
    }

    /// The single funnel for custom actions. The gate proved `url` is a
    /// string; whether it is safe to open is the app's decision.
    @Sendable static func handle(_ action: MilanoAction) async throws -> MilanoValue? {
        switch PromoAction(action) {
        case .openUrl(let url):
            guard let url = URL(string: url), url.scheme == "https" else { return nil }
            await open(url)
        case .unrecognized(let action):
            print("unhandled action \(action.name)")
        }
        return nil
    }

    @MainActor private static func open(_ url: URL) {
        UIApplication.shared.open(url)
    }

    private static func resource(_ name: String) -> Data {
        guard let url = Bundle.main.url(forResource: name, withExtension: "json"),
              let data = try? Data(contentsOf: url)
        else { fatalError("\(name).json is not in the app bundle; add it to the target") }
        return data
    }
}

/// Drop it into any screen: the banner renders where this view sits.
struct PromoBannerView: View {
    var body: some View {
        MilanoHost(builder: Milano.bannerBuilder()) {
            ProgressView()
        } failure: { _ in
            EmptyView()   // an optional surface fails to nothing
        }
    }
}

package com.example.myapp.milano

import android.content.Context
import android.content.Intent
import android.net.Uri
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import dev.getmilano.MilanoAction
import dev.getmilano.MilanoEngine
import dev.getmilano.MilanoHost
import dev.getmilano.MilanoValue
import dev.getmilano.MilanoViewBuilder
import dev.getmilano.viewBuilder

/**
 * One engine for the whole app, created once with the vocabulary the
 * bridge implements; every screen builds its views from it.
 */
class Milano(private val context: Context) {
    private val engine: MilanoEngine by lazy {
        MilanoEngine(
            vocabularyJson = asset("milano/vocabulary.json"),
            registry = promoRegistry(),
        ).also { PromoVocabulary.assertMatches(it) }
        // Refuses to run against a vocabulary the bindings were not generated from.
    }

    /**
     * The banner: the document from the producer folder, copied into the
     * assets at build time, plus the context it declared and the handler
     * for its actions.
     */
    fun bannerBuilder(): MilanoViewBuilder =
        engine
            .viewBuilder(asset("milano/documents/banner.json"))
            .context(mapOf("userName" to MilanoValue.StringValue("Ada")))
            .actionHandler { action -> handle(action) }
            .label("banner")

    /**
     * The single funnel for custom actions. The gate proved `url` is a
     * string; whether it is safe to open is the app's decision.
     */
    private fun handle(action: MilanoAction): MilanoValue? {
        when (val decoded = PromoAction.from(action)) {
            is PromoAction.OpenUrl -> {
                val uri = Uri.parse(decoded.url)
                if (uri.scheme == "https") {
                    context.startActivity(Intent(Intent.ACTION_VIEW, uri).addFlags(Intent.FLAG_ACTIVITY_NEW_TASK))
                }
            }
            is PromoAction.Unrecognized -> println("unhandled action ${decoded.action.name}")
        }
        return null
    }

    private fun asset(name: String): String = context.assets.open(name).bufferedReader().use { it.readText() }
}

/** Drop it into any screen: the banner renders where this composable sits. */
@Composable
fun PromoBanner(milano: Milano) {
    val builder = remember { milano.bannerBuilder() }
    MilanoHost(
        builder = builder,
        loading = { CircularProgressIndicator() },
        failure = { /* an optional surface fails to nothing */ },
    )
}

import { MilanoEngine, MilanoValue } from "@get-milano/core";
import type { MilanoAction } from "@get-milano/core";
import { MilanoHost } from "@get-milano/react";
import type { MilanoReactBuilder } from "@get-milano/react";
import { useMemo } from "react";
import type { ReactNode } from "react";
import { ActivityIndicator, Linking } from "react-native";

import { PromoVocabulary, promoAction } from "./bindings.ts";
import { promoRegistry } from "./bridge.tsx";
import banner from "../../milano/documents/banner.json";
import vocabulary from "../../milano/vocabulary.json";

/**
 * One engine for the whole app, created once with the vocabulary the
 * bridge implements; every screen builds its views from it.
 */
const engine = new MilanoEngine({ vocabularyJson: JSON.stringify(vocabulary), registry: promoRegistry() });
// Refuses to run against a vocabulary the bindings were not generated from.
PromoVocabulary.assertMatches(engine);

/**
 * The single funnel for custom actions. The gate proved `url` is a
 * string; whether it is safe to open is the app's decision.
 */
async function handle(action: MilanoAction): Promise<MilanoValue | null> {
  const decoded = promoAction(action);
  switch (decoded.kind) {
    case "openUrl":
      if (decoded.url.startsWith("https://")) await Linking.openURL(decoded.url);
      return null;
    case "unrecognized":
      console.log(`unhandled action ${decoded.action.name}`);
      return null;
  }
}

/**
 * The banner: the document from the producer folder, imported in place,
 * plus the context it declared and the handler for its actions.
 */
export function bannerBuilder(): MilanoReactBuilder {
  return engine
    .viewBuilder(JSON.stringify(banner))
    .context({ userName: MilanoValue.string("Ada") })
    .actionHandler(handle)
    .label("banner");
}

/** Drop it into any screen: the banner renders where this component sits. */
export function PromoBanner(): ReactNode {
  const builder = useMemo(() => bannerBuilder(), []);
  return <MilanoHost builder={builder} loading={<ActivityIndicator />} failure={() => null} />;
}

// The engine takes one function handler; it answers every function the
// vocabulary declares, for every view built from this engine.
let engine = try MilanoEngine(
    vocabularyJson: vocabulary,
    registry: PromoBridge.registry(),
    functionHandler: MilanoClosureFunctionHandler { call in
        switch call.name {
        case "formatMoney":
            let cents = call.arguments[0].intValue ?? 0
            let currency = call.arguments[1].stringValue ?? "EUR"
            let formatter = NumberFormatter()
            formatter.numberStyle = .currency
            formatter.currencyCode = currency
            let amount = NSNumber(value: Double(cents) / 100)
            return .string(formatter.string(from: amount) ?? "")
        default:
            return .null
        }
    }
)

// The engine takes one function handler; it answers every function the
// vocabulary declares, for every view built from this engine.
val engine =
    MilanoEngine(
        vocabularyJson = vocabulary,
        registry = promoRegistry(),
        functionHandler =
            MilanoFunctionHandler { call ->
                when (call.name) {
                    "formatMoney" -> {
                        val cents = call.arguments[0].intOrNull ?: 0L
                        val currency = call.arguments[1].stringOrNull ?: "EUR"
                        val format = NumberFormat.getCurrencyInstance()
                        format.currency = Currency.getInstance(currency)
                        MilanoValue.StringValue(format.format(cents / 100.0))
                    }
                    else -> null
                }
            },
    )

// The engine takes one function handler; it answers every function the
// vocabulary declares, for every view built from this engine.
const engine = new MilanoEngine({
  vocabularyJson: vocabulary,
  registry: promoRegistry(),
  functionHandler: (call) => {
    if (call.name !== "formatMoney") return null;
    const [cents, currency] = call.arguments;
    return MilanoValue.string(
      new Intl.NumberFormat(undefined, {
        style: "currency",
        currency: currency.stringValue ?? "EUR",
      }).format(Number(cents.intValue ?? 0n) / 100),
    );
  },
});