dotpaneComing soon
Docs menu
QuickstartYour first paneSecretsdash.fetchdash.refreshdash.storagedash.propsdash.onResizedash.on and dash.emitdash.themedash.logManifestLimitsError codes

Quickstart

Published

This page takes you from a new account to a pane on a canvas that calls a real API. It takes a few minutes and needs no API key.

Dotpane is invite-only for now. You can sign in only with an email address that has an invite.

1. Sign in

Sign in with a link sent to your email, or with GitHub.

  • Email link. Enter your address and choose “Email me a link”. The link works once and expires after 15 minutes.
  • GitHub. Choose “Continue with GitHub”. Dotpane uses the primary email address of your GitHub account. It must be verified on GitHub, and it must be the address with the invite.

2. Make a pane from a template

A pane is a small component: an HTML file, a CSS file, a JavaScript file and a manifest.

  1. In the sidebar, open My panes and choose New pane.
  2. Give it a name and pick the Fetch JSON template.

The editor opens. On the left are four tabs, index.html, style.css, component.js and manifest.json. On the right is a live preview. The template already calls an API:

// Every dash.fetch goes through the Dotpane proxy, to hosts listed in manifest.json "network".
const out = document.getElementById('zen');

dash.refresh(60, async () => {
  const res = await dash.fetch('https://api.github.com/zen');
  out.textContent = res.ok ? await res.text() : `Request failed: ${res.status}`;
});

dash.fetch sends the request through Dotpane’s servers, and dash.refresh runs the function now and then once a minute. The manifest lists api.github.com under network, which is what allows the call. The preview shows a short line of text from GitHub.

3. Save a version

Your edits are saved as a draft as you type. A canvas only runs saved versions, so choose Save version in the editor’s header. If something in the files is not valid, the problems are listed, and choosing one opens the file at the right place.

4. Make a canvas

In the sidebar, choose the + next to Canvases (or New canvas if you have none yet), and give the canvas a name. A new canvas has 12 columns.

5. Place the pane

On the canvas, choose Add pane and pick your pane. It lands in the first free spot, at the size its manifest asks for. It shows a line from GitHub, as the preview did, and fetches a new one every minute.

To move or resize it, switch the canvas to Edit. Dragging and resizing are covered in Your first pane.

Next

  • Your first pane builds a pane from scratch: its files, its manifest, refreshing, and placing it on the grid.
  • Secrets shows how to call an API that needs a key, without the key reaching the browser.
  • dash.fetch lists every option, the response object and the errors.