nix-wasm Browser Demo

Browser Usage

All tools run entirely in your browser using WebAssembly. Click a package to load it, then use the tool sections below.

Cloudflare Workers

import { WASI } from '@cloudflare/workers-wasi';

export default {
  async fetch(request, env) {
    // Fetch WASM module from R2
    const wasmUrl = 'https://pub-7a62d9c6620b4b96ad8e5b6f89745725.r2.dev/jq-1.7.1-wasm32-wasi.wasm';
    const wasmModule = await WebAssembly.compileStreaming(fetch(wasmUrl));

    // Setup WASI with stdin
    const stdin = new TextEncoder().encode('{"name": "test"}');
    const wasi = new WASI({ args: ['jq', '.name'], stdin });

    // Run
    const instance = await WebAssembly.instantiate(wasmModule, {
      wasi_snapshot_preview1: wasi.wasiImport
    });
    await wasi.start(instance);

    return new Response(wasi.getStdoutString());
  }
};

Node.js / Deno

import { WASI } from 'node:wasi';
import { readFile } from 'node:fs/promises';

const wasi = new WASI({
  version: 'preview1',
  args: ['jq', '.name'],
  stdin: 0, stdout: 1, stderr: 2
});

const wasmBuffer = await readFile('./jq.opt.wasm');
const wasmModule = await WebAssembly.compile(wasmBuffer);
const instance = await WebAssembly.instantiate(wasmModule, wasi.getImportObject());
wasi.start(instance);

Browser JavaScript

// Minimal WASI shim for browsers (see source of this page for full implementation)
const registry = await fetch('https://pub-7a62d9c6620b4b96ad8e5b6f89745725.r2.dev/registry.json').then(r => r.json());
const pkg = registry.packages['jq'];
const wasmBytes = await fetch(pkg.versions[pkg.latest].url).then(r => r.arrayBuffer());
const module = await WebAssembly.compile(wasmBytes);

// Instantiate with WASI imports
const wasi = new BrowserWASI({ args: ['jq', '.name'], stdin: '{"name": "test"}' });
const instance = await WebAssembly.instantiate(module, { wasi_snapshot_preview1: wasi.exports });
wasi.setMemory(instance.exports.memory);
instance.exports._start();
console.log(wasi.getOutput()); // "test"

Registry API

// Fetch package registry
const registry = await fetch('https://pub-7a62d9c6620b4b96ad8e5b6f89745725.r2.dev/registry.json').then(r => r.json());

// Get package info
const pkg = registry.packages['jq'];
console.log(pkg.latest);                        // "1.7.1"
console.log(pkg.versions['1.7.1'].url);         // WASM URL
console.log(pkg.versions['1.7.1'].hash);        // SHA-256 for verification
console.log(pkg.versions['1.7.1'].size);        // Size in bytes

GitHub Repository · Documentation