Part 1

Putting panes on a page

A pane is a div the runtime fills in. Everything in this part is about that div — what identifies it, what it may carry, and what the loader does when it finds one.

The shape of it

Two things go on a page: one loader, once, and one container per pane, wherever that pane should appear. The loader never changes as you add panes, which is the whole reason it is separate.

<!-- once per page, in <head> -->
<script>window.lpEmbed = { accessKey: "lp_ak_YOUR_ACCESS_KEY" };</script>
<script src="https://lightpane.io/embed/lp.js"></script>

<!-- once per pane, in <body> -->
<div data-lp-service="ec2" data-lp-account="YOUR_ACCOUNT_HANDLE"></div>

The loader

lp.js is the only script you add by hand. On load it scans the document for pane containers, works out which pane code each one needs, and fetches that for you. Adding a tenth pane to a page does not mean adding a tenth script tag.

window.lpEmbed must be set before lp.js runs, because the loader reads it on startup. The fields:

Field	Value	Notes
accessKey	`lp_ak_…`	Omit it and every pane renders mock data
region	`eu-west-1`	Page-wide default; a pane may override it

Put it in the head, not at the end of the body

Panes paint a loading state as soon as the runtime sees them. Loading the script last means the page renders, settles, and then every pane appears at once and pushes the content down. Loading it in <head> lets the containers claim their space earlier.

The container

An empty <div>. The runtime replaces its contents, adds the lp-pane class, and takes over from there — so do not put anything inside it that you expect to survive.

Attributes a container may carry:

Attribute	Example	What it does
data-lp-service	`ec2`	Names a service inventory pane. Required for that kind
data-lp-pane	`aws/cost-summary`	Names a compound pane. Required for that kind
data-lp-account	`zesty-ridge`	Which connected cloud account to read
data-lp-region	`eu-west-1`	Overrides the page default for this pane
data-lp-attributes	`name,state,tags`	Which columns, in which order. Service panes only
data-lp-label	`Production web tier`	Overrides the title in the pane header
data-lp-filter	`true`	Adds a search box that filters rows in the browser
data-lp-fill	`true` / `paged`	Fill the height the container gives it — see Part 2

Each pane's page in the catalog lists the attribute values that pane accepts, and gives you the container pre-filled.

Two kinds of pane

The catalog contains two kinds, and the difference shows up in the container.

Service inventory panes

A list of resources of one type — EC2 instances, Cloud SQL databases, storage accounts. Identified by data-lp-service. Rows expand to show detail, and you choose the columns with data-lp-attributes.

<div data-lp-service="ec2"
     data-lp-account="YOUR_ACCOUNT_HANDLE"
     data-lp-attributes="name,instance_type,state,private_ip"></div>

Compound panes

A composed view — a cost summary, a security posture board, a daily briefing. These assemble their own sections from several sources, so they take no column options. They need both a mount class and data-lp-pane; the class is what the pane's own code looks for, so keep both.

<div class="lp-cost-summary-panel"
     data-lp-pane="aws/cost-summary"
     data-lp-account="YOUR_ACCOUNT_HANDLE"></div>

Many panes, one page

Repeat the container. There is no registry to update and no second script. Panes load in parallel and each paints as its own data arrives, so one slow pane does not hold up the rest.

Two containers for the same pane are fine and common — the same inventory for two regions, or the same cost summary for two accounts. Each is independent: its own data, its own refresh, its own expanded rows.

<div data-lp-service="ec2" data-lp-account="swift-harbor" data-lp-region="eu-west-1"></div>
<div data-lp-service="ec2" data-lp-account="swift-harbor" data-lp-region="us-east-1"></div>

Several cloud accounts on one page

An access key can be scoped to more than one connected cloud account. When it is, data-lp-account on each container chooses which one that pane reads — so a single key and a single loader can drive a page covering production, staging and a sandbox at once.

A connected cloud account has three names, and only one of them belongs in a page.

Name	Example	Use in a pane?
Handle	`swift-harbor`	Yes. Minted by LightPane when you link the account, and never changes.
Alias	`prod-eu`	It resolves, but it is editable — and editing it breaks the pane. See below.
Display name	`Production (EU)`	No. It is a console label and is never published to a page.

The handle is a random adjective-noun pair assigned once, when the account is first linked, and preserved through every later change and re-sync. It is deliberately meaningless: it carries no hint of the cloud, the account number or your organisation, so putting it in a page that strangers can read gives nothing away. Your console shows it as the account's embed reference, ready to copy.

Why an alias is the wrong thing to paste

An alias works on the day you write it, and it is editable — so one day someone renames the account in the console and every pane naming the old alias stops matching. That failure is silent. An unmatched account is not an error: the request succeeds and returns no results, so the pane renders its ordinary empty state. The page does not say "misconfigured", it says No EC2 instances discovered — which is a sentence someone may well believe.

Use the handle. It cannot be renamed, so it cannot go quietly wrong.

Mixing clouds

Nothing stops an AWS pane, an Azure pane and a GCP pane sitting in the same grid — they are independent containers reading independent accounts. Part 3 covers laying out a cross-cloud comparison.

Before you have a key

Paste the snippet exactly as the catalog gives it to you — placeholders and all — and it works. A pane with no key, or with the lp_ak_YOUR_ACCESS_KEY placeholder still in it, renders mock data: real column shapes, realistic values, the same empty states. It is enough to build and style an entire dashboard against before you have an account.

Mock panes are marked. The refresh control in the pane header is replaced by a MOCK DATA stamp, and there is no freshness countdown — a countdown over fixture data would be meaningless.

A key that does not work is a different thing

Only a missing key gives you the preview. A key that is present but rejected — revoked, mistyped, or not scoped to that account — shows an error, and deliberately so. If a live dashboard quietly fell back to sample data when its key expired, it would keep looking right while showing numbers that are not yours. The line is: no key means preview, a bad key means tell me.

When you cannot add scripts

Confluence, Notion, SharePoint, a wiki, a ticket description — anywhere that strips <script>. A pane can be embedded as a single URL instead, with no changes to the page at all.

That is its own section: Embedding in other tools covers the URL format, where the key goes and why, sizing an iframe that cannot reflow, and the per-product notes.

Frameworks and single-page apps

The runtime scans for containers once, when it loads. A container added later — a React render, a route change, a tab that was not in the initial DOM — has not been seen. Tell the runtime to look again:

// after the new containers are in the DOM
window.lpEmbedRun();

It is safe to call repeatedly. Panes that have already rendered are skipped, so a second call picks up only what is new and will not restart the panes already on screen.

A container that is in the DOM but hidden is fine: a pane inside a display:none parent renders, measures zero width, and re-measures correctly when the parent is shown. You do not need to defer rendering until a tab is opened — see Part 2.