Appearance
renderer
Public entry for the page-injected renderer — Layer 3.
Mapped to @matterway/sdk/UI in the SDK's package.json exports. Surfaces the everyday skill-authoring API:
render()— the entry point that mounts a Block tree onctx.pageand resolves when the user submits.- Block functions (
Bubble,InputField,NavigationBar, …). - Template helpers (
message,success,failure, …). - Types:
Block,ChildBlock,RenderSession,RenderOptions.
Low-level / advanced APIs (createRenderer, fromPuppeteer, PagePort, the Layer 2 Renderer/RendererSession interfaces) live on @matterway/sdk/UI/renderer. Skill authors should not need them.
Example
ts
import { render, Bubble, InputField, NavigationBar } from '@matterway/sdk/UI';
const {data, button} = await render(ctx, Bubble([
InputField({name: 'email'}),
NavigationBar({buttons: [{text: 'Go', value: 'go'}]}),
]));Enumerations
Interfaces
Type Aliases
Variables
Functions
- updateFileUploadState
- Bubble
- Group
- Modal
- Shield
- Vertical
- Horizontal
- SplitView
- Text
- InputField
Input- SelectField
Select- MultiSelectField
MultiSelect- DateField
- CurrencyField
- PercentField
- PhoneField
- EmailField
- SegmentedField
- ToggleField
- ButtonToggleField
- CheckboxListField
CheckboxList- RadioListField
RadioList- BadgeField
- HeaderBar
- NavigationBar
- Badge
- Icon
- IconBox
- Image
- Link
- KeyValue
- Callout
- ButtonList
- Progress
- ProgressList
- StatusList
- Completion
- ThumbsFeedback
- FieldComparison
- DownloadLink
- FileUpload
- DocViewer
- PdfNative
- Sheet
- Confetti
- Resolver
- Accordion
- Avatar
- Card
- Carousel
- Tabs
- Tooltip
- Pagination
- NavigationMenu
- DropdownMenu
- DataTable
- HoverCard
- Item
- Popover
- setRendererHook
- render
- cleanupAll
- alert
- failure
- feedback
- fileUpload
- message
- progress
- progressList
- requestUserAction
- runJobsWithProgressList
- success