Instant Design Components

instant-design-components is a React component library for integrating solar panel design capabilities into your applications. The library provides a comprehensive PVSystemDesigner component that enables users to visualize and configure solar installations on rooftops using real building geometry data.

For any questions or to report bugs, please reach out to ei-api@palmetto.com.

Check out our live prototype example to see the component in action!

Install

npm: npm i @palmetto/instant-design-components
yarn: yarn add @palmetto/instant-design-components
Peer deps: react@^18, react-dom@^18

Basic example

To test that your API key works and you have the correct dependencies installed, try out this simple example:

tsx

import { PVSystemDesigner } from '@palmetto/instant-design-components';

const rooftopGeometryResponse = await fetch(
  'https://api.mapdwell.com/api/v2/papi/rooftop_geometries',
  {
    method: 'POST',
    headers: { 'X-API-KEY': 'your-api-key' },
    body: JSON.stringify({ lat: 41.2917909, lon: -81.8282411 }),
  }
);
const { id: rooftopGeometryId } = await rooftopGeometryResponse.json();

const pvSystemRequestParams = {
  panel_length: 1.879,
  panel_width: 1.045,
  setback_distance: 0.4572,
  target_num_panels: 20,
};
const pvSystemResponse = await fetch(
  `https://api.mapdwell.com/api/v2/papi/rooftop_geometries/${rooftopGeometryId}/pv_systems`,
  {
    method: 'POST',
    headers: { 'X-API-KEY': 'your-api-key' },
    body: JSON.stringify(pvSystemRequestParams),
  }
);

<PVSystemDesigner
  rooftopGeometryResponse={rooftopGeometryResponse}
  pvSystemResponse={pvSystemResponse}
  pvSystemRequestParams={pvSystemRequestParams}
  options={{
    initialTargetNumPanels: 20,
    interactionMode: 'default',
  }}
  showImagesOnly
/>

You should see a PV system designer component that looks like this:

Install ​

Basic example ​

Install

Basic example