Docs / Everyday
Open and save files
Open a code file as a copy in a new tab, and save a tab’s code to a new file.
JSpark never writes back to a file it opened. The tab is a copy: editing it does not change the file. Opening and saving files work in JSpark and JSpark+.
Open a file
- Choose File → Open…, or press ⌘O or Ctrl+O.
- Pick one or more code files, and click Open.
Each file opens in a new tab, named after the file. Its extension decides what kind of Snippet it is:
| File | Opens as |
|---|---|
| .js, .ts | Node.js: .js in JavaScript, .ts in TypeScript. The Load Mode is your Settings → Running → New Snippets run as. |
| .mjs, .mts | Node.js, as a Module. |
| .cjs, .cts | Node.js, as a Script. |
| .jsx, .tsx | React. The file is the JSX or TSX Part, in the page of the React Starter. |
| .html, .htm | Web Page. HTML with no document around it is put in one. |
| .vue | Vue. |
| .svelte | Svelte. |
JSpark opens files up to 1 MB. For any other file, it says so, for example: Couldn’t open “notes.txt”. JSpark opens code files up to 1 MB, and the list of extensions.
Each file is a new tab, so it counts toward the tabs you have open. JSpark keeps up to 3 tabs open, and JSpark+ as many as you like. In JSpark, a file that would be a fourth tab is not opened, and JSpark shows More than 3 tabs needs JSpark+. Close a tab first. See Tabs and the Home screen.
On a Mac, you can also open a file from Finder: right-click it and choose Open With → JSpark, or drop it on JSpark in the Dock.
Open is off in the Timeline. Press Esc to leave it first.
Drop files on the window
Drag one or more code files onto the JSpark window. While you drag, the window says Drop to open as a new tab. Each file opens in a new tab, as with Open.
To put a file’s text into the code instead, hold ⌥ or Alt while you drop it on the code. The text goes in where you drop it, and no tab opens.
In the Timeline, the window says Leave the Timeline to open a file instead.
Save to a file
- Choose File → Save to File…, or press ⌘⇧S or Ctrl+Shift+S.
- Check the name and the folder, and click Save.
JSpark writes the tab’s code to that file, ready to run as it is. The file is written once: later changes to the tab do not reach it. To update the file, save again.
| Tab | Saves as |
|---|---|
| A Node Snippet | One file. Its extension says the Load Mode: .mjs (.mts in TypeScript) for a Module, .cjs (.cts) for a Script. |
| A Web Page, React or another page | One .html file, with its HTML, CSS and script in place. |
| A tab opened from .jsx or .tsx | Only its component, back as a .jsx or .tsx file. |
| Vue or Svelte | One .vue or .svelte file. |
The name JSpark offers is the tab’s name, or its first line. A tab named after a file keeps that name, but the extension follows the tab as it is now: a .cjs file switched to Module saves as .mjs. A tab opened from a .js or .ts file saves as .js or .ts, whichever matches its Language.
The first time, the save panel opens in your Documents folder. After that, it opens in the folder you last opened or saved a file in.
If the file can’t be written, for example on a full disk, JSpark says “prices.mjs” couldn’t be saved, with the reason.
Save to File works in the Timeline too. To keep a Snippet inside JSpark instead, see Where your work goes.
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.