A new tab opens with the Starter’s demo in it. You can also pick a Starter on the Home screen, which JSpark shows when no tab is open.
// 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⌄constscores=[12,7,30,4]
4⌄
5⌄lettotal=0
6⌄for(constscoreof scores){
7⌄ total += score //? → 53
8⌄}
9⌄
10⌄console.log("total", total)
11⌄console.log("highest", Math.max(...scores))
12⌄
total53
highest30
Done in 4ms·code changed since·Runs as you type
Node.jsPlain JavaScript or TypeScript on Node.js: read files, call APIs, run scripts. Console output only, no browser.Web PageHTML, CSS and JavaScript that run in the browser. No server: just the page, live beside the code.ReactThe library for web and native user interfaces. Build a UI out of components and hooks, with JSX compiled for you.Web Page + ServerJSpark+A fullstack starter: a web page and its own Node.js server. The page calls the server with fetch("/api/…"), and each side has its own console.React + ServerJSpark+Fullstack React: a React app and its own Node.js server. Components call the server with fetch("/api/…"), and each side has its own console.VueThe progressive JavaScript framework. Approachable, reactive components built on standard HTML, CSS and JavaScript.SvelteA UI framework with a compiler: concise components in HTML, CSS and JavaScript that do minimal work in the browser.
The + menu lists the Starters. Node.js runs plain JavaScript or TypeScript on Node.
JSpark keeps up to 3 tabs open. To open another, close one first. JSpark+ keeps as many open as you like.
Run it
You don’t have to do anything: a moment after the tab opens, the demo runs by itself, because Run as you type is on. To run it again at any time, press ⌘↵ or Ctrl+Enter.
The bolt at the top of the rail turns Run as you type on and off. When it is off, a Run button is above it, and the code runs only when you ask. See Run and Run as you type.
Read the console
The console, beside the code, shows what the Run printed: total 53 and highest 30. The footer under both says how the Run ended.
// 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⌄constscores=[12,7,30,4]
4⌄
5⌄lettotal=0
6⌄for(constscoreof scores){
7⌄ total += score //? → 53
8⌄}
9⌄
10⌄console.log("total", total)
11⌄console.log("highest", Math.max(...scores))
12⌄
total53
highest30
Done in 4ms·code changed since·Runs as you type
The console shows what the demo printed, and → 53 beside the loop is a Peek.
The //? at the end of total += score is a Peek. After the Run, the value that line came to is drawn beside it. See Peek.
If the code throws, the console shows the error, with a link to the line it came from.
Change a line
Change a number in scores, for example 4 to 40. A moment after you stop typing, the Snippet runs again, and the console says total 89 and highest 40.
Until then, the output on screen is from the code before your change, and the footer says code changed since.
console.log(0.1 + 0.2)
1⌄console.log(0.1+0.2)
2⌄console.log(typeofnull)
3⌄console.log("b"+"a"++"a"+"a")
4⌄console.log(Math.max())
0.30000000000000004
object
baNaNa
-Infinity
Done in 1ms·code changed since·Runs as you type
While you type, the output is still the last Run's; a moment after you stop, the new answer arrives.
Clear the demo and write your own code in its place. It runs the same way.
The pictures show JSpark on a Mac. On Windows, the window looks a little different and uses Ctrl for ⌘, but everything works the same way.
May this site use Google Analytics? It sets cookies to count visits and see which pages are read. Nothing is loaded from Google unless you allow it. More in Privacy.