Browser Native Compute, stop renting computers you already own

The part nobody wants to admit

While teams were drawing boxes and arrows and convincing themselves their simple app needed a cluster, the browser quietly became a real computer. Not a document viewer. A portable runtime with networking, storage, cryptography, GPU compute, and a sane sandbox that ships on billions of devices. You can already open two tabs, do a cryptographic handshake, form an encrypted peer connection, store data locally, run kernels on the GPU, and keep working offline with standard platform APIs. WebRTC gives encrypted peer to peer transport, Web Crypto exposes audited primitives, WebAssembly runs compiled code at competitive speeds, WebGPU exposes modern GPU pipelines, and Service Workers with IndexedDB make local first design practical. These are open standards that ship in mainstream browsers.

If you keep pushing JSON through a server you do not need, that is a business decision, not a technical limitation.

Reality check

WebRTC is a secure transport stack that negotiates connectivity through ICE, then runs SRTP for media and SCTP data channels inside DTLS. Encryption is not optional here. Data channels are SCTP over DTLS by spec, with reliable ordered and low latency unordered modes available.

WebGPU is a modern API that maps to Metal, Vulkan, and Direct3D twelve. It enables compute shaders in the browser and practical local inference for many workloads.

WebAssembly is a safe portable binary format. It targets languages like Rust, C, and C plus plus and runs beside JavaScript with predictable performance for compute heavy paths.

Web Crypto provides audited primitives such as ECDSA P two five six and AES GCM from both windows and workers. You do not need to ship a crypto library for basic signatures, key generation, and symmetric encryption.

Service Workers and IndexedDB give you a programmable proxy and durable structured storage on the device. Offline first is not a trick, it is the default posture when you use the platform.

Modern JS engines JIT to native with tiered compilers like Sparkplug, Maglev, and TurboFan so the hot code gets fast.

The stack, for people who ship

JavaScript for orchestration, IO, workers, and glue. The engine tiering exists to make hot paths fast.
WebAssembly for deterministic compute, SIMD, and predictable memory. Use it when the loop matters.
WebGPU for graphics and general compute. It is the web face of modern GPU stacks.
WebRTC for secure peer transport with ICE, STUN or TURN, DTLS, SRTP, and SCTP data channels.
Web Crypto for keys, signatures, agreement, and authenticated encryption.
Service Worker with IndexedDB for offline first logic and durable client side state.

What I actually built with this approach:

AIMless
A single page peer to peer chat that runs directly in the browser. Two users open the same HTML file, exchange a session blob, and a WebRTC data channel opens. No app server and no accounts. Transport encryption is handled by WebRTC. You can literally email the file to someone and talk.
NyxMesh
A peer to peer distributed compute demo that turns browsers into coordinator and worker roles over WebRTC. It includes a small task library like matrix multiply, prime search, Mandelbrot, array sort, hash work, and Monte Carlo pi, and it reports basic metrics. Copy and paste signaling on purpose. The README is explicit about limits. The point is to prove the pattern with zero backend.
NyxPay
A browser only payments experiment. The page builds transactions on the client, signs with a wallet, and broadcasts via RPC. No custom gateway in the middle. The current repo is an in progress toolkit, shaped to keep keys on the device and to keep the page as the tool not the custodian.
nyx local
A file based payment terminal that packages the payments logic into a self contained HTML document. You generate a checkout page, send the file any way you want, the recipient opens it, connects a wallet, and broadcasts. Distribution is as simple as a file.

Security, where most people get it wrong

WebRTC requires encryption. You do not add it later. DTLS for data channels and DTLS SRTP for media are part of the protocol. Keys are derived inside the transport. This is not your leaky endpoint. It is a standards based secure channel implemented by browser vendors and vetted in the open.

The correct place for user keys is the device. The Web Crypto API exposes a careful surface for generating and using keys including non extractable keys. Sign locally. Encrypt locally. Sync only what is necessary.

You still have to care about XSS and supply chain risk. Use CSP, SRI, and fewer dependencies. The browser gives you strong building blocks, not immunity.

Philosophy, take responsibility

Local first. Data begins on devices and stays there unless there is a reason to move it. Servers can replicate and assist, they are not the source of truth.
Zero lock in. Use plain files and standards. HTML for UI, JSON or SQLite for data, Web APIs for transport and compute. If you need to move, you move.
Servers should be replaceable. If you need rendezvous for signaling or a relay for stubborn networks, keep it tiny and open. TURN exists for a reason. Pay the few dollars, keep it optional.
Complexity is a tax. If your MVP cannot ship as a static site and a single worker, you are probably rebuilding solved problems. Start smaller.

Addressing the cope

NAT traversal. That is what ICE was built for. Use STUN first and fall back to TURN when needed. The data still stays encrypted end to end.

Big data. IndexedDB stores significant structured data in the client. Most product data is smaller than the slide deck suggests.

Enterprise. Enterprises run modern browsers. Modern browsers run this stack. If a policy forbids it, the blocker is policy, not physics.

Performance. Use the right tool. JS for orchestration, Wasm for hot loops, WebGPU for kernels. Expect wins in compute heavy paths and parity elsewhere. The research and vendor notes are public.

Stop reading. Start building

This is the full AIMless single file chat. Copy it into its own HTML file to run it. Below it is shown as escaped code for reading.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AIMless · P2P Chat (single file)</title>
<style>
  :root { --bg:#0b0b0f; --panel:#16161d; --ink:#eaeaf2; --muted:#a7a7b3; --accent:#9b5cff; --accent2:#b47dff; }
  *{box-sizing:border-box}
  body{margin:0;background:radial-gradient(1200px 600px at 10% 0%, #141421 0%, var(--bg) 60%);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;padding:18px;display:flex;justify-content:center}
  .wrap{width:100%;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .card{background:var(--panel);border:1px solid #222231;border-radius:14px;padding:14px}
  h1{margin:0 0 8px;font-size:18px}
  h2{margin:0 0 10px;font-size:15px;color:var(--muted)}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .btn{background:var(--accent);color:#0b0b0f;border:0;padding:8px 12px;border-radius:10px;font-weight:700;cursor:pointer}
  .btn:hover{background:var(--accent2)}
  .btn.secondary{background:#2a2a38;color:#var(--ink);border:1px solid #333349}
  .btn.danger{background:#ff5757;color:#0b0b0f}
  textarea,input{width:100%;background:#0f0f16;color:var(--ink);border:1px solid #282838;border-radius:8px;padding:10px}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#24243a;color:var(--ink);font-size:12px}
  .ok{background:#1d3d23;color:#7dff8b}.warn{background:#3d3d1d;color:#ffe57d}.bad{background:#3d1d1d;color:#ff7d7d}
  .chat{height:320px;overflow:auto;border:1px solid #242436;border-radius:10px;background:#0f0f16;padding:10px}
  .msg{margin:6px 0}
  .me .bubble{background:#7b61ff;color:#fff}
  .peer .bubble{background:#202437}
  .bubble{display:inline-block;padding:8px 12px;border-radius:14px;max-width:70%;word-wrap:break-word}
  .status{margin-top:8px}
</style>
</head>
<body>
<div class="wrap">
  <!-- Signaling -->
  <div class="card">
    <h1>🗨️ AIMless · P2P Chat</h1>
    <h2>1) Role</h2>
    <div class="row">
      <label><input type="radio" name="role" value="host" checked> Host</label>
      <label><input type="radio" name="role" value="peer"> Peer</label>
      <span id="pcState" class="pill">idle</span>
      <span id="iceState" class="pill">idle</span>
      <span id="dcState" class="pill">idle</span>
    </div>

    <h2>2) Signaling (copy/paste blob)</h2>
    <div class="row">
      <button id="btnCreate" class="btn">Create Offer/Answer</button>
      <button id="btnCopy" class="btn secondary">📋 Copy</button>
      <button id="btnReset" class="btn danger">Reset</button>
    </div>

    <label class="mono" style="margin-top:8px">Your description (Base64)</label>
    <textarea id="local" rows="6" class="mono" placeholder="Your Base64 blob will appear here…" readonly></textarea>

    <label class="mono" style="margin-top:8px">Peer description (Base64 / JSON / raw SDP)</label>
    <textarea id="remote" rows="6" class="mono" placeholder="Paste the other side’s blob here…"></textarea>
    <div class="row" style="margin-top:8px">
      <button id="btnSetRemote" class="btn">Set Remote</button>
      <span id="status" class="status"></span>
    </div>
  </div>

  <!-- Chat -->
  <div class="card">
    <h2>3) Chat</h2>
    <div class="row">
      <input id="name" placeholder="Your name (optional)">
    </div>
    <div id="chat" class="chat"></div>
    <div class="row" style="margin-top:8px">
      <input id="msg" placeholder="Type a message…" disabled>
      <button id="send" class="btn" disabled>Send</button>
    </div>
  </div>
</div>

<script>
/* ---------- shorthands ---------- */
const $ = id => document.getElementById(id);
const roleInputs = document.querySelectorAll('input[name="role"]');

/* ---------- state ---------- */
let role = 'host';
let pc, dc;

/* ---------- config ---------- */
const rtcConfig = {
  iceServers: [
    { urls: "stun:stun.l.google.com:19302" },
    { urls: "stun:stun1.l.google.com:19302" }
  ],
  iceCandidatePoolSize: 10
};

/* ---------- ui helpers ---------- */
function pill(el, text, cls=""){ el.textContent=text; el.className="pill "+cls; }
function setStatus(t,c){ $('status').textContent=t; $('status').style.color=c||""; }
function addMsg(name, text, mine=false){
  const div=document.createElement('div'); div.className='msg '+(mine?'me':'peer');
  const b=document.createElement('div'); b.className='bubble'; b.textContent=(name?name+': ':'')+text;
  div.appendChild(b); $('chat').appendChild(div); $('chat').scrollTop=$('chat').scrollHeight;
}
function enableChat(on){ $('msg').disabled=!on; $('send').disabled=!on; }

/* ---------- robust blob handling ---------- */
function pack(desc) {
  // RTCSessionDescriptionInit -> Base64
  const json = JSON.stringify(desc);
  return btoa(unescape(encodeURIComponent(json)));
}
function unpackBase64(b64) {
  const json = decodeURIComponent(escape(atob(b64)));
  return JSON.parse(json);
}
function looksLikeJson(s){ return /^\s*\{/.test(s.trim()); }
function looksLikeSdp(s){ return /^\s*v=0\s*/.test(s.trim()); }

/* ---------- peer connection ---------- */
function setupPC(){
  if(pc){ try{pc.close();}catch{} }
  pc = new RTCPeerConnection(rtcConfig);

  pc.onconnectionstatechange = () => {
    const s = pc.connectionState;
    pill($('pcState'), s, s==='connected'?'ok':(s==='failed'||s==='closed'?'bad':'warn'));
    if (s==='connected' || s==='completed') { enableChat(true); setStatus('PC connected ✓','#7dff8b'); }
    if (s==='disconnected'||s==='failed'||s==='closed') enableChat(false);
  };

  pc.oniceconnectionstatechange = () => {
    const s = pc.iceConnectionState;
    pill($('iceState'), s, (s==='connected'||s==='completed')?'ok':(s==='failed'?'bad':'warn'));
  };

  // Non-trickle-ish: dump Base64 localDescription after candidates settle briefly
  let gatherTimer=null;
  pc.onicecandidate = () => {
    if (gatherTimer) clearTimeout(gatherTimer);
    gatherTimer = setTimeout(() => {
      if (pc.localDescription) $('local').value = pack(pc.localDescription);
    }, 300);
  };

  if (role==='host') {
    dc = pc.createDataChannel('chat',{ordered:true});
    wireDC(dc);
  } else {
    pc.ondatachannel = (ev)=>{ dc = ev.channel; wireDC(dc); };
  }
}

function wireDC(channel){
  pill($('dcState'), 'connecting', 'warn');

  channel.onopen = ()=>{
    pill($('dcState'),'open','ok');
    enableChat(true);
    $('msg').focus();
    setStatus('DataChannel open ✓','#7dff8b');
  };

  channel.onclose = ()=>{
    pill($('dcState'),'closed','bad');
    enableChat(false);
    setStatus('Disconnected','#ff7d7d');
  };

  channel.onerror = (e)=>{
    pill($('dcState'),'error','bad');
    setStatus('DC error','orange');
    console.error('DataChannel error:', e);
  };

  channel.onmessage = (ev)=>{
    try{
      const {name,text}=JSON.parse(ev.data);
      addMsg(name||'Peer', text, false);
    }catch{
      addMsg('Peer', String(ev.data), false);
    }
  };
}

/* ---------- actions ---------- */
async function createLocal(){
  if(!pc) setupPC();
  if(role==='host'){
    const offer = await pc.createOffer();
    await pc.setLocalDescription(offer);
    setStatus('Gathering ICE for offer…');
  } else {
    if (!pc.remoteDescription){ setStatus('Set remote offer first', '#ffe57d'); return; }
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    setStatus('Gathering ICE for answer…');
  }
}

async function setRemote(){
  try{
    const raw = $('remote').value.trim();
    if (!raw) { setStatus('Paste peer blob first', '#ffe57d'); return; }

    let desc;
    if (looksLikeJson(raw)) {
      // Proper JSON (sdp should include \r\n escapes)
      desc = JSON.parse(raw);
    } else if (/^[A-Za-z0-9+/=\s]+$/.test(raw) && !looksLikeSdp(raw)) {
      // Base64 (preferred)
      desc = unpackBase64(raw.replace(/\s+/g,''));
    } else if (looksLikeSdp(raw)) {
      // Raw SDP text pasted directly from some apps
      desc = { type: (role === 'host' ? 'answer' : 'offer'), sdp: raw };
    } else {
      throw new Error('Unrecognized blob format');
    }

    if(!pc) setupPC();
    await pc.setRemoteDescription(desc);
    setStatus(`Remote ${desc.type} set`);
  }catch(e){
    console.error(e);
    setStatus('Invalid blob (try Base64 or raw SDP)', '#ff7d7d');
  }
}

function send(){
  const text = $('msg').value.trim();
  if(!text) return;
  if(!dc || dc.readyState!=='open'){
    setStatus('Not connected (DC not open)', '#ffe57d');
    return;
  }
  const name = $('name').value.trim();
  dc.send(JSON.stringify({name, text}));
  addMsg(name||'Me', text, true);
  $('msg').value='';
}

function resetAll(){
  try{ dc&&dc.close(); }catch{} try{ pc&&pc.close(); }catch{}
  pc=null; dc=null;
  $('local').value=''; $('remote').value='';
  $('chat').innerHTML='';
  enableChat(false);
  pill($('pcState'),'idle'); pill($('iceState'),'idle'); pill($('dcState'),'idle');
  setStatus('reset');
}

/* ---------- wire up ---------- */
roleInputs.forEach(r=>r.addEventListener('change',()=>{ role=r.value; resetAll(); setupPC(); }));
$('btnCreate').onclick=createLocal;
$('btnSetRemote').onclick=setRemote;
$('btnCopy').onclick=async()=>{ 
  const t=$('local').value.trim(); if(!t){ setStatus('Nothing to copy','#ffe57d'); return; }
  try{ await navigator.clipboard.writeText(t); setStatus('Copied Base64 ✓','#7dff8b'); }catch{ setStatus('Copy failed','#ff7d7d'); }
};
$('btnReset').onclick=resetAll;
$('send').onclick=send;
$('msg').addEventListener('keydown',e=>{ if(e.key==='Enter'){ e.preventDefault(); send(); }});

/* ---------- init ---------- */
setupPC();
enableChat(false);

// tip on file:// vs localhost
if (location.protocol === 'file:') {
  setStatus('Tip: use http://localhost or HTTPS (WebRTC may be restricted on file://)', '#ffe57d');
}
</script>
</body>
</html>

AIMless is a tiny peer to peer chat that fits in a single file. It is just index.html. Open it from your filesystem and it works. Two browsers copy and paste a Base64 session blob, then WebRTC opens an end to end encrypted data channel with no server in the middle. The whole thing is roughly 300 lines and about 10 KB of JavaScript, no build and no npm. Test it by yourself, test it with a friend, test it with me, test it locally, test it online, put it on a USB stick. It just works.

The future that is already here

In the next wave, the successful apps will be browser native for a boring reason: economics. When the platform gives you secure networking, local storage, and accelerated compute, the server becomes an optional add on instead of a constant dependency. That means fewer moving parts, fewer breach surfaces, fewer bills, and more trust because user data stays with the user.

Vision

Create software that boots from a single file and grows by composition, not by permission.
Make peer to peer the default path, with encryption that is on by design and not a checkbox.
Keep data local first, sync only when there is a reason, and let users carry their keys.
Turn spare browser time into shared compute, and turn shared compute into shared value.
Replace accounts with keys, replace backends with protocols, replace lock in with files.

If we do this well, the next wave of apps will cost almost nothing to run, will fail less often, and will treat users as peers rather than rows in a database.