> ## Documentation Index
> Fetch the complete documentation index at: https://docs.erlc.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigating the erlc.dev Studio Workspace and Editor

> Learn how to use the erlc.dev Studio block editor: the block palette, canvas, log panel, test runner, and how to save your automations.

The erlc.dev Studio workspace is where you build every automation for your ERLC server. Everything happens in a single browser-based editor: you pick blocks from the palette on the left, connect them on the canvas in the center, and watch live output appear in the log panel below. This page walks you through each part of the interface so you can start building with confidence.

## The Block Palette

The block palette occupies the left panel of the editor. It organizes every available block into labeled categories — **Events**, **Discord**, **Game**, **Flow**, **Data**, **Lists**, **Text**, **Math**, and **Debug**. Click any category heading to expand it and reveal its blocks.

<CardGroup cols={2}>
  <Card title="Browsing categories" icon="list">
    Click a category name to expand or collapse it. Each block shows its name and a color that corresponds to its type — trigger blocks are a distinct color from action and value blocks.
  </Card>

  <Card title="Searching blocks" icon="magnifying-glass">
    Use the search field at the top of the palette to filter blocks by name. Typing `discord` narrows the list to every Discord-related block instantly.
  </Card>
</CardGroup>

<Tip>
  Hover over any block in the palette to see a short description of what it does before you drag it onto the canvas.
</Tip>

## The Canvas

The canvas is the large workspace area in the center of the editor. You drag blocks from the palette onto the canvas and connect them by snapping their connector notches together.

<Steps>
  <Step title="Add a block">
    Drag any block from the palette and drop it anywhere on the canvas. The block appears at the position you release it.
  </Step>

  <Step title="Connect blocks">
    Drag a block toward another block's connector until you see the snap indicator, then release. Action blocks connect top-to-bottom; value blocks plug into input sockets on the left or right of other blocks.
  </Step>

  <Step title="Disconnect blocks">
    Drag a connected block away from its parent to detach it. The rest of the stack remains intact.
  </Step>

  <Step title="Delete blocks">
    Right-click any block to open the context menu and choose **Delete Block**, or drag it to the trash icon in the bottom-right corner of the canvas.
  </Step>
</Steps>

<Note>
  You can pan the canvas by holding the middle mouse button (or Space + drag) and zoom in or out with the scroll wheel. Use **Ctrl + Shift + H** (or the fit-to-screen button in the toolbar) to re-center all blocks.
</Note>

### Organizing your canvas

Keep complex automations readable by grouping related stacks close together and adding **Comment** blocks (right-click → *Add Comment*) to annotate what each section does. Studio saves the position of every block so your layout is preserved between sessions.

## The Log / Output Panel

The log panel sits at the bottom of the editor. It displays messages produced by `erlc_log` blocks and any runtime errors that occur during a test run.

<CardGroup cols={2}>
  <Card title="Log messages" icon="terminal">
    Each `erlc_log` block you connect to your automation writes a timestamped line to the panel when it executes. Use this to inspect variable values and trace execution order.
  </Card>

  <Card title="Error output" icon="triangle-exclamation">
    If a block fails at runtime — for example, a Discord API call that returns an error — the panel shows a red error entry with a short description.
  </Card>
</CardGroup>

<Tip>
  Click the **Clear** button in the log panel header to wipe previous output before a fresh test run. This keeps the log focused on the run you care about.
</Tip>

## The Test Run Button

The **Test Run** button appears in the top toolbar. Clicking it fires the `erlc_when_test_run` event, which triggers any automation whose entry block is `erlc_when_test_run`. This lets you execute and debug your logic without waiting for a real in-game or Discord event.

<Info>
  Only blocks connected to an `erlc_when_test_run` entry block execute when you click **Test Run**. Other automations that start with different event triggers (such as `erlc_when_event` or `erlc_when_slash_command`) are not executed.
</Info>

### Typical test workflow

<Steps>
  <Step title="Wire up a test entry block">
    Add an `erlc_when_test_run` block to the canvas and connect the action blocks you want to test beneath it.
  </Step>

  <Step title="Click Test Run">
    Press the **Test Run** button in the toolbar. The automation executes immediately.
  </Step>

  <Step title="Read the log">
    Watch the log panel for output from `erlc_log` blocks. Verify that variable values and branching logic behave as expected.
  </Step>

  <Step title="Iterate">
    Adjust your blocks and click **Test Run** again. Repeat until the output matches what you expect.
  </Step>
</Steps>

## The Save Button

The **Save** button is located in the top-right corner of the toolbar. Click it to persist all changes to your automation. Studio does not auto-save, so make it a habit to save after every meaningful change.

<Warning>
  Closing or refreshing the browser tab before saving will discard any unsaved changes. There is no draft recovery — always save before navigating away.
</Warning>

After a successful save, Studio briefly shows a confirmation indicator next to the button. If the save fails (for example, due to a network interruption), a red error banner appears — try again once your connection is restored.

## The Pages Tab

The **Pages** tab is accessible from the top of the left panel, next to the main block palette tab. A *page* is a reusable sub-routine — a self-contained block stack that you can call from any automation in the same project.

<CardGroup cols={2}>
  <Card title="Creating a page" icon="file-plus">
    Click **+ New Page** in the Pages tab to create a new page. Each page gets its own isolated canvas. Add an `erlc_page_start` block as the entry point, then build the logic beneath it.
  </Card>

  <Card title="Calling a page" icon="arrow-right-to-bracket">
    Use the `erlc_call_page` block in any automation to execute a page. Select the target page from the dropdown on the block. Execution continues after the call returns.
  </Card>
</CardGroup>

<Note>
  Pages are covered in depth — including broadcasts and flow control — in the [Pages & Flow](/studio/pages-and-flow) guide.
</Note>

## Embed and Modal Preview Fields

Two special inline preview fields are available when you work with Discord embed and modal blocks.

### EmbedPreviewField

When you add a Discord embed block to your canvas, an **Embed Preview** pane opens inline below the block. It renders a live visual approximation of the embed — including title, description, color, and fields — as you fill in the block's inputs. This lets you see how your embed will look in Discord before you send it.

<Tip>
  The preview updates in real time as you type. Use it to catch formatting issues like overly long field values or missing titles before you run your automation.
</Tip>

### ModalPreviewField

Similarly, Discord modal blocks display a **Modal Preview** pane that renders the modal dialog — including its title, text inputs, and labels — as you configure the block. This gives you a faithful representation of what your users will see when the modal opens in their Discord client.

<Info>
  Both preview fields are display-only. They do not submit data or make API calls — they are purely visual aids inside the editor.
</Info>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.