Some code needs a page, not a console.
A real page, beside your code.
A Web Snippet runs as a real page in its own process, with its console a tab away. Change only the CSS, and the page keeps its state.
01
One page, in Parts
A Web Snippet is one page, written in Parts: HTML, CSS and JS, each with its own undo.
Three tabs, one HTML file — and this is the tab that runs.
HTMLCSSJS
1⌄<main class="grid min-h-screen place-items-center bg-white p-6">
2⌄ <div class="w-full max-w-sm rounded-2xl bg-stone-900 p-6 shadow-sm ring-1 ring-stone-800">
3⌄ <p class="text-sm font-medium text-emerald-400">Markup, style and script</p>
4⌄ <h2 id="greeting" class="mt-1 text-2xl font-bold text-stone-100">Hello from the page</h2>
5⌄ <button id="go" class="mt-6 w-full rounded-lg bg-emerald-700 px-4 py-2 font-semibold text-white shadow-sm transition hover:bg-emerald-600 active:scale-95">Click me</button>
6⌄ <ul id="log" class="mt-4 space-y-1 text-sm text-stone-400"></ul>
7⌄ </div>
8⌄</main>
PageConsole
+Markup, style and script
Hello from the page
Click meDone·code changed since·Runs as you type
02
A page you can click
The page runs beside the code. What it prints is in the Console tab, and switching between them keeps the page as it was.
import { useEffect, useState } from "react"
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 />)
PageConsole
+Components and hooks
0
−+count 0
Done·code changed since·Runs as you type
03
Change the CSS, keep the state
An edit that changes only the CSS goes into the running page without a reload, so its state stays. Any other edit that changes the page reloads it.
import { useEffect, useState } from "react"
JSXCSS
1⌄@import "tailwindcss";
2⌄
3⌄/* Your own classes can be built from Tailwind's, and the utilities still win. */
4⌄@layer components {
5⌄ .button {
6⌄ @apply mx-1 w-16 cursor-pointer rounded-lg bg-stone-800 py-2 text-lg font-semibold transition active:scale-95;
7⌄ }
8⌄}
1⌄@import "tailwindcss";
2⌄
3⌄/* Your own classes can be built from Tailwind's, and the utilities still win. */
4⌄@layer components {
5⌄ .button {
6⌄ @apply mx-1 w-16 cursor-pointer rounded-lg bg-stone-800 py-2 text-lg font-semibold transition active:scale-95;
7⌄ background-color: #0369a1;
8⌄ }
9⌄}
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 />)
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">Counter</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 />)
PageConsole
+Components and hooks
0
−+count 0
Done·code changed since·Runs as you type
04
A broken edit keeps the last working page
When an edit breaks the build, the last page that worked stays up, with a bar linking to the line to fix.
Three tabs, one HTML file — and this is the tab that runs.
HTMLCSSJS
1⌄// Three tabs, one HTML file — and this is the tab that runs.
2⌄const greeting = document.getElementById("greeting")
3⌄const go = document.getElementById("go")
4⌄const log = document.getElementById("log")
5⌄
6⌄let clicks = 0
7⌄go.addEventListener("click", () => {
8⌄ clicks++
9⌄ greeting.textContent = `Clicked ${clicks} times`
10⌄
11⌄ const item = document.createElement("li")
12⌄ const time = new Date().toLocaleTimeString()
13⌄ item.textContent = `Click ${clicks} at ${time}`
14⌄ log.prepend(item)
15⌄ console.log("clicked", clicks
16⌄})
17⌄
18⌄console.log("ready — click the button")
PageConsole
+Markup, style and script
Hello from the page
Click meShowing the last working version — fix the error on line 15
Line 15: SyntaxError: missing ) after argument list
L15Didn’t run·code changed since·Runs as you type
05
Tailwind, offline
Put @import "tailwindcss"; in the CSS Part, and JSpark builds Tailwind in the app, with no connection.
Three tabs, one HTML file — and this is the tab that runs.
HTMLCSSJS
1⌄@import "tailwindcss";
2⌄
3⌄/* Tailwind's utilities style the markup. Plain CSS still works beside them. */
4⌄button {
5⌄ cursor: pointer;
6⌄}
PageConsole
+Markup, style and script
Hello from the page
Click meDone·code changed since·Runs as you type
06
Imports from a CDN
A page can import a package from a URL, or use an import map, as any web page can. This needs a connection.
import { format } from "https://esm.sh/date-fns"
HTMLCSSJS
1⌄import { format } from "https://esm.sh/date-fns"
2⌄
3⌄const greeting = document.getElementById("greeting")
4⌄greeting.textContent = format(new Date(2026, 9, 5), "EEEE, d MMMM yyyy")
5⌄console.log(greeting.textContent)
PageConsole
+Markup, style and script
Monday, 5 October 2026
Click meDone·code changed since·Runs as you type
07
Open it in your own browser JSpark+
Open the page in your default browser, with its DevTools. It reloads as you edit.
Three tabs, one HTML file — and this is the tab that runs.
HTMLCSSJS
1⌄// Three tabs, one HTML file — and this is the tab that runs.
2⌄const greeting = document.getElementById("greeting")
3⌄const go = document.getElementById("go")
4⌄const log = document.getElementById("log")
5⌄
6⌄let clicks = 0
7⌄go.addEventListener("click", () => {
8⌄ clicks++
9⌄ greeting.textContent = `Clicked ${clicks} times`
10⌄
11⌄ const item = document.createElement("li")
12⌄ const time = new Date().toLocaleTimeString()
13⌄ item.textContent = `Click ${clicks} at ${time}`
14⌄ log.prepend(item)
15⌄ console.log("clicked", clicks)
16⌄})
17⌄
18⌄console.log("ready — click the button")
PageConsole
Markup, style and script
Hello from the page
Click meDone·code changed since·Runs as you type
08
A page with its own server JSpark+
Web Page + Server and React + Server add a server Part. The page reaches it with fetch("/api/…"), and each side has its own console.
The page's code. It calls its server with a path on its own origin. Keep the
HTMLCSSTSServer
1⌄import http from "node:http"
2⌄
3⌄// The page's server: real Node, started by ⌘↵ beside the page.
4⌄// The app picks the port. The page reaches this server on its own origin,
5⌄// so fetch("/api/notes") needs no port and no CORS. Every path the app
6⌄// doesn't serve itself comes here, except /harness.js, /pkg/… and /r<n>/….
7⌄const notes = ["Buy milk", "Open the Server tab"]
8⌄
9⌄const server = http.createServer(async (request, response) => {
10⌄ console.log(request.method, request.url)
11⌄ const send = (status, body) => {
12⌄ response.writeHead(status, { "content-type": "application/json" })
13⌄ response.end(JSON.stringify(body))
14⌄ }
15⌄
16⌄ if (request.url === "/api/notes" && request.method === "GET") {
17⌄ return send(200, notes)
18⌄ }
19⌄ if (request.url === "/api/notes" && request.method === "POST") {
20⌄ let body = ""
21⌄ for await (const chunk of request) body += chunk
22⌄ let text
23⌄ try {
24⌄ ;({ text } = JSON.parse(body || "{}"))
25⌄ } catch {
26⌄ return send(400, { error: "Send valid JSON" })
27⌄ }
28⌄ if (!text) return send(400, { error: "A note needs some text" })
29⌄ notes.push(text)
30⌄ return send(201, notes)
31⌄ }
32⌄ send(404, { error: `Nothing at ${request.url}` })
33⌄})
34⌄
35⌄// The app gives this server its port. Pasted into a Node.js snippet, it
36⌄// falls back to 3000, as Node servers usually do. On this machine only: the
37⌄// page reaches it through the app, and nothing else on your network needs to.
38⌄const port = Number(process.env.PORT) || 3000
39⌄server.listen(port, "127.0.0.1", () => {
40⌄ console.log(`listening on ${port}; the page calls me on /api`)
41⌄})
PageConsole
BrowserServerRun it to see the page
A page and its server
Notes
• Buy milk
• Open the Server tab
A new noteAdd
loaded the notes from the server
L40added Pizza on Friday
L36listening on 54017; the page calls me on /api
L40GET /api/notes
L10POST /api/notes
L10Ready·code changed since·Runs on demand
Good to know
- Pages keep running
- Switch to another tab, and the page keeps its state while you are away.
- Its own process
- If a page freezes, only the page is stuck: Stop page ends it, and Refresh starts the last working build again. JSpark keeps working.
- No Timeline for pages
- The Timeline replays Node Snippets only. Peek works in pages too.
- Frameworks as they run them
- Vue, Svelte and Solid compile with their own compilers, so a component behaves as it does in a project.
Next time an idea needs a page, start a Web Snippet.
Download free for Mac
Not a trial: it doesn’t expire.
Windows: coming later