Configure the Shapes Tool

Configure filled, outlined, gradient, image-filled, and abstract graphics with config.shapes. The built-in catalog is organized in a searchable gallery that you can replace or extend with editable shape presets of your own.

When to use this

• You want on-brand graphics next to the built-in catalog.
• You need reusable gradients, outlines, image fills, or custom paths.
• You want a focused replacement catalog for a specific workflow.

Configure the presets

<ImageEditor
  src="/photo.jpg"
  config={{
    shapes: {
      additionalPresetGroups: [{
        id: "brand",
        label: "Brand",
        presets: [{
          id: "brand-badge",
          label: "Brand badge",
          shape: { kind: "rect", cornerRadius: 24 },
          fill: {
            kind: "gradient",
            gradient: {
              type: "linear",
              angle: 45,
              stops: [
                { offset: 0, color: "#2563eb" },
                { offset: 1, color: "#14b8a6" },
              ],
            },
          },
          stroke: { color: "#ffffff", width: 4 },
          sizeFraction: 0.35,
        }],
      }],
    },
  }}
/>

Catalog behavior

Use presetGroups to replace the complete built-in catalog. Use additionalPresetGroups to retain the built-ins and append custom groups. An additional group whose id matches filled, outline, gradient, image, or path appends its presets to that existing row. The gallery searches translated category labels and preset labels.

Each ShapePreset defines real document semantics: shape, fill, optional stroke, and optional sizeFraction. Shapes can use color, gradient, or image fills. Custom paths provide pathData and a viewBox.

Thumbnails are rendered from the same authored geometry and paint used for insertion. The deprecated optional preview field remains accepted for compatibility but is not needed for new presets.

Shape defaults

Legacy allowlist

The deprecated shapes.presets string list accepts rect, ellipse, triangle, pentagon, hexagon, star, and line. It is mapped to one gallery category; prefer grouped presets for new integrations.

Try it

Open the Shapes tool to see a replacement catalog with three authored styles:

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.tsx in the @editx/image-editor package.