480 lines
23 KiB
HTML
480 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<meta name="theme-color" content="#0c0c10">
|
||
<script>
|
||
(function () {
|
||
try {
|
||
var t = localStorage.getItem('bridgeswarm.site.theme');
|
||
if (t !== 'light' && t !== 'dark') t = 'dark';
|
||
document.documentElement.setAttribute('data-theme', t);
|
||
var meta = document.querySelector('meta[name="theme-color"]');
|
||
if (meta) meta.setAttribute('content', t === 'light' ? '#2dd4bf' : '#0c0c10');
|
||
} catch (e) {
|
||
document.documentElement.setAttribute('data-theme', 'dark');
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<title>BridgeSwarm — Hyperswarm P2P in your browser</title>
|
||
<meta name="description" content="BridgeSwarm brings the Hyperswarm P2P stack into ordinary desktop browsers. A Bare native host runs Hyperswarm, Hyper* storage, and Protomux/HRPC; a browser extension injects window.BridgeSwarm into the page. No signaling server, no forked browser.">
|
||
<meta name="author" content="HoneyPeer, LLC">
|
||
<link rel="canonical" href="https://bridgeswarm.dev/">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
|
||
<link rel="stylesheet" href="/src/styles/global.css">
|
||
<link rel="stylesheet" href="/src/styles/theme-light.css">
|
||
<link rel="stylesheet" href="/src/styles/docs.css">
|
||
<link rel="stylesheet" href="/src/styles/home.css">
|
||
|
||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="48x48" href="/assets/favicons/favicon-48x48.png">
|
||
<link rel="shortcut icon" href="/assets/favicons/favicon.ico">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
|
||
<link rel="manifest" href="/assets/favicons/site.webmanifest">
|
||
<link rel="mask-icon" href="/assets/logo/bridgeswarm-wordmark.svg" color="#2dd4bf">
|
||
<meta name="msapplication-TileImage" content="/assets/favicons/mstile-150x150.png">
|
||
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
|
||
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="BridgeSwarm">
|
||
<meta property="og:title" content="BridgeSwarm — Hyperswarm P2P in your browser">
|
||
<meta property="og:description" content="Peer-to-peer networking, encrypted transport, and Hyper* storage in Chrome, Edge, and Firefox — via a Bare native host, not a server. No signup, AGPL-3.0.">
|
||
<meta property="og:url" content="https://bridgeswarm.dev/">
|
||
<meta property="og:image" content="https://bridgeswarm.dev/assets/brand/og-image.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="BridgeSwarm — Hyperswarm P2P in your browser">
|
||
<meta name="twitter:description" content="Peer-to-peer networking, encrypted transport, and Hyper* storage in Chrome, Edge, and Firefox — via a Bare native host, not a server.">
|
||
<meta name="twitter:image" content="https://bridgeswarm.dev/assets/brand/twitter-card.png">
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@graph": [
|
||
{
|
||
"@type": "Organization",
|
||
"@id": "https://bridgeswarm.dev/#organization",
|
||
"name": "HoneyPeer, LLC",
|
||
"url": "https://bridgeswarm.dev/",
|
||
"logo": "https://bridgeswarm.dev/assets/logo/bridgeswarm-icon-512.png",
|
||
"email": "[email protected]",
|
||
"sameAs": ["https://git.ssh.surf/snxraven/BridgeSwarm"]
|
||
},
|
||
{
|
||
"@type": "SoftwareApplication",
|
||
"@id": "https://bridgeswarm.dev/#software",
|
||
"name": "BridgeSwarm",
|
||
"applicationCategory": "DeveloperApplication",
|
||
"operatingSystem": "macOS, Linux, Windows",
|
||
"url": "https://bridgeswarm.dev/",
|
||
"publisher": { "@id": "https://bridgeswarm.dev/#organization" },
|
||
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
|
||
"license": "https://www.gnu.org/licenses/agpl-3.0.html",
|
||
"downloadUrl": "https://bridgeswarm.dev/download",
|
||
"softwareVersion": "1.0.0",
|
||
"description": "Brings the Hyperswarm P2P stack into desktop browsers via a Bare native messaging host, exposing window.BridgeSwarm to web pages."
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body class="page-home">
|
||
<div class="bg-mesh" aria-hidden="true"></div>
|
||
<div class="bg-grid" aria-hidden="true"></div>
|
||
|
||
<div data-nav></div>
|
||
|
||
<main id="main">
|
||
|
||
<section class="hero">
|
||
<canvas class="hero-canvas" aria-hidden="true"></canvas>
|
||
<div class="hero-veil" aria-hidden="true"></div>
|
||
<div class="container hero-inner">
|
||
<p class="hero-badge"><span class="dot" aria-hidden="true"></span> Peer-to-peer for the ordinary browser</p>
|
||
<div class="hero-brand-lockup">
|
||
<img src="/assets/logo/bridgeswarm-icon-512.png" width="140" height="140" alt="BridgeSwarm — three peer nodes linked by two bridges" decoding="async">
|
||
</div>
|
||
<h1>Hyperswarm in the browser.<br>No server. No fork.</h1>
|
||
<p class="lead">BridgeSwarm runs a real Hyperswarm node next to Chrome, Edge, or Firefox and hands your page a plain <code>window.BridgeSwarm</code> API for encrypted, NAT-punching P2P connections and Hyper* storage.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary btn-lg" href="/download">Install BridgeSwarm</a>
|
||
<a class="btn btn-ghost btn-lg" href="/docs/">Read the docs</a>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="hero-stat">
|
||
<strong data-count-to="5">0</strong>
|
||
<span>Hyper* storage modules</span>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<strong data-count-to="0">0</strong>
|
||
<span>signaling servers required</span>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<strong data-count-to="12" data-count-suffix="+">0+</strong>
|
||
<span>runnable examples</span>
|
||
</div>
|
||
<div class="hero-stat">
|
||
<strong data-count-to="3" data-count-suffix="">0</strong>
|
||
<span>supported browsers</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-scroll-cue" aria-hidden="true">
|
||
<span>Scroll</span>
|
||
<span class="cue-line"></span>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="tech-strip">
|
||
<div class="container tech-strip-inner">
|
||
<span class="tech-item"><span></span>Hyperswarm</span>
|
||
<span class="tech-item"><span></span>Noise</span>
|
||
<span class="tech-item"><span></span>Hypercore</span>
|
||
<span class="tech-item"><span></span>Hyperbee</span>
|
||
<span class="tech-item"><span></span>Hyperdrive</span>
|
||
<span class="tech-item"><span></span>Autobase</span>
|
||
<span class="tech-item"><span></span>Hyperdb</span>
|
||
<span class="tech-item"><span></span>Protomux</span>
|
||
<span class="tech-item"><span></span>HRPC</span>
|
||
<span class="tech-item"><span></span>Bare</span>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="section" id="why" aria-labelledby="why-title">
|
||
<div class="container">
|
||
<div class="section-head center reveal">
|
||
<p class="section-label">Why BridgeSwarm</p>
|
||
<h2 id="why-title">Stop routing every byte through a server you have to pay for and trust</h2>
|
||
<p class="lead" style="margin-inline:auto;">The client–server model puts one machine in the middle of every interaction. BridgeSwarm puts your users directly in touch with each other, with the server relegated to an optional convenience instead of a hard dependency.</p>
|
||
</div>
|
||
|
||
<div class="grid grid-2 reveal">
|
||
<div class="card">
|
||
<h3>Traditional client–server</h3>
|
||
<ul class="feature-list" style="margin-top:1rem;">
|
||
<li>Single point of failure — the server goes down, everyone goes down</li>
|
||
<li>Every message pays a round trip through infrastructure you operate</li>
|
||
<li>Bandwidth costs scale with your user count, not with peer proximity</li>
|
||
<li>All traffic and metadata is visible to whoever runs the server</li>
|
||
<li>Shipping a live feature means shipping a backend</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<h3>BridgeSwarm P2P</h3>
|
||
<ul class="feature-list" style="margin-top:1rem;">
|
||
<li>Peers discover and connect directly — no host to keep online</li>
|
||
<li>Data moves point-to-point over Noise-encrypted sockets</li>
|
||
<li>Bandwidth is distributed across the swarm, not billed to you</li>
|
||
<li>Only participants who join a topic ever see that topic's traffic</li>
|
||
<li>Hyper* storage, replication, and RPC ship in the host — for free</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section section-sm" id="use-cases" aria-labelledby="use-cases-title">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="section-label">Built for</p>
|
||
<h2 id="use-cases-title">What you can build once every tab is a peer</h2>
|
||
<p class="lead">Eight shapes of app that get simpler the moment browsers can talk to each other directly.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container usecase-rail-wrap reveal">
|
||
<div class="usecase-rail">
|
||
<a class="usecase-card" href="/use-cases/#chat">
|
||
<span class="usecase-icon" aria-hidden="true">01</span>
|
||
<h3>P2P chat rooms</h3>
|
||
<p>Topic-scoped rooms with presence, no message broker, no chat backend to scale.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#collab">
|
||
<span class="usecase-icon" aria-hidden="true">02</span>
|
||
<h3>Collaborative apps</h3>
|
||
<p>Shared whiteboards and multiplayer surfaces driven by direct peer connections.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#sync">
|
||
<span class="usecase-icon" aria-hidden="true">03</span>
|
||
<h3>Data sync</h3>
|
||
<p>Hypercore auto-replication keeps append-only logs and Hyperbee stores in sync across peers.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#live-media">
|
||
<span class="usecase-icon" aria-hidden="true">04</span>
|
||
<h3>Live media</h3>
|
||
<p>Host-side <code>bare-ffmpeg</code> VP9 encode streamed to MSE and fanned out over the swarm.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#self-hosted">
|
||
<span class="usecase-icon" aria-hidden="true">05</span>
|
||
<h3>Self-hosted web apps</h3>
|
||
<p>Serve real HTML from the native host on <code>127.0.0.1</code> — no cloud hosting required.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#live-domains">
|
||
<span class="usecase-icon" aria-hidden="true">06</span>
|
||
<h3>Live topic domains</h3>
|
||
<p>Treat a Hyperswarm topic like a rendezvous address peers "dial" instead of a DNS name.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#firewall">
|
||
<span class="usecase-icon" aria-hidden="true">07</span>
|
||
<h3>Firewall-controlled rooms</h3>
|
||
<p>Allowlist, denylist, and ban peers by public key with <code>swarm.setFirewall</code>.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
<a class="usecase-card" href="/use-cases/#dev-tooling">
|
||
<span class="usecase-icon" aria-hidden="true">08</span>
|
||
<h3>Developer tooling</h3>
|
||
<p>HRPC and Protomux give you typed, streaming RPC over a P2P transport without hand-rolled framing.</p>
|
||
<span class="usecase-link">Learn more →</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="features" aria-labelledby="features-title">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="section-label">What's in the host</p>
|
||
<h2 id="features-title">A full P2P stack, not a wrapper around WebRTC</h2>
|
||
<p class="lead">The native host is a real <a href="https://github.com/holepunchto/bare">Bare</a> runtime running the same modules that power Holepunch's Pear and Keet — reachable from any page through the extension.</p>
|
||
</div>
|
||
|
||
<div class="feature-row reveal">
|
||
<div class="feature-copy">
|
||
<p class="section-label">Transport</p>
|
||
<h2>Peer-to-peer, secured by default</h2>
|
||
<p class="lead">Every connection is discovered through the Hyperswarm DHT and encrypted before your first byte moves — no certificates, no key exchange to write.</p>
|
||
<ul class="feature-list">
|
||
<li><strong>Noise encryption</strong> — every socket is a Noise-protocol secret stream, automatically.</li>
|
||
<li><strong>NAT traversal</strong> — UDP hole-punching gets peers behind home routers and firewalls talking directly.</li>
|
||
<li><strong>Unique identities</strong> — each tab gets its own cryptographic key pair.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-visual">
|
||
<pre><code>const swarm = new BridgeSwarm({ appName: 'my-app' });
|
||
await swarm.join('my-topic');
|
||
|
||
swarm.on('connection', (conn, peerInfo) => {
|
||
console.log('peer:', peerInfo.publicKey);
|
||
conn.write('hello, peer');
|
||
});</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-row reverse reveal">
|
||
<div class="feature-copy">
|
||
<p class="section-label">Storage & protocols</p>
|
||
<h2>A real data stack, not a wrapper</h2>
|
||
<p class="lead">Hypercore, Hyperbee, Hyperdrive, Autobase, and Hyperdb run in the host and are callable straight from the page.</p>
|
||
<ul class="feature-list">
|
||
<li><strong>Hyper* storage</strong> — append-only logs, key/value stores, a P2P filesystem, multi-writer logs, and a schema-based database.</li>
|
||
<li><strong>Protomux</strong> — multiplex your own message protocols over one connection, in-page.</li>
|
||
<li><strong>HRPC</strong> — typed, streaming RPC attached on the host with <code>attachHrpc</code>.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-visual">
|
||
<pre><code>await BridgeSwarm.request('beePut', { key: 'title', value: 'Q3 plan' });
|
||
const doc = await BridgeSwarm.request('beeGet', { key: 'title' });
|
||
|
||
await BridgeSwarm.request('attachHrpc', { connId });
|
||
const res = await swarm.hrpcCall(connId, 'ping', { value: 'hi' });</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-row reveal">
|
||
<div class="feature-copy">
|
||
<p class="section-label">Media</p>
|
||
<h2>Live encode that never touches the page</h2>
|
||
<p class="lead"><code>bare-ffmpeg</code> runs on the host: probe, transform, batch transcode, and live VP9/WebM encode straight to MSE or a peer connection.</p>
|
||
<ul class="feature-list">
|
||
<li><strong>Live sessions</strong> — push captured frames in, stream encoded segments out.</li>
|
||
<li><strong>Batch jobs</strong> — image/video probing, resizing, and format conversion.</li>
|
||
<li><strong>Flexible egress</strong> — page playback, swarm fan-out, or archive to disk, in any combination.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-visual">
|
||
<pre><code>const live = BridgeSwarm.media.liveSession(videoEl);
|
||
await live.start({ width: 640, height: 360, fps: 10 });
|
||
await live.pushFrame(canvas);
|
||
await live.subscribe({ swarm: { connIds: [conn.connId] } });</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-row reverse reveal">
|
||
<div class="feature-copy">
|
||
<p class="section-label">Operations</p>
|
||
<h2>Control Center & examples, out of the box</h2>
|
||
<p class="lead">Everything autosaves. There is no config file to hand-edit and no separate deploy step for the demo gallery.</p>
|
||
<ul class="feature-list">
|
||
<li><strong>Control Center</strong> — live Overview, Swarms, Connections, and Activity views, plus Settings.</li>
|
||
<li><strong>Examples server</strong> — one toggle serves a dozen demos at <code>127.0.0.1:4173</code>.</li>
|
||
<li><strong>Debug logging</strong> — flip it on in Settings when a connection misbehaves.</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature-visual">
|
||
<pre><code>// extension -> host, on settings change
|
||
examplesServer.start({ host: '127.0.0.1', port: 4173 })
|
||
// host responds
|
||
{ running: true, url: 'http://127.0.0.1:4173/' }</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section arch-section" id="architecture" aria-labelledby="architecture-title">
|
||
<div class="container">
|
||
<div class="section-head center reveal">
|
||
<p class="section-label">How it fits together</p>
|
||
<h2 id="architecture-title">Three layers: page, extension, Bare host</h2>
|
||
<p class="lead" style="margin-inline:auto;">The page never talks to the operating system directly. Everything crosses a narrow, auditable boundary.</p>
|
||
</div>
|
||
|
||
<div class="arch-diagram reveal">
|
||
<div class="arch-node">
|
||
<div class="node-icon" aria-hidden="true">◧</div>
|
||
<h3>Web page</h3>
|
||
<p><code>window.BridgeSwarm</code></p>
|
||
</div>
|
||
<div class="arch-arrow" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h14M13 6l6 6-6 6"/></svg>
|
||
postMessage
|
||
</div>
|
||
<div class="arch-node">
|
||
<div class="node-icon" aria-hidden="true">⬡</div>
|
||
<h3>Extension (MV3)</h3>
|
||
<p>background + content script</p>
|
||
</div>
|
||
<div class="arch-arrow" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h14M13 6l6 6-6 6"/></svg>
|
||
native messaging
|
||
</div>
|
||
<div class="arch-node">
|
||
<div class="node-icon" aria-hidden="true">⌘</div>
|
||
<h3>Bare host</h3>
|
||
<p>Hyperswarm · Hyper* · HRPC</p>
|
||
</div>
|
||
<div class="arch-arrow" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12h14M13 6l6 6-6 6"/></svg>
|
||
Noise P2P
|
||
</div>
|
||
<div class="arch-node is-info">
|
||
<div class="node-icon" aria-hidden="true">◎</div>
|
||
<h3>Remote peers</h3>
|
||
<p>other browsers running BridgeSwarm</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="arch-details reveal">
|
||
<div class="arch-detail">
|
||
<h4>postMessage bridge</h4>
|
||
<p>The content script injects <code>api.js</code>; the page and extension talk only through <code>window.postMessage</code>.</p>
|
||
</div>
|
||
<div class="arch-detail">
|
||
<h4>Native messaging</h4>
|
||
<p>4-byte little-endian length + UTF-8 JSON between the extension and <code>com.bridgeswarm</code>, ~1 MB per message.</p>
|
||
</div>
|
||
<div class="arch-detail">
|
||
<h4>Noise encryption</h4>
|
||
<p>Every peer connection is a Noise secret stream, encrypted and authenticated before data moves.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="diagram reveal" style="margin-top:2.5rem;">
|
||
<pre class="mermaid">
|
||
sequenceDiagram
|
||
participant Page
|
||
participant ContentScript
|
||
participant Background
|
||
participant NativeHost
|
||
Page->>ContentScript: postMessage (bridge-swarm-bridge)
|
||
ContentScript->>Background: runtime.sendMessage (send)
|
||
Background->>NativeHost: port.postMessage {id, type, payload}
|
||
NativeHost->>NativeHost: handleMessage -> reply(result)
|
||
NativeHost->>Background: messenger.send {id, type: response}
|
||
Background->>ContentScript: sendResponse(payload)
|
||
ContentScript->>Page: dispatchEvent (bridge-swarm-bridge-response)
|
||
</pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="quickstart" aria-labelledby="quickstart-title">
|
||
<div class="container">
|
||
<div class="section-head center reveal">
|
||
<p class="section-label">Quick start</p>
|
||
<h2 id="quickstart-title">Install, load the extension, join a topic</h2>
|
||
<p class="lead" style="margin-inline:auto;">The full guide covers Windows, verification, and troubleshooting. This is the fast path.</p>
|
||
</div>
|
||
|
||
<div class="install-tabs reveal">
|
||
<button type="button" class="install-tab is-active" data-install-tab="mac">macOS / Linux</button>
|
||
<button type="button" class="install-tab" data-install-tab="win">Windows</button>
|
||
</div>
|
||
|
||
<div class="install-card reveal">
|
||
<div class="install-panel is-active" data-install-panel="mac">
|
||
<pre><code>curl -fsSL https://git.ssh.surf/snxraven/BridgeSwarm/raw/branch/main/scripts/web-installer.sh | bash</code></pre>
|
||
</div>
|
||
<div class="install-panel" data-install-panel="win">
|
||
<pre><code>irm https://git.ssh.surf/snxraven/BridgeSwarm/raw/branch/main/scripts/install.ps1 | iex</code></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quickstart-steps reveal">
|
||
<div class="quickstart-step">
|
||
<div class="step-num">1</div>
|
||
<h3>Install the host</h3>
|
||
<p>Installs to <code>~/.bridgeswarm</code> and drops <code>BridgeSwarm-1.0.0.zip</code> / <code>.xpi</code> into <code>~/Downloads</code>.</p>
|
||
</div>
|
||
<div class="quickstart-step">
|
||
<div class="step-num">2</div>
|
||
<h3>Load the extension</h3>
|
||
<p>Open <code>chrome://extensions</code>, enable Developer mode, drag the zip in. Confirm the ID reads <code>jhmbaojjfkkpoolhkoohklbjokdmbdpm</code>, then restart.</p>
|
||
</div>
|
||
<div class="quickstart-step">
|
||
<div class="step-num">3</div>
|
||
<h3>Join a topic</h3>
|
||
<p><code>await swarm.join('my-topic')</code> and handle the <code>connection</code> event. That's the whole API surface for chat.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-6 reveal">
|
||
<a class="btn btn-secondary" href="/download">Full install guide →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta-band reveal">
|
||
<div class="container">
|
||
<div class="cta-card">
|
||
<p class="section-label" style="justify-content:center;">Get started</p>
|
||
<h2>Give your page a real P2P stack</h2>
|
||
<p class="lead">Free, source-available under AGPL-3.0, and running on the same modules that power Holepunch's Pear runtime.</p>
|
||
<div class="cta-actions">
|
||
<a class="btn btn-primary btn-lg" href="/download">Install BridgeSwarm</a>
|
||
<a class="btn btn-ghost btn-lg" href="/use-cases/">Browse use cases</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<div data-footer></div>
|
||
|
||
<script type="module" src="/src/js/site.js"></script>
|
||
<script type="module" src="/src/js/home.js"></script>
|
||
</body>
|
||
</html>
|