Build with panes

Start with a finished page

If you want a cloud dashboard rather than a lesson in building one, start here. Eighteen complete pages — overviews per cloud, cost and security boards, migration trackers and written documents — each previewing on example data so you can judge it before connecting anything.

The two halves

Building a dashboard needs two things, and they are documented separately because they change at different rates.

Web design

Pages you build and control — a dashboard, an internal tool, a runbook, a status page. Read in order the first time; they build on each other.

Embed

Pages you do not control — a wiki, a knowledge base, a ticket, anywhere that will not run your scripts but will show a URL. A pane can be addressed as a single link and embedded as a frame.

Building with an assistant

If you are asking an AI assistant to build the page for you, point it at lightpane.io/llms.txt. It is a machine-readable description of the product written for exactly that: what a pane is, every pane's identifier, how to embed one, and how to lay a page out.

Hand it the full address. Most assistants will not fetch a URL they were not given — a sensible rule, since it stops a web page redirecting them somewhere else — so "read the LightPane docs" usually fails where "read https://lightpane.io/llms.txt" works.

If your assistant cannot browse the web — many cannot, and most will not admit it — the five files below are also a 28 KB download to drop into its working directory. That is the part worth getting right: an assistant that cannot read the catalogue does not say so, it invents pane names that look plausible, and the page it builds renders nothing.

The download covers the assistant writing the page. The finished page is a different matter: it loads the pane runtime from lightpane.io and its data from api.lightpane.io, so a browser opening it needs to reach both. Behind a strict corporate proxy, those two hostnames have to be allowed — there is no offline mode for a live pane, by design.

These are generated from the product's own catalogue on every build, not written by hand, so the identifiers in them are the identifiers that work. The same content is on these pages for people to read — this is the shorter path for a machine.

Building without an account

You do not need a key, an account, or a cloud connection to build and style a complete dashboard. A pane with no access key renders mock data — the same shapes, columns and states as the real thing, clearly marked so it can never be mistaken for your estate.

That makes the sensible order of work:

1. Pick your panes from the catalog and copy each one's container.
2. Lay the page out and get it reflowing properly, using the mock data as the content. This is the part that takes the time, and none of it needs an account.
3. Create an account, connect a cloud account, and issue an access key.
4. Paste the key into the one loader line at the top of the page. Every pane on it switches to your own data. Nothing else changes.

The shortest possible page

This is a complete, working page. Save it as a .html file and open it in a browser — no build step, no framework, no server.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>My cloud dashboard</title>
  <script>window.lpEmbed = { accessKey: "lp_ak_YOUR_ACCESS_KEY" };</script>
  <script src="https://lightpane.io/embed/lp.js"></script>
</head>
<body>
  <h1>Production</h1>

  <div data-lp-service="ec2"
       data-lp-account="YOUR_ACCOUNT_HANDLE"
       data-lp-region="eu-west-1"></div>

  <div data-lp-service="rds_instances"
       data-lp-account="YOUR_ACCOUNT_HANDLE"
       data-lp-region="eu-west-1"></div>
</body>
</html>

Leave the two placeholders as they are and every pane renders mock data. Replace them and the same file shows your estate. Part 1 explains each line.