Stately
Stately · Programación
Stately es un editor visual de máquinas de estado para diseñar la lógica de una app, generar flujos con IA y exportar código XState. Encaja en equipos que quieren que el diagrama y el código avancen juntos.
Acerca de Stately
About
Qué es Stately
Stately es una herramienta que se abre en el navegador y sirve para dibujar máquinas de estado y statecharts, los diagramas que describen cómo pasa una aplicación de un estado a otro. La empresa también mantiene XState, la librería open source de JavaScript que ejecuta esos diagramas como código real. Stately Studio es el producto de pago que rodea esa librería: un editor, un simulador y varias funciones de exportación y sincronización. Nació como visualizador de XState y hoy funciona como herramienta de statecharts para equipos completos.
El problema que ataca es la deriva. El diagrama del archivo de diseño dice una cosa, el código dice otra y nadie lo nota hasta que llega un informe de error. Stately mantiene una sola máquina como fuente y la proyecta en dos direcciones: una imagen que el equipo entiende y TypeScript que la app puede ejecutar. Si cambias el dibujo, el código exportado cambia con él.
Tres límites marcan para quién sirve. Hace falta cierta soltura con la idea de máquina de estado, porque eventos, guardas y estados anidados son el vocabulario diario. El plan gratuito se queda en dos proyectos públicos y tres máquinas. Y la generación con IA está etiquetada como experimental, así que conviene tratar el resultado como un primer borrador que alguien revisa.
Primeros pasos
- Abre state.new y entrarás directo al editor de Stately Studio, sin instalar nada. Inicia sesión cuando quieras guardar.
- Arma el flujo. Arrastra estados al lienzo, añade eventos entre ellos y nombra las transiciones con palabras normales. También puedes escribir una descripción y dejar que el generador de flujos con IA proponga una primera versión.
- Pasa a modo Simulate y recorre los eventos con clics. Verás qué transiciones se disparan y dónde se atasca la máquina.
- Exporta la máquina a JavaScript o TypeScript, o conecta GitHub para que el archivo se sincronice con tu repositorio.
- Invita al equipo con un plan Team, pon la visibilidad del proyecto en privado y asigna roles de editor o lector.
Información del producto
Un vistazo rápido a los precios, las plataformas compatibles y el rendimiento de Stately.
Ideal para
Los usuarios, tareas y casos de uso en los que esta herramienta encaja mejor.
Usuarios
- Desarrolladores frontend
- Product managers y diseñadores
- Ingenieros de QA
- Equipos de plataforma con flujos compartidos
Tareas
- Modelar un registro o un pago de varios pasos
- Armar una máquina desde un texto
- Documentar la lógica de un proceso del backend
- Auditar código de estado existente
Casos de uso
- Una planificación de sprint donde el equipo discute casos límite
- Una revisión con stakeholders que pide algo con lo que interactuar
- Una limpieza previa a refactorizar una función vieja
Funciones clave
Editor de arrastrar y soltar con modos Design y Simulate
El lienzo es el producto. Colocas estados, trazas transiciones y editas el nombre de los eventos ahí mismo, con un panel lateral para guardas, acciones y descripciones. Design sirve para construir; Simulate, para recorrer la máquina evento a evento. Ningún modo te obliga a escribir código primero, y por eso un diseñador puede aportar al mismo archivo que un ingeniero.
Generar con IA
Describe un flujo en dos frases y Stately construye una máquina con estados, eventos y transiciones. También puedes seleccionar una máquina existente y pedir un cambio, como añadir una rama de reintento. Cada instrucción queda en un historial y cada generación guarda una versión automática que puedes reabrir. La función es experimental, el cupo mensual es limitado y, al modificar un flujo, la definición de la máquina viaja a OpenAI.
Prototipos ejecutables y simulación en vivo
La simulación no es una presentación de diapositivas. Stately genera una interfaz de React para la máquina, de modo que quien revisa pulsa botones reales y dispara transiciones reales. Las cuentas Pro suman simulación en vivo, que ejecuta la máquina mientras la editas. Si el equipo malinterpreta un diagrama una y otra vez, esta es la forma más rápida de mostrar qué pasa cuando alguien cancela durante el pago.
Exportación a XState y sincronización con el código
Toda máquina se exporta a JavaScript o TypeScript que corre sobre XState, la librería open source que mantiene Stately. No hay encierro: el código funciona en un script de Node, en una app de React o en un worker de backend. En los planes de pago puedes conectar GitHub o usar la CLI para sincronizar máquinas con un repositorio, y los cambios viajan en ambos sentidos entre el dibujo y el código.
Rutas de prueba, versiones y documentación viva
Las cuentas Pro generan rutas de prueba, que enumeran los caminos posibles de una máquina para que quien prueba sepa qué intentar. El historial de versiones guarda instantáneas que puedes restaurar, y el editor exporta flujos como historias en markdown, diagramas de Mermaid o JSON. Si sumas marcos de Figma, el diagrama arrastra consigo el contexto de diseño.
Proyectos, equipos y control de acceso
Los proyectos agrupan máquinas relacionadas y deciden quién las ve. Los públicos aparecen en la página Discover, los no listados se abren por enlace y los privados se quedan dentro del equipo. Los roles cubren propietario, admin, editor y lector. Enterprise añade inicio de sesión único, registros de auditoría, alojamiento propio y la opción de incrustar Stately en tu propia aplicación.
Ventajas y desventajas
Ventajas
- El diagrama y el código salen de la misma fuente, y la exportación corre sobre XState, así que puedes irte sin reescribir la app.
- La generación con IA resuelve el lienzo en blanco, y el historial de instrucciones junto a las versiones automáticas facilitan comparar borradores.
- El plan gratuito incluye exportación de código y la extensión de VS Code, suficiente para probar el flujo en una función real.
- El modo Simulate descubre callejones sin salida y estados inalcanzables antes de que lleguen a la revisión de código.
- Los controles de Enterprise cubren SSO, auditoría y alojamiento propio, algo que pesa en equipos regulados.
Desventajas
- El plan gratuito se detiene en dos proyectos públicos y tres máquinas, y cada fork cuenta para el límite. Trabajar en privado exige Pro, 39 USD/mes o 33 USD/mes con pago anual.
- La generación con IA es experimental y tiene cupo. Al modificar un flujo existente, la definición de la máquina sale de tu cuenta hacia OpenAI, y eso generará preguntas en algunos equipos de seguridad.
- La herramienta da por hecho que entiendes los statecharts. Un PM puede arrastrar cajas, pero los estados anidados y paralelos piden una o dos sesiones.
- El acceso programático pasa por la sincronización con GitHub y la CLI. Si necesitas una API REST para los datos del proyecto, confirma con Stately antes de comprometerte.
Preguntas frecuentes
Sí. El plan gratuito permite dos proyectos públicos, incluido el proyecto Drafts, y tres máquinas. Incluye el editor, la simulación de máquinas públicas, la exportación de código y la extensión de VS Code. Pro cuesta 39 USD al mes, o 33 USD al mes con facturación anual, y quita los topes de proyectos y máquinas, además de sumar proyectos privados y funciones de IA.
Contenido relacionado
Explora herramientas, habilidades y artículos relacionados con Stately.
Alternativas a Stately
Forefront
Forefront · ProgramaciónForefront es una plataforma web para construir con IA de código abierto. Te deja ajustar los principales modelos de lenguaje de código abierto con tus propios datos, evaluar cómo rinden y ejecutarlos a través de una API o exportarlos para alojarlos tú mismo. Los desarrolladores que quieren la comodidad de una plataforma cerrada pero insisten en ser dueños de sus modelos y sus datos son el público objetivo.
Startkit
StartKit.AI · ProgramaciónStartkit es un boilerplate para crear productos de SaaS con IA y wrappers de IA. Piénsalo como un boilerplate para startups de IA con las partes aburridas ya conectadas: autenticación, pagos con Stripe y Lemon Squeezy, límites de uso, correo transaccional y un kit de inicio de API de IA que habla con OpenAI, Anthropic, Groq o Llama. Clonas el repositorio, pones tu precio y te dedicas a la parte del producto por la que la gente paga de verdad. Está hecho con Next.js sobre React y Tailwind, así que buena parte del código boilerplate ya te resulta familiar.
Testim
Tricentis · ProgramaciónTestim es una plataforma de automatización de pruebas impulsada por IA para crear y ejecutar pruebas de extremo a extremo en aplicaciones web, móviles y Salesforce. Se apoya en el aprendizaje automático para mantener las pruebas estables cuando cambia una interfaz, así que los equipos dedican menos tiempo a reparar selectores rotos. No está nada mal para una herramienta de pruebas automatizadas que puedes empezar a usar hoy mismo. Creas pruebas grabando acciones en un navegador y luego añades JavaScript cuando necesitas más control. Es una opción sólida para equipos de QA con mucho trabajo.