FrameJS – interactive JavaScript visualizations that live in a URL

dionjw1 pts0 comments

AI created shareable apps and visualizations

Edit

-->

Create and share interactive visualizations, dashboards, and apps —<br>with AI or by hand.

Write JavaScript, get a shareable URL. No server, no login, no build<br>step. The entire app lives in the link.

Ask AI to build it

Describe what you want, paste the code, share the link.

Share via URL

The link is the app. No deploy, no hosting, no accounts.

Embed anywhere

Notion, Jupyter, Confluence, blogs — just paste the URL.

Example — real-time animated particles

this.textContent = "Copied!";<br>setTimeout(() => {<br>this.textContent = "Copy";<br>}, 1500);<br>})'<br>style="position: absolute; top: 10px; right: 10px; background: #3a3a3a; color: #ddd; border: none; border-radius: 5px; padding: 5px 12px; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; cursor: pointer; z-index: 1; transition: background 0.2s"<br>onmouseover='this.style.background = "#555"'<br>onmouseout='this.style.background = "#3a3a3a"'<br>Copy

const canvas = document.createelement("canvas");<br>canvas.width = root.getboundingclientrect().width;<br>canvas.height = root.getboundingclientrect().height;<br>root.appendchild(canvas);<br>const ctx = canvas.getcontext("2d");

let particles = array.from({length: 80}, () => ({<br>x: math.random() * root.getboundingclientrect().width, y: math.random() * root.getboundingclientrect().height,<br>vx: (math.random() - 0.5) * 2, vy: (math.random() - 0.5) * 2,<br>r: math.random() * 3 + 1<br>}));

function frame() {<br>ctx.fillstyle = "rgba(0,0,0,0.08)";<br>ctx.fillrect(0, 0, root.getboundingclientrect().width, root.getboundingclientrect().height);<br>for (const p of particles) {<br>p.x += p.vx; p.y += p.vy;<br>if (p.x root.getboundingclientrect().width) p.vx *= -1;<br>if (p.y root.getboundingclientrect().height) p.vy *= -1;<br>ctx.beginpath();<br>ctx.arc(p.x, p.y, p.r, 0, math.pi * 2);<br>ctx.fillstyle = `hsl(210, 40%, ${50 + p.r * 10}%)`;<br>ctx.fill();<br>requestanimationframe(frame);<br>frame();

Docs<br>Examples<br>AI setup<br>GitHub

AI / CLI tools (Claude Code, Cursor, etc.)

CLI tools can generate JavaScript and create a short URL via<br>POST /api/shorten/json<br>with body<br>{"js": "code", "modules": []}<br>— the API returns a short URL that opens directly in the browser.<br>Never create local files. Full guide:<br>CLI integration guide<br>JS coding guide<br>llms.txt

-->

root getboundingclientrect canvas math width height

Related Articles