This works in any environment supported by capnweb, so you can run a "server" basically anywhere, even the browser.
-Edit the fetch function, create a tunnel, then the iframe below will load the public URL.
+Return a tiny text response from this browser tab.
+\${messages}
-
- \`, { headers: { "content-type": "text/html; charset=utf-8" } });
- }
-});
-
+}
+`;
+
+const LANDING_PAGE_SCRIPT_SOURCE = js`
+const fromCodeSource = document.querySelector("#from-code-source");
+const fromCodeEditorHost = document.querySelector("#from-code-editor");
+const description = document.querySelector("#demo-description");
+const source = document.querySelector("#demo-source");
+const editorHost = document.querySelector("#demo-editor");
+const snippetButtons = Array.from(document.querySelectorAll("[data-demo-snippet]"));
+const button = document.querySelector("#demo-create");
+const reload = document.querySelector("#demo-reload");
+const status = document.querySelector("#demo-status");
+const urlRow = document.querySelector("#demo-url");
+const link = document.querySelector("#demo-link");
+const frame = document.querySelector("#demo-frame");
+const error = document.querySelector("#demo-error");
+let tunnel;
+let activeFetch;
+let editor;
+void enhanceEditor();
+const captunBrowser = import("/captun.browser.js");
+const snippets = {
+ hello: {
+ description: "Return a tiny text response from this browser tab.",
+ path: "",
+ source: source.value,
+ },
+ chat: {
+ description: "Run the chat room currently on captun.sh from this browser tab.",
+ path: "",
+ source: document.querySelector("#demo-chat-source").value,
+ },
+ mcp: {
+ description: "Run an MCP server from this browser tab. Use the shown URL in MCP Inspector.",
+ path: "/mcp",
+ source: document.querySelector("#demo-mcp-source").value,
+ },
+};
+let activeSnippet = "hello";
+
+function currentSource() {
+ return editor ? editor.state.doc.toString() : source.value;
+}
+
+async function evaluateDemo() {
+ let capturedFetch;
+ const createCaptunTunnel = (options) => {
+ capturedFetch = options.fetch;
+ return Promise.resolve({ url: tunnel ? tunnel.url : "https://pending.captun.sh" });
+ };
+ await new Function(
+ "createCaptunTunnel",
+ "return (async () => {\n" + currentSource() + "\n})()",
+ )(createCaptunTunnel);
+ if (typeof capturedFetch !== "function") {
+ throw new Error("Call createCaptunTunnel({ fetch }) in the editor.");
+ }
+ activeFetch = capturedFetch;
+}
+
+async function refreshTunnelFromSource() {
+ if (!tunnel) return;
+ try {
+ await evaluateDemo();
+ status.textContent = "updated";
+ error.textContent = "";
+ showTunnelTarget(tunnel.url);
+ } catch (caught) {
+ status.textContent = "edit has an error";
+ error.textContent = caught && caught.stack ? caught.stack : String(caught);
+ }
+}
+
+function switchSnippet(name) {
+ const snippet = snippets[name];
+ if (!snippet) return;
+ activeSnippet = name;
+ description.innerText = snippet.description;
+ for (const snippetButton of snippetButtons) {
+ snippetButton.setAttribute("aria-pressed", String(snippetButton.dataset.demoSnippet === name));
+ }
+ setSource(snippet.source);
+ if (!editor) void refreshTunnelFromSource();
+}
+
+function setSource(nextSource) {
+ if (!editor) {
+ source.value = nextSource;
+ return;
+ }
+ editor.dispatch({
+ changes: { from: 0, to: editor.state.doc.length, insert: nextSource },
+ });
+}
+
+function tunnelUrlForActiveSnippet(tunnelUrl) {
+ return tunnelUrl.replace(/\/$/, "") + snippets[activeSnippet].path;
+}
+
+function showTunnelTarget(tunnelUrl) {
+ const url = tunnelUrlForActiveSnippet(tunnelUrl);
+ link.href = url;
+ link.textContent = url;
+ if (snippets[activeSnippet].path === "/mcp") {
+ frame.removeAttribute("src");
+ frame.srcdoc = previewHtml(url);
+ return;
+ }
+
+ frame.removeAttribute("srcdoc");
+ frame.src = url;
+}
+
+source.addEventListener("input", () => void refreshTunnelFromSource());
+for (const snippetButton of snippetButtons) {
+ snippetButton.addEventListener("click", () => switchSnippet(snippetButton.dataset.demoSnippet));
+}
+reload.addEventListener("click", () => {
+ if (tunnel) showTunnelTarget(tunnel.url);
+});
+
+button.addEventListener("click", async () => {
+ const startedAt = performance.now();
+ button.disabled = true;
+ reload.disabled = true;
+ status.textContent = "connecting";
+ error.textContent = "";
+
+ try {
+ if (tunnel) tunnel.close();
+ await evaluateDemo();
+ const { createCaptunTunnel } = await captunBrowser;
+ const options = { fetch: (request) => activeFetch(request) };
+ tunnel = await createCaptunTunnel(options);
+ urlRow.classList.remove("hidden");
+ showTunnelTarget(tunnel.url);
+ status.textContent = "connected in " + Math.round(performance.now() - startedAt) + "ms";
+ reload.disabled = false;
+ } catch (caught) {
+ status.textContent = "failed";
+ error.textContent = caught && caught.stack ? caught.stack : String(caught);
+ } finally {
+ button.disabled = false;
+ }
+});
+
+function previewHtml(url) {
+ return "MCP server listening at\n" + escapeHtml(url) + "\n\nUse ask_question to prompt this browser tab and return the answer."; +} + +function escapeHtml(value) { + return value.replace(/&/g, "&").replace(//g, ">"); +} + +async function enhanceEditor() { + try { + const [{ EditorView, basicSetup }, { javascript }] = await Promise.all([ + import("https://esm.sh/codemirror@6.0.1"), + import("https://esm.sh/@codemirror/lang-javascript@6.2.4"), + ]); + new EditorView({ + doc: fromCodeSource.value, + extensions: [basicSetup, javascript(), EditorView.editable.of(false)], + parent: fromCodeEditorHost, + }); + editor = new EditorView({ + doc: source.value, + extensions: [basicSetup, javascript(), EditorView.updateListener.of((update) => { + if (update.docChanged) void refreshTunnelFromSource(); + })], + parent: editorHost, + }); + fromCodeSource.classList.add("enhanced"); + fromCodeEditorHost.classList.add("enhanced"); + source.classList.add("enhanced"); + editorHost.classList.add("enhanced"); + } catch (caught) { + console.warn("CodeMirror failed to load; using textarea editor.", caught); + } +} +`; + +const WWW_LANDING_PAGE = landingPageHtml(); + +function landingPageHtml() { + return ` + + + + +
cap[nweb] tun[nel]: a tiny, fast public tunnel for local HTTP servers.
+Run this with something listening on port 3000:
+npx captun 3000+
You get a URL like:
+https://abc123.captun.sh+
Requests to that URL are forwarded to your local server until you stop the process.
+ +You don't need to run a local server. Just a fetch function:
+ + + +This works in any environment supported by capnweb, so you can run a "server" basically anywhere, even the browser.
+Return a tiny text response from this browser tab.
+npx captun deploy
Source: github.com/iterate/captun
- + +`; +} - function showTunnelTarget(tunnelUrl) { - const url = tunnelUrlForActiveSnippet(tunnelUrl); - link.href = url; - link.textContent = url; - if (snippets[activeSnippet].path === "/mcp") { - frame.removeAttribute("src"); - frame.srcdoc = previewHtml(url); - return; - } - - frame.removeAttribute("srcdoc"); - frame.src = url; - } +function htmlText(value: string) { + return value.replace(/&/g, "&").replace(//g, ">"); +} - source.addEventListener("input", () => void refreshTunnelFromSource()); - for (const snippetButton of snippetButtons) { - snippetButton.addEventListener("click", () => switchSnippet(snippetButton.dataset.demoSnippet)); - } - reload.addEventListener("click", () => { - if (tunnel) showTunnelTarget(tunnel.url); - }); +function htmlScript(value: string) { + return value.replace(/<\/script/gi, "<\\/script"); +} - button.addEventListener("click", async () => { - const startedAt = performance.now(); - button.disabled = true; - reload.disabled = true; - status.textContent = "connecting"; - error.textContent = ""; - - try { - if (tunnel) tunnel.close(); - await evaluateDemo(); - const { createCaptunTunnel } = await captunBrowser; - const options = { fetch: (request) => activeFetch(request) }; - tunnel = await createCaptunTunnel(options); - urlRow.classList.remove("hidden"); - showTunnelTarget(tunnel.url); - status.textContent = "connected in " + Math.round(performance.now() - startedAt) + "ms"; - reload.disabled = false; - } catch (caught) { - status.textContent = "failed"; - error.textContent = caught && caught.stack ? caught.stack : String(caught); - } finally { - button.disabled = false; - } +function stripCommonIndent(source: string) { + const lines = source + .replace(/^\n/, "") + .replace(/\n\s*$/, "") + .split("\n"); + const indents = lines + .filter((line) => line.trim()) + .map((line) => { + const match = line.match(/^[ \t]*/); + return match ? match[0].length : 0; }); + if (!indents.length) return ""; - function previewHtml(url) { - return "MCP server listening at\\n" + escapeHtml(url) + "\\n\\nUse ask_question to prompt this browser tab and return the answer."; - } - - function escapeHtml(value) { - return value.replace(/&/g, "&").replace(//g, ">"); - } + const indent = Math.min(...indents); + return lines.map((line) => (line.trim() ? line.slice(indent) : "")).join("\n"); +} - async function enhanceEditor() { - try { - const [{ EditorView, basicSetup }, { javascript }] = await Promise.all([ - import("https://esm.sh/codemirror@6.0.1"), - import("https://esm.sh/@codemirror/lang-javascript@6.2.4"), - ]); - new EditorView({ - doc: fromCodeSource.value, - extensions: [basicSetup, javascript(), EditorView.editable.of(false)], - parent: fromCodeEditorHost, - }); - editor = new EditorView({ - doc: source.value, - extensions: [basicSetup, javascript(), EditorView.updateListener.of((update) => { - if (update.docChanged) void refreshTunnelFromSource(); - })], - parent: editorHost, - }); - fromCodeSource.classList.add("enhanced"); - fromCodeEditorHost.classList.add("enhanced"); - source.classList.add("enhanced"); - editorHost.classList.add("enhanced"); - } catch (caught) { - console.warn("CodeMirror failed to load; using textarea editor.", caught); - } - } - -