yarn-playground

Yarn Spinner is a lovely little language for writing branching dialogue, but the official tooling assumes you’ve already opened Unity. I just wanted to scribble a story, hit Run, and watch the graph wire itself up.

So that’s what this is. Editor on the left, live node graph on the right, story runner underneath. Click a node, jump to its source. Step through choices, watch variables tick. No Unity, no installer, no fork of the language.

not a port

The thing I’m proudest of: it isn’t a JavaScript reimplementation of Yarn. It’s the genuine Yarn Spinner 3 C# compiler, bundled into a Blazor WASM payload and wired up to the React UI through a thin JS interop layer. Diagnostics, parse errors, and runtime semantics match exactly what you’d get inside Unity, because they are what you get inside Unity.

The C# project lives under csharp/YarnSpinnerJS/ and builds into a single .wasm blob the Vite dev server happens to serve. Everything you see in the browser — the Monaco editor, the React Flow graph, the variable inspector — is a thin skin around that bundle.

what’s bundled

• Monaco editor with Yarn syntax highlighting.
• React Flow + Dagre auto-layout for the node graph; nodes link back to source positions.
• A live story runner with real-time variable inspection.
• A sample story (cafe-ordering-demo.yarn) so the Run button does something useful on first paint.

A weekend project I keep tinkering with. Stable enough to write dialogue in. Try it at yarn.wickend.dev — and if Ink is more your thing, there’s a matching playground for that.