Learn JSLab

Start here

1. 1. Your first tab

   Type code in a tab and it runs as you stop typing, with each value shown beside the line that made it.

2. 2. Auto Log

   Every top-level expression is logged beside its line, so you rarely need console.log.

3. 3. Run and Auto Run

   Your code runs a moment after you stop typing; Run, Stop and Kill are there when you want them.

4. 4. Magic comments

   End a line with //? and JSLab logs exactly that statement, even inside a function or a loop.

5. 5. Logpoints

   Click beside a line number, or press F9, to log that line without editing your code.

6. 6. Errors that point at your line

   An error names the line it came from, underlines it in the editor, and links each stack frame to your code.

7. 7. The Web View

   A browser-runtime tab draws into a real page you can see and click, right under its output.

8. 8. Command palette

   Press ⇧⌘P to find any command by name, with its shortcut beside it.

Editor

• Magic comments — End a line with //? and JSLab logs exactly that statement, even inside a function or a loop.
• Logpoints — Click beside a line number, or press F9, to log that line without editing your code.
• Editing shortcuts — Multiple cursors, moving and duplicating lines, and the rest of the editor's commands all have shortcuts.
• Editor settings — Line numbers, wrapping, brackets, minimap, hovers, fonts and more are all in Settings.
• Format with Prettier — Press ⌥⇧F to format a tab with Prettier, or have it formatted every time it runs or saves.
• Install a missing package from the editor — Import a package you don't have and JSLab offers to install it, from the editor or from the error row.
• Lines and rows stay linked — Hover an output row to light its line, move the caret to light its rows, and click a row's line number to jump there.
• TypeScript, JSX and top-level await — Write TypeScript, JavaScript, TSX or JSX, and await at the top level without wrapping anything.
• Vim keys — Turn on Vim keys to edit with modes and motions; the status bar shows the current mode.
• Working with tabs — Open, close, reopen, rename, reorder and cycle through tabs, each with its own code and runtime.

Running code

• Your first tab — Type code in a tab and it runs as you stop typing, with each value shown beside the line that made it.
• Auto Log — Every top-level expression is logged beside its line, so you rarely need console.log.
• Run and Auto Run — Your code runs a moment after you stop typing; Run, Stop and Kill are there when you want them.
• Decorators, pipelines and other proposals — Decorators work as they are, and Settings → Build turns on pipelines, do expressions and other proposals.
• Environment variables — Set variables once in Tools → Environment Variables, and every run reads them from process.env.
• Loop protection and stuck runs — An endless loop stops itself with an error naming the line, and a stuck run can always be killed.
• Promises and async values — A logged promise shows as pending, then updates in place when it settles.
• See the transpiled code — Show Transpiled Output displays the JavaScript your tab actually runs, next to your code.
• Timers, servers and Stop — A run stays active while timers or servers are open, and Stop closes them all.
• Working directory — Point a tab at a folder and relative imports, files and process.cwd() resolve there.

Runtimes & packages

• Browser & Node APIs — A real web page that can also read files, run commands and use Node's crypto, path and os modules.
• fetch without CORS — In Browser & Node APIs, fetch reaches any URL without CORS getting in the way.
• Install npm packages — Press ⌘I to search npm and install a package once; every tab can import it.
• The Browser runtime — A plain web page with no Node at all, for code that has to run as it would in a website.
• Three runtimes — Run a tab on Bun, on Browser & Node APIs, or in the Browser, and switch from the status bar.

Output & results

• Errors that point at your line — An error names the line it came from, underlines it in the editor, and links each stack frame to your code.
• Changed values flash — After a re-run, rows whose values changed flash briefly, so you see what your edit affected.
• Copy Path and copying values — Right-click any part of a value to copy its path, its value, or that part as JSON.
• Every kind of value — Dates, RegExps, URLs, BigInts, Symbols, typed arrays, errors and more each show in their own form.
• Exploring values — Objects, arrays, Maps and Sets expand a level at a time, and big ones load more as you ask.
• Find in Value — Search a large value's keys and values, and step through every match.
• JSON inside strings — A string that holds JSON gets a { } toggle that shows it as a tree you can expand.
• Reading the output — Results, logs and errors each get a row tagged with their line, with filters, Copy All and Clear.
• Swatches, thumbnails and dates — Colours get a swatch, image data URLs a thumbnail, dates their age, and big values a size badge.
• Tables — Any list of records can switch to a table you can sort, filter and copy as CSV, JSON or Markdown.
• The whole console API — Groups, counters, timers, tables and the rest of console work, each row tagged with its line.

Web View & frameworks

• The Web View — A browser-runtime tab draws into a real page you can see and click, right under its output.
• Canvas, animation and sound — Canvas, requestAnimationFrame and Web Audio work in the Web View, and a playing tab can be muted.
• React, Vue, Solid and Angular — Export a component and it renders itself in the Web View; the New Tab dialog sets everything up.
• Side by side or stacked — Put the output beside the editor or below it, and resize every pane by dragging.
• Tailwind — Turn on Tailwind for a browser tab and its utility classes style the page, with nothing to install.

Snippets, npm & AI

• AI Chat — Ask about the tab you're in; the AI sees its code and recent output, and each tab keeps its own chat.
• AI providers and keys — Use Ollama on your Mac, or OpenAI, Anthropic or Gemini with your own key, stored in the Keychain.
• Explain a result with AI — Right-click any output row and choose Explain Result to ask the AI why your code produced it.
• Snippets — Save code you reuse as a snippet, then insert it, open it in a new tab, or expand it by typing its name.
• Use code from a reply — Insert, replace or preview code from an AI reply as a diff, and apply proposed file changes on purpose.

Keys, settings & themes

• Command palette — Press ⇧⌘P to find any command by name, with its shortcut beside it.
• Change a shortcut — Rebind any command in Settings → Keybindings by pressing the keys you want.
• Import a VS Code theme — Bring in any VS Code theme from a .json or .vsix file and use it like a built-in one.
• Keyboard shortcuts — Every command has a place in the palette, and the common ones have shortcuts you can learn as you go.
• Panels, the side bar and full screen — Show or hide the activity bar, side bar, status bar and tab bar, and resize the side bar by dragging.
• Settings — Every option, searchable in one window, applied the moment you change it.
• Themes and live preview — Pick one of 21 themes and preview each live from the palette, or follow the macOS appearance.

The app

• Automatic updates — JSLab checks for signed updates every hour and installs them when you restart.
• Help, logs and Safe Mode — Safe Mode, the debug log and the logs folder help when something goes wrong.
• The intro and the Welcome tab — The first launch plays a short intro that becomes the Welcome tab, a live tour you can edit; replay it any time.
• The jslab command — Open files in JSLab from a terminal, or pipe code into a new tab and run it.
• Tips and this guide — Short tips appear in the status bar in your first week, and this guide has every feature.
• Trial and license — JSLab is free for 14 days; a $6 key unlocks it for good on up to three Macs.