> ## Documentation Index
> Fetch the complete documentation index at: https://qawolf-onboard-md.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Create flows in the IDE

> Create flow files and folders and write test code manually in the QA Wolf IDE.

If you'd prefer to have AI create and edit flows for you, see [Create flows with AI](/qawolf/Automate-flows-using-AI-2d35b2a994fb8084b524cfc9aca7c358).

## Create a folder or flow

Two entry points on the **Flows** tab create a flow in the IDE.

**From the flows list**

Click <Icon icon="square-plus" /> in the toolbar, then select **New flow** or **New folder**.

<Frame>
  <img src="https://mintcdn.com/qawolf-onboard-md/0TmhLhesS4f7AA-f/images/flows-list-toolbar.png?fit=max&auto=format&n=0TmhLhesS4f7AA-f&q=85&s=320477babcc72c589e1d8b28ad1b8644" alt="The New flow and New folder menu in the flows list toolbar" width="754" height="410" data-path="images/flows-list-toolbar.png" />
</Frame>

**From the IDE**

<Steps>
  <Step>
    From the **Flows** tab, hover over the left sidebar to expand it, then click <Icon icon="code" /> **IDE**.

    <Frame>
      <img src="https://mintcdn.com/qawolf-onboard-md/0TmhLhesS4f7AA-f/images/flows-sidebar.png?fit=max&auto=format&n=0TmhLhesS4f7AA-f&q=85&s=923d51586776cf43b2a35f589ebb0f8d" alt="The left sidebar with the IDE view selected" width="346" height="282" data-path="images/flows-sidebar.png" />
    </Frame>
  </Step>

  <Step>
    Navigate to the location in the file tree where you want to create the new file or folder.
  </Step>

  <Step>
    Click the <Icon icon="square-plus" /> icon in the toolbar.

    <Frame>
      <img src="https://mintcdn.com/qawolf-onboard-md/0TmhLhesS4f7AA-f/images/ide-add.png?fit=max&auto=format&n=0TmhLhesS4f7AA-f&q=85&s=69f93edc154e76a5602ad8d65be3a02f" alt="The IDE file explorer" width="600" height="500" data-path="images/ide-add.png" />
    </Frame>
  </Step>

  <Step>
    Click **New Folder** or **New Flow**.

    <Check>
      Use clear, descriptive names that reflect your app's feature areas — this helps both you and AI keep flows organized.
    </Check>
  </Step>
</Steps>

## Write test code

Select a flow file from the tree to open it in the code editor. The editor prefills new flows with [AAA](https://www.qawolf.com/blog/intro-to-aaa) (Arrange-Act-Assert) comments as a starting structure.

For a full explanation of flow structure and imports, see [Anatomy of a flow](/qawolf/anatomy-of-a-qa-wolf-test-mobile-edition).

<Note>
  QA Wolf lints your code as you type. See [Debug tests & flows](/qawolf/Debug-tests-and-flows-2c15b2a994fb805c9e92eec7a4a3e83e) if you encounter errors.
</Note>

## Publish your changes

<Steps>
  <Step>
    When ready, click **Review**.

    <Frame>
      <img src="https://mintcdn.com/qawolf-onboard-md/IjuOVQhat8ox6cT1/images/unpublished.png?fit=max&auto=format&n=IjuOVQhat8ox6cT1&q=85&s=cb583f8b6a608c2ab6e6559bd1fc8b8e" alt="Unpublished" width="728" height="298" data-path="images/unpublished.png" />
    </Frame>
  </Step>

  <Step>
    Review your changes in the side-by-side diff.

    <Frame>
      <img src="https://mintcdn.com/qawolf-onboard-md/D_M68K8rgnSFKd8d/images/publish.png?fit=max&auto=format&n=D_M68K8rgnSFKd8d&q=85&s=b1cb0406ed1b59f231919acf9e2da65f" alt="Publish" width="2282" height="506" data-path="images/publish.png" />
    </Frame>
  </Step>

  <Step>
    Enter a clear description of the change in the **Adding a comment** field.
  </Step>

  <Step>
    Click **Publish changes** to confirm. The publish dialog will close when your changes have been saved.
  </Step>
</Steps>