# Path

Looking for ways to edit, bend, or warp a path? See
[PathGeometry: operations at a glance](/reference/functions/path-geometry/#operations-at-a-glance)
for the complete operation map, detailed references, and runnable examples.

```ts
import { Path } from "@pibbl/core";
```

`Path` uses [`PathProps`](/reference/types/elements-components/#pathprops) and [`PathStyle`](/reference/types/styles/#pathstyle). Its required `d` is a `Path2D` or `PathGeometry`; it
rejects children. Reuse a path created with a public `create*Path` function or
construct one with the browser API. Paint and coordinate targeting use the
same path geometry.

```tsx
<Path style={{ d: new Path2D("M10 10H110V70H10Z"), fill: "#38bdf8" }} />
```

Try the [Path live example](/playground/#/examples/drawing/path).

## API details from source

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

Describes a Canvas path primitive for JSX or createElement authoring.

```ts
Path: PibblPrimitiveComponent<PathProps, PrimitiveInput<PathProps, PathStyle>>
```

Related API: [Path](/reference/components/path/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [PathProps](/reference/types/elements-components/#pathprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [PathStyle](/reference/types/styles/#pathstyle).

### 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

[PathProps](/reference/types/elements-components/#pathprops)

[PathStyle](/reference/types/styles/#pathstyle)

[View source — packages/core/src/lib/components/path.ts:81](/source/packages/core/src/lib/components/path-ts/#L81)

## 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 example

Compile this TSX module with `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`, then load it from a browser entry point after the document body exists. It creates and mounts one canvas; dispose the controller before removing or replacing that canvas. The interactive study linked below adds controls beyond this minimal use case.

[Download source](/minimal/path.tsx)

```tsx
/** @jsxImportSource @pibbl/core */
import { pibbl, Path } from '@pibbl/core';

const canvas = document.createElement('canvas');
canvas.width = 320;
canvas.height = 240;
document.body.append(canvas);

const controller = pibbl(canvas, (
<Path style={{ d: new Path2D("M10 10H110V70H10Z"), fill: "#38bdf8" }} />
));

window.addEventListener('pagehide', () => controller.dispose(), { once: true });
```

## Complete minimal examples

- [Lines and authored paths](/minimal-examples/drawing/strokes-paths/): Combine polyline, axis-aligned strokes, mutable geometry, and SVG path data. [Plain source](/minimal/drawing/strokes-paths.tsx)
## Interactive examples

- [Path](/examples/path/) · [Full page](/experience/path/)
- [Path playground](/examples/path-geometry/) · [Full page](/experience/path-geometry/)
- [Editable text outlines](/examples/text-geometry/) · [Full page](/experience/text-geometry/)
- [Four-corner path warp](/examples/path-warp/) · [Full page](/experience/path-warp/)
- [Along Arc](/examples/path-bending/) · [Full page](/experience/path-bending/)
- [Along Path](/examples/along-path/) · [Full page](/experience/along-path/)
- [Text envelope playground](/examples/text-envelope/) · [Full page](/experience/text-envelope/)
## Documentation version

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