Archetype

Alpha: Editor React Components are currently in alpha. This feature is subject to change and may have bugs, issues, and limitations. We're actively improving it based on your feedback.

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.

Where to define

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

Archetype values

'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.


'Divider'

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


'Dropdown'

Select 1 or more options from a collapsible list.


'Frame'

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


'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.


'UNKNOWN_Archetype'

Default when you don't specify an archetype.

Examples

Button component

Copy

See also

Last updated: 17 May 2026

Did this help?