Solicitar Demo

Documentacion de Trazz.io

Bienvenido a la documentacion tecnica de Trazz.io, la plataforma Server-Driven UI con IA integrada disenada para equipos de banca movil y fintech. Aqui encontraras todo lo necesario para entender la arquitectura, las capacidades del editor visual, los componentes nativos y las integraciones disponibles.

Vision General

Trazz.io es una plataforma SDUI (Server-Driven UI) que permite actualizar la interfaz de apps moviles sin pasar por App Store. La plataforma combina cinco capacidades clave en un solo producto:

  • Editor visual de flujos con 25 tipos de nodo para definir logica de negocio sin codigo.
  • IA generativa multi-proveedor (Claude Sonnet, Qwen3) con function calling para generar pantallas desde prompts.
  • Debug remoto nativo (iOS y Android) con step-through, breakpoints y state inspector en tiempo real.
  • Colaboracion multiusuario en tiempo real (CRDT) con merge estructural, presencia e historial de cambios.
  • 60 componentes nativos tipados con validacion Zod schema-first para iOS (SwiftUI + UIKit), Android (Jetpack Compose + View System) y Web.

En total, la plataforma ofrece 60 componentes, 25 tipos de nodo de flujo y soporte para IA multi-proveedor, todo integrado en un motor TypeScript puro.

Arquitectura

Trazz.io esta construido sobre un motor TypeScript puro con una arquitectura hexagonal que desacopla la logica de negocio de la infraestructura de persistencia. Los adaptadores disponibles incluyen InMemory (para testing y desarrollo), FileSystem (para CLI y CI/CD) e IndexedDB (para el editor web).

El sistema sigue un enfoque schema-first con Zod: cada componente, nodo y template se valida contra esquemas estrictos antes de ser procesado. La comunicacion en tiempo real se realiza a traves de WebSocket (Socket.io) para live preview bidireccional, mientras que la API REST expone endpoints para gestion de templates, assets y configuracion.

Estructura de un template

Los templates de Trazz.io se definen en formato .trazz.json:

{
  "id": "screen-home",
  "version": "1.0.0",
  "metadata": {
    "name": "Pantalla de Inicio",
    "author": "equipo-mobile",
    "tags": ["home", "dashboard"]
  },
  "dag": {
    "nodes": [
      { "id": "start", "type": "function_input" },
      { "id": "fetch-data", "type": "http_request", "config": { "endpoint": "/api/dashboard" } },
      { "id": "render", "type": "ui_action", "config": { "component": "DashboardView" } },
      { "id": "end", "type": "function_output" }
    ],
    "edges": [
      { "from": "start", "to": "fetch-data" },
      { "from": "fetch-data", "to": "render" },
      { "from": "render", "to": "end" }
    ]
  },
  "components": [
    {
      "id": "DashboardView",
      "type": "vstack",
      "children": ["header", "balance-card", "transactions-list"]
    }
  ]
}

Editor DAG

El editor de flujos (grafos dirigidos aciclicos, DAG) es el corazon visual de Trazz.io. Permite definir flujos de logica de negocio arrastrando y conectando nodos en un canvas interactivo. Soporta 25 tipos de nodo (22 de autoria + 3 de orquestacion en runtime), organizados por dominio:

  • Control — condition, switch_case, for_each, delay.
  • Datos — set_state, get_state, set_variable, http_request, transform.
  • UI — ui_action, navigate, send_notification.
  • Routing — route_redirect (short-circuit en data loaders).
  • Colecciones — collection_map, collection_merge, collection_filter.
  • Funciones — function_input, function_output, call_flow (funciones de flujo reutilizables).
  • Nativo y script — native_action, script.
  • Orquestacion (runtime) — emit_output, apply_patch, request_approval.
  • Anotacion — comment.

Cada nodo se valida en tiempo real con Zod y el editor detecta ciclos automaticamente para garantizar que el grafo sea siempre un DAG valido.

Componentes Nativos

Trazz.io incluye 60 componentes nativos tipados, organizados en 6 categorias. Cada componente se define mediante un esquema Zod estricto que garantiza la validacion en tiempo de edicion y en tiempo de ejecucion.

Categorias

  • Layout (9) — vstack, hstack, scroll, grid, wrap, zstack, adaptive, spacer, divider.
  • Contenido (19) — text, icon, image, badge, lottie, data_table, list, headline, transaction_row y mas.
  • Entrada (20) — button, input_text, select, checkbox, toggle, otp_input, currency_input, slider, carousel y mas.
  • Navegacion (8) — topbar, footer, header, tabs, stepper, menu_item y mas.
  • Feedback (3) — notification, info_banner, spinner. Los overlays (sheets, modals, toasts) son de nivel pantalla, no componentes hijos.
  • Mount (1) — mount para incrustar pantallas y rutas.

Todos los componentes soportan design tokens unificados que se traducen automaticamente a CSS custom properties (Web), Swift enums (iOS) y Kotlin sealed classes (Android).

IA Generativa

El modulo de IA generativa permite crear pantallas completas a partir de un prompt en lenguaje natural. Trazz.io soporta multiples motores IA con function calling nativo:

  • Claude Sonnet (Anthropic) — Excelente para interfaces complejas, logica condicional y flujos conversacionales.
  • Qwen3 (Alibaba Cloud) — Ideal para despliegues autoalojados y localizacion multilingue.

La IA genera templates .trazz.json validos que incluyen tanto el DAG de logica como los componentes de UI, listos para preview y despliegue.

Debug Remoto

El debug remoto permite inspeccionar y depurar la ejecucion de flujos SDUI directamente en dispositivos iOS y Android conectados. Incluye step-through (ejecucion paso a paso por nodos del DAG), breakpoints en nodos especificos, state inspector para ver el estado en cada punto del flujo, y timeline visual con duracion de cada nodo.

Pipeline Figma

El pipeline Figma-to-app es un proceso autonomo de 7 fases que convierte disenos de Figma en componentes SDUI nativos sin intervencion humana: extraccion del arbol de capas, reconocimiento de componentes, mapeo a tipos Trazz.io, generacion de tokens, validacion de esquemas, optimizacion de assets y publicacion del template.

Design Tokens

El sistema de design tokens unifica la definicion de colores, tipografias, espaciados y sombras en un formato intermedio que se transpila a CSS custom properties, Swift enums y Kotlin sealed classes. Esto garantiza consistencia visual entre plataformas y permite actualizar el tema desde el servidor.

Bridges Nativos Corporativos

Para organizaciones con design systems existentes, Trazz.io ofrece bridges corporativos que mapean componentes del design system legacy a componentes SDUI nativos: UIKit bridges en iOS y Material/View System bridges en Android. Esto permite una migracion progresiva sin reescribir la interfaz existente.

Safety Guardrails

La seguridad es fundamental en entornos enterprise. Trazz.io implementa multiples capas de proteccion:

  • Limites maxSteps — Cada flujo DAG tiene un limite configurable de pasos maximos para evitar ejecuciones infinitas.
  • Deteccion de ciclos — El motor valida el grafo en tiempo real y rechaza cualquier configuracion que introduzca ciclos.
  • Proteccion contra prototype pollution — Todas las entradas de datos se sanitizan para evitar ataques de prototype pollution en el motor JavaScript.
  • Timeouts con AbortController — Las peticiones de red y las ejecuciones de nodos tienen timeouts configurables mediante AbortController nativo.

Estas medidas garantizan un nivel de seguridad enterprise-grade, adecuado para aplicaciones reguladas en cualquier industria.

Asset Management

El sistema de gestion de assets utiliza SHA-256 content-addressed deduplication para almacenar imagenes, iconos y animaciones Lottie. Cada asset se identifica por su hash de contenido, lo que elimina duplicados y permite caching agresivo en el cliente. La distribucion se realiza a traves de CDN con invalidacion automatica al actualizar un asset.