# Drag, resize, and rotate
Use the convenience component with a writable geometry box.

## APIs demonstrated

- [Manipulable](/reference/components/manipulable/) from `@pibbl/core`
- [PibblManipulableProps](/reference/types/events/) from `@pibbl/core`
- [PibblManipulationBox](/reference/types/events/) from `@pibbl/core`
- [degrees](/reference/functions/degrees/) from `@pibbl/core`

## Complete example

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

```tsx
import {
  pibbl,
  Manipulable,
  Rectangle,
  useSignal,
  degrees,
  type PibblManipulableProps,
  type PibblManipulationBox,
} from "@pibbl/core";

function Scene() {
  const box = useSignal<PibblManipulationBox>({
    left: 80,
    top: 70,
    width: 180,
    height: 100,
  });
  const rotation = useSignal(degrees(10));
  const { width, height } = box.get();
  const props: PibblManipulableProps = {
    style: box,
    rotation,
    draggable: true,
    resizable: true,
    rotatable: true,
  };
  return (
    <Manipulable {...props}>
      <Rectangle style={{ width, height, fill: "#087e8b" }} />
    </Manipulable>
  );
}
const canvas = document.createElement("canvas");
canvas.width = 420;
canvas.height = 280;
document.body.append(canvas);
const controller = pibbl(canvas, <Scene />);
window.addEventListener("pagehide", () => controller.dispose(), { once: true });

```

## Usage notes

- Angles are radians; degrees() converts author-friendly degrees. The mounted component owns input listeners and gesture cleanup.

## Documentation version

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