Quick Start

Install

To get started with Quokka.js in VS Code, install Quokka.js extension first by clicking on the Extensions icon in the Activity Bar on the side of VS Code and searching for Quokka. Note that Quokka requires VS Code version 1.10.0 or higher.

To get started with Quokka.js in JetBrains IDE, install the plugin first by using Settings - Plugins and searching for Quokka.

To get started with Quokka.js in Sublime Text, install the package first by using Package Control: Install Package and searching for Quokka.

Run Interactive Demo

Once you have Quokka installed, it will open a start view with a button to run an interactive demo. Click the button to explore Quokka’s features in a live environment.

Once you have Quokka installed, it will open an interactive demo to preview Quokka features. You can re-launch the demo at any time by clicking the Help -> Quokka.js -> Launch Interactive Demo menu item.

Run your code with Quokka

There are three major workflows you can use with Quokka depending on your needs.

Scratch mode

Press Cmd/Ctrl + K, L to open a scratch file and start typing code. Quokka will evaluate your code in real-time and display the results in your editor. You can paste or import any code from your project into the file, and import modules.

The mode is perfect for quick prototyping, testing, and experimenting with code snippets in isolation.

Run your project files

Press Cmd/Ctrl + K, Q to run Quokka on the current file. Quokka will execute your code file as a standalone self-contained program, as if the file was the entry point of your application.

You can invoke functions declared in the file, use imported project files and modules.

The mode is perfect for debugging, testing, and validating your code within the context of your project files.

Run context aware code snippets in your project

Pro Feature

The Quokka Snaps feature allows you to run code snippets in any file in your project, with access to some context of the file where the snippet is located. Simply type {{ in VS Code, the editor will automatically add the closing }} for you. Quokka then runs your code within these blocks, providing instant feedback.

The mode is perfect for testing and debugging code snippets in the context of your project’s file when you don’t want to run a separate scratch file and don’t want to run the full file as a self-contained program.

For example, you may start Quokka Snap right inside a React component hook and quickly validate the behavior of some imported function or a piece of logic:

import { validateEmail } from './validators';

function Component() {
  useEffect(() => {
    ...

    {{
      // Quokka will execute the code below
      // and display the results in your editor.
      // Once you finish, you may remove the
      // {{ }} snap markers and the code inside.
      validateEmail('test@test.abc');
    }}

    ...

  });

  ...

  return (
    <div>
      ...
    </div>
  );
}

There are two major workflows you can use with Quokka depending on your needs.

Scratch mode

Press Cmd + Shift + N / Ctrl + Alt + Shift + Insert to create a new Quokka file. You may select any JavaScript, ECMAScript 6, or TypeScript file type. Once you start typing in the file, Quokka will evaluate your code in real-time and display the results in your editor. You can paste or import any code from your project into the file, and import modules.

The mode is perfect for quick prototyping, testing, and experimenting with code snippets in isolation.

Run your project files

Use the Start Quokka context menu action in any opened file editor (you may also assign some shortcut to the action). Quokka will execute your code file as a standalone self-contained program, as if the file was the entry point of your application.

You can invoke functions declared in the file, use imported project files and modules.

The mode is perfect for debugging, testing, and validating your code within the context of your project files.

There are two major workflows you can use with Quokka depending on your needs.

Scratch mode

Press Ctrl/Cmd + Shift + P to display the editor’s command palette, and then type Quokka to see the list of the available commands. Select and run the New JavaScript File command. Once you start typing in the file, Quokka will evaluate your code in real-time and display the results in your editor. You can paste or import any code from your project into the file, and import modules.

The mode is perfect for quick prototyping, testing, and experimenting with code snippets in isolation.

Run your project files

Press Ctrl/Cmd + Shift + P to display the editor’s command palette, and then type Quokka to see the list of the available commands. Select and run the Start on Current File command. Quokka will execute your code file as a standalone self-contained program, as if the file was the entry point of your application.

You can invoke functions declared in the file, use imported project files and modules.

The mode is perfect for debugging, testing, and validating your code within the context of your project files.