JSpark: JavaScript and TypeScript playground for Mac and Windows

The console shows what your code printed, not how it got there.

Replay your code, backwards too.

JSpark records a Node Run Step by Step, and lets you move through it, backwards as well as forwards. Nothing runs again.

TimelineEditing is paused while you replay · Esc to go back

1⌄function factorial(n) {

2⌄ console.log("asking for", n)

3⌄ if (n === 1) return 1

4⌄ const rest = factorial(n - 1)

5⌄ console.log(n, "×", rest, "=", n * rest)

6⌄ return n * rest

7⌄}

8⌄

9⌄console.log("answer", factorial(4))

Console

asking for 4
L2
asking for 3
L2
asking for 2
L2
asking for 1
L2
2 × 1 = 2
L5
3 × 2 = 6
L5
4 × 6 = 24
L5
answer 24
L9

Variables

everywhere

factorial: Function

2x

1 / 20

+

A real recording of factorial(4). Click a Step, then hover a name.

TimelineEditing is paused while you replay · Esc to go back

1⌄function makeCounter() {

2⌄ let count = 0

3⌄ return () => {

4⌄ count += 1

5⌄ return count

6⌄ }

7⌄}

8⌄

9⌄const next = makeCounter()

10⌄next()

11⌄next()

12⌄console.log("count", next())

Console

count 3

L12

Variables

everywhere

makeCounter: Function

2x

1 / 13

+

makeCounter has returned, yet its count keeps going up. Variables marks it as remembered.

Every variable, at every Step: Each name in scope, as it was at that Step. A change is lit.
Any name’s value, on hover: Hover a name to see its value at this Step, not a later one.
Play it, or step it: Autoplay moves Step by Step. Stop anywhere, and step back.
The console, at each Step: This Step’s line is lit. Output still to come is dimmed.

You won’t need a replay every day. Most days, you type a few lines and read the answer.

What if the code you are typing never ends?

Forgot `tries++`? JSpark stops the loop.

A loop that never ends, a Run that is busy too long, or one that uses too much memory is stopped. The console names the line.

let tries = 0

1⌄let tries = 0

2⌄while (tries < 3) {

3⌄ // forgot tries++

4⌄ tries++

5⌄}

6⌄

7⌄console.log("done")

RangeError: Runaway loop on line 2: stopped after 20,000,000 iterations.

top level — line 2

L2

Threw in 9ms·Runs as you type

Click the line in the error, and the cursor goes there. Add tries++ and it prints done.

The line, named: The error says where the loop is. Click it to go there.
What it printed, kept: A stopped Run keeps what it printed before it stopped.
Servers keep going: Only a Run that is busy without a pause is stopped. A server waits, so it keeps running.
Fix it, and it runs: Add the missing line, and the Snippet runs again as you type.

Most lines print nothing to the console.

Peek: see a line’s value, with no console.log.

End a line with //? and its value appears beside it, after every Run.

A small demo, so there is something to run. Clear it and write your own.

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //? → 53

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

total 53

highest 30

Done in 2ms·Runs as you type

Type //? and the line’s value appears beside it after the Run.

const prices = [40, 100, 1, 5, 25]

1⌄const prices = [40, 100, 1, 5, 25]

2⌄//? prices → [40, 100, 1, 5, 25]

3⌄const sorted = prices.sort()

4⌄//? prices → [1, 100, 25, 40, 5]

5⌄

6⌄console.log(sorted === prices)

true

L6

Done in 2ms·Runs as you type

sort() changed the array itself, and sorted the numbers as text.

const user = { name: "Ada", tags: ["admin"] }

1⌄const user = { name: "Ada", tags: ["admin"] }

2⌄const copy = { ...user }

3⌄

4⌄copy.name = "Grace"

5⌄copy.tags.push("editor")

6⌄

7⌄/*?

8⌄user.name → "Ada"

9⌄user.tags → ["admin", "editor"]

10⌄copy.tags → ["admin", "editor"]

11⌄*/

Done in 2ms·Runs as you type

Several values side by side. The spread copied name, but both objects share one tags array.

On every Run: Peeks update each time the code runs, as you type too.
A name, or several: Add a name after //? to see it. A /*? block shows several.
Just part of a value: Add $.length after //? to see only the length.
Node and Web: Peek works in Node and Web Snippets alike.

Peek shows what a value is. TypeScript shows what it should be.

In TypeScript, the editor knows your types.

Which type did TypeScript give that value? Hover it and the editor tells you.

type Item = { name: string; cents: number }

1⌄type Item = { name: string; cents: number }

2⌄

3⌄const cart: Item[] = [

4⌄ { name: "Coffee", cents: 450 },

5⌄ { name: "Bagel", cents: 300 },

6⌄]

7⌄

8⌄function price(cents: number) {

9⌄ return `$${(cents / 100).toFixed(2)}`

10⌄}

11⌄

12⌄const total = cart.reduce((sum, item) => sum + item.cents, 0)

13⌄console.log(price(total))

14⌄console.log(price("12.50"))

$7.50

$0.13

Done in 3ms·Runs as you type

price("12.50") prints $0.13. The underline says why.

No tsconfig, no build step: Pick TypeScript for a Snippet. There is nothing to set up.
Types, on hover: Hover any name, or any function call, to see its type.
Mistakes, underlined: Type errors are underlined as you type. A setting decides whether they stop the Run.
JavaScript stays JavaScript: A type in JavaScript is an error. Pick TypeScript to use one.

That is JSpark for small questions. For bigger ones, it runs frameworks, real files and real servers.

Some questions need React, Vue or three.js.

Pick a Starter. It already runs.

Change its code and see the page change. There is nothing to install.

A small demo, so there is something to run. Clear it and write your own.

One file is one component: its script, its markup and its styles.

1⌄// A small demo, so there is something to run. Clear it and write your own.

2⌄// A `//?` after a line shows what it came to; hover the value for every pass.

3⌄const scores = [12, 7, 30, 4]

4⌄

5⌄let total = 0

6⌄for (const score of scores) {

7⌄ total += score //? → 53

8⌄}

9⌄

10⌄console.log("total", total)

11⌄console.log("highest", Math.max(...scores))

12⌄

total 53

L10

highest 30

L11

Done in 4ms·Runs as you type

Svelte, one of 14 Starters. React, Vue, three.js and the rest open the same way.

Nothing to set up: Each opens on a small demo, with no install and no config.
Packages the Starters use: Their packages come inside JSpark, so they work offline.
Tailwind, offline: Import Tailwind in a Web Snippet, and it compiles offline.
Tabs that come back: Quit whenever you like. The Snippets you had open come back.

So far, the Node Snippets only printed values.

When the code needs Node, it’s real Node.

A Node Snippet runs with your own access to your computer, so it can do what a page can’t. And when the code needs a page, it gets a real one.

import { readFile, stat, writeFile } from "node:fs/promises"

1⌄import { readFile, stat, writeFile } from "node:fs/promises"

2⌄

3⌄const order = { pizza: "margherita", size: "large", extraCheese: true }

4⌄await writeFile("order.json", JSON.stringify(order, null, 2))

5⌄

6⌄const saved = JSON.parse(await readFile("order.json", "utf8"))

7⌄console.log(saved)

8⌄console.log((await stat("order.json")).size, "bytes on disk")

Object

L7

pizza : margherita

size : large

extraCheese : true

69 bytes on disk

L8

Ready·Runs on demand

The order is written to a real file on your computer, then read back from it.

const { basename, extname } = require("node:path")

1⌄const { basename, extname } = require("node:path")

2⌄

3⌄const photo = "/photos/2026/beach.jpeg"

4⌄

5⌄console.log(basename(photo, extname(photo)))

6⌄console.log(extname(photo))

ReferenceError: require is not defined in ES module scope, you can use import instead

top level — line 1

Switch to Script (CommonJS)

L1

Threw in 2ms·Runs as you type

require in a Module throws, and the console offers to run it as a Script.

Real files: Read and write them, with your own access to your computer.
A real server: Start one and call it. It keeps listening until you stop it.
Other programs, any API: Run other programs and read their output, or call any API.
A real page: Web, React, Vue and Svelte Snippets run as a live page.

That was the tour. Here is the list.

Everything, at a glance.

What JSpark does, from the editor to the page: the features you just saw, and the ones the tour had no room for.

Run as you type: Pause and your Snippet runs. The last answer stays on screen until the new one arrives.
Files and network wait for you: A Snippet that reaches your files, network or other programs doesn’t run as you type. It waits for Run.
TypeScript, checked: Type errors are underlined as you type, with hovers. You decide if they hold the Run.
Completions: The editor completes names as you type, in JavaScript and TypeScript, and knows Node’s own APIs.
Vue and Svelte, typed: A Vue or Svelte Snippet is one component file. With lang="ts", it is type-checked too.
Format Code: Prettier is built in and works offline. One key formats the code on screen.
Vim keys: Switch the editor to Vim’s modes and motions. The shortcut to Run, and every other, still works.
Peek: End a line with //? and its value appears beside it. Add $.length to see just part of it.
Every top-level value: Print the value of each top-level expression, each at its line, not only the last one.
Real Node: Errors, stack traces and timer order are Node’s own. A Snippet runs as a Module or a Script.
Endless loops, stopped: A loop that never ends, or a Run that’s busy too long or uses too much memory, is stopped.
Values shown as they are: Map, Set, BigInt and circular objects are shown as they are. Error lines link to the code.
Every console method: console.table, groups, timers and %c styles work as in a browser. Each line links to its code.
A folder for your files: Relative paths and __dirname land in one Working Folder. Open it from Settings, or pick your own.
Environment variables: Keep up to 3 values, such as an API key, in process.env instead of in your code.
The Timeline: Replay a Node Run one Step at a time, backwards as easily as forwards. Nothing runs again.
Variables at each Step: Every name in scope, as it stood at each Step. Hover a name to see its value then.
Closures, marked: In the Timeline, a name a function remembers from further out is marked as remembered.
Objects as they were: In the Timeline, an object shows what it held at each Step, not what it became later.
Next Step with output: In the Timeline, jump straight to the next Step that printed something.
A real browser page: A Web Snippet’s page runs beside the editor in its own process, so it can’t hang JSpark.
Style edits keep the page: Change only the CSS and the running page takes it in place, keeping its state.
The last working page: An edit that breaks the build leaves the last working page up, with the line to fix.
14 Starters: React, Vue, Svelte, three.js and more, each opening on a small demo that runs.
Solid, as Solid runs it: Solid Snippets compile with Solid’s own compiler, so they behave as in a Solid project.
Tailwind, offline: Import Tailwind in a Web Snippet’s style and it compiles in the app, with no connection needed.
CDN imports: A Web Snippet can import a package from a CDN, and import maps work too.
Pages keep their state: Switch to another tab and back: a page keeps its state while you are away.
Tabs that come back: Quit whenever you like. The Snippets you had open are there when you return.
Open and save files: Open a .js, .ts, .html, .vue or .svelte file in a tab, and save a tab back to a file.
Your layout: Code and output side by side or stacked. A page and its console are tabs, each with the whole side.
Keep on top: Keep JSpark above other windows, so the output stays in view while you work elsewhere.
Your look: A light theme and a dark one, code colours to go with each, and your text size.

View all features

Yours, on your computer.

A playground, not an IDE. Come here when you want an answer first.

Next to your console.log: Keep your console.logs. When you want to know what happened between two of them, replay the Run and look at any Step.
Next to your debugger: Keep it for your app. When the question fits in a few lines, paste them into a Snippet and step back through them.
Next to your browser: Keep it for your pages. When the code needs Node, a Node Snippet is real Node, with your own access to your computer.

Every feature above is free. There is one more thing.

Use JSpark every day? There’s JSpark+.

JSpark+ adds more for people who make JSpark part of their day, and it’s how JSpark keeps getting better.

What JSpark+ adds

The same app: A License Key turns your JSpark into JSpark+, in place.
Your work, kept: Upgrade or not, your Snippets, Library and settings stay.
Your devices, 30 days: One key is for you, on 1, 3 or 5 devices, as you choose. Any payment is refundable for 30 days.

Questions

Is JSpark for building apps?

No. JSpark is a playground, or a scratchpad: a place to try code and see what it does. Use it to try an idea before you add it to your project, or to learn JavaScript by watching your code run. When the code grows into an app, build it in your editor.

Is JSpark really free?

Yes, and it isn’t a trial: it doesn’t expire. It needs no account, and the Timeline is included. JSpark+ is an optional upgrade that adds more. It’s the same app, so if you upgrade later, you keep your Snippets and settings.

What does it run on?

Macs with Apple silicon (M1 or later), with macOS 13 Ventura or later, and 64-bit PCs with Windows 10 or 11 (Intel, AMD or ARM). It’s the same app on both, and a License Key works on both.

Can I replay a React or Web Snippet?

No. The Timeline replays Node Snippets. A Web Snippet shows its live page instead, and Peek works in both.

Is a Run sandboxed?

No. A Node Run is real Node, with your own access to your files, network and programs. A Snippet that uses your files, the network or another program doesn’t run as you type, so half-written code doesn’t run by accident. When you press Run, it runs with the same access as any program you start.

Do I need Node.js installed?

No. JSpark comes with its own Node, and with everything its Starters need.

Does JSpark collect data about me?

No. There is no telemetry, no analytics and no crash reporting. The only network requests are the ones you cause, such as searching npm or running code that uses the network, and JSpark checking for updates, which you can turn off. JSpark+ also checks its License Key with the store when the app starts and once a day while it stays open, and sends nothing else.

A JavaScript and TypeScript playground for your desktop.

Replay your code, backwards too.

Forgot `tries++`? JSpark stops the loop.

Peek: see a line’s value, with no console.log.

In TypeScript, the editor knows your types.

Pick a Starter. It already runs.

When the code needs Node, it’s real Node.

Everything, at a glance.

Yours, on your computer.

Use JSpark every day? There’s JSpark+.

Questions

Next time you wonder what a line does, run it in JSpark.

JSpark is downloading

A JavaScript and TypeScript playground for your desktop.

Replay your code, backwards too.

Forgot tries++? JSpark stops the loop.

Peek: see a line’s value, with no console.log.

In TypeScript, the editor knows your types.

Pick a Starter. It already runs.

When the code needs Node, it’s real Node.

Everything, at a glance.

Yours, on your computer.

Use JSpark every day? There’s JSpark+.

Questions

Next time you wonder what a line does, run it in JSpark.

Forgot `tries++`? JSpark stops the loop.