Shareable AI Editable Visualizations

What is framejs.io? ​

framejs.io is an embeddable, editable web app.

It is designed for embedding code safely anywhere, creating custom, editable dashboards, widgets, notebook components, shareable visualizations, editable apps, and more. It is open-source, and aims to be a user-centric web primitive.

Examples →

Features ​

Create with AI ​

Describe what you want in plain language — visualizations, dashboards, apps, games — and AI builds it for you. Works with Claude, ChatGPT, or any LLM.

/js show a range of ways of visualization using this platform with a slider

Set up AI editing →

Embed Anywhere ​

Paste a URL into any platform that supports embeds — Notion, Obsidian, Confluence, Google Docs, Jupyter notebooks, your own website. It just works.

html

Notion

Obsidian

Confluence

Jupyter

Any website

Embedding guide →

Open Graph Previews ​

Links render with a title, description, and preview image in Slack, Discord, social media, and anywhere else that supports Open Graph. Set these in the editor's Settings panel.

Open Graph details →

Share via Links ​

All code and state lives in the URL. Copy it, send it, bookmark it — anyone with the link can run your code. Use short URLs for cleaner sharing.

Full URLhttps://framejs.io/#?js=...

Short URLhttps://framejs.io/j/8e5d5eed5c...

No accounts, no servers

There is no login. The URL is the program. Short URLs are immutable content-addressed hashes — they never change or expire.

Short URLs →

Connect Inputs and Outputs ​

Wire metaframes together. One metaframe's output becomes another's input. Build pipelines, dashboards, and multi-step workflows by connecting them in a metapage.

javascript// Send data out setOutput("result", { temperature: 72, unit: "F" });

// Receive data in export function onInputs(inputs) { const data = inputs["sensorData"]; // process and visualize }

I/O API reference →

Edit in the Browser ​

A full code editor runs in the browser. Write JavaScript, add npm modules and CSS, configure settings — all without leaving the page. Changes update the URL in real time.

ES6 modules with top-level await

Import any npm package from CDN

Add CSS stylesheets

Live preview as you type

Settings panel for inputs, outputs, and Open Graph

JavaScript API →

JavaScript overview ​

Code is an ES6 module

Top-level await is supported

Export onInputs to listen to inputs from connected metaframes

Send outputs with setOutput / setOutputs

Export onResize to handle window/div resizes

Use ES6 module imports, or add CSS / npm modules — everything is embedded in the URL

See the full JavaScript API for details.