---
title: "Interactive playground"
description: "Test workflows interactively with the FlowDrop playground."
source: https://flowdrop.io/docs/editor/playground
site: FlowDrop documentation
---
# Interactive playground
The playground provides an interactive testing environment for workflows, featuring a chat interface, session management, and real-time execution feedback.

## Try it

In your editor, you can create sessions, send messages, and watch the simulated workflow execute in real time.

{/* TODO: live demo — <PlaygroundDemo>; omitted in the initial port. */}

## Quick start

### Mount API

```typescript
import { mountPlayground } from '@flowdrop/flowdrop/playground';
import '@flowdrop/flowdrop/styles';

const playground = await mountPlayground(container, {
  workflowId: 'my-workflow-id',
  endpointConfig: createEndpointConfig('/api/flowdrop'),
  onSessionStatusChange: (newStatus, previousStatus) => {
    console.log(`Session status: ${previousStatus} -> ${newStatus}`);
  }
});

// Control the playground
playground.startPolling();
playground.destroy();
```

### Svelte component

```svelte
<script lang="ts">
  import { Playground } from '@flowdrop/flowdrop/playground';
</script>

<Playground workflowId="my-workflow-id" />
```

## Features

### Session management

The playground supports multiple parallel sessions. Each session represents an independent conversation with the workflow:

- Create new sessions
- Switch between active sessions
- View session history
- Delete sessions via dropdown menu

### Chat interface

The chat panel displays messages from both the user and the workflow execution:

- User messages are shown on the right
- System/assistant messages on the left
- Execution logs inline in the conversation
- Interrupt prompts rendered as interactive UI elements

### Real-time polling

The playground polls the backend for new messages during execution. Configure polling behavior:

```typescript
const playground = await mountPlayground(container, {
  playgroundConfig: {
    pollingInterval: 1500,
    shouldStopPolling: (status) => {
      // Stop polling on terminal statuses
      return ['completed', 'failed', 'cancelled'].includes(status);
    },
    isTerminalStatus: (status) => {
      return ['completed', 'failed', 'cancelled'].includes(status);
    }
  }
});
```

### Configurable lifecycle hooks

```typescript
import { defaultShouldStopPolling, defaultIsTerminalStatus } from '@flowdrop/flowdrop/playground';
```

The `awaiting_input` status pauses polling automatically — call `playground.startPolling()` to resume after an interrupt is resolved.

### Push messages

For custom transports (WebSocket, SSE), push poll responses directly:

```typescript
// Push messages from a WebSocket
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  playground.pushMessages(data);
};
```

## Human-in-the-loop

The playground integrates with FlowDrop's interrupt system. See the [Human-in-the-Loop guide](/editor/interrupts) for details on interrupt types and configuration.

## API endpoints

The playground uses these backend endpoints:

| Endpoint                              | Method | Purpose                          |
| ------------------------------------- | ------ | -------------------------------- |
| `/workflows/{id}/playground/sessions` | POST   | Create a new session             |
| `/workflows/{id}/playground/sessions` | GET    | List sessions for a workflow     |
| `/playground/sessions/{id}`           | GET    | Get session details              |
| `/playground/sessions/{id}`           | DELETE | Delete session                   |
| `/playground/sessions/{id}/messages`  | POST   | Send a message (triggers a run)  |
| `/playground/sessions/{id}/messages`  | GET    | Poll for messages                |