# Source: https://stately.ai/docs/studio.mdx

# Stately Studio (/docs/studio)








import { HelpCircle, GraduationCap, MoreHorizontal, ThemedImage } from 'lucide-react';

Stately Studio is a suite of tools for building app logic, including the Editor, [developer tools for XState](developer-tools), and much more coming soon.

<a href="https://state.new?utm_source=stately-docs&utm_medium=referral&utm_campaign=studio-docs">
  <h2>
    ð Open Stately Studio (state.new)
  </h2>
</a>

{/* 
  <p>
  <ThemedImage
    alt="A dog walk machine open in Stately Studio's editor. The dog walk machine has cute puppy images for each state, showing a dog walking and running. The speed up event is selected, and information and options for that transition is shown in an inspector panel on the right."
    sources={{
      light: '/studio.png',
      dark: '/studio-dm.png',
    }}
  />
  </p> */}

<img alt="A dog walk machine open in Stately Studio's editor. The dog walk machine has cute puppy images for each state, showing a dog walking and running. The speed up event is selected, and information and options for that transition is shown in an inspector panel on the right." src={__img0} placeholder="blur" />

You can use [Stately Studioâs editor](/studio.mdx#stately-studios-editor) to model your logic using state machines and statecharts visually; no code required! Collaborate on your machines with coworkers and friends with [shared projects in teams](#projects-and-teams). Use the [XState VS Code extension](xstate-vscode-extension) to use the editor with your codebase inside your code editor, or [export](#export) your code from Stately Studio into your codebase.

<Callout>
  What are state machines and statecharts? Weâre glad you asked! [Check out our no-code introduction to state machines and statecharts](state-machines-and-statecharts).
</Callout>

## Stately Studioâs editor

Stately Studioâs editor supports everything you need to visually build state machines and statecharts. The editor currently has two modes; [**Design** mode](design-mode) for creating your machines and [**Simulate** mode](simulate-mode) for simulating how your machine works.

<Callout>
  [Learn how to use Stately in our quick introduction video (7m36s)](https://www.youtube.com/watch?v=EzYIerEutgk).
</Callout>

### Quick start tutorials

You can access quick start tutorials from the blue <HelpCircle size={12} /> Help button in the editor.

When you first visit the Editor, youâll be shown two short videos (7m36s) as a quick start guide. You can access these videos again anytime from:

* Editor menu > Help > <GraduationCap size={12} /> **Learn Stately**.
* The <HelpCircle size={12} /> Help button > <GraduationCap size={12} /> **Learn Stately**.

### Projects and teams

{/* <p>
  <ThemedImage
    alt="Stately Studio Projects page for the Voyager team, showing a list of four projects, one with public machines, two with private machines, and one with unlisted machines."
    sources={{
      light: '/projects.png',
      dark: '/projects-dm.png',
    }}
  />
  </p> */}

<img alt="Stately Studio Projects page for the Voyager team, showing a list of four projects, one with public machines, two with private machines, and one with unlisted machines." src={__img1} placeholder="blur" />

As a [premium user](https://stately.ai/pricing), you can create and join teams in Stately Studio to share your machines and collaborate on private team projects. [Read more about Projects](projects) and [Teams](teams).

{/* <p>
  <ThemedImage
    alt="Stately Studio Team page for the Voyager team, showing Captain Janeway with the owner and Admin role, Commander Chakotay with an Admin role, Lieutenant Tuvok, Lieutenant Torres, and Lieutenant Paris with Editor roles, and Ensign Kim with a Viewer role."
    sources={{
      light: '/teams.png',
      dark: '/teams-dm.png',
    }}
  />
  </p> */}

<img alt="Stately Studio Team page for the Voyager team, showing Captain Janeway with the owner and Admin role, Commander Chakotay with an Admin role, Lieutenant Tuvok, Lieutenant Torres, and Lieutenant Paris with Editor roles, and Ensign Kim with a Viewer role." src={__img2} placeholder="blur" />

### Discover machines

Are you seeking inspiration for your machine? Or do you want to learn from how somebody else models their machines? The [Discover page](https://stately.ai/registry/discover) lists all the public machines created with Stately Studio. [Read more about the Discover page](discover).

{/* <p>
  <ThemedImage
    alt="Stately Studio Discover page showing the search results for âauthâ, filtered by editor machines under 10 states, showing 173 results."
    sources={{
      light: '/discover.png',
      dark: '/discover-dm.png',
    }}
  />
  </p> */}

<img alt="Stately Studio Discover page showing the search results for &#x22;auth&#x22;, filtered by editor machines under 10 states, showing 173 results." src={__img3} placeholder="blur" />

## Our roadmap

Do you want to request a feature in Stately Studio? [Check out our roadmap](https://feedback.stately.ai) to post your feature ideas and upvote other features. Our roadmap also shows you the features we have planned and those already in progress.

You can also keep up with the Stately teamâs work in progress at our regular [office hour live streams](https://youtube.com/statelyai).