WebTun
USER GUIDE

Your terminal, everywhere.

WebTun puts a full shell, a code editor, your files and git — behind one PIN, in any browser. This guide walks through everything the app can do, so no feature stays hidden. About 5 min cover to cover.

14 chapters 9 shortcuts Works  offline as PWA

60-second tour #

Brand new? Do these five things and you'll know 80% of the app.

Start the server & unlock. Run it, then enter your PIN — first run has none, so set one in Settings → Security. Everything sits behind it.

Open a second terminal tab with Ctrl+T. Tabs keep running when you switch, refresh, or briefly lose connection.

Press Ctrl+P to fuzzy-find any file, and Ctrl+B to toggle the file explorer sidebar.

Create a tunnel from Settings → Tunnel to get a public HTTPS URL for your phone or a friend's laptop. How it works.

Install it as an app from your browser menu — it works offline as a PWA and reconnects automatically.

Run the server #

WebTun is one process — start it on any machine and the whole guide above comes alive in a browser.

First time: run ./setup.sh — it installs Node 18+, project dependencies and the tunnel connector.

Every day: npm start, then open http://localhost:3000. Stop it with ./stop.sh.

Set a PIN immediately in Settings → Security — an empty PIN means anyone on your network can walk in.

CLI flags #

FlagDoes
--port -pListen port (default 3000)
--host -hBind address (default all interfaces)
--pinPIN for this run
--tunnel -tStart with a public tunnel URL
bash
webtun --port 8080 --tunnel
# server on :8080, reachable worldwide via HTTPS

Configure with .env #

Same knobs, persisted. The file lives next to the server (or ~/.config/webtun/.env for global installs) alongside history and tunnel memory.

env
PORT=3000
HOST=127.0.0.1        # bind locally only
PIN=pick-a-strong-one # empty = no auth (don't)
WORKSPACE_ROOT=~/projects  # where the file browser starts

Watch the host #

The overflow menu → System Stats opens a live dashboard: CPU, memory, disk, uptime — and GPU cards with VRAM, utilization and temperature where detectors exist — plus the top processes by CPU, with a Kill button per row for runaways. It polls every few seconds and politely pauses when the tab is hidden or Data Saver is on.

Home base #

No tabs open? You don't get an empty screen — you get the Launchpad. The Home button pinned left of the tab bar brings it back any time.

  • Recent commands, one key away. Your greatest hits are listed as cards — click one, or just press 16 to launch-and-run it in a fresh tab.
  • Places jump you to favorite folders instantly; the Today strip keeps the current context in sight.
  • Live system pulse — a sparkline of host load right on the dashboard, so you know before you SSH in whether the box is sweating.
  • Prefer a blank slate? Unpin it and new windows open straight to a terminal.

Terminal #

A real shell in every tab — not a simulation. Full filesystem access, your own shell, links you can click.

  • Tabs for everythingCtrl+T opens one, Ctrl+W closes it, Ctrl+Shift+/ cycles. Double-click a tab to rename it, and your whole tab layout (terminals, app previews and open files) is remembered across reloads. The tab strip is keyboard reachable too: Tab onto the active tab, then / to move (or Home/End for the ends), and in tile view each tile header is focusable and activates with Enter.
  • Sessions survive accidents. Refresh the page, close the laptop, drop Wi-Fi — your shells keep running server-side (via tmux when available) and reattach exactly where you left them.
  • Tile view lays every terminal out in a grid at once — and every open code file with it, so you can watch two logs and edit three files in one screen. Find it in the overflow menu when you're juggling.
  • Search inside output with Ctrl+F (match highlighting, optional case-sensitivity), and click file paths & URLs printed by your tools to jump straight there.
  • Confirm on Close guards tab closes (on by default) — and warns about unsaved editor changes before a tab disappears.
  • Commands are remembered. What you type is tracked (escape sequences filtered out), so the command library and history stay clean and reusable.
  • Clipboard access is opt-in. Programs can always copy to your clipboard, but reading it (OSC 52 paste, used by terminal editors) is off by default — otherwise stray output could quietly pull your clipboard into the session. Turn on Settings → Terminal → Allow terminal clipboard read when you want it.

Tip: long-running job? Start it in its own tab. Even if the browser tab closes, the process keeps going on the host.

Editor & previews #

Click any text file to edit it with highlighting for JS, Python, HTML, CSS, Shell, YAML, SQL, Go, Rust, Markdown and more.

  • Save with Ctrl+S. A dot on the file name marks unsaved changes, so you never lose an edit silently.
  • Live preview for HTML and Markdown in a sandboxed pane — Ctrl+Shift+R refreshes it. HTML preview has two modes: Safe (default — scripts stripped) and Full via the Full button, which runs the file's own scripts in the same isolated frame: no access to the app, its storage, or your files.
  • Office files open read-only right in the app: Word (.docx) renders with text, tables and embedded images; Excel (.xlsx) gets a real spreadsheet grid — every sheet switchable from the toolbar, column letters, row numbers, merged cells, sticky headers, and values formatted as authored (dates, %, currency). Legacy .doc/.xls/.ppt? The app tells you to re-save rather than showing garbage.
  • PDFs and ebooks too. PDFs render with a selectable text layer (search and copy work); EPUBs open as a proper paged reader.
  • Work it your way: F11 takes the editor fullscreen, the split toggle flips code/preview between side-by-side and stacked, and unsaved edits are auto-drafted — crash mid-sentence and your words are still there. Re-open the file and WebTun asks whether to restore the draft or discard it (drafts are only offered when they differ from what's on disk, and are cleared once you save or explicitly discard).
  • Images preview inline instead of downloading. Big binaries stay out of the editor. Truly unsupported files say so plainly instead of showing garbage.

File tabs #

The tab button in the editor header — or Open in Tab in a file's right-click menu — moves the open file off the split and into the tab strip beside your terminals, so a source file, a README, a PDF and a preview can all stay open at once.

  • Every code file gets its own live editor — that is what makes tabs worth it. Switch to Tile view and three, four, five files render side by side, each with its own cursor, scroll position and undo history. Nothing is torn down on a switch, so your edits and place survive.
  • Each tab carries its own toolbar: Save (Ctrl+S), Reload to discard edits and re-read the file from disk, and Panel to hand the file — buffer and undo history included — to the split editor when you want preview, fullscreen or the split layout. An amber dot marks unsaved changes, and the tab itself gets a dot too.
  • Switch, rename, close, reorder — file tabs are ordinary tabs: click, Ctrl+W, drag, double-click to rename. Up to 10 file tabs at once; opening a file that already has a tab focuses it instead of duplicating, and unsaved work is auto-drafted and offered again after a crash, exactly like the editor panel.
  • One heavy document at a time. PDF, EPUB and Office tabs share a single viewer — they hold whole documents in memory, so a pile of them would be expensive. Switching away parks the previous one behind an Open card, and activating it again restores your page, zoom, sheet and scroll position.

App preview tabs #

Running a dev server? Open a New Preview from the overflow menu (or the toolbar button), type its port — say 5173 — and your app renders in a tab right beside the code. Edit path, refresh, or copy a shareable preview URL from the toolbar.

  • Zero setup: when your terminal prints localhost:5173, a toast offers to open it right away; the port field also autocompletes detected listeners. Any port works — even 80 or 443.
  • Streams and downloads proxy through; dev-server WebSocket channels (hot-reload sockets) do not — the proxy is HTTP-only, so refresh the tab to see changes.

Copied preview links carry your access token. Anyone opening one browses as you — share them like passwords, never publicly.

The token authenticates the first hit only. After that a short-lived, port-scoped cookie takes over for subresources — your token is stripped before anything reaches your app (a ?token= of the app's own, e.g. Jupyter logins, passes through untouched), and raw-PIN access follows the same approval gate as everywhere else.

Server admins can narrow previews to specific ports with PREVIEW_PORTS=5173,8080 in .env — useful when the box runs databases or admin panels whose ports you would rather not expose through your session. Unset (the default) allows any port except WebTun's own.

Two honest limits: previewed pages run storage-less by design (localStorage/JS cookies unavailable, so token-based logins won't stick), and apps that hardcode absolute localhost URLs or OAuth callbacks may misbehave — especially over a remote tunnel. The sandbox is enforced by the server, not just by the frame, so a previewed app can never reach your session token or files — even if you open its preview URL directly in a new tab.

deploy-notes.md — preview sandboxed
## Ship checklist + tunnel URL copied to runbook + PIN changed after demo .restart policy set to always
Markdown preview renders instantly beside the editor — no build step.

File manager #

Browse the whole host filesystem, or stay inside your workspace. Right-click anything for the full action menu.

Move & organize

Rename, copy, cut, paste, delete, new file/folder. Clashes offer replace, merge, skip, or keep-both.

Upload & download

Drag-and-drop upload (up to 500 MB × 100 files), download single files or whole folders as a zip.

Zip in place

Compress and extract archives without touching the terminal.

Instant search

Find files by name from the search box — capped for speed on giant trees.

  • Click the breadcrumb trail to hop up through parent folders — faster than hammering "back". Type-ahead, arrow keys and select-all all work in the list.
  • Batch with Select mode. Flip the select toggle and checkboxes appear — tick a dozen files, then delete, download, zip, cut or copy them in one move.
  • Right-click → Folder Size reveals what's eating your disk before you reach for du.
  • Transfers panel. The up/down icon next to the coffee cup shows live uploads, downloads and copy/move jobs with speed and time left — hover to peek, click to pin. Copy/move pause while a conflict dialog waits for you, and Stop halts uploads/downloads at once or copy/move after the current file.
~/projects 4 items
webtunGIT
notes.mdEDIT
demo.mp412 MB
cover.pngVIEW
Badges tell you at a glance what's editable, viewable, or version-controlled.

Git panel #

Open any repository folder and the Git panel lights up — stage, review, commit, sync without memorizing flags.

  • Stage by hunk, not by file. Split a diff into pieces and stage exactly the lines you mean — perfect for untangling mixed-up edits. The button is pinned to the hunk you clicked, so if the file changes underneath you between opening the list and clicking, you get a refresh and retry instead of the wrong lines being staged.
  • Read before you commit: per-file diffs, commit history with detail view, branch & tag management, stash and pop.
  • Author identity per repo. The panel asks for your name and email once per repository — commits simply refuse to run until it's set.
  • Sync safely: pull (merge, rebase or fast-forward-only), push with upstream setup, fetch with generous timeouts for slow networks.
  • Simple mode for a calm panel (on by default): the Git panel hides its rarely-used actions (amend, fetch, refresh, stash, reset, tags) — a Show advanced… button at the panel bottom reveals them in place. Prefer everything visible? Switch it off in Settings → Features.
  • Escape hatches included: amend the last commit, soft/mixed/hard reset to any commit, discard files, init a fresh repo.
server.js — 2 hunks +18 −4
@@ -210,7 +210,9 @@ rate limiter - windowMs: 10 * 1000, max: 5 + windowMs: 10 * 1000, max: 5, + message: 'Too many attempts'
Stage this hunk, leave the rest — one click per hunk.

History & command library #

Stop retyping that deploy incantation. WebTun collects what you run and lets you save the keepers.

  • Automatic history — every command you run is saved (terminal noise filtered out), searchable, and deletable one-by-one or in full.
  • Command library — promote your best one-liners to saved snippets and re-run them in any tab with a click.
  • Ships ready to use — the library already holds the usual suspects grouped by category (Docker, network, files & system), searchable by name, command or category. Anything flagged as sensitive asks for confirmation first, and one click sends it straight to the active tab.
  • History stays lean — it's capped automatically (50 by default) and you can delete single entries or wipe it all from the history panel. Change the cap and it's remembered across restarts.

Remote access #

Your computer stays home. You don't have to. One click gives WebTun a public HTTPS address.

Settings → Tunnel → Create. The app fetches the official Cloudflare connector on first use (verified download, nothing bundled) and hands you a https://….trycloudflare.com URL.

Open it anywhere — phone, tablet, a friend's laptop. Same PIN, same sessions, same files.

Tunnels persist. Restart the server and your tunnels are remembered and re-validated automatically. Copy the URL any time from the tunnel list. If a tunnel dies it's restarted on its own — backing off from 30s up to 5 minutes, and giving up after 5 tries (it's then shown as dead so it stops churning) — and a recycled process ID can't be mistaken for your live tunnel.

A public URL is public. Always set a strong PIN before creating a tunnel — an open instance with a tunnel is an open door.

Sessions & security #

A PIN keeps strangers out. Device approvals keep surprises out — even from people who know the PIN.

  • New devices wait in line. When someone signs in while you're active, their session stays pending until you approve it from your screen. It lapses automatically after 5 minutes.
  • Review every login. The triangle badge in the header collects unreviewed sign-ins — open the security review to see what, where, and when.
  • Revoke in one click. The sessions list shows every active device; kicking one drops its connections instantly — or sign out all other devices at once and keep only this one.
  • The coffee cup watches the fort. The header cup keeps your screen awake during long jobs (Wake Lock), and the number on it is your live session count — a glance tells you if someone else is in.
  • Changing the PIN is a ceremony. It needs approval from a different trusted session and wipes all sessions — so a stolen laptop can't lock you out of your own server.
  • Rate-limited auth slows brute-force guessing, and destructive actions like remote shutdown require PIN protection to be on.

Trusted devices remember you via a session token in the browser. Use them on personal machines; approve-and-forget on shared ones.

Make it yours #

Settings is one panel, seven sections: Security, Appearance, Terminal, Interface, Features, Tunnel, App.

  • Six palettes plus System — every theme is contrast-checked, the terminal follows your choice, and System tracks your OS light/dark setting automatically.
  • Tune the terminal (font, size, cursor style, blink, bell, scrollback, right-click paste), the interface density — and toggle the Git panel off entirely if you never use it.
  • Idle screensaver. Leave the app alone for N minutes and it drifts into a dashboard view — set the timeout, or hit Start now to preview it.
  • Search your settings. The panel has its own live filter — type "wake" or "pin" instead of hunting through seven sections.
  • Reset settings restores defaults in one click if an experiment goes sideways. Your files and PIN are untouched.

Mobile & desktop #

WebTun is a web app that refuses to feel like one.

  • Install it from the browser (menu → Install / Add to Home Screen) — or tap the install banner when it appears, with extra guidance on iOS. As a PWA it launches full-screen, works through network blips, and nudges you — never force-reloads — when an update is ready.
  • Desktop app (Electron) bundles the server: double-click and it picks a free port automatically if 3000 is busy. Enable Start on Login to have it waiting after every reboot. Exit app sits at the very bottom of the Settings panel, outside any section — one tap stops the server and closes every session cleanly.
  • Touch-friendly throughout — file actions, git hunks and approvals are all big-target buttons, not hover-only menus.
  • Gestures: swipe a tab sideways to close it, pull down to refresh, pinch to resize terminal text (that size lasts for the session only — set your default in Settings → Appearance), and flip on Selection mode when you need to copy output instead of tapping it.
  • Mobile extras: enable Show Mobile Keys in Settings → Terminal for an on-screen keys row (terminal only), and Data Saver to pause live gauges and background preloads on metered connections.

Shortcuts #

The complete set — also available any time inside the app from the overflow menu → Keyboard Shortcuts.

CtrlPFile finder
CtrlTNew terminal tab
CtrlWClose tab
CtrlBToggle file explorer
CtrlFSearch in terminal
CtrlShift→/←Cycle tabs
CtrlSSave editor file
CtrlShiftRRefresh preview
EscClose menus / dialogs
tip
curl -s http://localhost:3000/api/version
# → {"version":"…"} — quick check the server is alive

Troubleshooting #

The seven fixes that solve almost everything.