Skip to main content

Web Editor

The t-Plot Web Editor is the primary tool for creating and editing stories. It is a full-featured code editor built into the Developers Portal with Yarn syntax highlighting, intelligent autocomplete, and an integrated debugger.

Why Use the Web Editor​

  • No setup required β€” start writing immediately in your browser
  • Syntax highlighting β€” Yarn commands, tags, variables, and options are color-coded
  • Smart autocomplete β€” commands, node names, variables, speakers, and tags
  • \\ shortcuts β€” quickly insert commands and media tags with two keystrokes
  • Smart input β€” automatic escaping, auto-replace for special characters, smart Enter
  • Formatting β€” keyboard shortcuts and context menu for bold, italic, underline, and more
  • Integrated debugger β€” test your story without leaving the editor
  • Instant validation β€” catch errors before publishing

Getting Started​

  1. Go to Developers Portal
  2. Click Add build
  3. Choose Create in editor to open the web editor
  4. Write your story using Yarn syntax
  5. Use the debugger panel to test your story
  6. Publish when ready

Editor Layout​

The editor consists of two main areas:

  • Code panel (left) β€” where you write your Yarn script with full syntax support
  • Debug panel (right) β€” a Telegram-like preview where you can test your story in real time

Legacy Method: Uploading .yarn Files​

You can still create stories by uploading .yarn files:

  1. Write your script in any text editor (we recommend VS Code with the Yarn Spinner extension)
  2. Go to Developers Portal
  3. Click Add build, then Upload Story
  4. Select your .yarn files (max 5 MB total)
  5. The parser will validate your script and report any errors
Recommendation

The web editor is the recommended way to create stories. It provides real-time feedback, autocomplete, and an integrated debugger that significantly speed up the development process.