Rendering & Styling

The SDK renders discovery results into div elements that you place in your HTML. Each div is matched to a service request by its data-sd-service attribute.

Target divs

Add a div with data-sd-service matching the service identifier from your request:

<!-- Renders EC2 discovery results here -->
<div data-sd-service="ec2" data-sd-source="live"></div>

<!-- Renders S3 discovery results here -->
<div data-sd-service="s3" data-sd-source="live"></div>

Attribute	Required	Description
data-sd-service	Yes	Service identifier matching the service field in your request.
data-sd-source	No	live or mock. Must match the source in the corresponding request.

Column selection

The attributes array in your service request controls which columns appear in the table and their order:

// Two columns: Name, then State
serviceDiscoveryRequests.push({
    service: 'ec2',
    provider: 'aws',
    region: 'eu-west-2',
    attributes: ['name', 'state']
});

// Five columns in this order
serviceDiscoveryRequests.push({
    service: 'ec2',
    provider: 'aws',
    region: 'eu-west-2',
    attributes: ['name', 'instance_id', 'instance_type', 'state', 'private_ip']
});

Column headers are generated from attribute names: instance_type becomes "Instance Type", private_ip becomes "Private IP".

Default styling

Include the LightPane stylesheet for default table appearance:

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

This provides:

• Clean table borders and spacing
• Status badges (green for running/active, red for stopped/error, amber for pending)
• Responsive column widths
• Monospaced formatting for IDs, IPs, and ARNs

CSS classes

The SDK applies these CSS classes to rendered elements:

Element	Class	Description
Table wrapper	sd-table-wrapper	Outer container for each service table
Service label	sd-service-label	Heading above the table (e.g., "EC2 Instances")
Table	sd-table	The <table> element (overridden by tableClass in config)
Header row	sd-header-row	The <tr> in <thead>
Header cell	sd-header-cell	Each <th>
Data row	sd-data-row	Each <tr> in <tbody>
Data cell	sd-data-cell	Each <td>
Status badge	sd-status-{value}	Applied to cells containing status values (e.g., sd-status-running)
Timestamp	sd-last-updated	The "Last updated" line below the table
Error	sd-error	Displayed when a service request fails
Loading	sd-loading	Displayed while data is being fetched

Using Bootstrap

If your page uses Bootstrap, set tableClass in the configuration to apply Bootstrap table classes instead of the default:

<script>
    var serviceDiscoveryConfig = {
        accessKey: 'csl_em_YOUR_KEY_HERE',
        tableClass: 'table table-sm table-striped'
    };
</script>

The SDK applies the specified class to the <table> element. The LightPane stylesheet and Bootstrap can coexist — the tableClass override only affects the table element itself.

Custom styling

Override any SDK class in your own stylesheet:

/* Custom header background */
.sd-header-row {
    background-color: #1a1a2e;
    color: #ffffff;
}

/* Custom status badge colours */
.sd-status-running {
    background-color: #10b981;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Monospace for instance IDs */
td[data-attribute="instance_id"] {
    font-family: 'Fira Code', monospace;
    font-size: 0.85em;
}

Multiple panes on one page

Place multiple target divs to show several services on the same page:

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

Each div renders independently. The SDK matches each div to the corresponding service request by the data-sd-service value.

Loading and error states

While fetching data, the SDK shows a loading indicator inside the target div. If a request fails, an error message replaces the loading indicator:

<!-- Loading state (automatic) -->
<div data-sd-service="ec2" data-sd-source="live">
    <div class="sd-loading">Loading EC2 instances...</div>
</div>

<!-- Error state (automatic) -->
<div data-sd-service="ec2" data-sd-source="live">
    <div class="sd-error">Failed to load EC2 instances: Origin not permitted</div>
</div>

You do not need to handle these states manually. The SDK manages them.