惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
小众软件
小众软件
博客园 - 三生石上(FineUI控件)
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
博客园_首页
Last Week in AI
Last Week in AI
美团技术团队
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Apple Machine Learning Research
Apple Machine Learning Research
WordPress大学
WordPress大学
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - Franky
The Cloudflare Blog
罗磊的独立博客
月光博客
月光博客
N
Netflix TechBlog - Medium
C
Check Point Blog
Microsoft Security Blog
Microsoft Security Blog
F
Fortinet All Blogs
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Microsoft Azure Blog
Microsoft Azure Blog
IT之家
IT之家
Jina AI
Jina AI
J
Java Code Geeks

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
Where can I publish an interactive visualization online?
ArcadeLab · 2026-05-15 · via DEV Community

ArcadeLab

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
-->

Enter fullscreen mode Exit fullscreen mode

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.