HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
SandboxView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorPairs an editable source pane with a live preview.ExperimentalSince 0.1.0ToolingUsageimport'@fusion.dev/helix/sandbox'Preview
API ReferenceRoothelix-sandboxPairs an editable source pane with a live preview.
PropTypeDefaultDescriptioncornerLabelstring"Resize panes and panel"Accessible name for the divider that moves both at once.defaultPanelSizenumber160What a reset makes the panel, in pixels.defaultSplitnumber50Where a reset puts the divider, where nothing declared it.lead"source"|"preview""source"Which pane comes first, before the divider.orientation"horizontal"|"vertical"Whether the panes sit side by side or stacked.panelCollapsedSizenumber0What the panel's height becomes when it is closed.panelLabelstring"Resize panel"Accessible name for the panel's divider.panelSizenumber160Height of the panel, in pixels.separatorLabelstring"Resize source pane"Accessible name for the divider.splitnumber50Percentage of the sandbox given to the source pane.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionpanelA panel under both panes, usually a terminal.previewThe live preview. Second unless `lead` says otherwise.sourceThe editable source pane. First unless `lead` says otherwise.statusA status bar, spanning both panes at the bottom.toolbarA bar across the top, spanning both panes.
EventTypeDescriptionhelix-before-panel-resizeHelixBeforePanelResizeEventFired before the panel's divider is let go, with its height in pixels. Cancelable: refusing it takes the decision and nothing moves.helix-before-splitHelixBeforeSplitEventFired before the panes' divider is let go, with the lead pane's share. Cancelable: refusing it takes the decision and nothing moves.
PartDescriptionbodyThe splitter holding the panes above the panel.cornerThe handle where the two dividers cross.paneEither pane.panelThe box holding whatever was slotted as the panel.panesThe splitter holding the source and preview panes.separatorEither divider.
CSS PropertyDescription--sandbox-grabThe invisible width of a divider's drag target.--sandbox-min-block-sizeMinimum height of the sandbox.--sandbox-separator-colorColor of the divider.
Previewhelix-sandbox-previewRenders sandbox source in a frame of its own.
PropTypeDefaultDescriptioncolorMode"dark"|"light"Which half of the palette the frame renders in.direction"rtl"Writing direction inside the frame.labelstring"Preview"Accessible name for the frame.layout"padded"|"centered"|"fullscreen"|"hug"How the example is placed in the frame.sourcestring""Markup to render.srcstring""Document the frame loads, which brings the styles and the elements.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionhelix-consoleHelixConsoleEventRelayed from the frame, one per console call.helix-resizeHelixResizeEventHow tall the frame's content is, whenever it changes.
MethodTypeDescriptionreload() => voidLoads the frame's document again, and re-sends the example to it.
PartDescriptionframeThe iframe.
Sourcehelix-sandbox-sourceEditable source for a sandbox preview.
PropTypeDefaultDescriptionfieldLabelstring"Example source"Accessible name for the editable region.namestring"html"Which source this pane holds, echoed in every `helix-before-edit`.tabIndentsbooleantrueWhether Tab indents rather than moving focus.valuestring""The source being edited.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
EventTypeDescriptionhelix-before-editHelixBeforeEditEventFired before the source is edited. Cancelable: refusing it takes the decision and nothing moves.helix-caretHelixCaretEventFired when the cursor moves.
PartDescriptionsourceThe editable region.
CSS PropertyDescription--sandbox-source-background-colorFill behind the source.--sandbox-source-min-block-sizeMinimum height of the pane.
StatusBarhelix-sandbox-status-barReports where the cursor is and what is being edited.
PropTypeDefaultDescriptioncolumnnumberOne-based column of the cursor.languagestringThe language being edited, as a name or one the editor knows.linenumberOne-based line of the cursor.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Items at the start of the bar.endItems after the readouts, at the end of the bar.
PartDescriptioncaretThe line and column readout.languageThe language readout.
CSS PropertyDescription--sandbox-status-bar-colorColor of the bar's text.
Terminalhelix-sandbox-terminalShows what the previewed example wrote to the console.
PropTypeDefaultDescriptionemptyLabelstring"Nothing written to the console yet."What to show before anything has been written.labelstring"Console output"Accessible name for the log.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
MethodTypeDescriptionclear() => voidEmpties the log.write(detail: ConsoleDetail) => voidAdds a line, collapsing it into the one above when they are identical.
PartDescriptioncountHow many times a repeated line arrived.emptyShown while nothing has been written.entryOne line.levelThe level a line came in at.logThe scrolling region.messageThe text of a line.
CSS PropertyDescription--sandbox-terminal-sizeHeight of the scrolling region.
Toolbarhelix-sandbox-toolbarThe bar across the top of a sandbox.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)Items at the start, usually the files.endItems at the end, usually menus.
CSS PropertyDescription--sandbox-toolbar-gapSpace between items.--sandbox-toolbar-sizeThe bar's height. Defaults to a large control.
ExamplesNameDescriptionA Live PreviewThe real preview frame, which runs what it is given inside a sandboxed document.EventsAn edit, a caret, two dividers and a log, which are five different things.PreviewSource beside a preview, with a toolbar over both and a status bar under them.Preview LeadingThe preview leading, stacked, with the source pane taking the smaller share.Sized PanesPanes opening at a stated size, which a workbench restores from a previous visit.With A PanelA third pane down the side, sized and collapsible, with every separator named.