# Stately

Plataforma visual para modelar lógica de aplicações e negócios com máquinas de estado, statecharts e atores

- Findings24: <https://findings24.com/pt/tools/stately>
- Site: <https://stately.ai>
- Preços: Freemium
- Categorias: Ferramentas Dev IA

## O que é Stately?

Stately is a visual software modeling platform for turning app and business logic into state machines, statecharts, and actors. The product combines a drag-and-drop editor with XState so teams can design logic visually and run it in code.

The site positions Stately as a shared source of truth for logic across design, development, testing, and documentation. Users can create flows without code, simulate them, generate code or React apps, and keep diagrams aligned with implementation over time.

## O que Stately pode fazer?

### Visual editor for shared logic modeling

Build logic with a drag-and-drop editor that brings code, diagrams, documentation, and test generation into one workspace.

### Simulation mode

Simulate state machines directly in the editor, including triggered events, event logs, and automatic handling of eventless and delayed events when the machine has no errors.

### Code and documentation export

Export state machines as JavaScript, TypeScript, JSON, Mermaid, Markdown, or Stories, and send projects to CodeSandbox or StackBlitz.

### AI-assisted generation

Generate state machines, React UIs, and code with AI, with pricing tiers defining different generation allowances.

### Versioning and codebase sync

Keep a history of work with versioning, share private or unlisted projects on higher tiers, and connect GitHub Sync for codebase alignment.

### Developer integrations

Use Stately alongside XState in JavaScript and TypeScript apps, with support for React, Vue, Svelte, and a VS Code extension for editor workflows.

## Casos de uso

### Prototype app and workflow logic

Create flows without code, then simulate them to check state changes and iterate before implementation.

### Team review and requirements gathering

Use the visual editor to align product, design, and engineering on how behavior should work, then share diagrams as a source of truth.

### AI-assisted scaffolding and code handoff

Generate state machines, React apps, and code from diagrams to accelerate handoff into development work.

### Documentation and specification export

Export diagrams and machine definitions into formats such as JavaScript, TypeScript, Mermaid, Markdown, or Stories for documentation and delivery.

### Ongoing implementation in existing codebases

Connect the model to a codebase with XState, GitHub Sync, and framework support for React, Vue, Svelte, and other JavaScript apps.

## Perguntas frequentes

### What is Stately Studio used for?

Stately Studio is a visual software modeling platform for building app and business logic as state machines, statecharts, and actors. The docs describe it as a visual editor that pairs with XState, but it can also be used without XState if you are learning the concepts first.

### What features does Stately Studio include?

The source pages show a drag-and-drop visual editor, simulation mode, code export, version history, AI generation, GitHub Sync, Figma embed, and a VS Code extension. It also supports React app generation and test generation.

### Does Stately have free and paid plans?

The pricing page lists a free Community plan for public projects, a Professional plan for private and unlisted projects, a Team plan for shared team projects, and an Enterprise plan with custom options. It also offers a services contact path for consulting and workshops.

### What can I export from Stately?

The export docs say you can export machine code in JSON, JavaScript, TypeScript, Mermaid, Markdown beta, and Stories beta, and can also export to CodeSandbox and StackBlitz. Some export formats and features are limited to premium plans.

### Can teams use Stately with existing codebases and tools?

The docs say Stately Studio is most powerful with XState, but you can also use XState in a codebase without Stately Studio. The home page says integrations are available for React, Vue, Svelte, and other frameworks, and the docs mention a VS Code extension.

## Informações rápidas

- **Category**: Developer Tool
- **Primary product**: Visual software modeling platform
- **Core model**: State machines, statecharts, and actors
- **Primary users**: Product, design, and engineering teams
- **Platforms**: Web app, XState, and VS Code extension
- **Source domain**: stately.ai