---
agentTools:
  projectIndex: https://developers.pipefy.com/llms.txt
---

# Exploring the Playground

You can access the playground at <https://app.pipefy.com/graphiql>. Once you open it, this is the screen you’ll see, to understand better we can divide it into three parts:

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/ca1a37dd6420c185b960f4876fe18bdd97ee85cc02b1f65059415ae65ee4242b-image1.png",
        "",
        ""
      ],
      "align": "center"
    }
  ]
}
[/block]

### Left Panel: Query Editor

This is where you write your GraphQL queries and mutations.

**Key Features:**

* **Auto-Complete:** Start typing `{`, `query`, or `mutation` and press `Ctrl+Space` (Windows) or `Cmd+Space` (Mac) to see suggestions.
* **Syntax Highlighting:** Keywords like `query`, `mutation`, and field names are color-coded.
* **Prettify:** Format messy code with the top-left button of the panel Prettify.

#### Example Query

```json
{
  me {
    id
    name
  }
}
```

### Right Panel: Response Panel

After running a query/mutation, the response (success or error) appears here in JSON format.

**Key Features:**

* **Collapsible JSON:** Click triangles (▶) to expand/collapse nested data.
* **Error Highlighting:** If there’s an error, it’ll show an errors array with details.

#### Example Response

```json
{
  "data": {
    "me": {
      "id": "1",
      "name": "John Smith"
    }
  }
}
```

### Top Right Button: Documentation

Click the **Docs** tab (top-right) to explore:

* **Queries:** Available data-fetching operations (e.g., `cards`, `organizations`).
* **Mutations:** Operations to modify data (e.g., `createCard`, `deletePhase`).
* **Types:** Data structures (e.g., `User`, `Card`, `String` types).

## Query Example

**Check out our [Use Case Examples page](https://developers.pipefy.com/reference/create-a-card-with-the-required-fields-fulfilled) for more!**

When you open the playground screen, you already have the default query written on the Query Editor:

```graphql
query {
  organizations {
    id
    name
  }
}
```

1. The `query` keyword indicates that this is a GraphQL query operation.
   1. Because the `query` is the default operation, you don’t need to write it explicitly. The query is formatted without that keyword by default.
2. The curly braces `{ }` define the scope of the query.
3. `organizations` is the name of the query being executed.
4. The inner curly braces contain the fields we're requesting: id and `name`.

You can execute your query with `Ctrl+Enter` or click the play button:

[block:image]
{
  "images": [
    {
      "image": [
        "https://files.readme.io/e33e02b95141e001e0fd493d02f31a4f2d08d27da1c012fe1f4c149244d72bbb-image6.png",
        "",
        ""
      ],
      "align": "center"
    }
  ]
}
[/block]

As long as you are correctly logged in, a similar result should appear in the response panel:

```json
{
  "data": {
    "organizations": [
      {
        "id": "123456",
        "name": "Sample Organization"
      }
    ]
  }
}
```

You just did your first query!