Quokka.js is a code editor extension that allows developers to instantly run JavaScript and TypeScript code, displaying runtime values and outputs directly in the editor as they type. It is designed for rapid prototyping, learning, and debugging, eliminating the need for context switching or manual configuration. Quokka.js supports both a free Community edition and a commercial Pro edition with advanced features, and integrates with popular editors like VS Code, WebStorm, and Sublime Text.

Key Features

Live Execution and Results Displays code output, errors, and console logs inline as you type.

• Immediate feedback on unsaved changes.
• Error messages and logs appear next to the relevant code.

Live Coverage Visual indicators show code coverage in real time.

• Highlights fully, partially, or non-covered lines.
• Helps quickly identify problematic or untested code.

Snaps Run context-aware code snippets anywhere in your project.

• Supports frameworks like Vue.js and Svelte.
• Real-time updates with access to project and global scopes.

Interactive Value Graphs Visually explore complex data structures.

• Expand/collapse branches in real time.
• Graphs update as code changes.

Logpoints Set breakpoints to log values without altering code.

• Log line or inline values.
• Useful for debugging chains or multiple statements.

Time Machine Step forward and backward through code execution.

• View runtime values at each step.
• Supports edit-and-continue and navigation through code flow.

Interactive Timeline Visualizes code execution flow and errors.

• Color-coded transitions between functions and lines.
• Highlights logs, stack traces, and error locations.

Value Explorer Treeview for inspecting non-primitive runtime values.

• Copy values directly to clipboard.
• Simplifies debugging of large objects.

Live Comments and Values Evaluate expressions and measure execution times via comments.

• Show/copy values with selection or commands.
• Keyboard shortcuts for quick access.

Project Files Import Import and watch project files for changes.

• Supports Babel and TypeScript compilation for imports.

CPU Profiler Profile CPU usage of code snippets.

• Analyze performance directly in the editor.

Quick Package Install Install npm packages from within the editor.

• Choose session-only or project-wide installation.

Codeclip Share code, output, and execution history.

• Review and edit before publishing.

Code Stories Continuous view of executing code and variable values.

• Reduces context switching for code understanding.

Benefits

Accelerated Development Workflow Speeds up prototyping, learning, and debugging.

• Eliminates need to switch between editor and terminal/browser.
• Provides immediate feedback, reducing time from idea to result.

Enhanced Learning and Experimentation Ideal for learning language features and testing snippets.

• Visual cues and instant results help reinforce understanding.
• Supports both JavaScript and TypeScript.

Improved Debugging and Collaboration Advanced tools for exploring and sharing code behavior.

• Visualizations and sharing features aid in collaboration.
• Inline feedback reduces debugging time.