Each tab holds one Snippet, with its own output. Your open tabs are saved as you work, and they come back when you open JSpark again.
The Home screen
When no Snippet is open, the window shows the Home screen: What are you trying out?, and a card for each Starter. Click a card to open a new Snippet with that Starter’s demo.
JSpark
What are you trying out?
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.three.jsThe JavaScript 3D library. Build a WebGL scene with a camera, lights and meshes, and watch it render on a canvas.jQueryFast, small and feature-rich. DOM traversal, events, animation and Ajax, all through one easy-to-use $ API.D3The library for bespoke data visualization. Bind data to SVG, then shape it with scales, axes and transitions.PreactA fast 3 kB alternative to React with the same modern API. Components, hooks and JSX, at a fraction of the size.SolidDeclarative UI without a Virtual DOM. Signals update only the parts of the page that depend on them, nothing more.LitSimple, fast web components: reactive properties and declarative templates in about 5 kB, usable anywhere HTML is.Alpine.jsA rugged, minimal tool for composing behaviour right in your markup. Think of it like jQuery for the modern web.Web ComponentsCustom elements with no library: a class, a shadow root and customElements.define. The browser's own way to make a new tag.CanvasDraw graphics with JavaScript on an HTML canvas: shapes, animation, game graphics, pixel effects and live visuals.
The Home screen: one card for each Starter, from Node.js to Canvas.
You see the Home screen when you close the last tab. A Starter that needs JSpark+ wears the JSpark+ mark. See Starters for what each one starts.
Open a Snippet in a tab
Click + at the end of the tab strip.
Pick a Starter from the list.
A new tab opens on that Starter’s demo, and with Run as you type on, the demo runs by itself.
// 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⌄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⌄
1⌄<script>
2⌄// One file is one component: its script, its markup and its styles.
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 + opens the list of Starters; picking Svelte opens a tab on the Svelte demo, and its page appears.
To open an empty Snippet of the same kind as the open one, press ⌘T or Ctrl+T, or choose File → New Snippet. It keeps the open Snippet’s Starter icon, Language and Load Mode.
From the The Library, Open in new tab opens a copy of a Saved Snippet in a tab of its own.
Move between tabs
Click a tab.
Press ⌘⇧] or Ctrl+Tab for the next tab and ⌘⇧[ or Ctrl+Shift+Tab for the previous one. They are also in the Window menu.
When a tab has focus, press ← or → to move to the tab beside it.
While the Timeline is open, the tab strip is hidden. Press Esc to leave it first.
Name and move tabs
A tab shows the Snippet’s name. Until you give it one, the tab shows the Snippet’s first line of code, and an empty Snippet shows empty.
To rename a tab:
Double-click the tab, or press F2 when it has focus.
Type the new name, and press Enter. Press Esc to keep the old one.
Clear the name and press Enter to go back to the first line of code.
To move a tab, drag it along the strip. A line shows where it will go. With a tab focused, you can also press ⌥← or Alt+← or ⌥→ or Alt+→.
Close tabs
Click the × on the tab.
Press ⌘W or Ctrl+W, or choose File → Close Snippet, to close the open tab.
Right-click a tab, or press ⇧F10 when it has focus, to close several at once.
// A small demo, so there is something to run. Clear it and write your own.
import { useEffect, useState } from "react"
// 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⌄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
Close
Close 2 other tabs
Close tab to the right
A tab's menu: close it, close the other two, or close the one to its right.
Closing the last tab shows the Home screen. On the Home screen, ⌘W or Ctrl+W closes the window. File → Close Window (⌘⇧W or Ctrl+Shift+W) closes it with tabs open.
When JSpark asks first
If a tab has changes that are not in the Library, JSpark asks before closing it. Press Close to close it and lose those changes, or Back to keep it open.
Close “prices”?
It has changes that are not in the Library. Closing it loses them.
BackClose
Closing a changed tab asks first. Back keeps it open.
A tab still showing its Starter’s demo, or a Saved Snippet just as you opened it, closes without asking. To stop the question, turn off Settings → General → Ask before closing unsaved work.
JSpark keeps up to 3 tabs open. JSpark+ keeps as many as you like. In JSpark, opening a fourth shows a message instead, and nothing is opened or closed. Close a tab to open another.
More than 3 tabs needs JSpark+
JSpark+ keeps as many Snippets open as you like. In JSpark, close a tab to open another.
Not nowUnlock JSpark+…
In JSpark, a fourth tab shows this message. Not now closes it.
If more than 3 tabs are already open in JSpark, for example after a Yearly key lapses, they all stay open. JSpark only stops you opening another. See JSpark+.
Good to know
A tab keeps its own output. Moving to another tab and back does not change it.
A web page keeps its state while its tab is not the one on screen.
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.