Docs / Pages and packages

Starters

A Starter is a way to begin a Snippet: it sets what the Snippet is, and opens it with a small demo.

On this page

Every Starter
Open a Starter
The demo in each Starter
Which versions of React, Vue and Svelte
Hide and reorder StartersJSpark+

A Starter decides where the new Snippet runs: on Node, as a page beside the editor, or as a Vue or Svelte component. That can’t be changed afterwards, so pick the Starter for the code you want to try.

Every Starter

There are 16, in the order the Home screen shows them.

Starter	What you get	Runs
Node.js	JavaScript or TypeScript on Node. Console output only, no page.	—
Web Page	A page in three Parts: HTML, CSS and JS.	—
React	A React component in JSX.	React 19
Web Page + ServerJSpark+	A page and its own Node server.	—
React + ServerJSpark+	A React app and its own Node server.	React 19
Vue	One Vue component file.	Vue 3
Svelte	One Svelte component file.	Svelte 5
three.js	A 3D scene drawn on a canvas.	three
jQuery	A page with jQuery.	jQuery 4
D3	Data drawn as SVG.	D3 7
Preact	A Preact component in JSX.	Preact 10
Solid	A Solid component in JSX, built by Solid’s own compiler.	Solid 1
Lit	A web component made with Lit.	Lit 3
Alpine.js	Behaviour written in the markup.	Alpine.js 3
Web Components	A custom element, with no library.	—
Canvas	Drawing on an HTML canvas, with no library.	—

The two + Server Starters are JSpark+. JSpark lists them with the JSpark+ mark. Picking one opens nothing, and says that a page with its own server needs JSpark+. A Snippet already made from one opens and edits in both. See A page with a server.

Open a Starter

Click + at the end of the tabs, or look at the Home screen, which the window shows when no Snippet is open.
Click a Starter. It opens in a new tab.

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

Pick Svelte from the + menu: the new tab opens on its demo, and its page appears a moment later.

The demo in each Starter

Each Starter opens with a short demo that runs and prints on the first Run. Delete it and write your own when you are ready.

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

The React Starter’s demo: a counter component, with JSX and CSS on the strip.

With Run as you type on, as it is at first, the demo runs by itself a moment after it opens. The two + Server demos wait for you to press ⌘↵ or Ctrl+Enter.
A new Node or web page Snippet is in JavaScript, unless you change Settings → Running → Language for new Snippets. See JavaScript and TypeScript.
Every Starter with a CSS Part starts with Tailwind on. See Tailwind CSS.
A Starter’s packages come with JSpark, so its first Run works offline.

Which versions of React, Vue and Svelte

A Starter’s page uses two things, which change separately:

The library, such as react, vue or svelte, is a package. Each Starter asks for a range: React 19, Vue 3 (3.5 or later), Svelte 5 (5.57 or later). The version you get is the newest in that range when your copy of JSpark was built. The Packages window shows it.
The compiler is JSpark’s own: Vue’s and Svelte’s compilers, esbuild for React and Preact JSX, and Solid’s compiler for Solid. It changes only when JSpark updates.

react

Installed 19.3.0Node Web

19.3.0(latest)

React is a JavaScript library for building user interfaces.

174.5 kBnpmPublished2 weeks ago203,498,378/week

Required by the React Starter (^19). Stays while it’s here.

react

React is a JavaScript library for creating user interfaces.

The react package contains only the functionality necessary to define React components. It is typically used together with a React renderer like react-dom for the web, or react-native for the native environments.

Usage

The Packages window on react: its version, and the Starter that needs it with the range it asks for.

The page itself runs in JSpark’s built-in Chromium. Settings → About names its version. See Which Node and which browser.

Hide and reorder Starters JSpark+

In JSpark+, choose which Starters the Home screen and the + offer, and in what order:

Open Settings → Starters (⌘, or Ctrl+,).
Switch a Starter off to hide it. At least one Starter stays on.
Drag a row to move it, or press ⌥↑ or Alt+↑ and ⌥↓ or Alt+↓ on its handle.

General

Editor

Console

Running

Timeline

Starters

About

Starters

Shown Starters

Which ways to begin the Home screen and the + offer, and in what order. Drag to reorder. With just one on, the + opens it straight away.

Node.js
Web Page
React
Web Page + Server
React + Server
Vue
Svelte
three.js
jQuery
D3
Preact
Solid
Lit
Alpine.js
Web Components
Canvas

Settings → Starters: a switch and a handle for each Starter.

With only one Starter on, + opens it straight away. In JSpark, the list is shown, and changing it says that arranging Starters needs JSpark+.

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.

Starters

Every Starter

Open a Starter

The demo in each Starter

Which versions of React, Vue and Svelte

Hide and reorder Starters JSpark+

Related