Step 1
Write it
A pane is plain HTML, CSS and JS. Write it in the built-in editor with a live preview, or start from a template.
Coming soon
Write a pane. Drop it on the grid.
Dotpane is a dotted canvas for small HTML, CSS and JS components. Each one can call your APIs while your keys stay on the server.
HomeEditing
Weather · Lisbon
21°
Sunny · feels like 22°
Now
21°
14
22°
16
22°
18
20°
Today
1:123:40
Keep it logically awesome.
Uptime, 30 days
99.98%
API calls
1,284+4%
GET /calls?range=24h · 200 · 142 ms
Focus
25:00
From an idea to a live pane in three steps.
Step 2
Place it
Drop panes on a 12-column dotted grid. Move and resize them; they snap to the dots and never overlap.
Step 3
Connect it
Bind a secret to the pane. Its calls go through Dotpane’s servers, which add your key.
Change the code. The pane changes with it.
The editor keeps a live preview beside your code. Props turn one pane into many: the same code with different settings on each canvas. Try it here.
// label: "Coffees today" · step: 1
const { label, step } = dash.props;
let n = (await dash.storage.get('n')) ?? 0;
plus.onclick = () => save(n + step);
minus.onclick = () => save(n - step);
function save(v) {
out.textContent = n = v;
dash.storage.set('n', n);
}
// label: "Lisbon" · seconds: true
const { label, seconds } = dash.props;
function tick() {
const t = new Date().toLocaleTimeString('en-GB');
out.textContent = seconds ? t : t.slice(0, 5);
}
setInterval(tick, 1000);
tick();
// label: "Signups" · bars: 8
const { bars } = dash.props;
async function load() {
const res = await dash.fetch(
'https://api.example.com/signups?days=' + bars
);
draw(await res.json());
}
dash.refresh(60, load);
dash.onResize(load);
Coffees today
3
10:09:30
Props for this canvas
Accent
If it runs in a browser, it can be a pane.
Charts, players, timers, forms, small games. A pane is your own code, so there is no widget catalogue to wait for.
Launch boardClick a card to move it on
To do3
Doing2
Done2
Traffic by source
42%Direct
DeploysSorted by deployed
jobsBuilding21 sJust now
apiLive48 s2 min ago
webLive1 m 32 s14 min ago
usercontentLive37 s1 h ago
egressFailed12 s3 h ago
Synth
Playtap a pad
Deploy log
$ deploy api --env staging
building image…
✓ built in 48 s
running migrations…
✓ 7 migrations applied
health check /healthz
✓ 200 in 31 ms
✓ live
Local time
10:09:30
Requests per second, live
352peak 386
Pixel pad
These eight are running. Move a card, sort the table, play a note, paint a pixel, pause the live chart.
Your keys never reach the browser.
Pane code is treated as untrusted, including your own. It can ask Dotpane to make a call, and that is all it can do with a secret.
How it is securedAn encrypted vault
Secrets are encrypted with AES-256-GCM, and the keys that protect them live in a separate key service.
Sandboxed panes
Every pane runs in a sandboxed frame on its own domain, away from your session and from other panes.
Only the hosts you allow
A secret is sent only to the hosts you list for it. Calls to anything else, or to private addresses, are refused.
Follow one API call
- Step 1Pane calls dash.fetchIts code holds a placeholder, not the key.
- Step 2Dotpane checks the hostapi.github.com is on this secret's list.
- Step 3Dotpane adds the keyDecrypted on the server, for this call only.
- Step 4API answersThe response goes back to the pane.
What the pane sends
GET https://api.github.com/user
authorization: Bearer {{secrets.GITHUB_TOKEN}}
What the API receives
authorization: Bearer ghp_••••••••a1f4
200 OK · 184 ms
20
canvases
100
panes of your own
50
secrets in the vault
100,000
API calls a month
This is what the Pro plan includes. See pricing
Opening soon.
Dotpane is not open yet. When it is, you can try it for 14 days without a card, and Pro is $9 a month.