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 DAG visual con 14 tipos de nodo para definir logica de negocio sin codigo.
  • IA generativa multi-proveedor (GPT-4.1, 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.
  • Pipeline Figma autonomo de 7 fases que convierte disenos en componentes nativos sin intervencion humana.
  • 42 componentes nativos tipados con validacion Zod schema-first para iOS (SwiftUI + UIKit), Android (Jetpack Compose + View System) y Web.

En total, la plataforma ofrece 42 componentes, 14 tipos de nodo en el DAG y soporte para IA multi-motor, 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": "Start" },
      { "id": "fetch-data", "type": "APICall", "config": { "endpoint": "/api/dashboard" } },
      { "id": "render", "type": "RenderUI", "config": { "component": "DashboardView" } },
      { "id": "end", "type": "End" }
    ],
    "edges": [
      { "from": "start", "to": "fetch-data" },
      { "from": "fetch-data", "to": "render" },
      { "from": "render", "to": "end" }
    ]
  },
  "components": [
    {
      "id": "DashboardView",
      "type": "Stack",
      "children": ["header", "balance-card", "transactions-list"]
    }
  ]
}

Editor DAG

El editor DAG (Directed Acyclic Graph) es el corazon visual de Trazz.io. Permite definir flujos de logica de negocio arrastrando y conectando nodos en un canvas interactivo. Soporta 14 tipos de nodo:

  • Start — Punto de entrada del flujo.
  • End — Punto de salida y finalizacion.
  • Condition — Bifurcacion condicional con expresiones logicas.
  • Loop — Iteracion sobre arrays o rangos.
  • API Call — Peticiones HTTP con configuracion de headers, body y retry.
  • Transform — Mapeo y transformacion de datos con expresiones.
  • Render UI — Renderizado de un componente nativo en pantalla.
  • Navigate — Navegacion entre pantallas o deep links.
  • Set State — Actualizacion del estado local o global.
  • Delay — Pausa temporizada en milisegundos.
  • Parallel — Ejecucion simultanea de ramas.
  • Merge — Union de resultados de ramas paralelas.
  • Error Handler — Captura y manejo de errores con fallback.
  • Custom — Nodo extensible para logica personalizada.

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 42 componentes nativos tipados, organizados en 7 categorias. Cada componente se define mediante un esquema Zod que garantiza la validacion en tiempo de edicion y en tiempo de ejecucion.

Categorias

  • Layout — Stack, Grid, ScrollView, SafeArea, Spacer, Divider.
  • Navigation — TabBar, NavigationBar, Drawer, Breadcrumb, Link.
  • Forms — TextField, TextArea, Select, Checkbox, RadioGroup, Switch, DatePicker, Slider, FilePicker.
  • Data Display — Text, Badge, Avatar, Card, List, Table, Tag, Chip.
  • Feedback — Alert, Toast, Modal, ProgressBar, Spinner, Skeleton, EmptyState.
  • Media — Image, Video, Icon, Lottie, Map.
  • Charts — LineChart, BarChart, PieChart, AreaChart.

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:

  • GPT-4.1 (OpenAI) — Optimo para interfaces complejas con multiples estados.
  • Claude Sonnet (Anthropic) — Excelente para logica condicional y flujos conversacionales.
  • Qwen3 (Alibaba Cloud) — Ideal para mercados asiaticos 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.