API reference
Shape
Draw a field, rule, highlight, or simple geometric visual.
presentation.tsx
<Shape id="accent" x={8} y={30} w={5} h={48} shape="rectangle" fill="#7C3AED" stroke="transparent" strokeWidth={0} radius={8} />Props reference
Keep these values literal and serializable so Canvas, Inspector, validation, and export can process them reliably.
| API | Property | Type / values | Required | Description |
|---|---|---|---|---|
| Shared native-layer props | id | string | Yes | Stable, unique layer identifier. Required for every visible native layer. |
| x | number | Yes | Left position as a percentage of the slide canvas. | |
| y | number | Yes | Top position as a percentage of the slide canvas. | |
| w | number | Yes | Frame width as a percentage of the slide canvas. | |
| h | number | Yes | Frame height as a percentage of the slide canvas. | |
| groupId | string | — | Groups native children without adding a wrapper element. | |
| groupName | string | — | Human-readable name for a group in Workbench. | |
| sharedId | string | — | Matches the same layer type across adjacent Morph slides; unique within each slide. | |
| rotation | number | — | Clockwise rotation in degrees. | |
| opacity | number | — | Layer opacity from 0 to 1. | |
| motion | JSON string | — | Versioned declarative action sequence. Keep a complete static final frame. | |
| interaction | JSON string | — | Versioned click interaction for slide navigation or a link. | |
| Shape | shape | rectangle | circle | triangle | diamond | star | line | arrow | chevron | hexagon | parallelogram | Yes | Geometry to draw. |
| fill | color string | — | Interior color. | |
| stroke | color string | — | Outline or line color. | |
| strokeWidth | number | — | Outline or line width. | |
| radius / borderRadius | number | — | Rounded rectangle corner radius. | |
| corner | number | — | Continuous-corner treatment. | |
| points / sides | number | — | Star points or polygon sides. | |
| lineStyle | solid | dashed | dotted | — | Line stroke pattern. | |
| arrowStart / arrowEnd | none | arrow | circle | bar | — | Line endpoint decorations. | |
| arrowStartSize / arrowEndSize | number | — | Endpoint size as a percentage. | |
| shapeImageSrc | string | — | Optional image clipped inside a non-line shape. | |
| shapeImageAlt | string | — | Description for the shape image. | |
| shapeImageFit | cover | contain | fill | scale-down | — | How the shape image fills its geometry. | |
| shapeImageCropX / shapeImageCropY / shapeImageScaleX / shapeImageScaleY | number | — | Shape-image crop and scale controls. | |
| mask | none | alpha | luma | clip | — | Shape mask mode. | |
| operation | none | subtract | intersect | exclude | — | Shape boolean treatment. |
Required syntax
Use id, x, y, w, h, and shape. rectangle, circle, line, diamond, and star are used by the official references.
Common styling
Use fill, stroke, strokeWidth, radius, rotation, and points as literal values. A stable sharedId may connect compatible same-type shapes across adjacent Morph slides.