Layer Tree

PreviousNext

Add a layer tree to the designer.

You can add a layer tree to display the layers in the designer.

Use the built-in PaneLayerTree component to show the layers in the designer. You can click to select, double click to edit, and use the custom lock controls to lock the layer.

components/custom-designer.tsx
import { PaneLayerTree } from "@shadcn/designer"
 
function CustomDesigner() {
  return (
    <Designer>
      <DesignerContent>
        <DesignerPanel>
          <DesignerPane>
            <DesignerPaneTitle>Layers</DesignerPaneTitle>
            <DesignerPaneContent>
              <PaneLayerTree />
            </DesignerPaneContent>
          </DesignerPane>
        </DesignerPanel>
      </DesignerContent>
    </Designer>
  )
}

Custom Layer Tree

You can also create a custom layer tree by using the useLayers hook. The useLayers hook returns the layers in the designer.

components/custom-layer-tree.tsx
import { useLayers } from "@shadcn/designer"
 
function CustomLayerTree() {
  const layers = useLayers()
 
  return (
    <div>
      {layers.map((layer) => (
        <div key={layer.id}>{layer.name}</div>
      ))}
    </div>
  )
}
Custom LayerMobile