Skip to content

SDK Overview

The LightPane JavaScript SDK discovers cloud infrastructure and renders it as HTML tables on any web page. It runs entirely in the browser, makes authenticated API calls to the LightPane discovery endpoint, and injects the results into target div elements.

How it works

  1. You declare a configuration object with your access key
  2. You push one or more service requests describing what to discover
  3. You place div elements where you want the data to appear
  4. The SDK scripts load, fetch data from the API, and render tables

Script files

Load these scripts from the LightPane CDN. Order matters — sd-boot.js must be last.

Script Purpose
sd-core.js Core utilities, configuration parsing, request queue
sd-fetch.js API communication, authentication header injection
sd-render.js Table rendering, column layout, status badges
sd-format.js Value formatting (dates, sizes, durations, IPs)
sd-boot.js Auto-bootstrap — reads the page, dispatches requests, triggers rendering 
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-core.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-fetch.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-render.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-format.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-boot.js"></script>

Optionally include the stylesheet for default table styling:

<link rel="stylesheet" href="https://cdn.lightpane.cloud/sdk/v1/clouds-and-light.css">

Minimal example

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.lightpane.cloud/sdk/v1/clouds-and-light.css">
</head>
<body>

<script>
    var serviceDiscoveryConfig = {
        accessKey: 'csl_em_YOUR_KEY_HERE'
    };
</script>

<script>
    var serviceDiscoveryRequests = serviceDiscoveryRequests || [];
    serviceDiscoveryRequests.push({
        service: 'ec2',
        provider: 'aws',
        region: 'eu-west-2',
        source: 'live',
        attributes: ['name', 'instance_id', 'instance_type', 'state', 'private_ip']
    });
</script>

<div data-sd-service="ec2" data-sd-source="live"></div>

<script src="https://cdn.lightpane.cloud/sdk/v1/sd-core.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-fetch.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-render.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-format.js"></script>
<script src="https://cdn.lightpane.cloud/sdk/v1/sd-boot.js"></script>

</body>
</html>

Load order

Place the configuration and service request <script> blocks before the SDK script tags. The SDK reads serviceDiscoveryConfig and serviceDiscoveryRequests from the window object at load time. If they are not defined when sd-boot.js executes, no discovery runs.

Place SDK scripts at the end of <body>

Loading the SDK at the end of the page ensures all data-sd-service divs exist in the DOM before the bootstrap runs.

What the SDK does not do

  • It does not modify, create, or delete anything in your cloud accounts
  • It does not store data locally (no cookies, no localStorage)
  • It does not require a build step, bundler, or framework
  • It has no external dependencies (no jQuery, no React, no charting libraries)

Next steps