API reference

Image

Place a portable still image from the selected deck's assets folder.

presentation.tsx

<Image id="cover" x={52} y={8} w={40} h={84} src="assets/cover.webp" alt="Descriptive subject" fit="cover" />

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.
Image	src	string	Yes	Portable local image path, normally under assets/.
	alt	string	—	Alternative description for the image.
	fit	cover \| contain \| fill \| scale-down	—	How image content fits its frame.
	cropX / cropY	number	—	Image translation within its frame, in percent.
	scaleX / scaleY	number	—	Image-content scale on each axis.
	radius	number	—	Frame corner radius.
	filter	string	—	Paper image-filter identifier.
	filterPreset	string	—	Preset for the selected image filter.
	filterDistortion / filterSize / filterAngle / filterContrast / filterSpeed / filterDetail	number	—	Fine controls for the selected paper filter.

Use id, x, y, w, h, and src. src should be a verified relative asset path such as assets/cover.webp.

Provide a useful alt description. Use fit="cover" when the image should fill its frame; do not use absolute paths, blob URLs, or Base64 data.