Docs / Guides
Add an Open in JSpark button
Put a button on your page that opens your code in JSpark, as a new tab, ready for the reader to run.
On this page
Here is one, for a two-line TypeScript file:
What the button does
- The button is a link to
jspark.app/open. It carries one code file inside the link, after the#. A browser never sends that part to a server, so the code goes from your reader’s browser to JSpark and nowhere else. - JSpark opens the file as a new tab, the same way it opens the file from your disk: a
.tsfile as TypeScript for Node, a.htmlfile as a page, and so on. See Open and save files. - Nothing runs until the reader runs it, with ⌘↵ or Ctrl+Enter. The tab doesn’t run as they type until that first Run.
- The file can name the npm packages it imports, at exact versions. JSpark offers to install them and installs nothing without a click. Installing packages needs JSpark+. Opening the link is free.
- A reader without JSpark sees the file on
jspark.app/open, with the download and a button to copy the code.
Add the script button
Load the script once, then put a <jspark-button> where the button goes. It reads the file in your reader’s browser and makes the link there, so the button always opens the file as it is now.
<script type="module" src="https://jspark.app/button/v1.js"></script>
<jspark-button src="/demos/counter.html" jsx="react"
packages="react@19.1.0 react-dom@19.1.0"></jspark-button>With src, the button fetches the file from your site, and the file name is the name of the tab. The file must be on the same site as the page, or allow it with CORS. JSpark itself never fetches it. To put the code in the page instead, write it in a <template> and give it a name:
<jspark-button name="greet.ts">
<template>
const greet = (name: string) => `Hello, ${name}!`
console.log(greet('JSpark'))
</template>
</jspark-button>Write the code in the template as you would in a <pre>: < as < and & as &. For an HTML page, use src.
| Attribute | What it does |
|---|---|
src | The file to open, by its address. |
name | The file’s name, with its extension. Needed with a <template>; with src, it replaces the name in the address. |
packages | The packages the file imports, separated by spaces, each as name@version: three@0.170.0. An exact version only, never a range or a tag. |
language | ts or js, for an .html, .vue or .svelte file written in TypeScript or JavaScript. Without it, the file opens in the reader’s own Language setting. Other files say their Language in their extension. |
jsx | For an .html page whose script is JSX: the library it is for, such as react or preact. |
label | open for Open in JSpark (the default), or try for Try it in JSpark. |
theme | auto (the default) follows the reader’s light or dark setting; or dark, or light. |
size | md, 36 pixels tall (the default), or sm, 28 pixels. |
- Until the link is ready, and if anything goes wrong, the button links to jspark.app. The browser’s console says why: the file couldn’t be fetched, it is too large, or a package has no exact version.
- The script sets no cookies, tracks nothing, and makes no request but the one for your file.
v1.jsnever changes once it is published. A version that works differently would bev2.js.
Add a badge in Markdown
Where you can only use Markdown, such as a README, link the badge image to the file’s link:
[](https://jspark.app/open#v1.…)For a light background, use open-in-jspark-light.svg. Both are 28 pixels tall, like other README badges. Make the link below.
Add a button in plain HTML
The same button as one link, drawn inline. It loads nothing from jspark.app, and works where scripts aren’t allowed. Replace the href with your file’s link, made below.
<a href="https://jspark.app/open#v1.…" style="box-sizing:border-box;display:inline-flex;align-items:center;vertical-align:middle;gap:9px;height:36px;padding:0 14px 0 5px;border:1px solid #3a3a3a;border-radius:9px;background:#1d1d1d;color:#ffffff;font:600 14px/1 ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-decoration:none;white-space:nowrap"><svg viewBox="0 0 824 824" width="26" height="26" aria-hidden="true" focusable="false"><defs><linearGradient id="jspark-mark" x1="0" y1="824" x2="824" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1D1D1D"/><stop offset="1" stop-color="#676767"/></linearGradient></defs><rect width="824" height="824" rx="185" fill="url(#jspark-mark)"/><path fill="#FFF" d="M180.08 196.616C195.438 180.417 221.029 179.726 237.239 195.073L435.488 382.757C443.548 390.387 448.113 400.994 448.113 412.088C448.112 423.182 443.548 433.789 435.488 441.42L237.239 629.102C221.029 644.449 195.438 643.757 180.08 627.558C164.723 611.359 165.415 585.786 181.625 570.439L348.89 412.087L181.625 253.736C165.415 238.389 164.723 212.816 180.08 196.616Z"/><rect x="444.624" y="560.335" width="234.629" height="62.801" rx="31.4" fill="#00FFFB"/></svg>Open in JSpark</a>Make a link
Paste your file to make its link, with the badge and the HTML button for it. It all happens in this page.
How large a file can be
JSpark opens a link of up to 32,000 characters. The code is compressed in the link, so that is roughly 70 KB of code, more or less depending on the code. The link maker shows a file’s length. Over the limit, the script button links to jspark.app and says so in the console.
Put a project in one file
A link carries one file, so a project needs a version of itself in one file:
- A page: one
.htmlfile, with its CSS in a<style>and its code in a<script type="module">. See Web pages. - A component: one
.tsx,.jsx,.vueor.sveltefile. - Code for Node: one
.tsor.jsfile, or.mjs,.cjs,.mts,.cts.
Import packages by their names, as import { useState } from 'react', rather than building them into the file, and list them in packages. Other files of your project, such as images, are not in the link: use their full addresses on your site.