How to Use the Playground UI

A short guide to reading the panels in the Teeny compiler app.

Editor

  • Type code into the editor.
  • Line numbers help you correlate the source with tokens and errors.

Tokens panel

  • Each token is shown as a colored chip.
  • You can see token type, value and source position (line/column).

AST tree panel

  • The AST is displayed as a tree of nodes.
  • Expand/collapse lets you explore the structure without getting overwhelmed.

Generated JavaScript panel

  • This shows the transpiled JavaScript output.
  • Use the Copy button to copy the result.
  • If compilation fails, you will see a clear error message instead of code.