Features
Editor and files
Section titled “Editor and files”- Syntax-highlighted editor with themes and light/dark mode
- File tree with search and a “New file” button
- Tabs for open files: close with the × button, Delete, or Ctrl/Cmd+W
- Resizable panes
- Open folder loads a folder from your computer (skips
node_modulesand.git)
Not yet: autocomplete, type checking, renaming or deleting files from the tree. Very large files are slow, because every line is rendered.
Console
Section titled “Console”A terminal with colors, clickable links, history (↑/↓) and line editing (Ctrl+A/E/U). Ctrl+C on an empty line stops the server; Ctrl+L clears.
| Command | Does |
|---|---|
bun run <script|file>, bun <file> |
Run a package.json script or a file |
bun test [filter…] |
Run *.test.* / *.spec.* files with bun:test |
bun install (i) |
Install dependencies |
bun add <pkg[@range]> [-d] (a) |
Add a dependency |
bun remove <pkg> (rm) |
Remove a dependency |
ls [dir], cat <file> |
List a folder, print a file |
cookies [clear] |
List or clear the preview’s cookies |
reset |
Throw away your changes and reload the project from its source |
clear, help |
The console is not a full shell: no quotes, pipes, &&, bunx, or file commands like mkdir and mv.
Running code
Section titled “Running code”Run starts your code in a Web Worker. It runs the first of:
moduleormaininpackage.json- the file in
scripts.devorscripts.start("dev": "bun --watch src/index.ts"works) index.ts,index.tsx,index.jsorsrc/index.ts
- Press Run again to restart. Stop with Ctrl+C or the stop action.
- Edits reach the running code: the next import or request sees them, and
fs.watchfires. The server isn’t restarted automatically:--watchand--hotare ignored. - Scripts must have the form
bun <file>. Scripts likevite,astro devortsc && …can’t run; start those tools from a file instead (see Frameworks).
Preview
Section titled “Preview”When your code starts a server (Bun.serve, node:http, or export default { fetch }), the preview shows it.
- Request bar: send any method, path and body. HTML responses open in the page; anything else shows status, headers and the body (JSON is formatted).
- Tabs: several previews at once.
- Open in a new tab: the page gets its own browser tab, still served by the playground (keep the playground tab open).
- Requests stay inside:
fetch("/api/x"), links, forms and redirects from the preview page reach your server. - WebSockets: the preview page’s
WebSocketconnects to your server (Bun.serveupgrade,node:httpupgrade, thewspackage).localhost:<port>URLs pick the server on that port. - Streaming: streamed responses and Server-Sent Events arrive as they’re sent.
- Cookies: kept across restarts; see them with
cookies. - HTML imports:
import page from "./index.html"inBun.serveroutes is bundled with Bun’s bundler. - The preview follows the playground’s light/dark mode.
Limits: the server isn’t reachable from outside the browser, there’s no HTTP caching (conditional requests are dropped), and only the preview page can open WebSockets to it.
Installing packages
Section titled “Installing packages”Dependencies install automatically when a project opens with missing packages. bun install uses bun.lock when there is one. Details and limits are in Toolchain.
Projects
Section titled “Projects”- Saved as you type, in your browser. See Storage and persistence.
- Share: the Share menu copies a link with the whole project in the URL (nothing is uploaded), a Markdown badge, or HTML.
node_modules,.git, binary files and secrets (.env, keys,.npmrc) are left out. Very long links can be shortened torunbun.dev/s/<id>. - GitHub: open any public repo, branch or subfolder from the project picker or with
?repo=. Up to 500 files; GitHub allows 60 imports an hour per IP. - Examples: Elysia, Hono, Astro + Solid, Vite, Lit SSR and more in the project picker.
- One tab per project: a second tab with the same project can’t save its changes.
| URL | Opens |
|---|---|
runbun.dev |
The demo project |
?example=<name> |
A bundled example, e.g. ?example=elysia-demo |
?repo=owner/repo |
A GitHub repo. Also owner/repo@ref, a github.com URL, or …/tree/<ref>/<dir> |
#code=… |
A shared project |
/s/<id> |
A short share link |
Your saved changes win over the link’s source; use reset to start over from it.