Stately
Stately · Programação
Stately é um editor visual de máquinas de estado para desenhar a lógica de um app, gerar fluxos com IA e exportar código XState. Serve para times que querem diagrama e código andando juntos.
Sobre Stately
About
O que é o Stately
Stately é uma ferramenta de navegador para desenhar máquinas de estado e statecharts, os diagramas que mostram como um aplicativo passa de um estado para outro. A empresa também mantém o XState, a biblioteca open source de JavaScript que executa esses diagramas como código de verdade. O Stately Studio é o produto pago em volta dela: um editor, um simulador e um conjunto de recursos de exportação e sincronização. Começou como visualizador de XState e hoje atende times inteiros como ferramenta de statecharts.
O problema que ele ataca é a divergência. O diagrama no arquivo de design diz uma coisa, o código diz outra, e ninguém percebe até aparecer um relatório de bug. O Stately mantém uma única máquina como fonte e projeta isso em duas direções: uma imagem que o time entende e TypeScript que o app consegue rodar. Mudou o desenho, o código exportado muda junto.
Três limites definem para quem isso funciona. É preciso algum conforto com a ideia de máquina de estado, porque eventos, guardas e estados aninhados são o vocabulário do dia a dia. O plano gratuito para em dois projetos públicos e três máquinas. E a geração com IA está marcada como experimental, então trate a saída como um primeiro rascunho que alguém revisa.
Como começar
- Abra state.new e você cai direto no editor do Stately Studio, sem instalar nada. Faça login quando quiser salvar.
- Monte o fluxo. Arraste estados para a tela, ligue eventos entre eles e nomeie as transições com palavras comuns. Ou escreva uma descrição e deixe o gerador de fluxos com IA rascunhar a primeira versão.
- Troque para o modo Simulate e clique pelos eventos. Dá para ver quais transições disparam e onde a máquina travou.
- Exporte a máquina em JavaScript ou TypeScript, ou conecte o GitHub para o arquivo sincronizar com seu repositório.
- Chame o time em um plano Team, coloque a visibilidade do projeto em privado e distribua papéis de editor ou leitor.
Informações do produto
Uma visão rápida dos preços, das plataformas compatíveis e do desempenho de Stately.
Ideal para
Os usuários, tarefas e cenários em que esta ferramenta se encaixa melhor.
Usuários
- Desenvolvedores frontend
- Product managers e designers
- Engenheiros de QA
- Times de plataforma com fluxos compartilhados
Tarefas
- Modelar um cadastro ou pagamento de várias etapas
- Montar uma máquina a partir de um texto
- Documentar a lógica de um processo de backend
- Auditar código de estado existente
Cenários
- Planejamento de sprint em que o time briga por casos limite
- Revisão com stakeholders que pede algo clicável
- Limpeza antes de refatorar uma função antiga
Principais recursos
Editor de arrastar e soltar com modos Design e Simulate
A tela é o produto. Você posiciona estados, traça transições e edita nomes de eventos ali mesmo, com um painel lateral para guardas, ações e descrições. O Design serve para construir; o Simulate, para percorrer a máquina evento por evento. Nenhum dos dois exige código antes, e é por isso que um designer consegue contribuir no mesmo arquivo que um engenheiro.
Gerar com IA
Descreva um fluxo em duas frases e o Stately monta uma máquina com estados, eventos e transições. Também dá para selecionar uma máquina existente e pedir uma alteração, como incluir um ramo de nova tentativa. Cada pedido fica em um histórico e cada geração salva uma versão automática que você pode reabrir. O recurso é experimental, a cota mensal é limitada e, ao modificar um fluxo, a definição da máquina vai para a OpenAI.
Protótipos executáveis e simulação ao vivo
Simulação não é apresentação de slides. O Stately gera uma interface React para a máquina, então quem revisa aperta botões reais e dispara transições reais. Contas Pro ganham simulação ao vivo, que executa a máquina enquanto você edita. Se o time lê um diagrama errado toda vez, esse é o jeito mais rápido de mostrar o que acontece quando alguém cancela no meio do pagamento.
Exportação para XState e sincronização com o código
Toda máquina sai em JavaScript ou TypeScript rodando em XState, a biblioteca open source mantida pelo Stately. Não existe aprisionamento: o código funciona em um script Node, em um app React ou em um worker de backend. Nos planos pagos você conecta o GitHub ou usa a CLI para sincronizar máquinas com um repositório, e as mudanças vão e voltam entre desenho e código.
Rotas de teste, versões e documentação viva
Contas Pro geram rotas de teste, que listam os caminhos possíveis de uma máquina para quem testa saber o que tentar. O histórico de versões guarda snapshots que você restaura, e o editor exporta fluxos como histórias em markdown, diagramas Mermaid ou JSON. Some molduras do Figma e o diagrama carrega o contexto de design junto.
Projetos, times e controle de acesso
Projetos agrupam máquinas relacionadas e decidem quem vê cada uma. Os públicos aparecem na página Discover, os não listados abrem por link e os privados ficam dentro do time. Os papéis cobrem dono, admin, editor e leitor. O Enterprise acrescenta login único, logs de auditoria, hospedagem própria e a opção de embutir o Stately no seu próprio aplicativo.
Prós e contras
Prós
- Diagrama e código nascem da mesma fonte, e a exportação roda em XState, então você pode sair sem reescrever o app.
- A geração com IA resolve a tela em branco, e o histórico de pedidos com as versões automáticas facilita comparar rascunhos.
- O plano gratuito inclui exportação de código e a extensão do VS Code, o bastante para testar o fluxo em uma feature real.
- O modo Simulate encontra becos sem saída e estados inalcançáveis antes da revisão de código.
- Os controles do Enterprise cobrem SSO, auditoria e hospedagem própria, o que pesa em times regulados.
Contras
- O plano gratuito para em dois projetos públicos e três máquinas, e cada fork conta no limite. Trabalho privado exige Pro, US$ 39/mês ou US$ 33/mês no pagamento anual.
- A geração com IA é experimental e tem cota. Ao modificar um fluxo existente, a definição da máquina sai da sua conta rumo à OpenAI, e isso vai levantar perguntas em alguns times de segurança.
- A ferramenta assume que você entende statecharts. Um PM arrasta caixas, mas estados aninhados e paralelos pedem uma ou duas sessões.
- O acesso programático passa pela sincronização com GitHub e pela CLI. Se você precisa de uma API REST para os dados do projeto, confirme com o Stately antes de fechar.
Perguntas frequentes
Sim. O plano gratuito libera dois projetos públicos, incluindo o projeto Drafts, e três máquinas. Vem com editor, simulação de máquinas públicas, exportação de código e a extensão do VS Code. O Pro custa US$ 39 por mês, ou US$ 33 por mês no plano anual, e remove os limites de projetos e máquinas, além de somar projetos privados e recursos de IA.
Conteúdo relacionado
Explore ferramentas, skills e artigos relacionados a Stately.
Alternativas a Stately
Forefront
Forefront · ProgramaçãoO Forefront é uma plataforma web para construir com IA de código aberto. Você ajusta os principais modelos de linguagem de código aberto com seus próprios dados, avalia o desempenho deles e os roda por uma API ou os exporta para hospedar por conta própria. Desenvolvedores que querem a conveniência de uma plataforma fechada, mas fazem questão de ser donos dos modelos e dos dados, são o público-alvo aqui.
Startkit
StartKit.AI · ProgramaçãoStartkit é um boilerplate para criar produtos de SaaS com IA e wrappers de IA. Pense nele como um boilerplate para startups de IA com as partes chatas já conectadas: autenticação, pagamentos com Stripe e Lemon Squeezy, limites de uso, e-mail transacional e um kit inicial de API de IA que conversa com OpenAI, Anthropic, Groq ou Llama. Você clona o repositório, define seu preço e começa pela parte do produto que as pessoas realmente pagam. Ele é feito em Next.js sobre React e Tailwind, então boa parte do código boilerplate já parece familiar.
Testim
Tricentis · ProgramaçãoO Testim é uma plataforma de automação de testes com IA para criar e executar testes de ponta a ponta em aplicações web, mobile e Salesforce. Ele se apoia no aprendizado de máquina para manter os testes estáveis quando uma interface muda, então as equipes gastam menos tempo consertando seletores quebrados. Nada mal para uma ferramenta de testes automatizados que você pode começar a usar hoje. Você cria testes gravando ações no navegador e depois adiciona JavaScript quando precisa de mais controle. É uma escolha sólida para equipes de QA ocupadas.