JSpark: a JavaScript and TypeScript playground for your Mac

Works offline
No sign-up
Node built in
No tracking

Open JSpark and type. There is no project to make and nothing to set up.

Stop typing, and it has already run.

JSpark runs your Snippet as you type, and stops a Run that would never finish or would slow your Mac.

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

Threw in 16ms·Runs as you type

Forget a tries++ and the loop would run forever. JSpark stops it and names the line.

Runs when you pause: Pause for a moment and your Snippet runs. The last answer stays on screen until the new one arrives.
Or when you press Run: Turn Run as you type off if you like. Then your Snippet runs only when you press Run.
Files and network wait: A Snippet that uses your files, the network or another program doesn’t run as you type. You press Run.
Runaway code, stopped: A loop that never ends, or a Run that’s busy too long or uses too much memory, is stopped before it slows your Mac.

That is all a quick question needs. The rest of JSpark stays quiet until you need it.

The console shows what your code printed. But most lines print nothing.

Peek. Ask your code what it’s holding.

Want to see a value without writing another console.log? Ask for it with a comment.

// 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.

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)

A value just before a line and just after it. sort() changed the array you had, and sorted the numbers as text.

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⌄*/

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

End a line with //?: The line’s value appears beside it after every Run.
A name, or several: Add a name after //? to see it at that line. A /*? block shows several.
Nothing added to your code: No console.log to write, and none to clean up.
Node and Web: Peek works in Node Snippets and Web Snippets alike.

Peek shows what a value is. In TypeScript, the editor also shows what it should be.

TypeScript. An editor that 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 and start writing. There is nothing to install and no config file to write.
Types, on hover: Hover a name to see its type. Hover a function to see what it takes and returns.
Mistakes, underlined: Type errors are underlined as you type. The code still runs, so you see what the mistake does.
JavaScript stays JavaScript: A type in a JavaScript Snippet is an error. Switch the Snippet to TypeScript to use one.

Some questions need React, Vue or three.js. Setting them up can take longer than the question.

Start from something that already runs.

Every Starter opens on a small demo that already runs. Change it and see what happens.

// 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

highest 30

Done in 4ms·Runs as you type

Starters for Node.js, Web Page, React, Vue, Svelte, three.js, jQuery, D3, Preact, Solid, Lit, Alpine.js, Web Components, Canvas.

Starters that already run: Each opens with a small demo that works. It needs no install, no config and no connection.
Packages the Starters use: React, Vue, three.js and the rest come with JSpark, so each Starter works offline.
Tabs that come back: Quit whenever you like. The Snippets you had open are there when you return.
Your look: A light theme and a dark one, code colours to go with each, and your text size.

The Snippets so far only printed values. A Node Snippet can do much more.

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

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

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

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

2⌄import { createServer } from "node:http"

3⌄

4⌄await writeFile("hello.txt", "Hi, from a file on your Mac")

5⌄const text = await readFile("hello.txt", "utf8")

6⌄

7⌄const server = createServer((request, response) => {

8⌄ console.log(request.method, request.url)

9⌄ response.end(text)

10⌄})

11⌄server.listen(3000, () => console.log("Listening on :3000"))

12⌄

13⌄const reply = await fetch("http://localhost:3000/hello")

14⌄console.log(await reply.text())

Listening on :3000

GET /hello

Hi, from a file on your Mac

Ready·Runs on demand

A real file, and a real server that keeps listening until you stop it.

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

Everything so far shows where your code ends up. The Timeline shows how it got there.

Replay your code, backwards too.

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

The Timeline is part of free JSpark.

Timeline · Esc to exit

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

asking for 3

asking for 2

asking for 1

2 × 1 = 2

3 × 2 = 6

4 × 6 = 24

answer 24

Variables

everywhere

factorial: Function

2x

1 / 20

+

A real recording of factorial(4). Click a Step or the arrows to control it yourself, then hover a name.

Timeline · Esc to exit

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

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: Variables lists each name in scope and what it held at that moment. The one that just changed is lit.
Any name’s value, on hover: Point at a name in the code to see what it held at the Step on screen, never a later one.
Play it, or step it: Autoplay moves one Step at a time. Stop anywhere, then step forwards or back.
The console, at each Step: The line printed at this Step is lit, and output from the Steps still to come is dimmed.

That was the tour. Some things didn’t fit in a demo.

Everything it does, at a glance.

What JSpark does, from typing the first line to keeping the last one.

Run as you type: Pause and your Snippet runs. The last answer stays on screen until the new one arrives.
Runaway code, stopped: A loop that never ends, or a Run that’s busy too long or uses too much memory, is stopped.
TypeScript, checked: Type errors are underlined as you type, with hovers. You decide if they hold the Run.
Format Code: Prettier is built in and works offline. One shortcut formats the whole Snippet.
Peek: End a line with //? and its value appears beside it. Nothing is added to 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.
A faithful console: Map, Set, BigInt and circular objects are shown as they are. Error lines link to the code.
Real Node: Errors, stack traces and timer order are Node’s own. A Snippet runs as a Module or a Script.
A real browser page: A Web Snippet’s page runs beside the editor in its own process, so it can’t hang JSpark.
14 Starters: React, Vue, Svelte, three.js and more, each opening on a small demo that runs.
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.
Your layout: Code and output side by side or stacked. The output panels arrange themselves.
Tabs that come back: Quit whenever you like. The Snippets you had open are there when you return.
Your look: A light theme and a dark one, code colours to go with each, and your text size.

Yours, on your Mac.

There’s no account to make, and your code stays on your Mac. Running code, the Timeline and every Starter work with no connection.

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 Mac.

That is JSpark, and every feature on this page is part of it, 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.

Yearly

Pay each year. Every version released while you pay is JSpark+, even after you stop.

Lifetime

Pay once. Every version of JSpark, now and in the future, is JSpark+ for you.

Prices come with the launch in October.

The same app: A License Key turns the JSpark you have into JSpark+, with nothing new to download.
Your work, kept: Upgrade or not, your Snippets, Library and settings stay as they are.
Two Macs, 30 days: One key works on 2 Macs. You can ask for a refund within 30 days of any payment.

Questions

Is JSpark for building apps?

No. JSpark is a playground: 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.

How do I update JSpark?

You don’t need to. JSpark checks for new versions, downloads them in the background and installs them the next time you quit. Free JSpark gets every update. You can turn this off in Settings.

What’s the difference between Yearly and Lifetime?

Lifetime is one payment, and every future version is JSpark+. Yearly renews each year and covers every version released while you pay.

What happens if I stop paying for Yearly?

You keep the app. Every version released while you paid stays JSpark+, for good. Newer versions run as free JSpark, and nothing you made is touched.

Does it run on Windows or Linux?

Not yet. Today JSpark runs on Macs with Apple silicon. Windows and Linux versions are coming soon.

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. Once you press Run, nothing stops it.

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, at most once a day, and sends nothing else.

Next time you wonder what a line does, watch it.

Coming in October

Free, with no account. For Macs with Apple silicon.

A JavaScript and TypeScript playground for your Mac.