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:
Image Editor
Loading...
Loading image...Next steps
- Crop Tool — trim the aspect-ratio grid.
- Customize the Toolbar — hide whole tools you don't need.
- Configuration — the full config reference.
Verified by
tests/guides/configure-shapes.spec.tsxin the@editx/image-editorpackage.