Instant Design Components

Configuration Examples ​

Image-only ​

Show just the satellite imagery and system SVG overlay with minimal UI.

tsx
<PVSystemDesigner
  rooftopGeometryResponse={rooftopGeometryResponse}
  pvSystemResponse={pvSystemResponse}
  showImagesOnly
/>

Disable alignment ​

By default, the component will show a step to align the system to the rooftop geometry. This can be disabled by setting options.interactionMode to 'default'.

tsx
<PVSystemDesigner
  rooftopGeometryResponse={rooftopGeometryResponse}
  pvSystemResponse={pvSystemResponse}
  showImagesOnly
  options={{
    interactionMode: 'default'
  }}
/>

Full designer ​

Interactive designer with editing capabilities. Provide options to customize the designer and wire callbacks to integrate with the pv_systems endpoint.

tsx
<PVSystemDesigner
  rooftopGeometryResponse={rooftopGeometryResponse}
  pvSystemResponse={pvSystemResponse}
  pvSystemRequestParams={pvSystemRequestParams}
  options={{
    initialTargetNumPanels: 20,
    interactionMode: 'default',
    setbackEditable: true,
  }}
  onPVSystemRequestParamsChange={(next) => {
    console.log('POST pv_system with', next);
    // Make API call with updated params
  }}
  onOptionsChange={(next) => {
    console.log('options changed', next);
  }}
/>

Presentation mode ​

Hide the designer's editing capabilities, showing only the enabled panels and system metrics.

tsx
<PVSystemDesigner
  rooftopGeometryResponse={rooftopGeometryResponse}
  pvSystemResponse={pvSystemResponse}
  showPresentationView
  options={{
    interactionMode: 'default'
  }}
/>