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: [{label: 'Go', value: 'go'}]}),
]));Namespaces
Enumerations
Interfaces
- ChatAttachment
- ChatAugmentation
- ChatModel
- ChatToolSpec
- ChatToolResult
- ToolRunOptions
- ChatToolDef
- RenderOptions
- RenderSession
- AgentOptions
- AgentFn
- ReplyFragment
- ChatReply
- ChatUi
- ToolConfig
- ChatSuggestion
- PlanStep
- PlanConfig
- Block
Type Aliases
Variables
Functions
- Bubble
- Group
- Modal
- Shield
- Vertical
- Horizontal
- SplitView
- Text
- InputField
- SelectField
- MultiSelectField
- DateField
- CurrencyField
- PercentField
- PhoneField
- EmailField
- SegmentedField
- Separator
- ToggleField
- ButtonToggleField
- CheckboxListField
- RadioListField
- BadgeField
- HeaderBar
- NavigationBar
- Badge
- Breadcrumb
- Icon
- IconBox
- Image
- Link
- Logo
- KeyValue
- Callout
- Highlight
- ImageViewer
- SheetViewer
- DocViewerList
- ToastNotification
- ButtonList
- Progress
- ProgressList
- StatusList
- Completion
- ThumbsFeedback
- Confirmation
- FieldComparison
- DownloadLink
- FileUpload
- DocViewer
- PdfNative
- Sheet
- Confetti
- Resolver
- Accordion
- Avatar
- Card
- Carousel
- Tabs
- Tooltip
- Pagination
- NavigationMenu
- DropdownMenu
- DataTable
- HoverCard
- Item
- Popover
- SheetModal
- Sidebar
- Conversation
- ConversationEmptyState
- Message
- MessageBody
- Response
- Suggestion
- SuggestionList
- MessageAction
- MessageActions
- PromptInput
- CodeBlock
- Snippet
- Sources
- Source
- InlineCitation
- Reasoning
- ChainOfThought
- ChainOfThoughtStep
- ToolInvocation
- Task
- TaskItem
- TaskItemFile
- Attachments
- Attachment
- TokenContext
- Artifact
- GeneratedImage
- OpenInChat
- ModelSelector
- Shimmer
- Skeleton
- Checkpoint
- Terminal
- StackTrace
- FileTree
- FileItem
- EnvVarList
- Commit
- TestResults
- ApiSchema
- PackageInfo
- PlanList
- PlanItem
- Queue
- WebPreview
- Sandbox
- AgentCard
- LocalChat
- Chat
- AudioPlayer
- Transcription
- MicSelector
- VoiceSelector
- SpeechInput
- setRendererHook
- render
- cleanupAll
- agent
- alert
- code
- sources
- speech
- generatedImage
- webPreview
- task
- reasoning
- reply
- ui
- tool
- chat
- failure
- fileUpload
- message
- step
- plan
- progress
- progressList
- requestUserAction
- runJobsWithProgressList
- updateFileUploadState