API reference

defineSlideXComponent

components/Hero.tsx

import { Shape, Text, defineSlideXComponent } from "@open-slidex/sdk/react";

export const Hero = defineSlideXComponent({
  name: "Hero",
  props: { title: { type: "string", required: true } },
  assetReferences: () => [],
  toMotionDoc: ({ title }) => (
    <Text id="hero-title" role="title" x={8} y={12} w={72} h={16} fontSize={48}>{title}</Text>
  ),
  component: ({ title }) => (
    <Text id="hero-title" role="title" x={8} y={12} w={72} h={16} fontSize={48}>{title}</Text>
  ),
});

Props reference

Keep these values literal and serializable so Canvas, Inspector, validation, and export can process them reliably.

API	Property	Type / values	Required	Description
defineSlideXComponent	name	string	Yes	Stable display name for the registered local component.
	component	React component	Yes	Presentation-time implementation of the component.
	props	literal prop schema	—	Optional literal string, number, and boolean prop definitions, including required.
	propsSchema	safeParse schema	—	Optional runtime schema; safeParse receives the component props.
	assetReferences	(props) => string[]	—	Optional local asset paths used by this component.
	toMotionDoc	(props) => ReactNode	—	Required when the component must expand into editable MDX or PPTX-native layers.

Register only portable behaviour

A registered component needs a stable name and a presentation-time component. When it must remain editable in MDX or PPTX export, provide deterministic toMotionDoc output; assetReferences declares its local files.

Keep instances distinguishable

The expanded native layers still need stable, unique IDs. Pass an instance prefix when the same local component appears more than once on a slide.