Compare supplied code and output
Check the generated moduleComplete
export function canSend(draft: string) {
return draft.trim().length > 0;
}2 checks passed No errors found.
Sandbox
Combines a tool-status disclosure with keyboard-accessible code and output tabs.
Preview
Check the generated moduleComplete
export function canSend(draft: string) {
return draft.trim().length > 0;
}2 checks passed No errors found.
In action
When to use
Use it for
- Display supplied generated code and the result of an application-owned run.
- Use tab/onTabChange or defaultTab to select code or output.
- Supply codeContent to compose an optional syntax renderer, and output for text or structured React results.
Avoid
- Treating this display surface as a code executor or isolation boundary.
- Reporting a successful run before the application supplies that state.
Install
React package
npm install @noorddev/vlak-react
Load the stylesheet once at your app root, then import the components you use.
import "@noorddev/vlak-react/css";
import { Sandbox } from "@noorddev/vlak-react";Per-component imports are available at @noorddev/vlak-react/components/sandbox.
Copy the source
npx @noorddev/vlak-cli add sandbox
Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.
shadcn registry
npx shadcn add https://vlak.dev/r/sandbox.json
Installs the same source through the shadcn CLI.
React
import { Sandbox } from "@noorddev/vlak-react";
<Sandbox title="Check generated module" state="complete" code="export const ready = true;" language="TypeScript" output="2 checks passed" />See the integration example to compose these components with your application's model and data.
Props
Sandbox
A code/output disclosure. Execution and process isolation remain application-owned.
| Prop | Type | Default | Description |
|---|---|---|---|
coderequired | string | ||
language | string | "Text" | |
output | ReactNode | ||
codeContent | ReactNode | ||
tab | "output" | "code" | ||
defaultTab | "output" | "code" | "code" | |
onTabChange | (tab: "code" | "output") => void | ||
titlerequired | ReactNode | Name of the application-owned tool operation. | |
state | ToolCallState | ||
statusLabel | string | More precise supplied progress, for example approval or input preparation. | |
error | string | ||
defaultOpen | boolean | true | |
onOpenChange | (open: boolean) => void |
Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.
The ref reaches HTMLDetailsElement.
Keyboard
| Keys | Does |
|---|---|
| Tab | Tab reaches the native disclosure, active tab and controls inside the selected panel. |
| Arrow keys, Home, End, Enter, Space | Arrow keys, Home and End move between code/output tabs; Enter or Space activates the focused control. |
Accessibility
- ToolCall supplies a named 44px summary, status text and subtle 4px surface.
- Tabs provide a named tablist and labelled panels; hidden panels do not stay in the tab order.
- Output strings are escaped preformatted text and can be read without repeated live announcements.
Markup
The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.
npm install @noorddev/vlak
import "@noorddev/vlak/css";
<details class="rs-tool-call rs-sandbox" open><summary class="rs-tool-call-summary"><span class="rs-tool-call-title">Check generated module</span><span class="rs-tool-call-state">Complete</span></summary><div class="rs-tool-call-body"><div class="rs-sandbox-content"><pre class="rs-sandbox-output">2 checks passed</pre></div></div></details>
Classes
.rs-sandbox.rs-sandbox-content.rs-sandbox-output
Depends on
Use elsewhere
More in AI
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalWeb previewJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas