Components

JSVision components are terminal-native visual building blocks. Standard components cover focused jobs such as input, selection, scrolling, and window chrome. The Data Grid and Code Editor are larger workspaces with their own guided learning paths and multiple live examples.

Start with the smallest component that owns the behavior you need, then compose it into an application shell. Every component page explains public state, sizing, interaction, theming, and the boundary between related choices.

Specialist workspaces

Data Grid →

Display or edit typed tabular data, then add sorting, filtering, validation, aggregation, master/detail views, data-at-scale strategies, and export.

Code Editor →

Build a language-aware editing workspace with documents, syntax highlighting, folding, search, language intelligence, large-document tiers, themes, and host-safety boundaries.

Component families

Family	Choose it for	Components
Foundations	Custom drawing and child composition	View · Group
Application shell	App lifecycle, desktops, screens, windows, menus, and status	Application · Desktop · Router · Window · Menu Bar · Status Line
Controls	Commands, text/value entry, choices, toggles, and read-only messages	Button · Input · Text · Label · Check Group · Radio Group · Multi-check Group · Slider · Switch
Containers and navigation	Modal tasks, lists, scrolling, trees, tabs, splits, and dropdown history	Dialog · List View · List Box · Scroller · Scroll Bar · Tree · Tabs · Split View · Combo Box · History
Feedback	Determinate progress and compact busy state	Progress Bar · Spinner
Date	Always-visible or compact date selection	Calendar · Date Picker
Color	Palette browsing or compact popup color selection	Color Swatch · Color Picker
Surface	Off-screen drawing buffers and visual viewports	Surface · Surface View
Editing and output	General text editing, memo fields, editor chrome, indicators, and terminal output	Editor · Memo · Edit Window · Indicator · Terminal
Forms	Declarative modal data collection and validation	Form Dialog
Files	Ready-made file tasks or composable file-system views	File Dialog · Change Directory Dialog · File List · Directory List · File Input · File Info Pane · File Editor

How applications fit together

Application
├─ Desktop
│  ├─ Window
│  └─ Dialog
└─ Router
   └─ Screen Group
      ├─ Containers
      └─ Controls

An Application owns the event loop and shared chrome. A Desktop manages overlapping windows; a Router swaps full-screen groups. Inside either route, containers organize focusable controls while leaf views draw content or accept input.

Choose between related components

Need	Choose	Instead of
Draw one custom leaf	View	Group when you need child composition
Manage movable windows	Desktop	Router for screen-stack navigation
Keep a modeless movable surface open	Window	Dialog for one modal task
Render a generic item model	List View	List Box for string-list convenience
Scroll content through a viewport	Scroller	Scroll Bar for a standalone position control
Keep a month visible	Calendar	Date Picker for compact dropdown selection
Show a palette grid	Color Swatch	Color Picker for popup/value entry
Draw into an off-screen buffer	Surface	Surface View to display one
Edit ordinary text	Editor, Memo, or Edit Window	Code Editor for language-aware editing
Display or navigate a simple table	DataGrid	EditableDataGrid for typed editing
Run a complete file task	File Dialog	Composable file views for a custom workflow

Learn the shared systems

• Layout — size and position components in terminal cells.
• Reactive state — bind signals without manual repaint plumbing.
• Theming and colour depth — understand roles and terminal capabilities.
• Keyboard and clipboard — apply portable focus, navigation, selection, and clipboard practices.
• API reference — inspect complete exported types after learning the component contract.