Configure the Shapes Tool

Curate which shapes the Shapes tool offers with config.shapes.presets. Pass the shape ids you want and the panel shows only those, in the order you list them.

When to use this

  • The full shape set is more than your users need.
  • You want to enforce a small, on-brand set of primitives.
  • You're building a focused annotation flow (e.g. arrows only).

Configure the presets

<ImageEditor
  src="/photo.jpg"
  config={{
    shapes: {
      presets: ["rect", "ellipse", "star"],
    },
  }}
/>

Shape ids match the built-in shapes — rect, ellipse, triangle, pentagon, hexagon, star, line. They render in the order you list them. Omit presets to show every built-in shape.

Try it

Open the Shapes tool — only the curated shapes appear:

Loading...
Loading image...

Next steps

Verified by tests/guides/configure-shapes.spec.tsx in the @editx/image-editor package.