# Layer

```ts
import { Group, Layer, Rectangle } from "@pibbl/core";
```

`Layer` uses [`LayerProps`](/reference/types/elements-components/#layerprops) and [`LayerStyle`](/reference/types/styles/#layerstyle) to render recursive [`PibblNode`](/reference/types/elements-components/#pibblnode)
children through a persistent offscreen Pibbl instance. It shares root
interaction and global paint order, and requires browser `OffscreenCanvas`.
It is a composition boundary, not a retained scene graph.

```tsx
<Group style={{ translateX: 24, translateY: 24 }}>
  <Layer style={{ width: 160, height: 100 }}>
    <Rectangle style={{ width: 160, height: 100, fill: "#1d4ed8" }} />
  </Layer>
</Group>
```

See the [Layer live example](/playground/#/examples/composition/layer).

## API details from source

<span id="api-Layer"></span>

Describes a retained offscreen composition layer.

```ts
Layer: PibblPrimitiveComponent<LayerProps, PrimitiveInput<LayerProps, LayerStyle>>
```

Related API: [Layer](/reference/components/layer/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [LayerProps](/reference/types/elements-components/#layerprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [LayerStyle](/reference/types/styles/#layerstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[LayerProps](/reference/types/elements-components/#layerprops)

[LayerStyle](/reference/types/styles/#layerstyle)

[View source — packages/core/src/lib/components/layer.ts:222](/source/packages/core/src/lib/components/layer-ts/#L222)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Drawing composition](/minimal-examples/drawing/composition/): Group, cache, and clip a drawing, then add text and an embedded thumbnail. [Plain source](/minimal/drawing/composition.tsx)
## Interactive examples

- [Underwater scene](/examples/underwater/) · [Full page](/experience/underwater/)
- [Rainy Window](/examples/rainy-window/) · [Full page](/experience/rainy-window/)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.