framejs.io

Appearance

What is framejs.io? ​

framejs.io is an open-source, embeddable, editable web app.

Designed to be as simple to create and modify with AI tools.

You can embed code safely anywhere, creating custom, editable dashboards, widgets, notebook components, visualizations, editable apps, and more. It is open-source, and aims to be a user-first web primitive. It looks good and is self-descriptive wherever you paste it.

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.

After installation of the skill:

show a range of ways of visualization using framejs.io platform with a slider
https://framejs.io/j/019f2b53304f788d9fe1d00556489768

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/019f2b53304f788d9fe1d00556489768"
  width="100%"
  height="400">
</iframe>
Notion
Obsidian
Confluence
Jupyter
Any website

Embedding guide →

Embed Previews (Open Graph) ​

Links render with a title, description, and preview image in Slack, Discord, social media, and anywhere else that supports Open Graph. When created with AI these are automatically generated, and you can manually edit 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 URL that expires:https://framejs.io/j/8e5d5eed5c...
Short URL that persists:https://framejs.app/j/8e5d5eed5c...

No accounts, no servers

For short URLs at framejs.io/j/... there is no login. The URL is the program. Short URLs are immutable content-addressed hashes where the same content always yields the same link. Free short URLs are kept for about a month; for guaranteed, durable persistence, save to a Frame.

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.