Shapes

Shapes are vector elements: rectangles, circles, stars, arrows, lines, speech bubbles, and more. The user sets their fill color, outline color, and outline width. With an AI provider, the user can also describe a new shape.

SetupCopy Anchor Link

Shapes work with no setup. AI shape generation needs an AI provider:

import { ImageEditor } from '@layermetry/media-editor/react';

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <ImageEditor
        licenseKey="YOUR_LICENSE_KEY"
        onClose={() => console.log('The editor was closed')}
        // AI shape generation: your AI proxy.
        ai={{ endpointUrl: 'https://api.example.com/ai' }}
      />
    </div>
  );
}

Shape libraryCopy Anchor Link

Open the Shapes panel in the tool rail, or press Add shape in the toolbar above the page. A click on a shape adds it to the page and selects it.

View full size

The panel has 43 shapes, in six categories:

All shows every shape. A new shape is light gray (#E5E5E5) with a black outline.

Fill and strokeCopy Anchor Link

Select a shape. The toolbar above the page shows:

The color pickers offer a color field, hex and RGB values, and a row of ready-made colors.

A stroke width of 0 removes the outline. Fill is a solid color. For effects such as a shadow or rounded corners, use the Effects panel. See Effects and filters.

Lines and arrowsCopy Anchor Link

The Lines category adds straight lines: a solid, dashed, or dotted line, a line with one arrowhead, or a line with two. A new line is 200 pixels long and horizontal.

Select a line to see a handle at each end. Drag a handle to change the length and the angle of the line. The color of a line is its stroke color, and its thickness is its stroke width.

The Arrows category adds filled arrow shapes, which resize like any other shape.

AI shape generationCopy Anchor Link

With ai set, the Shapes panel shows Generate shape at the top. The user describes the shape, for example "a simple triangle", and presses Generate. The count line shows the number of returned outlines. Add to canvas adds the chosen shape to the page.

View full size

A generated shape is a vector path. It has the same fill and stroke controls as the other shapes.

The request has "operation": "svgPath", and your AI server answers with { items: [{ pathData }] }, with SVG path data in each entry. See Custom AI endpoint.

ConfigurationCopy Anchor Link

EventsCopy Anchor Link

Shapes have no events of their own. They are part of the design, and they reach you in the exported file through onExport. See Events.

TroubleshootingCopy Anchor Link

Additional resourcesCopy Anchor Link