标签：#WebAssembly

Cloudflare recently introduced Kitesurf, a lightweight browser built for automated workloads. Kitesurf runs browser components in isolated WebAssembly/Rust environments on Cloudflare Workers and supports the Chrome DevTools Protocol, allowing tools such as Playwright and Puppeteer to drive it with lower resource overhead than a full Chromium browser. By Renato Losio

Most free chess game review gives you one game per day. Chess.com works that way, and so does almost every smaller site offering the feature. I assumed for a long time that this was just a paywall placed where it hurts. It is partly that. But there is a real cost sitting behind the cap, and once I worked out what the cost was, I built my own analysis site differently. The cost of one game review Reviewing a 40 move game means evaluating about 80 positions. Give the engine two seconds on each one and you have spent close to three minutes of CPU. None of it is cacheable, because your game is not anyone else's game. Run that on your own hardware and you pay for every minute. A thousand people reviewing one game a day is roughly 50 CPU hours daily, for a feature you are giving away. The quota is not greed. It is the number that stops the free tier from eating the company. Which raises a more interesting question than "how do I price this". What happens if you delete the cost instead of rationing it? Move the engine to the client Stockfish compiles to WebAssembly. Put it in a Web Worker and the visitor's own processor spends those three minutes. Your server ships static files and never sees a chess position. The whole free tier problem disappears, because there is no per-user cost left to control. Nothing to meter, so nothing to cap. Getting started is unremarkable: const engine = new Worker ( " stockfish.js " ); engine . postMessage ( " uci " ); engine . postMessage ( " isready " ); After that you speak UCI over postMessage . Set a position, ask the engine to think, and read results off the message stream: engine . postMessage ( `position fen ${ fen } ` ); engine . postMessage ( `go depth 15 movetime 2000` ); That is the pitch. Now the parts nobody mentions. The protocol is strings, and it is asynchronous UCI was designed for a pipe between two processes. You get that pipe, faithfully, with all of its ergonomics intact. The engine answers with lines like this: info dept

I shipped four browser-only video tools with ffmpeg.wasm: trim, compress, video-to-GIF and MP3 extraction. Files never leave the browser, nothing to install. Trim · Compress · GIF · MP3 (Korean UI, but the buttons are obvious) Getting there, I hit four walls. Every one of them surfaced as a single "conversion failed" line in the UI and nothing in the console . Writing them down for the next person. Stack: Next.js App Router + webpack, @ffmpeg/ffmpeg 0.12, self-hosted core. 1. webpack hijacks the dynamic import inside the worker @ffmpeg/ffmpeg spawns its worker like this: new Worker ( new URL ( " ./worker.js " , import . meta . url ), { type : " module " }); webpack recognises the pattern and bundles the worker. Fine. But it also rewrites the import(coreURL) inside that worker to go through its own module loader. The core URL arrives at runtime as a blob: URL, which webpack's loader has never heard of, so it dies with Cannot find module 'blob:...' . The error is thrown inside the worker, so the main-thread console stays empty. Fix: keep the worker out of the bundle. Copy node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js to public/ffmpeg/<version>/lib/ and pass it via classWorkerURL in load() . Now the untouched worker runs. 2. classWorkerURL needs the origin Passing a path like /ffmpeg/0.12.x/lib/worker.js is not enough. The library resolves it with new URL(classWorkerURL, import.meta.url) , and inside the bundle import.meta.url is a build-time file:///C:/... path. So it goes looking for file:///C:/ffmpeg/... and fails. const BASE = `/ffmpeg/ ${ FFMPEG_VERSION } ` ; await ffmpeg . load ({ coreURL : ` ${ location . origin }${ BASE } /core/ffmpeg-core.js` , wasmURL : ` ${ location . origin }${ BASE } /core/ffmpeg-core.wasm` , classWorkerURL : ` ${ location . origin }${ BASE } /lib/worker.js` , }); Prefix location.origin and it works. 3. You cannot build a GIF palette with -vf For decent GIF quality you run palettegen first and paletteuse second. Doing it in one pass needs

The Problem: Candidate Code Without Trust You're using Cursor, Claude Code, or GitHub Copilot. The AI gives you three implementation options for the same feature. AI: "Here are three approaches: A) Quick but uses unsafe B) Slower but memory-safe C) Balanced tradeoffs" You: "Which one should I ship?" AI: "It depends..." That "it depends" is where responsibility falls through the cracks. Tests tell you if code compiles and passes specs. But they don't tell you about security, performance, maintainability, or resource limits — all at once. You end up making the call by gut feel. This essay is about building a system that doesn't let that happen. The Solution: Multi-Axis Scoring I built SafeCode Arena — an automated verifier that evaluates code candidates across five axes simultaneously, scores each, and surfaces the tradeoffs. The Five Axes Axis Weight Computation Correctness 50% compile (40%) + tests (40%) + property tests (20%) Security 20% unsafe heuristics (50%) + clippy warnings (50%) Performance 15% relative compile+test time across candidates Maintainability 10% function-length heuristics (60%) + clippy (40%) Resource Usage 5% pass/fail of sandboxed Wasm execution Why These Five? Correctness dominates — code that doesn't work is valueless, so it's 50% Security is explicit — unsafe compiles fine, but you need to detect it yourself Performance and maintainability matter equally — a fast mess vs. a slow masterpiece aren't comparable Resource limits are real — a 100-point algorithm that consumes 2GB is a fail in production Example Scorecard Candidate A: 85 points ├─ correctness: 100 (all tests pass) ├─ security: 60 (2 unsafe blocks flagged) ├─ performance: 70 (10% slower than B) ├─ maintainability: 85 (avg function 25 lines) └─ resource_usage: 80 (Wasm sandbox: 512MB, OK) Candidate B: 92 points ✓ Recommended ├─ correctness: 95 (1 edge case warning) ├─ security: 95 (no unsafe) ├─ performance: 95 (fastest) ├─ maintainability: 88 (avg function 20 lines) └─ resource_usa

Why Rust and WebAssembly Are Replacing JavaScript for Heavy AI Workloads in 2026 While JavaScript remains the reigning language for web UI rendering, high-throughput client-side compute—such as local browser AI inference, video encoding, and cryptographic verification —has completely shifted to Rust compiled to WebAssembly (WASM) . In 2026, running 1B+ parameter models directly inside the browser using WebGPU and WASM SIMD has become standard practice. ⚡ Benchmarks: JS vs WASM SIMD execution Execution Time (Lower is Better) ┌────────────────────────────────────────────────────────┐ │ JavaScript (V8 Engine) : █ █ █ █ █ █ █ █ █ █ 1,420 ms │ │ Rust WASM SIMD : █ █ 210 ms │ └────────────────────────────────────────────────────────┘ Building a Rust WASM Compute Module Add the wasm-bindgen dependency in your Cargo.toml : [package] name = "wasm_ai_engine" version = "0.1.0" edition = "2021" [lib] crate-type = [ "cdylib" ] [dependencies] wasm-bindgen = "0.2" Implement high-speed array processing in src/lib.rs : use wasm_bindgen :: prelude :: * ; #[wasm_bindgen] pub fn process_tensor_data ( inputs : & [ f32 ], multiplier : f32 ) -> Vec < f32 > { inputs .iter () .map (| & x | x * multiplier ) .collect () } #[wasm_bindgen] pub fn compute_cosine_similarity ( vec_a : & [ f32 ], vec_b : & [ f32 ]) -> f32 { let dot_product : f32 = vec_a .iter () .zip ( vec_b .iter ()) .map (|( a , b )| a * b ) .sum (); let norm_a : f32 = vec_a .iter () .map (| a | a * a ) .sum :: < f32 > () .sqrt (); let norm_b : f32 = vec_b .iter () .map (| b | b * b ) .sum :: < f32 > () .sqrt (); if norm_a == 0.0 || norm_b == 0.0 { return 0.0 ; } dot_product / ( norm_a * norm_b ) } Compile directly to WebAssembly: wasm-pack build --target web Integrating into Next.js / Frontend Stack import init , { compute_cosine_similarity } from ' ./pkg/wasm_ai_engine.js ' ; async function runVectorSearch () { await init (); const vec1 = new Float32Array ([ 0.12 , 0.45 , 0.98 ]); const vec2 = new Float32Array ([ 0.15 , 0.42 ,

Most HTML-to-Markdown tools handle one file at a time. You paste some HTML, get Markdown back, repeat. That works for a quick snippet but not when you have 200+ pages from a help center export sitting in a folder. I needed exactly that. I had a full site mirror (grabbed with wget --mirror ) and wanted clean Markdown I could feed into an LLM knowledge base. Nothing I found could handle it without uploading files to a server or converting one by one. So I built HTML to Markdown AI . How it works You drop a ZIP file (or individual HTML files) into the browser A Go-based conversion pipeline compiled to WebAssembly processes everything locally You get a ZIP back with clean GitHub-Flavored Markdown, folder structure preserved No server involved. Your files never leave your machine. The conversion pipeline The heavy lifting happens in Go/WASM. The pipeline: Strips navigation, footers, scripts, styles, and other boilerplate noise Extracts the main content from the page Converts to GFM with proper heading hierarchy, tables, code blocks, and links Handles batch processing so you can throw hundreds of files at it Why no built-in crawler? Intentional decision. Downloading HTML from someone else's site has legal implications depending on jurisdiction and terms of service. I don't want to be in that business. Downloading is also the easy part: wget -r -l 0 -np -k -E -p -e robots = off \ --reject-regex '\.(png|jpe?g|gif|svg|webp|woff2?|ttf|css|js|zip|pdf)$' \ -w 0.5 --random-wait \ https://docs.example.com/ That gives you a local folder with all the HTML. The hard and annoying part is turning that into clean, usable Markdown. That's what this tool solves. Stack Frontend: Astro + Tailwind Conversion engine: Go compiled to WebAssembly Processing: Entirely client-side, zero backend Try it https://www.html-to-markdown-ai.com Use cases I've tested it with: Help center exports (Zendesk, Confluence, custom wikis) Documentation sites mirrored with wget/httrack Scraped content for RAG pipe

Parte 13 de la serie Fitz . Se abre el capítulo del frontend: Fitz compila componentes .fitzv a WebAssembly, y este es el dev loop que hace que editarlos se sienta instantáneo — la misma experiencia "guardar y verlo" que te da Vite, sobre un lenguaje que compila a binario nativo. El setup: un lenguaje compilado con frontend Fitz es un lenguaje compilado — HTTP, async, Postgres, JWT viven en la sintaxis y emite un binario nativo vía Rust. La historia del frontend es un formato de componentes single-file, .fitzv (state + events + <template> , al estilo Vue/Svelte), que compila a WebAssembly : fitz build --bin web --target wasm-client # → target/wasm/web/{web.js, web_bg.wasm} Sin npm install , sin config de bundler, sin framework externo — el componente se vuelve un bundle WASM autocontenido (el demo del contador pesa 11.4 KB gzipped). Acá viene la objeción refleja: compilado = feedback lento . Editás, esperás una compilación entera, refrescás el browser a mano. Es lo opuesto a lo que un loop de frontend debería sentirse. Por eso Fitz tiene fitz dev . El loop Apuntá fitz dev a un bin wasm-client y deja de ser un compilador para ser un dev server: fitz dev # sirve en http://127.0.0.1:1234/ Qué hace: Rebuild incremental con wasm-pack --dev (sin wasm-opt ), reusando un crate estable así la cache de cargo queda caliente — el primer build compila las deps, cada save siguiente es de ~1-2 segundos . Un dev server que sirve el root de tu proyecto como python -m http.server : tu index.html , tu CSS, el bundle en target/wasm/<bin>/ . ¿Sin index.html ? Genera uno mínimo en el punto de mount . Auto-refresh del browser por WebSocket : guardás un .fitzv / .fitz / fitz.toml y la página se recarga sola. Sin F5 a mano. Guardás, y ~2 segundos después el browser muestra el cambio. En un lenguaje compilado. El detalle que importa: el state sobrevive el reload La mayoría de los hot-reload pierden tu estado en un reload completo — ibas tres clicks adentro de un contador, editás el template,

I built a debugging-practice site where student code runs entirely in the browser . Python via Pyodide , JavaScript in a worker. No server executes anything. No execution bill, no queue, no sandbox to maintain. But four things bit me hard. 1. Your arguments aren't Python objects Pass a JS object into Python and you get this: TypeError: 'pyodide.ffi.JsProxy' object is not subscriptable It's not a dict . It's a live view of the JS object, and it supports neither obj[key] nor .get() . Convert explicitly: const pyArgs = input . map (( arg ) => pyodide . toPy ( arg )); const result = fn (... pyArgs ); 2. null is not None This one passed my entire test suite while being broken in production. pyodide . toPy ( null ) check result type(v) JsNull bool(v) False ✅ falsy, as expected v is None False ❌ the surprise It's falsy, so truthiness checks work fine. But is None fails — which was exactly what my code was checking. Why my tests missed it: the harness used json.loads . The app used toPy . Different conversion paths, different answers. If you need a real None , create it in Python. Don't pass one across. 3. sys.settrace is a free step debugger Want to show users their code running line by line? Python basically hands it to you: def _tracer ( frame , event , arg ): if frame . f_code . co_name != target : return None # skip library frames if event == " line " : steps . append ({ " line " : frame . f_lineno , " locals " : dict ( frame . f_locals ), }) return _tracer Two things this naive version gets wrong: Add a step cap. A tight loop generates steps faster than it burns a 5-second timeout. You need both guards. Handle exception . During unwinding, the return event still fires with arg=None . Miss it and your trace says "returned None" for code that crashed. 4. Your snapshots are lying A user screenshot exposed this one. Every step in the trace showed the final state of a list. Step 1 included mutations that hadn't happened yet. tracing: nums = []; nums.append(1); nums.append(

Andrea Peruffo discusses the evolution of WebAssembly beyond the browser and its growing role on the server-side JVM. He covers performance advancements in Wasm runtimes, moving from interpreters to efficient JIT compilation, and explores real-world production use cases ranging from edge computing platforms to modular plugin architectures. By Andrea Peruffo

Hello everyone, I am currently building a high-performance API gateway that integrates business logic components—implemented via WASI and running within Wasmtime—as HTTP/TCP/QUIC handlers. I am exploring the best design approach to achieve a zero-copy data path from the upstream network layer—specifically hyper for HTTP/1.x and HTTP/2, and h3-quinn (based on Quinn) for HTTP/3—to the wasi:http guest environment. Given that: hyper and h3-quinn each manage their own internal buffer pools (e.g., bytes::Bytes ), asynchronous read/write streams, and frame decoders. Wasmtime's wasmtime-wasi-http implements the wasi:http (WASIp2) specification, which relies on resource types such as InputStream and OutputStream . I aim to minimize memory copying and CPU overhead when passing large request bodies or streaming responses across the sandbox boundary. For those experienced with bridging I/O between the host and guest in Wasmtime, I have a few architectural questions: Buffer ownership and memory mapping: How can host-side bytes::Bytes (from hyper or h3-quinn ) be mapped or bridged into Wasm linear memory (and vice versa) without requiring a CPU-based memcpy ? Does Wasmtime's resource streaming support direct memory views, or are we essentially limited to copying data chunks via guest memory pointers? Adapting stream abstractions: hyper uses http_body_util::combinators / http_body::Body , h3 uses its own stream primitives, while wasi:http uses wasi:io/streams . What is the idiomatic way to efficiently adapt these asynchronous streams on the host side (i.e., within the wasmtime-wasi-http handler implementation) without blocking the tokio runtime? Backpressure propagation: How can backpressure signals be correctly propagated from the Wasm guest (e.g., when the guest's InputStream is consuming data slowly) all the way back to the Quinn congestion controller or Hyper connection pool, thereby avoiding unbounded buffering on the host side? If anyone has built similar high-performance ga

Somebody on Reddit posted about 997s that just say AK5*R*5 — one or more segments in error — no AK3 , no AK4 . Preach. That's the problem this free doohickey* is for: rejectdecoder.com *If you'd prefer a "gizmo", I can make that happen. What it does Paste the rejection (997, 999, 824, TA1) plus the original bounced document. It parses both locally in your browser and cross-audits them: control number agreement segment counts envelope consistency code validity required segments It then quotes the exact segment byte-for-byte and ranks the likely causes for anything it finds. If it finds nothing, it says the answer isn't in the docs and tells you to escalate to your partner with your control numbers — which beats pulling a diagnosis out of my... AIs. Where the AI does (and doesn't) fit I know how and appreciate WHY "AI-powered EDI" is sneered at. So the audits here are deterministic parser code, not a model. The AI only writes the plain-English narration of facts the parser already verified, every card says so, and if the narration fails you still get the full audit results. No hallucinations or guesswork. Privacy Parsing runs entirely in-browser (the real Python parser, compiled to WebAssembly via Pyodide) and even works with the WiFi off. If you use narration, only a masked summary you preview first ever leaves the page. Don't take my word for it — check your network tab. Free. No signup for the examples or the deterministic audits; narration is a handful of decodes a month with just an email. Built it solo from an in-house tool of mine, so it's young AND kinda old. Please tell me where it's wrong. Walmart's rejection quirks are encoded so far. Whose partner nonsense should be next...? -jjg

This article covers debugging and deploying a Rust backed WASM module with a Firebase hosted web app...

I'm building LOOM — a small open-source language that is a machine-checked trust layer for AI-written code. I don't write it by hand anymore: an organism I built grows it, day and night, on my own machine. This is Day 6, and the whole day went to one thing — WebAssembly . Why this was a real test LOOM already runs three ways: an interpreter, and backends that compile checked code to Python and JavaScript. The thesis is "trust survives translation" — effects and provenance, proven once, hold the same on every target. WebAssembly is the strongest test of that: a low-level stack machine with linear memory, nothing like Python or JS. And there was a constraint. This machine's clang has no wasm target, and I install nothing paid or heavy. So I don't compile to wasm through a toolchain — I emit the wasm bytes myself (LEB128, the type / function / memory / global / export / code sections, the i32 stack machine) and run them through node's built-in WebAssembly . Zero dependencies. From fib to a value runtime, in a day Every step was prototyped and proven (wasm output == interpreter output) before it touched the kernel: The integer core — arithmetic, comparison, if , first-order calls and recursion. fib(10) becomes 61 bytes of real WebAssembly and returns 55, identically on the interpreter, Python, Node and wasm. A value runtime — let and integer lists in a real linear-memory heap (a bump pointer + a $cons cell allocator; head / tail are i32.load , empty is i32.eqz ). A list sums and folds by recursion, inside wasm. Sum types — (variant Tag e) becomes a tagged cell [tag-id | payload] ; match loads the tag, compares, binds the payload, branches. You can watch it: the live playground has a Compile → WAT button and WASM · fib / list-sum / match examples. Type a program, see it become real assembly, in your browser. Honest scope: ints, let , integer lists and sum types compile to wasm today. Records, closures and effects are the next frontiers (closures are the hard one — a func

While building a web application using React, TypeScript, C++, Emscripten, and Raylib, I ran into two linker-related issues that took far longer to diagnose than they should have. This is a short article on two problems that I have faced, I am sharing this so that developers who are exploring Web Assembly using Emscripten can easily avoid these issues as I'll also cover the workarounds that solved them for me. I'll start with the major one. Link-Time Optimization and EM_JS The problem appears when Link Time Optimization (-flto) is enabled and an EM_JS(ret, name, params, ...) macro function is invoked in one translation unit but called from another. You'll find that the linker complains that the function symbol you're trying to call is undefined. The EM_JS macro defines a C interface to call the JS function. So if you have your EM_JS macros in a js_layer.cpp source file, then you need to wrap the macro invocation as extern "C" { EM_JS ( void , add , ( int a , int b ), { //your JS code; }); } The same applies to the function declaration in js_layer.hpp file. I'll briefly go through the three workarounds or 'solutions' before bringing up the last quirk. The Three Workarounds If performance isn't of any concern Well the first one is obvious, just don't use -flto in your release builds. The downside is that your binaries (the .data and .wasm compiler outputs in this case) will be larger. Without LTO, the linker has fewer opportunities for whole-program optimization and dead-code elimination, which can increase the size of the generated .wasm and potentially reduce performance. Write a wrapper You can simply have a wrapper function in the same translation unit which calls the C function interfacing with the JS function, add() if you take the above example. The wrapper can simply be: // In js_layer.hpp void add_wrapper ( int , int ); // In js_layer.cpp void add_wrapper ( int a , int b ){ add ( a , b ); } Now you can call add_wrapper() from any source file just by including

A complete ML pipeline: engine, backprop, binary format, and a live browser demo. Zero dependencies. Under 200 KB total. If you have built machine-learning projects before, you have probably done it by importing PyTorch, TensorFlow, or scikit-learn and calling .fit() . Those are excellent libraries. This article is about what happens when you deliberately do not use them — when you build every piece of the pipeline yourself, in a language that compiles to WebAssembly, and the result runs live in the browser with no server, no Python, and no cloud bill. Here is the live demo: move four sliders, watch the predicted Iris species update in real time. The model is running entirely inside your browser tab, loaded from a 1.1 KB binary file, powered by ~100 KB of WebAssembly compiled from pure Rust. This is the story of how I built it and why the engineering choices made it work. Why Rust? Why WebAssembly? Why zero dependencies? Three constraints drove every design decision. WASM requires no_std or a carefully limited std . The wasm32-unknown-unknown target has no operating system, no file system, and no libc. A crate that links against rand , ndarray , or any library that makes OS calls will not compile to it without significant plumbing. An engine built from nothing but the Rust standard library compiles cleanly to every target, including WASM. A zero-dependency std -only crate is uniquely auditable. There are no transitive dependency trees to vet, no supply-chain risks, no version conflicts. Every line of code that runs in the user's browser lives in this repository. The deployment story becomes the technical story. A 100 KB WASM blob that runs locally in the browser is not just a cost optimisation — it is a privacy guarantee (user inputs never leave the machine) and a latency guarantee (inference is microseconds, not a round trip to a cloud API). That story is only possible because the engine has no external dependencies that would bloat the binary. The architecture: ei