framejs.io

Appearance

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
<iframe src="https://framejs.io/j/9af8d1c..." width="100%" height="400"></iframe>
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 preview showing a framejs.io link with title, description, and preview image

Open Graph details →

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.