Docs / Pages and packages

Web pages

A Web Snippet is a real web page that runs beside the editor, with its console under it.

On this page

Edit the page in Parts
Run the page
Style the page
Load code from the web
Give the console more or less room
When a page freezes

Start one from the Web Page Starter, or from React, Vue, Svelte and the other browser Starters (Starters). The page runs in a real browser, in a process of its own, with a web page’s access and no more.

Edit the page in Parts

A Web Snippet is one HTML document. The strip above the editor shows it in three Parts, one at a time:

HTML: the markup inside <body>.
CSS: the styles inside <style>.
JS (or TS in TypeScript): the code inside the last <script>. It is the only Part that is checked and run.

// Three tabs, one HTML file — and this is the tab that runs.

HTMLCSSJS

1⌄<main class="grid min-h-screen place-items-center bg-stone-950 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>

Markup, style and script

Hello from the page

Click me

Console

ready — click the button

Done·Runs as you type

The HTML Part open. The dot on each tab says that Part has something in it.

Click a tab to edit that Part. Each Part has its own undo, so undoing in the CSS never takes back what you typed in the JS. A line number in an error is a line of the script Part. Click it in the console, and JSpark opens that Part and goes to the line.

A React, Preact or Solid Snippet shows JSX and CSS only: its markup is the element the library renders into. A Vue or Svelte Snippet has no strip. It is one component file, edited whole, as in a Vue or Svelte project.

Run the page

Press ⌘↵ or Ctrl+Enter to run the page. It appears beside the code, and what it prints appears in its console. Before the first Run, the pane says Run it to see the page.

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

Components and hooks

−+

Console

count 0

Done·Runs as you type

Each click changes the count on the page, and the console prints the new count.

With Run as you type on, the page is built again as you type. When the build changes, the page reloads and starts over; a CSS change counts. An edit that changes nothing, such as a comment, leaves the page as it is.
The page keeps running, and keeps its state, while another tab is on screen.
A page that never finishes can’t hang JSpark: it runs in its own process.
The page can call APIs with fetch, as any web page can.
The Timeline replays Node Snippets only. A page has no Timeline.

Style the page

The CSS Part is the page’s stylesheet, in its <head>. JSpark adds only a margin reset and a default font before it, so your rules win. A <style> you write inside the HTML Part stays part of the markup.

HTMLCSSJS

1⌄@import "tailwindcss";

2⌄

3⌄/* Tailwind's utilities style the markup. Plain CSS still works beside them. */

4⌄button {

5⌄ cursor: pointer;

6⌄}

The CSS Part of the Web Page Starter: Tailwind on its first line, and plain CSS under it.

With @import "tailwindcss"; in the CSS Part, JSpark builds the stylesheet with Tailwind before the page loads. Every Starter with a CSS Part begins with that line. See Tailwind CSS.

Load code from the web

A page may load code from the web, as any page can. Each of these works:

An import from a URL in the script, such as import { format } from "https://esm.sh/date-fns".
A <script src="https://…">, a stylesheet or a font from an https: address, in the HTML Part.
An import map in the HTML Part, so the script can import by name.
Inline handlers you wrote in the HTML, such as onclick="hello()", and eval.

Code from the web needs a connection. A package imported by name, such as react in the React Starter, comes from the Packages window instead. When your page’s import map names a package, your mapping wins.

One thing is refused: a script added after the page started, for example through innerHTML. The console says when something was refused.

Give the console more or less room

Beside a page, the console’s heading has two buttons. They are the two arrangements you are not in:

Hide console: the console shrinks to its heading. Click the heading to bring it back.
Show both: the page and the console share the side, the page above or beside the console.
Hide page: the console takes the whole side. The page keeps running, out of sight.

Markup, style and script

Hello from the page

Click me

Console

ready — click the button

Both are shown, so the heading offers Hide console (the minus) and Hide page (the square).

JSpark keeps your choice for every page, and starts with both shown.

When a page freezes

When a page stops answering for more than a second, JSpark lays The page froze over it. Only the page is stuck. The editor and the rest of JSpark keep working.

Markup, style and script

Hello from the page

Click me

The page froze

Only the page is stuck. Hiding won’t stop it.

Stop page

The page stopped answering. Stop page ends it; hiding the page would not.

Press Stop page. The page ends, and the footer says Stopped.
Fix the code that keeps the page busy, such as a loop that never ends.
Press ⌘↵ or Ctrl+Enter to run it again.

If the page starts answering again by itself, the message goes away.

JSpark also stops a page by itself when it is still loading after the time limit, or when it uses more memory than the memory limit. A page that has loaded and waits for a click is never stopped for time. See Time and memory limits.

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.

Web pages

Edit the page in Parts

Run the page

Style the page

Load code from the web

Give the console more or less room

When a page freezes

Related