# Allocated layout box
Read the current canvas allocation and draw an inset panel.

## APIs demonstrated

- [useLayoutBox](/reference/hooks/use-layout-box/) from `@pibbl/core`
- [LayoutItemStyle](/reference/types/layout/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/layout/layout-box.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import {
  Rectangle,
  Text,
  pibbl,
  useLayoutBox,
  type LayoutItemStyle,
} from "@pibbl/core";

function Scene() {
  const box = useLayoutBox();
  const item: LayoutItemStyle = { left: 16, top: 16 };
  return (
    <>
      <Rectangle
        style={{
          ...item,
          width: box.width - 32,
          height: box.height - 32,
          fill: "#0f766e",
        }}
      />
      <Text
        style={{ left: 28, top: 48, font: "16px sans-serif", fill: "#fff" }}
      >
        {`${box.width} x ${box.height}`}
      </Text>
    </>
  );
}
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Creates its own canvas and disposes the Pibbl mount on pagehide.

## Documentation version

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