Pane types

HTML

A full document, one that starts with <!doctype html> or <html>, is served exactly as sent. A fragment gets a minimal page around it, with the pane's title, a margin and system fonts.

<h1>Q3 revenue</h1>
<p>Up <strong>12%</strong> on Q2, led by the new plans.</p>

HTML panes can load scripts, styles and fonts from other sites, so a chart library from a CDN works.

React

JSX that defines a component named App, or exports one by default. The pane loads React 18 and Babel, which compiles the JSX in the browser.

function App() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

• The hooks useState, useEffect, useMemo, useCallback, useRef, useReducer, useContext and useLayoutEffect, and Fragment, are in scope without imports.
• You can import react and react-dom, and nothing else. For a chart library, use an HTML pane.
• If the component throws while it starts, the pane shows the error message instead.

Markdown

GitHub-flavored Markdown: tables, task lists, fenced code and links, set in a readable column. HTML inside the Markdown works too.

# Weekly report

| Metric   | This week | Change |
| -------- | --------- | ------ |
| Sign-ups | 1,204     | +8%    |

- [x] Ship the docs
- [ ] Plan the launch

What a pane can do

Every pane runs in a sandbox on Openpane's pane domain, in an origin of its own, so it can't read your Openpane account, your cookies or the page around it.

• Scripts, forms, pop-ups and dialogs (alert, confirm, prompt) work.
• Scripts, styles, fonts and images load from other sites, such as a CDN.
• Requests with fetch reach only APIs that allow any origin (CORS), since the pane's origin is opaque.
• Cookies, localStorage and sessionStorage aren't available, and file downloads are blocked.
• Links open inside the pane. Give them target="_blank" to open a new tab.
• Panes sit on a white sheet in light and dark mode alike, so design for a light background or paint your own.

Titles and size

Versions

Every change to a pane's content saves a new version, with who made it and whether on the web or through the API. The link always opens the latest, and the bar above the pane shows its number. Someone who already has it open gets the latest with the reload button.

Where a pane lives

• https://openpane.oblaidish.com/p/<id>: the share page, with the Openpane bar above the pane.
• https://openpane.oblaidish.com/p/<id>/embed: the pane alone, for other sites (see Embedding).
• The raw document, on the pane domain: Open raw in the share bar.

Who can open each one is up to you: see Sharing. To make a pane by hand, use New pane in the dashboard.