Some questions need React, Vue or three.js.
Pick a Starter. It already runs.
14 Starters, from Node.js to Canvas, each opening on a small demo that runs. There is nothing to install.
01
Pick one, and it runs
Click + at the end of the tabs and pick a Starter. It opens in a new tab with a small demo, which runs by itself a moment later.
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⌄
1⌄<script>
2⌄ // One file is one component: its script, its markup and its styles.
3⌄ let count = $state(0)
4⌄
5⌄ $effect(() => {
6⌄ console.log("count", count)
7⌄ })
8⌄</script>
9⌄
10⌄<main class="grid min-h-screen place-items-center bg-white p-6">
11⌄ <div class="rounded-2xl bg-stone-900 p-8 text-center text-stone-100 shadow-sm ring-1 ring-stone-800">
12⌄ <p class="text-sm font-medium text-emerald-400">Compiled, no virtual DOM</p>
13⌄ <p class="my-4 text-6xl font-bold tabular-nums">{count}</p>
14⌄ <button class="button" onclick={() => count--}>−</button>
15⌄ <button class="button bg-emerald-700 text-white" onclick={() => count++}>+</button>
16⌄ </div>
17⌄</main>
18⌄
19⌄<style>
20⌄ @import "tailwindcss";
21⌄
22⌄ /* Scoped by the compiler to this component, and built from Tailwind's utilities. */
23⌄ @layer components {
24⌄ .button {
25⌄ @apply mx-1 w-16 cursor-pointer rounded-lg bg-stone-800 py-2 text-lg font-semibold transition active:scale-95;
26⌄ }
27⌄ }
28⌄</style>
29⌄
total 53
L10highest 30
L11PageConsole
+Compiled, no virtual DOM
0
−+count 0
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.
02
Every Starter, on the Home screen
With no Snippet open, the Home screen offers every Starter.
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.
03
Node.js, with a Peek
The Node.js Starter sums a list of scores, and a //? shows a value beside its line.
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
L10highest 30
L11Done in 4ms·code changed since·Runs as you type
04
React, Vue and Svelte
React is a component in JSX. Vue and Svelte are one component file each, as in a project.
A small demo, so there is something to run. Clear it and write your own.
One file is one component: its script, its template and its styles.
1⌄<script setup>
2⌄// One file is one component: its script, its template and its styles.
3⌄import { ref, watchEffect } from "vue"
4⌄
5⌄const count = ref(0)
6⌄
7⌄watchEffect(() => {
8⌄ console.log("count", count.value)
9⌄})
10⌄</script>
11⌄
12⌄<template>
13⌄ <main class="grid min-h-screen place-items-center bg-white p-6">
14⌄ <div class="rounded-2xl bg-stone-900 p-8 text-center text-stone-100 shadow-sm ring-1 ring-stone-800">
15⌄ <p class="text-sm font-medium text-emerald-400">Reactive, one file</p>
16⌄ <p class="my-4 text-6xl font-bold tabular-nums">{{ count }}</p>
17⌄ <button class="button" @click="count--">−</button>
18⌄ <button class="button bg-emerald-700 text-white" @click="count++">+</button>
19⌄ </div>
20⌄ </main>
21⌄</template>
22⌄
23⌄<style scoped>
24⌄@import "tailwindcss";
25⌄
26⌄/* Scoped to this component, and built from Tailwind's utilities. */
27⌄@layer components {
28⌄ .button {
29⌄ @apply mx-1 w-16 cursor-pointer rounded-lg bg-stone-800 py-2 text-lg font-semibold transition active:scale-95;
30⌄ }
31⌄}
32⌄</style>
33⌄
PageConsole
+Reactive, one file
0
−+count 0
Done·code changed since·Runs as you type
05
three.js, D3, Canvas and more
A 3D scene, a chart drawn in SVG, a drawing on a canvas, with no library to install.
A small demo, so there is something to run. Clear it and write your own.
import * as d3 from "d3"
HTMLCSSJS
1⌄import * as d3 from "d3"
2⌄
3⌄// Each value is joined to a <rect> in the HTML tab's <svg>; new data moves the same bars.
4⌄const letters = ["A", "B", "C", "D", "E", "F"]
5⌄const width = 320
6⌄const height = 160
7⌄
8⌄const svg = d3.select("#chart").attr("viewBox", `0 0 ${width} ${height}`)
9⌄const x = d3.scaleBand().domain(letters).range([0, width]).padding(0.2)
10⌄const y = d3.scaleLinear().domain([0, 10]).range([height, 0])
11⌄
12⌄function draw() {
13⌄ const data = letters.map((letter) => ({ letter, value: 1 + Math.floor(Math.random() * 9) }))
14⌄
15⌄ svg
16⌄ .selectAll("rect")
17⌄ .data(data)
18⌄ .join("rect")
19⌄ .attr("x", (d) => x(d.letter))
20⌄ .attr("width", x.bandwidth())
21⌄ .attr("fill", "#34d399")
22⌄ .transition()
23⌄ .duration(500)
24⌄ .attr("y", (d) => y(d.value))
25⌄ .attr("height", (d) => height - y(d.value))
26⌄
27⌄ console.log("data", data.map((d) => `${d.letter}=${d.value}`).join(" "))
28⌄}
29⌄
30⌄d3.select("#shuffle").on("click", draw)
31⌄draw()
PageConsole
+Data bound to SVG
New datadata A=4 B=7 C=2 D=9 E=5 F=6
Done·code changed since·Runs as you type
06
Offline from the first Run
A Starter’s packages come inside JSpark, so its first Run needs no connection.
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.
reactReact 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
07
Your Starters, your order JSpark+
Hide the Starters you don’t use and put the rest in your order, so the list stays short.
Search
General
Editor
Console
Running
Timeline
Starters
License
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
Good to know
- A Starter sets the Kind
- Node, a page, or a Vue or Svelte component: the Kind can’t change afterwards.
- New Snippets start in JavaScript
- Change it in Settings → Running → Language for new Snippets.
- Versions
- Each Starter uses the newest version in its range when your copy of JSpark was built: React 19, Vue 3.5+, Svelte 5.
- Solid, as Solid runs it
- Solid Snippets compile with Solid’s own compiler, so they behave as in a Solid project.
Pick a Starter. It already runs.
Download free for Mac
Not a trial: it doesn’t expire.
Windows: coming later