Docs / Start here

A tour of the window

The tabs at the top, the rail on the left, the code and its output, and the footer.

On this page

The tabs
The rail
The code and the output
The footer
The other windows

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

12⌄

total 53

highest 30

Done in 4ms·Runs as you typeJSpark

The editor window: tabs along the top, the rail on the left, the code and the console, and the footer.

The tabs

The tabs are the window’s title bar. Each tab holds one Snippet. A tab is named after the Snippet’s first line until you give it a name: double-click the tab to rename it.

+ at the end of the tabs opens the list of Starters.
⌘T or Ctrl+T opens a new, empty Snippet of the same Kind as the one on screen.
The × on a tab closes it. Right-click a tab to close the others, or the tabs to its right.
The button at the right end of the tabs is the Layout menu: the code and the output side by side, or stacked.

JSpark keeps up to 3 tabs open; JSpark+ as many as you like. See Tabs and the Home screen.

The rail

The rail is the column of buttons on the left. From the top:

Run ⌘↵ or Ctrl+Enter: Runs the Snippet. It is on the rail when Run as you type is off. While a Run goes on for more than half a second, it becomes Stop (⌘. or Ctrl+.).
Runs as you type / Runs on demand: The bolt. Turns running as you type on and off. When the Snippet reaches outside JSpark, a warning shield takes its place, and the Snippet waits for you to run it. See Outside Access.
Timeline ⌘⇧↵ or Ctrl+Shift+Enter: Replays a Node Run one Step at a time. See Step Run and the Timeline.
Add to Library JSpark+: Keeps a copy of the Snippet in the Library. Saving to the Library is JSpark+.
Library ⌘⇧L or Ctrl+Shift+L: Opens your Saved Snippets.
Packages: Opens Packages, to find npm packages.
Settings ⌘, or Ctrl+,: Opens Settings.

Hover a button to see its name.

The code and the output

The code is on the left and its output on the right. For a Node Snippet, the output is the console: what the Run printed, and any error. The code also shows the values of your Peeks.

A web page Snippet has its code in Parts, HTML, CSS and JS, on a strip above the code. Its output is the page itself, above the page’s console.

JSXCSS

1⌄import { useEffect, useState } from "react"

2⌄import { createRoot } from "react-dom/client"

3⌄

4⌄// One component, rendered into the markup's #root.

5⌄function Counter() {

6⌄ const [count, setCount] = useState(0)

7⌄

8⌄ useEffect(() => {

9⌄ console.log("count", count)

10⌄ }, [count])

11⌄

12⌄ return (

13⌄ <div className="rounded-2xl bg-stone-900 p-8 text-center text-stone-100 shadow-sm ring-1 ring-stone-800">

14⌄ <p className="text-sm font-medium text-emerald-400">Components and hooks</p>

15⌄ <p className="my-4 text-6xl font-bold tabular-nums">{count}</p>

16⌄ <button className="button" onClick={() => setCount((n) => n - 1)}>

17⌄ −

18⌄ </button>

19⌄ <button className="button bg-emerald-700 text-white" onClick={() => setCount((n) => n + 1)}>

20⌄ +

21⌄ </button>

22⌄ </div>

23⌄ )

24⌄}

25⌄

26⌄createRoot(document.getElementById("root")).render(<Counter />)

Components and hooks

−+

A React Snippet: its Parts on a strip above the code, and the page it draws.

To put the output under the code, or on the other side, use the Layout menu or the View menu. See Layout and Web pages.

The footer is the line along the bottom. On the left, it says how the last Run ended, such as Done in 4ms, and when the next one happens, such as Runs as you type. When you have changed the code since that Run, it also says code changed since.

On the right, from the left:

Language: JavaScript or TypeScript. See JavaScript and TypeScript.
Format: Formats the code.
Clear console: Empties the console.
Expanded or Collapsed by default: Whether objects the console prints start open or closed.

Last is the edition you are using: JSpark, or JSpark+ with its plan. To see the buttons as words, set Settings → General → Button style to Words or Icons and words.

The other windows

Three things open in windows of their own.

Library (⌘⇧L or Ctrl+Shift+L): your Saved Snippets, to search, open and copy. See The Library.
Packages: search npm and read about a package. See Packages.
Settings (⌘, or Ctrl+,): every setting, with a search box. See Settings.

Open each from the rail. Library and Packages are also in the Window menu.

All 5

nodejs3

html1

react1

arrays1

dates1

events1

hooks1

network1

timing1

Group by key

Turn a list into an object of lists

nodejsarraysAdd tag

1⌄const people = [

2⌄ { name: "Ada", team: "compilers" },

3⌄ { name: "Grace", team: "compilers" },

4⌄ { name: "Linus", team: "kernels" },

5⌄]

6⌄

7⌄const byTeam = Object.groupBy(people, (person) => person.team)

8⌄

9⌄console.log(byTeam)

10⌄

Saved 2 days ago

The Library lists Saved Snippets, with their Tags, and shows the one you pick.

General

Editor

Console

Running

Timeline

Starters

About

General

Theme

SunnyCalmPaperNightDuskSlate

Button style

IconsWordsIcons and words

For the bar along the bottom and the Timeline. Icons show their names on hover; words spell them out, and fall back to icons where they would not fit.

Ask before closing unsaved work

When a tab you are closing has changes that are not in the Library. A Starter’s demo, or a snippet just as you saved or opened it, closes without asking.

Settings has a page for each group, and a search box above them.

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.