Archetype

The archetype property is a semantic classification that tells the editor what kind of component you're building. The editor and AI tools use this hint to provide appropriate default behaviors, suggestions, and capabilities for your component.

You can define archetype in editorElement and in elements of type inlineElement.

'Accordion'

Expandable and collapsible sections for progressive disclosure.


'AnimatedGraphic'

Displays animated graphics, such as Lottie or GIF animations.


'Audio'

Plays audio content with playback controls.


'Avatar'

Displays profile images or initials.


'Breadcrumbs'

Shows a hierarchical navigation path, such as Home > Category > Page.


'Button'

A clickable element for interactions and triggering actions.


'Captcha'

CAPTCHA verification to distinguish humans from bots.


'Carousel'

Rotating slideshow of content items with navigation controls.


'Cart'

E-commerce shopping cart with item management.


'Checkbox'

Boolean selection with checked and unchecked states.


'ContactForm'

Pre-built form for visitor inquiries with email delivery.


'Container'

Groups and organizes child elements. Commonly used for complex composite components.


'DatePicker'

Calendar-based date selection.


'Dropdown'

Select 1 or more options from a collapsible list.


'Gallery'

Shows a collection of media items in a grid, masonry, or slideshow layout.


'Image'

Displays static images with optional alt text and sizing.


'Line'

Horizontal or vertical line for visual separation.


'LoginButton'

A specialized button for initiating authentication or login flows.


'Logo'

Displays brand logos, typically linked to the home page.


'Map'

Interactive or static map display, such as Google Maps or Mapbox.


'Menu'

Navigation menu with links, dropdowns, or mega-menu layouts.


'Pagination'

Page navigation controls for previous, next, and page numbers.


'ProgressBar'

Shows progress, completion status, or loading state.


'RadioGroup'

Single selection from multiple mutually exclusive options.


'RatingInput'

Allows submitting a rating, typically stars.


'Ratings'

Displays a read-only rating value, such as stars or a score.


'RichTextEditor'

Allows formatting text with a subset of HTML, such as bold, italic, and links.


'SearchBox'

Search input with query submission and optional autocomplete.


'SignatureInput'

Captures handwritten digital signatures.


'Slider'

Selects a numeric value in a defined range.


'Social'

Social media buttons, feeds, or sharing functionality.


'Switch'

Toggle control for on/off boolean selection.


'Tabs'

Organizes content into switchable tabbed panels.


'Text'

Displays static or dynamic text content, such as headings, paragraphs, and labels.


'TextInput'

Single- or multi-line text entry field.


'TimePicker'

Time selection with hour and minute controls.


'Upload'

File upload control for documents, images, or other files.


'VectorArt'

Displays scalable vector graphics (SVG).


'Video'

Embeds and plays video content with playback controls.


'Frame'

Embeds external content in a frame (for example, iframe).


'Divider'

Visual separator between sections (for example, lines or shape dividers).


'UNKNOWN_Archetype'

Default when you don't specify an archetype.

Examples

Button component

Copy

See also

Did this help?