# Writing Yarn in VS Code

Now that you've got Visual Studio Code and Yarn Spinner for Visual Studio Code installed, it's time to learn how to use it to write Yarn Spinner Scripts.

{% hint style="info" %}
This documentation is for Yarn Spinner for Visual Studio Code 3.2.x and newer.
{% endhint %}

#### Opening a Folder

Open VS Code and click the **Open** button on the welcome screen, or choose **File → Open Folder**, and select the folder containing your `.yarn` and `.yarnproject` files.

When the folder opens, the Yarn Spinner sidebar will appear showing your projects, their definition files, yarn files, and localisation settings.

You can also open an empty folder and create everything from scratch using the extension.

{% hint style="info" %}
Yarn Spinner for Visual Studio Code is designed to work with projects, not single files. You should always open a **folder** containing your `.yarn` files, even if your project only has one.

Every Yarn Spinner project needs a `.yarnproject` file. This tells the extension (and the compiler) which files belong to your project, what language your dialogue is written in, and where your definition files are. When you create a new project through the extension, it generates this file for you.

If you're working on dialogue for a game — for example in Unity, Godot, or Unreal — you'll typically have a folder for your narrative within the game's project structure.
{% endhint %}

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FSl3wfFbY7ktfpQaqA5xK%2FScreenshot%202026-03-27%20at%205.07.35%E2%80%AFpm.png?alt=media&#x26;token=635b8ebe-add7-4996-9a92-6eea9b1649a0" alt=""><figcaption></figcaption></figure>

#### Creating a New Project

If you don't have a `.yarnproject` file yet, you can create one in the active folder:

1. Open the Command Palette (`Cmd+Shift+P` on macOS, `Ctrl+Shift+P` on Windows/Linux)
2. Type "Yarn Spinner: Create New Yarn File" or use the new file button in the sidebar
3. The extension will create a `.yarnproject` file and a starter `.yarn` file for you

The `.yarnproject` file is the heart of your project. It controls which files are included, your compiler settings, and your editor preferences. You can open it to see and edit your project configuration in a visual editor.

You can also choose to create a new Yarn Spinner project from a template in the sidebar.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FEKZgIxW5NNTbS8R2wirQ%2FScreenshot%202026-03-27%20at%205.08.14%E2%80%AFpm.png?alt=media&#x26;token=cad077df-0c04-4dda-9cb7-050a80e66b7a" alt=""><figcaption></figcaption></figure>

If you do this, you can choose from a few pre-made templates:

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FjB14WWhqidezCyKDwYHL%2FScreenshot%202026-03-27%20at%205.08.31%E2%80%AFpm.png?alt=media&#x26;token=1c4318c9-529d-498c-b24e-ba0586e159e0" alt=""><figcaption></figcaption></figure>

### Verifying the Extension is Active

With a `.yarn` file open, look at the bottom left corner of VS Code for the words **Yarn Spinner** and a tick. This confirms the extension is installed and recognises your file.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FIvE2kZ3QXVPI250VCRuk%2FScreenshot%202026-03-27%20at%205.09.10%E2%80%AFpm.png?alt=media&#x26;token=ddd40ba3-b3a4-45d0-afdd-c341092aedd2" alt=""><figcaption></figcaption></figure>

The Yarn Spinner sidebar (the speech bubbles icon in the activity bar) shows all your projects, their files, and their status, as found in the open folder.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FNtoxJ9LLRMTyNQMdiDHM%2FScreenshot%202026-03-27%20at%205.09.28%E2%80%AFpm.png?alt=media&#x26;token=061e8386-9c73-4303-a4bf-3d29bc472f8b" alt=""><figcaption></figcaption></figure>

### Features of the Extension

Use the text editor to write your `.yarn` files. The extension provides:

#### Extension Settings

You can open the Extension Settings from the Yarn Spinner Sidebar:

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FcnJw9gL5EibA7PFesRQu%2FScreenshot%202026-03-27%20at%205.09.58%E2%80%AFpm.png?alt=media&#x26;token=302a5b7d-3698-4919-bff0-0fa245e03595" alt=""><figcaption></figcaption></figure>

#### Syntax Highlighting

Yarn Spinner scripts are colour-coded so you can easily distinguish dialogue lines, commands, options, variables, and comments. The extension includes custom light and dark themes designed specifically for Yarn Spinner.

You can set the theme scope in Extension Settings — choose **Whole Editor** to always use the Yarn Spinner theme, or **Yarn Files Only** to automatically switch themes when you move between yarn files and other files.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FdIU7kTq3tPhM714ZJfLE%2FScreenshot%202026-03-27%20at%205.11.15%E2%80%AFpm.png?alt=media&#x26;token=953fe896-fcba-480b-94ec-24219e68b888" alt=""><figcaption></figcaption></figure>

#### Autocomplete

The extension offers autocomplete suggestions as you type:

* **Node names** — when writing `<<jump>>` or `<<detour>>` statements, you'll see a list of all nodes in your project
* **Variable names** — when using variables, previously declared names are suggested
* **Commands and functions** — if your project has a `.ysls.json` definitions file, custom commands and functions from your game code are suggested with their parameter types and documentation

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FWsm5OA0ZCuaQzTmus7ey%2FScreenshot%202026-03-27%20at%205.12.45%E2%80%AFpm.png?alt=media&#x26;token=5106948a-3a76-45c3-a74a-6850fb12206a" alt=""><figcaption></figcaption></figure>

#### Hover Information

Hold `Cmd` (macOS) or `Ctrl` (Windows/Linux) and hover over:

* **Node names** in `<<jump>>` statements to see a preview, or click to navigate to that node
* **Variables** to see their type, default value, and documentation comment
* **Commands and functions** to see their signature, parameters, and documentation from your game code

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FC6o7pqBOohzDEMYMXAnL%2FScreenshot%202026-03-27%20at%205.13.05%E2%80%AFpm.png?alt=media&#x26;token=b367425d-4dc8-4cfc-998d-229fce461292" alt=""><figcaption></figcaption></figure>

#### Variable Documentation

When you `<<declare>>` a variable, add a documentation comment with `///` above it:

```yarn
/// How many times the player has visited the shop
<<declare $shop_visits = 0>>
```

This description appears in hover tooltips and autocomplete suggestions whenever the variable is used.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FNRUlCiwyIXRgszQQzxC4%2FScreenshot%202026-03-27%20at%205.14.20%E2%80%AFpm.png?alt=media&#x26;token=c7191c64-31a2-4fe0-9ef0-391436ae7d6d" alt=""><figcaption></figcaption></figure>

#### Error Checking

The extension validates your scripts in real time:

* **Type errors** — assigning the wrong type to a variable (e.g. a number to a boolean)
* **Missing nodes** — jumping to a node that doesn't exist
* **Syntax errors** — malformed commands, missing delimiters
* **Undeclared variables** — using a variable without declaring it (when `requireVariableDeclarations` is enabled)

Errors and warnings appear as squiggly underlines in the editor and in the Problems panel.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FkTTkc7TuukRWVzZ8rE37%2FScreenshot%202026-03-27%20at%205.14.45%E2%80%AFpm.png?alt=media&#x26;token=11af620b-8cf1-48dd-b741-be9c39bdcb55" alt=""><figcaption></figcaption></figure>

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2F7nkjDgEMtzSPUkeGUaxy%2FScreenshot%202026-03-27%20at%205.15.26%E2%80%AFpm.png?alt=media&#x26;token=067ac3f9-3aea-4fee-96a2-8223458cddcf" alt=""><figcaption></figcaption></figure>

#### Spell Checking

The extension integrates with VS Code's spell checking. You can configure it per-project in the `.yarnproject` editor:

* Enable or disable spell checking
* Add custom words (character names, made-up terms, game-specific vocabulary)

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2F2ElcyamT4brLcRW2T6mv%2FScreenshot%202026-03-27%20at%205.15.45%E2%80%AFpm.png?alt=media&#x26;token=be46a448-8ecd-4b9e-87ff-f73495fff52f" alt=""><figcaption></figcaption></figure>

### The Graph View

While Yarn Spinner is a text-based language, the extension provides a visual **Graph View** to help you understand the structure of your dialogue.

#### Opening the Graph View

Click the **Show Graph** button in the top right corner of the editor when a `.yarn` file is open, or use the graph view panel in the sidebar.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2F0tERT2f9nMVyIsEZOvEs%2FScreenshot%202026-03-27%20at%205.16.38%E2%80%AFpm.png?alt=media&#x26;token=a42298c7-0a1c-4542-ab9e-4a005e9f1675" alt=""><figcaption></figcaption></figure>

#### File View

The default view shows nodes from the currently open `.yarn` file. Use the toggle in the graph view toolbar to switch modes between the current file and the whole project.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FhS7psMdYdUUabH9KEBUk%2FScreenshot%202026-03-27%20at%205.17.04%E2%80%AFpm.png?alt=media&#x26;token=15743520-e828-4f74-bec3-a3e14dc4e4c6" alt=""><figcaption></figcaption></figure>

* **Drag nodes** to rearrange them — positions are saved in the node's `position` header automatically
* **Double-click** a node to jump to it in the text editor
* **Click "Show in Graph View"** above any node in the text editor to find it in the graph
* Arrows show `<<jump>>` connections between nodes
* Dashed arrows show `<<detour>>` connections
* Cross-file jumps appear as small stub nodes showing the destination file and node name, with an arrow connecting to them — so you can see where your dialogue leaves the current file

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FaPVwbXOgsfbdvJG9JVNh%2FScreenshot%202026-03-27%20at%205.17.28%E2%80%AFpm.png?alt=media&#x26;token=b7e8832a-c2a1-4ace-9458-4850f7e8c2eb" alt=""><figcaption></figcaption></figure>

#### Project View

Switch to **Project** view using the toggle in the toolbar to see every node across every file in your project at once.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FaCmzJ6lB4OyOGvVhg4Kp%2FScreenshot%202026-03-27%20at%205.26.52%E2%80%AFpm.png?alt=media&#x26;token=19777100-1c00-4966-b1ab-47948cd2bf97" alt=""><figcaption></figcaption></figure>

In project view:

* Each `.yarn` file is shown as a **container** with its nodes inside
* **Cross-file jumps** are shown as dashed coloured lines between file containers
* **Drag file containers** to arrange your project layout — positions are saved in your `.yarnproject` file
* **Colour file containers** by selecting one and using the colour picker toolbar that appears

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2Ft2wjxptECisapE1LcuRZ%2FScreenshot%202026-03-27%20at%205.27.18%E2%80%AFpm.png?alt=media&#x26;token=d0124751-a5ca-4671-a76f-3aa497659ff2" alt=""><figcaption></figcaption></figure>

* **Align containers** using the alignment buttons at the bottom (align left, right, top, bottom)
* **Auto-layout** the entire project vertically or horizontally
* **Double-click** an inner node to open that file at that node in the text editor

Project view is useful for understanding the high-level structure of your narrative — which files connect to which, and how dialogue flows across your project.

#### Navigating Between Views

* From file view, click **Project** in the toolbar to see the whole project

  <figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FtEpAbfvjAS8g9HhY54pp%2FScreenshot%202026-03-27%20at%205.30.05%E2%80%AFpm.png?alt=media&#x26;token=4d8b58b0-a17c-4cf7-9610-bc50ab1ffbae" alt=""><figcaption></figcaption></figure>
* From project view, click a file name to switch to file view for that file
* Use **Show in Graph View** (the code lens above each node in the text editor) to jump to a specific node — if the graph is in project view, it switches to file view and focuses the node

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2F1vqbGmNnnM7VyWeweAV2%2FScreenshot%202026-03-27%20at%205.28.07%E2%80%AFpm.png?alt=media&#x26;token=9b888ebe-0b29-4060-8c7f-86672bd57577" alt=""><figcaption></figcaption></figure>

#### Adding Nodes

Use the **+ Node** button at the top of the graph view, or right-click on empty space and choose **Add Node**. New nodes enter inline rename mode so you can type a name immediately.

You can also drag from a node's connection handle to create a new connected node.

<div data-full-width="true"><figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FwRjPulN3V7C9AzmSEb7J%2Fnodes.gif?alt=media&#x26;token=852a4724-8d8f-46a2-b95b-3a3be2a932bb" alt=""><figcaption></figcaption></figure></div>

#### Sticky Notes

Use the **+ Note** button to add sticky notes to your graph. These are visual-only notes for yourself or your team — they help add context to your narrative structure.

Sticky notes are just regular nodes with `style: note` in their header:

```yarn
title: Note_Reminder
style: note
color: red
position: 100,200
---
TODO: Add more dialogue options for the shopkeeper.
===
```

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2F8BHfwtTbV2EYETHbR4rH%2FScreenshot%202026-03-27%20at%205.33.13%E2%80%AFpm.png?alt=media&#x26;token=a063e429-500a-478d-910f-4be78f31cb06" alt=""><figcaption></figcaption></figure>

#### Customising Nodes

Add metadata to node headers to customise how they appear in the graph:

**Colours:**

```yarn
title: EvilPath
color: purple
---
```

Available colours: `red`, `green`, `blue`, `orange`, `yellow`, `purple`. You can also use hex codes for custom colours via the colour picker in the graph view.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FNSn4X6eVHclcez231aZa%2FScreenshot%202026-03-27%20at%205.33.44%E2%80%AFpm.png?alt=media&#x26;token=1592c4f8-b915-4551-8df4-3ead9d4a8493" alt=""><figcaption></figcaption></figure>

**Clusters:**

Group related nodes by adding a `cluster` header:

```yarn
title: Volcanos
cluster: MainTopics
---
```

All nodes with the same cluster value are visually grouped together.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FC0FhBz43KbUzxBtZvdOz%2FScreenshot%202026-03-27%20at%205.34.25%E2%80%AFpm.png?alt=media&#x26;token=15e3eafa-2bc3-4adc-b148-ccffcccb5293" alt=""><figcaption></figcaption></figure>

**Images:**

Add a header image to a node:

```yarn
title: ForestScene
image: forest.png
---
```

The image path is resolved relative to the `imagePath` setting in your project configuration.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2Fk4YdjtEe3VUkyd5Pxh8L%2FScreenshot%202026-03-27%20at%205.36.02%E2%80%AFpm.png?alt=media&#x26;token=cd11067e-b1f9-4036-bc77-0f2a4a85258f" alt=""><figcaption></figcaption></figure>

#### Auto Layout

Use the auto-layout buttons at the bottom of the graph view to automatically arrange your nodes vertically or horizontally.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FWINEiiqyiKrAM2zB6ufl%2FScreenshot%202026-03-27%20at%205.36.15%E2%80%AFpm.png?alt=media&#x26;token=ce949257-1c87-432f-b1e8-77e0b7d937d3" alt=""><figcaption></figcaption></figure>

### The Dialogue Preview

You can play through your dialogue right inside VS Code.

#### Starting the Preview

Click the **Play** button in the sidebar toolbar next to your project, or use the Command Palette and choose **Yarn Spinner: Preview Dialogue**.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FrwSaI4NOX4MdNwDnlwVi%2FScreenshot%202026-03-27%20at%205.36.29%E2%80%AFpm.png?alt=media&#x26;token=a3c68fe9-a2d5-4d04-8e80-d07301551382" alt=""><figcaption></figcaption></figure>

The preview runs your compiled dialogue using the same Yarn Spinner runtime that your game uses. It shows character names, dialogue lines, and options.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FU96rcKSmepSL2FBUJMfX%2FScreenshot%202026-03-27%20at%205.36.45%E2%80%AFpm.png?alt=media&#x26;token=cde37bcd-8275-4629-a397-fe18ee0f2b7b" alt=""><figcaption></figcaption></figure>

#### Restarting

Click the restart button in the preview toolbar.

#### Preview Settings

In the `.yarnproject` editor, you can configure:

* **Presenter** — the visual style of the dialogue preview (we only supply one at the moment)
* **Start Node** — which node to begin from (defaults to "Start")
* **Preview Font Size** — independent of your editor font size
* **Typewriter** — toggle the character-by-character text reveal on or off

### Definition Files

Definition files (`.ysls.json`) tell the extension about custom commands and functions defined in your game code (e.g. in C#, GDScript, C++, or Blueprints). This enables autocomplete, hover documentation, type checking, and parameter validation for your custom gameplay commands.

#### For v3 Projects (Yarn Spinner 3.0.x-3.1.x)

Use the **Generate Definitions** button in the `.yarnproject` editor's Definitions section. This runs `ysc` to scan your game project and produce a `.ysls.json` file. Choose your engine type (Unity, Godot C#, or Godot GDScript) and point it at your game project directory.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2Fy7QRs74UjB7CtE6LqlPQ%2FScreenshot%202026-03-27%20at%205.47.42%E2%80%AFpm.png?alt=media&#x26;token=82a1d3f6-198f-4c93-b676-021f3c0c6995" alt=""><figcaption></figcaption></figure>

#### For v4 Projects (Yarn Spinner 3.2+)

You have full control over definition files. Add, remove, and browse for `.ysls.json` files directly in the `.yarnproject` editor.

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FqP8BEzfWyWncLZlXv8Nf%2FScreenshot%202026-03-27%20at%205.40.02%E2%80%AFpm.png?alt=media&#x26;token=42603f92-8d19-49d7-976a-960db5531663" alt=""><figcaption></figcaption></figure>

### Project Configuration

Open your `.yarnproject` file to see the visual project editor. It has sections for:

* **Yarn Project Settings** — project name, author, presenter, start node, font sizes, saliency strategy
* **Project Metadata** — base language, image path
* **File Patterns** — which `.yarn` files to include/exclude
* **Localisation** — translation string tables and asset directories
* **Character Colors** — define characters with colours for editor highlighting and preview
* **Definitions** — manage `.ysls.json` definition files
* **Compiler Options** — variable declaration requirements, preview features
* **Spell Checking** — enable/disable and custom dictionary words

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FUImP0cFY8OdJp4Wwum4F%2FScreenshot%202026-03-27%20at%205.46.57%E2%80%AFpm.png?alt=media&#x26;token=3fe9c1c9-0933-4df1-8daa-47b0edce5149" alt=""><figcaption></figcaption></figure>

### Extension Settings

Click **Extension Settings** in the sidebar to configure settings that apply to all projects:

* **Editor** — general editor preferences
* **Color Theme** — Yarn Spinner Light or Dark themes, with scope control (whole editor or yarn files only)
* **Language Server** — language server configuration
* **Diagnostics** — control which warnings and errors are shown
* **Spell Checking** — global spell check settings
* **Export** — spreadsheet format, columns, graph format, and other export options

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2FuvEJcLvyxKEabjBfY8qi%2FScreenshot%202026-03-27%20at%205.47.18%E2%80%AFpm.png?alt=media&#x26;token=7b9a8adc-16e0-4db0-afd8-550686c9b985" alt=""><figcaption></figcaption></figure>

### Exporting

The extension can export your dialogue in several formats. Use the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and type "Yarn Spinner":

* **Export Dialogue as Recording Spreadsheet** — produces a CSV or Excel spreadsheet for voice actors, with configurable columns (character, text, line ID, etc.)
* **Export Dialogue as Graph** — produces a Mermaid or DOT format graph of your node structure, optionally clustered by file

### The Command Palette

Open the Command Palette (`Cmd+Shift+P` on macOS, `Ctrl+Shift+P` on Windows/Linux) and type "Yarn Spinner" to see all available commands:

* Preview Dialogue
* Create New Yarn File
* Show Graph View
* Toggle Graph View
* Export commands
* Open Extension Settings
* Show Output Channel (for debugging)

<figure><img src="https://463139507-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGAKWviXNATe9kDFWZAco%2Fuploads%2Fio2PBqiGrf48WSO46deY%2FScreenshot%202026-03-27%20at%205.44.23%E2%80%AFpm.png?alt=media&#x26;token=695085ad-11db-488a-8713-8d7272c0db4a" alt=""><figcaption></figcaption></figure>

### Nodes Across Files

Nodes can be spread across as many `.yarn` files as you like within your project. The extension handles cross-file references, jumps, and the project-wide graph view automatically. The `.yarnproject` file's `sourceFiles` patterns determine which files are included.

### Tips

* **Use the sidebar** — it gives you an overview of all your projects, files, definitions, and localisation at a glance
* **Click "No definitions file"** in the sidebar to jump straight to the definitions section of your project editor
* **Use `///` comments** above variable declarations for documentation that appears in hover tooltips
* **Use clusters and colours** in the graph view to organise complex narratives visually
* **Set the theme scope to "Yarn Files Only"** if you want the Yarn Spinner colour theme to automatically activate only when editing yarn files


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.yarnspinner.dev/write-yarn-scripts/yarn-spinner-editor/writing-yarn-in-vs-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.