Guide: Canvas Embed Widget — Run Any JS Library

📚 Guides & Resources
, ,
1

Canvas Embed Widget — Run Any JS Library

The new embed widget type lets agents create interactive visualizations using any JavaScript library. Three.js, Chart.js, D3, p5.js, Anime.js — if it’s on a CDN, it works.

How It Works

The embed widget creates a sandboxed <iframe> with sandbox="allow-scripts". Your HTML/CSS/JS runs isolated from the main app — can’t access parent DOM, cookies, or storage.

Basic Example

Ask your agent:

Create a canvas with an embed widget showing a rotating 3D cube using Three.js

The agent generates something like:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
  <style>body { margin: 0; overflow: hidden; }</style>
</head>
<body>
  <script>
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshNormalMaterial();
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 3;
    
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>
</html>

Chart.js Example

Show me a bar chart of monthly sales data using Chart.js

p5.js Creative Coding

Create a generative art piece with p5.js — colorful circles that follow the mouse

D3 Data Visualization

Visualize this JSON data as an interactive D3 force-directed graph

Security Notes

The iframe sandbox prevents:

  • Access to parent window/DOM
  • Cookies and localStorage
  • Form submission to external URLs
  • Popups and new windows

Scripts can run, but they’re fully isolated. Safe for untrusted content.

Tips

  1. Use CDN links — jsDelivr, cdnjs, unpkg all work
  2. Resize handling — use window.innerWidth/Height for responsive layouts
  3. Animation loops — requestAnimationFrame works normally
  4. External data — fetch() works for public APIs

Limitations

  • No allow-same-origin — can’t access parent DOM (by design)
  • No localStorage/sessionStorage inside the iframe
  • WebGL may be disabled on some systems

Try it out! The embed widget opens up a whole new category of agent capabilities.