Stately

Stately: Visually Build & Deploy Complex App Logic with AI

What is Stately?

Stately is a visual platform designed to simplify the creation, testing, and deployment of complex application logic and workflows. It allows users to visually build and deploy any type of logic, from frontend user flows to backend workflows, serving as a single source of truth for your team.

How does Stately work?

Stately combines a drag-and-drop visual editor with AI assistance to streamline the entire process. Here’s a breakdown of how it works:

1. Visual Design: Use the drag-and-drop editor to create state machine diagrams, which serve as a visual language understandable by everyone on the team.
2. AI Assistance: Leverage AI to generate flows, suggest variants, and handle edge cases, even writing code for you.
3. Simulation & Testing: Simulate your design to test and iterate rapidly. Prototype as an auto-generated React app to get immediate feedback.
4. Collaboration: Share your work with the team and clients for feedback. Embed Figma designs or attach images and documents to states for context.
5. Code Generation: Generate executable diagrams using XState, a best-in-class open-source library for managing state in JavaScript and TypeScript apps. Export code in JavaScript or TypeScript.
6. Deployment: Deploy to Stately Sky for an instant realtime backend, or connect with GitHub to sync with your codebase.

Key features of Stately include:

• Visual Editor: A drag-and-drop editor that allows contributors of all backgrounds to collaborate.
• AI Integration: AI assistance at each phase of development, guided by state machines.
• Prototyping: Rapid prototyping with auto-generated React apps.
• Feedback & Collaboration: Easy sharing and embedding of designs for team feedback.
• XState Integration: Uses XState for orchestrating and managing state, ensuring no lock-in.
• Code Generation: Generates React apps from diagrams and automatically creates tests.
• Deployment Options: Deploy to Stately Sky for a realtime backend or sync with GitHub.
• Stately Inspector: Inspect running apps to test and debug logic.

Why is Stately important?

Stately addresses several pain points in the development process:

• Complexity Management: Handles even the most complex logic in predictable, robust, and visual ways.
• Collaboration: Bridges the gap between designers, product managers, and developers by providing a common visual language.
• Time Savings: Automates tasks like code generation and testing, speeding up development.
• Reduced Lock-In: Leverages XState, an open-source library, providing flexibility and avoiding vendor lock-in.
• Future-Proofing: Clear visualizations make code easy to understand and modify, even years later.

How to use Stately?

1. Sign Up: Create a free account on the Stately website.
2. Design: Use the visual editor to create state machine diagrams.
3. Simulate: Test your design using the built-in simulation tools.
4. Generate Code: Export your design as JavaScript or TypeScript code.
5. Deploy: Deploy to Stately Sky or integrate with your existing codebase.

Where can I use Stately?

Stately can be used in various scenarios, including:

• Frontend user flows
• Backend workflows
• Multiplayer collaboration (whiteboarding, document editing, gaming)
• Asynchronous workflows (data processing, email delivery, API calls)
• Long-running backend processes (medical patient onboarding, inventory management)

What are the benefits of using Stately?

• Improved collaboration between team members.
• Faster development cycles.
• Reduced complexity and improved code maintainability.
• Increased confidence in the correctness of your application logic.
• Visual documentation that stays up-to-date.

Best way to manage complex application logic?

Stately is a powerful solution for managing complex application logic. Its visual approach, AI assistance, and integration with XState make it a valuable tool for teams of all sizes. Whether you're building a simple frontend or a complex backend, Stately can help you design, test, and deploy your logic with confidence.

Stately helps teams maintain alignment and understanding as products evolve. By offering clear visualizations, living documentation, and version control, Stately ensures that everyone stays on the same page, even years after the initial development.

According to user feedback:

• Marsel Atniashev: Uses Stately Editor to explain business logic to stakeholders via simulation, making it easier to understand the logic after a long time away from coding.
• Taylor Lodge: Appreciates XState's first-class support for side effects, which keeps related code co-located.
• Parker McMullin: Showcased the machine visualizer to the company, which helped convey the complexity of the UI pieces and discuss specific use cases with design mockups.