Real-time Output

PlayJS evaluates your code and displays results in a side-by-side output panel. Each line of output is aligned with the corresponding line of source code, making it easy to trace which expression produced which result.

How It Works

The output panel sits to the right of the editor. As you write code, PlayJS executes it and renders results directly next to the line that produced them. This line-by-line alignment eliminates the need to mentally map between your code and a separate console window.

Automatic Expression Evaluation

One of PlayJS’s most powerful features is automatic expression evaluation. Top-level expressions are evaluated and displayed automatically — you don’t need to wrap them in console.log. Simply write an expression at the top level and its result appears in the output panel:

1 + 2              // → 3
'hello'.toUpperCase() // → "HELLO"
[1, 2, 3].map(x => x * 2) // → [2, 4, 6]

This makes PlayJS ideal for quick experimentation and learning — just type an expression and see the result instantly.

Expressions inside nested scopes (such as functions, loops, callbacks, or conditionals) require console.log to produce output, since they are not top-level statements:

function greet(name) {
  console.log(`Hello, ${name}!`) // needs console.log
}
greet('World')

for (let i = 0; i < 3; i++) {
  console.log(i) // needs console.log
}

Auto Run vs Manual Run

PlayJS supports two execution modes:

Auto Run — Code runs automatically every time you make a change in the editor. This creates a live-coding experience where results update as you type. Enable or disable this in Preferences → General.
Manual Run — Press ⌘R (macOS) / Ctrl+R (Windows/Linux) to execute your code on demand. Use ⇧⌘R (macOS) / Ctrl+Shift+R (Windows/Linux) to stop a running execution. This is useful for code with side effects, network requests, or long-running operations where you want full control over when execution happens.

Output Types

The output panel displays several types of results:

Top-level expression values — Automatically evaluated and displayed without needing console.log.
Console output — Calls to console.log, console.warn, console.error, and other console methods are captured and displayed. Required for expressions inside functions, loops, and other nested scopes.
Errors — Runtime errors and syntax errors are highlighted with clear error messages, making it easy to identify and fix issues.
Promises — Async results from await expressions and resolved promises are displayed once they settle.

AI Output Explanation

Click the AI icon on the output panel to ask the AI assistant to explain the current output. This is helpful when you encounter unexpected results or want to understand what a piece of code is doing. The AI will analyze both your code and its output to provide a clear explanation.

Missing Package Detection

When your code imports an npm package that is not installed, the output panel detects this and displays a clickable “Install” link. Clicking it takes you directly to the NPM package manager with the package name pre-filled, so you can install it with a single click and get back to coding.