--- title: "Hypen — UI declarativa com streaming para renderizadores nativos" description: "Hypen é uma linguagem de UI declarativa cujo motor roda no servidor e transmite a interface como patches por WebSocket para renderizadores nativos em desktop, iOS, Android, Web DOM e Canvas. O projeto é open source (MIT), tem SDKs de servidor em TypeScript, Go, Kotlin, Rust e Swift e expõe o estado e as ações do app a agentes via MCP." canonical: "https://ronanrodrigo.dev/notes/hypen-ui-declarativa-streaming" markdown: "https://ronanrodrigo.dev/notes/hypen-ui-declarativa-streaming.md" last-updated: "2026-10-09" --- ## Hypen — linguagem de UI declarativa com streaming nativo Hypen é uma linguagem declarativa de UI acompanhada de um motor que mantém o estado e a lógica no servidor e transmite a interface como um fluxo de patches por WebSocket. Cada plataforma tem um renderizador que traduz esses patches em componentes próprios: DOM real (ou uma cena em Canvas 2D) na web, uma janela nativa no desktop (winit + wgpu + Vello + cosmic-text), composables do Jetpack Compose no Android e views do SwiftUI no iOS. A mesma UI cobre rotas, breakpoints, animações e acessibilidade, e um app pode ser embutido dentro de outro app Hypen com `HypenApp(url)` mantendo o próprio backend. O roadmap marca a v0.6 como versão atual e a v1.0 como estável, com garantias semver. [Acesse a fonte original](https://hypen.space) ## Introducing Hypen — por que uma linguagem só de UI O post de anúncio apresenta a motivação do projeto: desktop ainda preso a wrappers de webview e mobile dividido entre React Native e Flutter, sem uma forma realmente portátil de escrever apps. A aposta é uma linguagem estritamente de UI, separada do estado e da lógica, o que dá modularidade por componente, estado reativo com time travel e hot reload, streaming entre plataformas e uma arquitetura amigável a LLMs. O engine é escrito em Rust e um renderizador só precisa fazer duas coisas — renderizar UI e enviar ações — o que o mantém pequeno o bastante para ser portado para outras stacks gráficas. [Acesse a fonte original](https://hypen.space/blog/introducing-hypen) ## Getting Started — CLI, dev server e Studio A documentação de primeiros passos cobre a instalação e o fluxo de trabalho: `hypen dev` sobe um servidor com hot reload e preview no browser, `hypen studio` abre um IDE no browser com editor, preview ao vivo, inspetor de estado, time-travel debugging e terminal integrado, e `hypen run ios` / `hypen run android` abre o app no simulador ou emulador com hot reload. Os caminhos se dividem entre apps locais, para aprendizado, e apps remotos, recomendados para produção multiplataforma. [Acesse a fonte original](https://docs.hypen.space/docs/getting-started) ## Hypen 0.6.6 — agentes via MCP e comunicação com o dispositivo A versão 0.6.6 faz o engine derivar um manifesto das ações, rotas, campos preenchíveis e do estado que realmente chega à tela, e o pacote `@hypen-space/agent` serve esse manifesto como servidor MCP: apontando Claude Code, Claude Desktop ou outro cliente MCP para ele, o agente preenche campos, dispara ações e lê o estado sem que se escreva uma única definição de ferramenta. O agente só enxerga o que o template declara renderizar, e ações prefixadas com `_` ficam fora do seu alcance. A mesma release traz um protocolo de capacidades de dispositivo — galeria, arquivos, câmera, microfone, Bluetooth e permissões — que executa os pickers nativos da plataforma e devolve o resultado, bytes incluídos, ao handler no servidor pelo mesmo WebSocket da UI. O post mede o custo em tokens da mesma tarefa: na página de loja com 20 produtos, 1.314 tokens com Hypen contra 8.328 com React e Playwright MCP, cerca de 6× menos. [Acesse a fonte original](https://hypen.space/blog/device-capabilities) ## Remote UI — o protocolo do modo server-driven O modo remoto roda o engine no servidor e envia ao cliente apenas os patches dos nós que mudaram, pela conexão WebSocket, com o cliente aplicando patches e devolvendo ações. As sessões são identificadas por um `sessionId` emitido no `SessionAck` e reenviado na reconexão, de modo que uma queda de conexão ou um restart do servidor retoma a sessão em vez de começar do zero. É o que permite embutir qualquer app Hypen dentro de outro app ao vivo, montar uma loja de mini-apps ou gerar apps com IA a partir de um template, mantendo chaves de API e regras de negócio no servidor, já que o dispositivo só vê a UI resolvida. [Acesse a fonte original](https://docs.hypen.space/docs/concepts/remote-ui) ## Cloudflare — engine dentro de Durable Objects O SDK `@hypen-space/cf` roda o engine dentro de um Durable Object: cada DO mantém a instância e o estado de uma sessão, o Worker roteia os upgrades de WebSocket para ele e ainda pode servir o cliente de browser em `/` (DOM) ou `/canvas`. Com a regra de build `CompiledWasm` e a migration `new_sqlite_classes` para persistência em SQLite, um app inteiro — servidor, estado e cliente — cabe em um único `worker.ts`. Sem cliente servido pelo Worker, o endpoint responde apenas por WebSocket para clientes nativos de desktop, Android e iOS. [Acesse a fonte original](https://docs.hypen.space/docs/servers/cloudflare) ## hypen-lang/hypen — engine em Rust e SDKs, licença MIT O repositório reúne o parser e o engine em Rust, os SDKs de servidor em TypeScript, Go, Kotlin, Rust e Swift, a CLI e as galerias de exemplo, sob licença MIT. A descrição do projeto resume a proposta: uma linguagem e um engine declarativos que transmitem uma única UI para web, iOS, Android e desktop a partir de qualquer uma dessas linguagens, com agentes tratados como parte do design. [Acesse a fonte original](https://github.com/hypen-lang/hypen)