Quick answer: ArcadeLab hosts any single-file HTML interactive content — not just games. Physics simulations, D3 visualizations, math toys, explorables, animated explainers all work the same way. Paste your HTML at arcadelab.ai/publish and get a public URL.
The web's best interactive content has always been just HTML, CSS, and JavaScript in a single document. Bret Victor's explorables, Nicky Case's explainers, Distill.pub articles — they were one-document interactive experiences. The Distill aesthetic is the same shape as the ArcadeLab aesthetic.
AI assistants are remarkably good at producing these. Ask Claude or ChatGPT for "an interactive single-file HTML page showing how X works" and you get usable output. The missing piece used to be where to host it. ArcadeLab fixes that.
What counts as an interactive visualization?
- Physics simulations (pendulums, n-body, fluid dynamics)
- Math toys (function plotters, geometry sandboxes, fractals)
- Data viz (D3.js charts, raw canvas plots, custom dashboards)
- Biology models (predator-prey, evolution, cellular automata)
- Animated explainers (scrollytelling, step-by-step demos)
- Generative art (p5.js sketches, three.js scenes)
- Economic / social models (game theory, agent-based sims)
Is there an example I can look at?
Yes. The double-slit experiment — a working interactive physics demo of wave-particle duality. Fire one photon, then a thousand, watch what they paint together. It's a single HTML file, published the same way you'd publish any game.
How do I include a library like D3 or Three.js?
List it in the ARCADELAB header:
<!--ARCADELAB
title: My Visualization
description: A short description
libraries: d3
emoji: 📊
color: blue
-->
ArcadeLab injects the right CDN script tag automatically. Don't include your own — that causes double-loading. Supported library names: d3, three, p5, gsap, tone, pixi, matter, phaser, react.
Can I embed an ArcadeLab visualization in my blog?
Yes. Use an iframe pointing at https://play.arcadelab.ai/render/{slug}. ArcadeLab serves rendered content from a separate origin with proper sandbox permissions, so embeds work cleanly.
What if my visualization needs to load data from an API?
It can't. Content on ArcadeLab runs in a sandboxed iframe with connect-src 'none' — fetch, XHR, and WebSocket are all blocked. If your viz needs live data, embed the data directly in the HTML as a JSON constant or inline it as a JavaScript array. For most explainers and simulations this is fine; for live dashboards, ArcadeLab isn't the right host.
Why is ArcadeLab good for interactive content specifically?
Because the single-file constraint is a feature, not a bug. Anyone can view source, copy the HTML, and learn from it. Anyone can remix. The format is durable — no build pipeline to rot, no framework to upgrade. It's the way the interactive web was meant to work.
This guide originally appeared at arcadelab.ai/learn/publish-interactive-visualization-online. ArcadeLab is a free no-signup platform for publishing single-file HTML games, visualizations, and interactive content.
Top comments (0)