Quickstart

1. Open the playground

• Go to the main page of the app.
• You will see a code editor for Teeny at the top, which is where you can write your code. You will also see a button to compile your code. When you click the button, the app will compile your code and show you the tokens, AST tree and Generated JavaScript below.

2. Paste a simple Teeny program

Use this example and click Compile in the UI to see how each panel updates.

let x = 10
let y = 20
let sum = x + y
print sum

3. Read the panels

• Tokens (Lexical Analysis)

  Shows each token as a chip with its type, value, and source location (line/column).

  • Type: KEYWORD, IDENTIFIER, NUMBER, STRING, OPERATOR, PUNCTUATION, etc.
  • Value: the exact lexeme from your program (e.g. "let", "x", "10").
  • Line / column: where the token came from in the source.

• AST (Abstract Syntax Tree)

  Shows the tree of nodes produced by the parser, starting from a Program root.

  • Root node type is Program with a body array of child nodes.
  • Common node types: VariableDeclaration, BinaryExpression, PrintStatement, ReturnStatement, IfStatement, WhileStatement, ForStatement, etc.
  • You can expand/collapse parts of the tree to explore how the parser understood your code.

• Generated JavaScript

  Shows the JavaScript produced from the AST, with basic syntax highlighting and a copy-to-clipboard button.

  • The code is formatted in a monospace block with horizontal scrolling if needed.
  • Use the Copy button to copy the generated JavaScript into another environment if you want to run it there.

4. Reset and try other snippets

Use the Reset button in the UI to clear the editor and outputs, then experiment with different programs.

• Change numbers or variable names and recompile.
• Add if, while, or for statements to see how the AST tree and Generated JavaScript change.
• Try using arrays and indexing, e.g. let xs = [1, 2, 3]; print xs[0].