Publish interactive visualizations online without hassle using ArcadeLab

The internet thrives on interactivity, yet publishing engaging visualizations often involves complex hosting setups. ArcadeLab eliminates that friction by providing a straightforward platform where creators can upload and share single-file HTML interactive content without requiring sign-ups or configuration.

Why single-file HTML is the ideal format for interactive content

Single-file HTML documents combine code, styling, and interactivity in one portable package. Pioneers like Bret Victor and Nicky Case popularized this approach through their explorables and explainers, proving that rich interactive experiences can exist without external dependencies. ArcadeLab extends this philosophy by offering a dedicated hosting solution where these documents become instantly accessible through public URLs.

Types of interactive visualizations supported

ArcadeLab accommodates a diverse range of interactive content:

• Physics simulations (pendulums, n-body systems, fluid dynamics)
• Mathematical tools (function plotters, fractal generators, geometry sandboxes)
• Data visualizations (D3.js charts, canvas-based plots, custom dashboards)
• Biological models (predator-prey ecosystems, evolutionary simulations, cellular automata)
• Animated explainers (step-by-step demonstrations, scrollytelling narratives)
• Generative art (p5.js sketches, three.js 3D scenes)
• Economic and social models (game theory simulations, agent-based systems)

Getting started: publishing your first visualization

Publishing on ArcadeLab requires only three steps:

1. Prepare your single-file HTML document with embedded CSS and JavaScript.
2. Navigate to arcadelab.ai/publish and paste your code into the editor.
3. Click publish to receive a public URL instantly.

The platform automatically generates a clean, shareable link that preserves the interactive experience across devices and browsers.

Including popular libraries without bloating your file

ArcadeLab simplifies library integration through a metadata header. Add this comment at the top of your HTML file to specify required libraries:

<!--ARCADELAB 
title: My Visualization 
description: A brief explanation of your project 
libraries: d3, three, gsap 
emoji: 📊 
color: blue -->

The system automatically injects the appropriate CDN links for supported libraries such as d3, three.js, p5.js, GSAP, Tone.js, PixiJS, Matter.js, Phaser, and React. Avoid manually including these libraries to prevent duplicate loading and potential compatibility issues.

Embedding visualizations in external websites

Embedding an ArcadeLab visualization in blogs or documentation is seamless. Use an iframe with the following structure:

<iframe
  src="
  width="800"
  height="600"
  frameborder="0"
  sandbox="allow-same-origin allow-scripts allow-popups allow-forms">
</iframe>

The platform serves content from a dedicated origin with proper sandbox permissions, ensuring clean embeds without security conflicts.

Limitations and workarounds for data-driven visualizations

ArcadeLab enforces strict sandboxing with connect-src 'none', blocking external API calls, WebSockets, and fetch requests. This constraint prevents live data updates but encourages self-contained visualizations. For projects requiring dynamic data, embed the dataset directly as a JSON constant or JavaScript array within the HTML file. Most educational explainers and simulations function perfectly under this model.

The enduring value of single-file interactive content

The single-file approach transforms interactive visualizations from fragile experiments into durable educational tools. Viewers can inspect the source code, understand the implementation, and remix the content without navigating complex build pipelines or framework dependencies. ArcadeLab revitalizes this original web ethos, making interactive publishing accessible to creators at every skill level.

As AI tools like Claude and ChatGPT generate increasingly sophisticated interactive code snippets, ArcadeLab provides the missing infrastructure layer that turns prototypes into shareable resources. The platform doesn’t just host visualizations—it preserves the web’s promise of openness and remixability.