Examples Runnable demo apps for @visulima/tui React mode and raw-buffer mode
All examples in this page are part of this repository.
Run from repository root:
node --import @oxc-node/core/register examples/ < nam e > .tsx node --import @oxc-node/core/register examples-raw/ < nam e > .ts File What it demonstrates counter.tsxuseState + useInput minimal appuse-input.tsxKey parsing: arrows, ctrl/meta combos, special keys borders.tsxBorder styles: single, double, round, bold, classic box-slices.tsxAll 16 permutations of per-side border toggles box-backgrounds.tsxBackground colors justify-content.tsxFlex alignment and spacing terminal-resize.tsxuseWindowSize with live resize behaviorhtop.tsxhtop-style system monitor (Unix-like; uses ps aux)
File What it demonstrates cursor-input/cursor-input.tsxDeclarative <Cursor /> inline text input cursor-ime.tsxuseCursor() with IME and wide character supportuse-focus.tsxuseFocus + Tab cyclinguse-focus-with-id.tsxNamed focus targets + focus(id) use-mouse.tsxuseMouse buttons, wheel, modifiersuse-paste.tsxusePaste routing vs useInput fallbackuse-clipboard.tsxuseClipboard OSC 52 copy-to-clipboard
File What it demonstrates use-scrollable.tsxuseScrollable viewport state + sliced renderingstatic.tsx<Static> append-only outputchat.tsxChat-style history + live input
File What it demonstrates code.tsx<Code> syntax highlighting with line numbersmarkdown.tsx<Markdown> full markdown rendering in terminaldiff-view.tsx<DiffView> unified and split diff viewsspinner.tsx<Spinner> defaults + custom framesprogress-bar.tsx<ProgressBar> states and optionstext-input.tsx<TextInput> typing, placeholder, submitconfirm-input.tsx<ConfirmInput> Y/N confirmation promptmulti-select.tsx<MultiSelect> checkbox selection with keyboard navselect-input.tsx<SelectInput> single-choice list with separatorsbadge.tsx<Badge> colored status labelsstatus-message.tsx<StatusMessage> variant icons (success/error/warning)alert.tsx<Alert> bordered alert boxes with title supportunordered-list.tsx<UnorderedList> nested bullet listsordered-list.tsx<OrderedList> nested numbered listsslider.tsx<Slider> horizontal/vertical range inputstextarea.tsx<Textarea> multi-line editor with undo, selectiontabs.tsx<Tabs> tabbed navigation with keyboard switchingtimer.tsx<Timer> countdown with start/stop/reset controlsstopwatch.tsx<Stopwatch> with lap capturehelp.tsx<Help> keybinding bar with useKeyBindingspaginator.tsx<Paginator> paginated list with dot/numeric stylesfile-picker.tsx<FilePicker> file system browserkitchen-sink.tsxMulti-feature demo in one app
File What it demonstrates form-controls.tsx<Button>, <Checkbox>, <Switch>, <RadioGroup>, <Divider>disclosure.tsx<Accordion> and <Collapsible> with keyboard navigationfeedback.tsx<Stepper>, <Toast> (auto-dismiss), <Placeholder> skeletonform.tsx<Form> + useForm + <MaskedInput> + <SearchInput> + <ConfirmDialog>
File What it demonstrates layout-components.tsx<Card>, <Heading>, <Paragraph>, <Kbd>, <Tag>, <Breadcrumb>, <LoadingIndicator>definition-list.tsx<DefinitionList> inline + stacked layoutssparkline.tsx<Sparkline> live inline mini-chart
File What it demonstrates navigation.tsx<Menu>, <Tooltip>, <ContentSwitcher>, <OptionList>command-palette.tsx<CommandPalette> fuzzy finder with ranked resultsdate-picker.tsx<Calendar> and <DatePicker>
File What it demonstrates ai-widgets.tsx<OperationTree>, <MessageBubble>, <StreamingText>, <ApprovalPrompt>, <CommandBlock>, <ShimmerText>, <ModelBadge>, <BlinkDot>, <StatusLine>
File What it demonstrates use-animation.tsxuseAnimation multi-speed demo: rainbow unicorn, sparkles, spinneranimation.tsx<Transition> presets and <AnimatePresence> list orchestration
File What it demonstrates charts.tsx<BarChart>, <LineChart>, <AreaChart>, <ScatterPlot>, <Histogram>, <Heatmap>, <Gauge>canvas.tsxImperative <Canvas> drawing API with custom visualizations
File What it demonstrates use-interval.tsxuseInterval pausable periodic callbackuse-timeout.tsxuseTimeout one-shot timer with cancel/resetuse-hotkey.tsxuseHotkey string + descriptor shortcutsuse-key-chord.tsxuseKeyChord multi-key sequences (vim-style)use-persistent-state.tsxusePersistentState with pluggable storage
File What it demonstrates suspense.tsxSuspense with async data concurrent-suspense.tsxConcurrent rendering behavior use-transition.tsxuseTransitionincremental-rendering.tsxFrequent partial updates sierpinski.tsxFiber-heavy animated tree
File What it demonstrates i18n.tsxreact-i18next locale switching, plurals, env detection
See i18n for the full guide.
File What it demonstrates inline-minimal.tsxMinimal renderInline() usage inline-picker.tsxInline picker UI
File What it demonstrates logo.tsxonBeforeFlush direct buffer overlaysrattata.tsxStreaming fake-assistant demo stress-test.tsx~700 FPS sustained full-terminal animation
File What it demonstrates ascii-3d.tsSpinning ASCII-shaded 3D cube with z-buffer matrix.tsMatrix rain conway.tsConway's Game of Life plasma.tsPlasma effect fire.tsFire effect jitter.tsFrame-time oscilloscope scope.tsMulti-harmonic oscilloscope inline-picker.tsInline picker without React
All raw examples use examples-raw/harness.ts.