Introduction

Quokka.js is a rapid prototyping playground in your editor, with access to your project’s files, inline reporting, code coverage and rich output formatting. Runtime values are updated and displayed in your IDE next to your code, as you type.

Quokka ‘Community’ edition is free for everyone. We also offer a commercial Quokka ‘Pro’ edition that provides a number of additional advanced features (marked with ‘Pro’ label in the docs below).

Quokka.js is brought to you by the Wallaby.js team and is built on top of the same technology used in the Wallaby.js Core. If you like what you see in Quokka.js and would like the same live features for your unit tests and all files of your project, and a lot more, then definitely check out Wallaby.js.

Getting started

To get started with Quokka.js in VS Code, install the 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.

Once the extension is installed, 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 the extension is installed, 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 the extension is installed, 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.

Now you are ready to go, just start typing some code in your editor and see what happens next.

Live Feedback

You may create a new Quokka file, or start Quokka on an existing file. The results of the execution are displayed right in the editor. To see the full execution output, you may view the Quokka Console by invoking the Show Output command or clicking the bottom-right status bar indicator.

You may create a new Quokka file, or start Quokka on an existing file. The results of the execution are displayed right in the editor. To see the full execution output, you may view the Quokka Console by invoking the Show Output command or clicking the bottom-left output panel icon.

You may create a new Quokka file, or start Quokka on an existing file by using the Start Quokka context menu action in any opened file editor (you may also assign some shortcut to the action). The results of the execution are displayed right in the editor. To see the full execution output, you may view the Quokka Console by clicking the bottom-right status bar indicator.

If you create a new Quokka scratch file and want to save it, then you may press F5 to do so. Later on, you may open the file and run Quokka using the Start Quokka context menu action in the opened file editor.

It is recommended that you memorize a couple of Quokka keyboard shortcuts (you may see them when using the editor’s command palette). This will make working with Quokka much faster.

To open a new Quokka file use Cmd/Ctrl + K, J for JavaScript, or Cmd/Ctrl + K, T for TypeScript. To start/restart Quokka on an existing file, use Cmd/Ctrl + K, Q.

Live Logging/Compare

You may use console.log or identifier expressions (i.e. just typing a variable name) to log any values.
You may also use sequence expressions to compare objects:

Note that when using identifier expressions for logging (for example, typing a to see the value of the a variable), you may hit some limits in terms of the number of displayed properties and the logged object traversal depth. In this case, you may use console.log(a) to display objects without the limitations.

Please also note that Boolean, Number and Function data types are not supported when use sequence expressions to compare objects (e.g. obj1, obj2).

Live Code Coverage

Once Quokka.js is running, you can see the code coverage in the gutter of your editor. The coverage is live, so you can start changing your code and the coverage will automatically be updated, just as you type.

As you may see, there are various colored squares displayed for each line of your source code.

• Gray squares mean that the source line has not been executed.
• Green squares mean that the source line has been executed.
• Yellow squares mean that the source line has only been partially executed. Quokka supports branch code coverage level, so if a line contains a logical expression or a ternary operator with both covered and uncovered branches, it will be displayed with yellow gutter indicator.
• Red squares mean that the source line is the source of an error, or is in the stack of an error.

Snaps^NEW

Quokka’s Snaps feature is designed to address the delay between writing code and validating it, allowing you to quickly and easily make sure that you are on the right track. Normally you need to switch context between writing your code and running your code in order to validate it. With Snaps, you can execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.

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.

Execution model

Each Quokka Snap’s code, and any code that it is calling, is executed in node.js, as if the snap’s code was located at the end of your source file. Prior to the execution, a few changes are made to the code to make it possible for a snap to run even if imports are failing or if there are any other global scope runtime errors.

Within a Quokka Snap, you have access to your file’s program scope, import/exports, global scope variables/functions, node.js built-in objects and functions, and environment variables. You do not have access to code that is not in the global scope, such as code within a function or class, even if the Snap is within that function or class.

Unlike when you start Quokka on your file, if there are errors in your program scope, like a failing import, the code in your Snap will still execute. This significantly reduces the hassle of trying to set up an environment for testing your code, and allows you to focus on the specific code you’re testing.

Output

In addition to other ways to capture and explore code output, such as Logpoints, Live Comments and Value Explorer, Quokka Snaps introduces a new capability for outputting runtime values. By adding two backticks `` next to the closing }}, any logged values will be dynamically logged between the backticks in your file.

Commands to quickly add and remove the backticks output are available via the editor’s command palette, quick lightbulb actions, and snap hover icons.

Security

To ensure a safe and controlled environment, Quokka Snaps includes security settings in VS Code, that prohibit Quokka Snaps from running automatically. With the default settings, you will be prompted to allow Quokka Snaps to run for a given file each time you open that file, or whenever you restart the editor.

To allow running ALL snaps in the file you may simply press Spacebar twice inside a snap’s body. Commands to allow running ALL snaps in the file are also available via the editor’s command palette, quick lightbulb actions, and snap hover icons.

You may want to allow Quokka Snaps to run automatically in certain scenarios. For example, you may want to create a workspace setting override to allow Quokka Snaps to run automatically in a trusted workspace. To modify the settings, open VS Code settings and search for quokka.snaps. Then, adjust the settings to your preference.

Other commands and settings

To completely disable Quokka Snaps feature, you may use the Quokka: Snaps Auto Discovery VS Code setting.

To temporarily disable the feature on a selected file, you may use the Quokka.js: Stop Snaps Discovery in Current File and Quokka.js: Start Snaps Discovery in Current File commands.

The feature comes with two handy code snippets, snap and snapo, which you can use to quickly generate a snap with or without output. Additionally, you can employ these snippets to surround an existing code fragment with a snap.

Vue.js, Svelte files^NEW

Quokka.js supports Vue.js single file components and Svelte files for projects using Vite. Internally, Quokka uses vite-node to run your code, however in contrast to JavaScript/TypeScript files, you do not need to install the vite-node package in your project.

Please note: Quokka.js depends on running your project using Vite (i.e. vite dev command). Therefore, some frameworks, like Nuxt, may not be compatible. In such scenarios, consider using Console Ninja instead.

Value Explorer

Value Explorer allows you to inspect everything that is logged in Quokka with console.log, identifier expressions, live comments, and the Show Value command. Results are displayed in an easy-to-navigate tree view that is updated in realtime as you write your code.

Expression paths and values can be copied using the tree node’s context menu.

Note that while Value Explorer is available for both Community and Pro editions, in Community edition only 2 levels of the explorer’s tree can be expanded.

Auto-Expand Value Explorer Objects

Identifier Expressions and Live Comments can be provided with an additional hint to automatically expand objects when they are logged to Value Explorer. Inserting the special comment /*?+*/ after any expression will expand your object and its properties within the Value Explorer tree.

Use this feature with small- to medium-sized objects when you want to expand all properties in Value Explorer. Having the properties expanded also helps when using the ‘Copy Data’ action on the Value Explorer tree node, because it only copies expanded properties’ data.

Note that automatically expanded objects have the following limitations:

• Cyclic Depedencies are not automatically expanded
• Functions are not automatically expanded
• Strings beyond 8192 characters are not automatically expanded
• Only the first 100 properties on a single object will be expanded
• Only the first 100 elements of an array will be expanded
• Only the first 10 levels of nested properties will be expanded
• Only the first 5000 properties across all objects will be expanded

Time Machine

Quokka’s Time Machine allows you to move forward and backwards through your code, jump or auto-play to a specific line of code, view runtime values and step into, over and out of your code. In addition to Quokka Community time machine features, Quokka PRO edition also allows you to edit your code without stopping the time machine and continue to explore your code’s execution path.

Once Quokka has started on a file, the time machine is available at any time. It can be started via a command or by using code lens in Quokka output.

Start Time Machine (Shift + F5) command/code lens starts the time machine and pauses code execution on the currently active line (or on the first executed line of the program if the current line is never executed).

Start Machine with Auto Play (Alt + Shift + F5) command/code lens starts the time machine on the currently active line (or on the first executed line of the program if the current line is never executed) and automatically proceeds to the next executed code region after a short delay (configurable via Quokka Code Auto Play Delay setting in VS Code).

Time machine Actions

Time machine actions are available from from the file header actions and Quokka output header code lens, as well as via keyboard shortcuts.

Inspecting Runtime Values

Inspecting runtime values during time-travel sessions is quick and easy. All you need to do is select the object, object property, parameter, expression or variable that you want to view. When you do this, Quokka will display the value that you selected. If your selection is invalid (e.g. you only selected part of a variable) then no output will be displayed. For nested expressions statements (e.g. myObject.a.b.c), you do not need to select the entire expression (selecting only b will output myObject.a.b).

Note that your selection must be either on the current step or a previous step for the value to be displayed.

In addition to displaying selected expression values beside your code, selected expressions are also available in Quokka Value Explorer in an easy-to-navigate, real-time tree view. Nested properties can be expanded to any depth, and values/paths may be copied to the clipboard.

Edit-and-continue

Quokka PRO edition allows you to edit your code without stopping the time machine and continue to explore the code’s execution path.

Code Story Viewer

Quokka’s Code Story Viewer provides a unique and highly efficient way of inspecting what your code is doing in a single continuous view. The viewer is fully integrated with Quokka’s Time Machine, which means you can simply select a variable or expression to see its runtime value. Seeing the executed code displayed in a single continuous view really cuts down on context switching that you may experience in a traditional debugger experience while trying to understand the execution of your code.

Once Quokka has started on a file, the Code Story can be launched using the View Code Story command. The View Code Story command will start also Quokka’s Time Machine if it is not already started. The Code Story can also be launched using the View Code Story code lens in the Quokka output header code lens after starting the Time Machine. Quokka’s Time Machine features are also fully available when a Code Story is displayed.

Codeclip

Quokka’s Share feature allows you to share code that you run with Quokka, as well as its output and time machine recording. Check out our example at Codeclip.io.

Once Quokka has been started on a file, your code can be shared using the Share command. Code can also be shared using the Share CodeLens link in the header of Quokka’s Output window. Running this command will upload your code and a recording of its execution and output to Codeclip.io. After upload, you have a chance to review it and change some settings before publishing. Once you publish your clip, you can share the URL with the world.

Recent Files

The list of all recently launched Quokka files (both physical and scratch files) can be viewed by using the View Recent Files command. This view displays the contents of the files (search with Ctrl/Cmd + F), the date the file was last run, and provides the following actions:

• Run the file within the context of the currently opened project.
• Clone and Run action runs the file as a new scratch file within the context of the currently opened project. The cloned file will be displayed separately from the original scratch file in the recent files view.
• Run in [project_root] action runs the file within the context of the project where it was last ran.
• Clone and Run in [project_root] action runs the file as a new scratch file within the context of the project where it was last ran. The cloned file will be displayed separately from the original scratch file in the recent files view.
• Remove from recent files action removes the entry from the list of recent files. Physical file content is not affected.

VS Code Live Share Integration

When Microsoft’s VS Code plugin for Live Share is installed alongside Quokka, Quokka provides software developers with the ability to interactively collaborate on the same code at the same time. This feature adds a new dimension to real-time instructor-led training as well as interactive prototyping/debugging and works best when guests and host use Live Share’s follow participant command.

How does it work?

When the host and client both have Quokka plugin installed during a Live Share collaboration, when code changes are made and Quokka is running, Quokka will execute the code changes on the host and immediately send the display values to all collaboration participants. Before sharing the Quokka session with clients, the host will be prompted to either Allow or Deny sharing Quokka with the Live Share collaboration.

Members of the Live Share collaboration see the same Quokka display values when they are visible to the host. If the Live Share session is configured to be read-only, only the host can edit code but collaborators will see all of the Quokka execution results. If the Live Share session is editable by other collaborators, as non-host code edits are made, Quokka will evaluate the changes on the host and send the execution results to all collaborators.

Interactive Examples

The Wallaby.js team curates a set of interactive examples that may be launched from within VS Code using the Create File (Ctrl + K, L) command. These examples are useful for both experienced developers (as references) and for new developers (to learn).

Logpoints^NEW

Logpoints allow editor breakpoints to be used to display the value of any expression. Using breakpoints to manage displaying values offers a number of advantages:

• No modification to source code is necessary
• They offer a clear visual indicator of what is being logged (especially when placed within lines as `inline breakpoints`)
• They are easily added and removed using familiar keyboard shortcuts (F9, or ⇧ F9 for inline breakpoints)
• They are easily added and removed using familiar keyboard shortcuts (usually ⌘F8 or F9, depending on keybindings)
• No debugger required; zero setup / configuration and works seamlessly using Quokka's runtime
• They are managed by your editor, and will persist when files are closed and reopened
• They can be added to functions and classes to log all lines within them

Live Comments

Live Comments allow special comments to be used to display values. Inserting the special comment /*?*/ after an expression (or just //? after a statement) will log just the value of that expression. Like Logpoints, Live Comments allow you to see the value right in the middle of an expression. For example, given a chain of a.b().c().d(), you may want to inspect the result of a.b().c() before .d() is called.

The example below shows how to log the runtime value of a.b().c():

a.b()
  .c() /*?*/
  .d();

If you want to log the full expression of a.b().c().d() then you can add a comment at the end of the expression:

a.b().c().d(); /*?*/
// or just
a.b().c().d(); //?

You may also write any JavaScript code right in the comment to shape the output. The code has the access to the $ variable which is the expression that the comment is appended to. The executed code is within a closure, so it also has access to any objects that you may access from within the current lexical environment.

Note that there’s no constraints in terms of what the comment code can do. For example, the watch comment below is incrementing d.e value, and returning $, which points to the expression that the comment is appended to (a.b).

Also, unlike console logging, the special comment logging has some built-in smarts. For example, when you place the comment after an expression that is a promise, the resolved value of the promise is logged. Similarly, if an expression is an observable, then its values are displayed. So you don’t need to insert a .then function to just inspect the resolved value of the promise or a forEach/subscribe function to inspect the observable values.

Live comment snippet

To save some time on typing the comment when you need it, you may create a code snippet with a custom keybinding.

To save some time on typing the comment when you need it, you may create a live template.

To save some time on typing the comment when you need it, you may create code snippets.

Live Value Display

The Logpoints and Live Comments features provide excellent ways to log expressions and keep displaying values when you change your code, but they may not be suitable for all workflows. The Show Value and Show Line Values commands can be used to quickly display values in the editor. Additionally, the Copy Value command can be used to directly copy an expression value.

Show Value

If you want to quickly display an expression value, but don’t want to use logpoints or modify your code, you may do it by simply selecting an expression in an editor. Please note that this requires enabling the feature using the Show Value on Selection setting (off by default).

If you want to quickly display some expression value, but without modifying your code, you may do it by simply selecting an expression in an editor.

Copy Value

If you want to copy an expression value to your clipboard without modifying your code, Live Value Display allows you to do it with a special command (Copy Value command, or with the Cmd + K, X keyboard shortcut).

If you want to copy an expression value to your clipboard without modifying your code, Live Value Display allows you to do it with a special intention action (Alt+Enter & select the Copy Value action).

Show Line Value(s)

If you want to output the values of multiple lines, you may use the Show Line Value(s) command. This command will output the same as Show Value for the selected line(s) as if you had selected the entire line to display.

If you want to output the values of multiple lines, you may use the Show Line Value(s) intention action. This action will output the same as Show Value for the selected line(s) as if you had selected the entire line to display.

Auto-Expand Comment

The Auto-Expand Comment performs the same function as the Show Value command, or upon selection when Show Value on Selection is enabled. You may use Quokka’s auto-expand comment //?+ with small- to medium-sized objects when you want to expand all properties. For example:

const obj = {
  a: {
    b: {
      c: {
        d: 1
      }
    }
  }
};

obj //?+

Note: Auto-expansion is limited for performance reasons: maximum of 5000 elements in an array / object properties, maximum depth of 10, maximum single string length of 8192 characters.

Show Line Timing(s)

If you want to output the execution time of a line, you may use the Show Line Timing(s) command. This command will output the same as if you had used the //?. comment for the selected line(s).

If you want to output the execution time of a line, you may use the Show Line Timing(s) intention action. This action will output the same as if you had used the //?. comment for the selected line(s).

Toggle Auto Log

If you want Quokka to show the runtime values for every single line of your code then you may use the Toggle Auto Log commandintention action. By default, Quokka will start with Auto Log disabled, but this can be changed with configuration.

This feature is useful in scenarios such as when you are live coding and have intermediate results that you want to be displayed as you type.

Sticky Values

Live Values are sticky which means that they survive your file changes while being updated as you type.

You may press Escape to quickly clear a value or Escape Escape to clear all values in a file, which are the default keyboard shortcuts for Clear Value and Clear File Values commands accordingly.

You may press Escape to clear a value or Escape Escape to clear all values in a file. In addition to the keyboard shortcuts there are also Clear value and Clear file values intention actions available.

Live Value Display feature may be adjusted to suit different workflows by changing Show Value on Selection and Show All Selected Values settings.

Project Files Import

Quokka ‘Community’ edition allows you to import any locally installed node modules to a Quokka file. In addition to that, Quokka ‘Pro’ edition also allows to import any files from your project:

• with Babel or TypeScript compilation if required;
• Quokka will also watch project files for changes and automatically update when dependent files change.

Quokka also resolves imported modules with non-relative names when using tsconfig.json and jsconfig.json files that specify baseUrl and/or paths settings.

CPU Profiler

Quokka’s CPU Profiler allows you to quickly record the CPU usage profile of your code to analyze its runtime performance.

To record and view the CPU profile, you may use the Profile button, or run the Quokka.js: Profile command.

Before the profile is displayed, you may choose where to display it: in Quokka Chrome Dev Tools or directly in VS Code.

If you select to open the CPU profile in VS Code, then it will be displayed with VS Code’s built-in CPU profile table extension (and optional Flame Chart extension).

To record and view CPU profile, you may run the Profile action, or the Profile intention action. The recorded CPU profile will be automatically displayed in Chrome Dev Tools once it is ready.

To record and view CPU profile, you may run the Profile command. The recorded CPU profile will be automatically displayed in Chrome Dev Tools once it is ready.

Quokka Chrome DevTools

If you select to open the CPU profile in Quokka Chrome DevTools, three views for analyzing the results are provided once the DevTools app is opened. Each view gives you a different perspective on the executed functions:

After recording CPU profile, Quokka Chrome DevTools will be opened and the CPU profile will be displayed with three views for analyzing the results. Each view gives you a different perspective on the activities:

• Chart view (opened by default),
• Tree (Top Down) view,
• Heavy (Bottom-Up) view.

You may search for a specific function, file, or other text in the DevTool views using Cmd + F or Ctrl + F. In addition, any links that are provided that reference your project files will be opened in your editor when you click them.

The Chart view represents main thread activity with a flame chart. The x-axis represents the recording over time. The y-axis represents the call stack. The functions on top invoke the functions below.

You may use the Tree (Top Down) tab to view which functions cause the most work, or the Heavy (Bottom-Up) tab to view which functions directly took up the most time in aggregate.

In all the views Self Time represents the time directly spent in that function. Total Time represents the time spent in that function or any of its children. You may click Self Time, Total Time, or Function to sort the table by that column.

Quick Package Install

This feature allows you to quickly install any node package, via npm or yarn, without switching away from your editor, and without even having to type the package name (there is enough information in your code already). The package may be installed just for the active Quokka session, so that when you are just playing with things, your node_modules folder is not trashed. Having said that, you may also target the project’s node_modules, if you want to do it.

You may install missing packages via intention actions (Alt+Enter), or via the links in the Quokka output.

You may install missing packages by using the hover message, or with the Cmd + K, I keyboard shortcut (whenever there’s a missing package), via command palette (Quokka.js: Install Missing Package ... commands), or via the links in the Quokka output.

By default Quokka uses the npm install {packageName} command. You may change it to yarn add {packageName} by setting the installPackageCommand value in your Quokka config:

{
  "installPackageCommand": "yarn add {packageName}"
}

Live Performance Testing

The feature allows to quickly see how various parts of your code perform. It can be very helpful for identifying possible bottlenecks in your app and for doing the performance optimization, or just for experimenting to see how different things perform.

Inserting the special comment /*?.*/ after any expression will report how much time it took to execute the expression.

Adding the comment to an expression that gets executed multiple times, for example inside a loop, will make the tool to display total execution time, average execution time (total execution time divided by number of times the expression had been executed), minimum and maximum execution time.

You may also use the execution time reporting comment and add to it any expression that you may use in live comments to display both an expression execution time and execution result.

For example,

a() //?. $

displays a() execution time and result.

Run on Save/Run Once

Choose how and when Quokka should run on your files. In addition to the community edition’s Automatic mode, you can start Quokka and only Run on Save or tell Quokka to start and just Run Once. This feature is helpful for using Quokka to run slow-running scripts, or scripts with side-effects.

The Run on Save and Run Once actions are available along-side other Quokka commands, in your IDE’s list of commands. If you use these commands often, you can improve your productivity by adding key-bindings.

Runtime

By default, Quokka.js uses your system’s node.js to run your code. You also may configure Quokka to use any specific node.js version, if you are using nvm for example.

Quokka uses esm module for JavaScript files, allowing ES imports and top level await to be used with zero configuration.

Browser-like Runtime

To simulate a browser environment, Quokka supports jsdom. The jsdom package must be installed and available from your project as well adding as a few simple Quokka configuration settings.

Vite-node Runtime

For projects using Vite, Quokka uses vite-node to run your JavaScript/TypeScript code in node.js using Vite’s resolvers and transformers. To use Quokka with vite-node, The vite-node package must be installed in your project; Quokka will automatically detect and use vite-node once it is installed.

If you require specific vite-node server configuration, you may use the vite configuration file (e.g. vite.config.ts) in your project root and set the test.server settings (documented here). For example:

/// <reference types="vitest" />

import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    server: {
      deps: {
        inline: ['vuetify'],
      },
    },
  },
})

Configuration

Quokka.js does not need any configuration by default. It will run your code using your system’s node.js. It may also run your TypeScript code without any configuration.

If you would like to use Babel/React JSX or override your tsconfig.json settings, then you may configure Quokka.js.

If you are using VS Code, you can override our editor display settings with VS Code User Setting overrides. You can view the overridable settings in the VS Code Settings editor under Settings -> Extensions -> Quokka.

You may override the coverage indicator colors in VS Code’s user settings (settings.json file). The snippet below shows the config with Quokka’s default colors.

{
    ...

    "quokka.colors": {
        "covered": "#62b455",
        "errorPath": "#ffa0a0",
        "errorSource": "#fe536a",
        "notCovered": "#cccccc",
        "partiallyCovered": "#d2a032"
    }

}

If you are using VS Code, you may change your Quokka console output to compact mode by updating your VS Code setting quokka.compactMessageOutput to true.

If you are using VS Code, you may configure Quokka to automatically start on a file if it was running when the file was last closed by updating your VS Code setting quokka.automaticRestart to true. Please note that this setting is ignored if your file is opened using Run on Save or Run Once.

If you are using VS Code, you may configure Quokka to start automatically if your file matches a regular expression by updating your VS Code setting quokka.automaticStartRegex. For example, to have Quokka start automatically on all files that end with .quokka.js, you would update the setting to \.quokka\.js$.

If you are using VS Code, then by default, your license and settings will automatically be synchronized between VS Code remoting instances, and between other machines when Settings Sync is enabled. This can be disabled by setting the VS Code setting quokka.syncSettings to false.

Plugins

Quokka.js provides a plugin model that may be configured by using the plugins setting. Quokka’s plugin model allows you to specify a file or a node module with code to execute at various stages of Quokka.js’ code execution pipeline. You may find more information about how to write a Quokka plugin in the Extensibility docs section.

Monorepos / Nested packages

Quokka supports running from root-level monorepos and projects with nested packages. If you start Quokka on an existing file within a nested package, then Quokka will automatically run in the context of the nested package. In this case, the project directory will be the nested package directory containing the package.json file for the existing file.

Examples

Because Quokka.js runs your code using node.js, sometimes a little more configuration may be required to match your project’s runtime configuration. If the examples below aren’t relevant for your project, search our support repository for an existing configuration.

• Create-React-App
• Babel + import
• TypeScript + import
• React + Babel + jsdom plugin
• Quokka Alias

Questions and issues

If you find an issue, please report it in our support repository.