

<!DOCTYPE html>

<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">

  <link rel="stylesheet" href="/textui/assets/css/just-the-docs-default.css">

  <link rel="stylesheet" href="/textui/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet">

  <style id="jtd-nav-activation">
  
    .site-nav ul li a {
      background-image: none;
    }

  </style>

  

  
    <script src="/textui/assets/js/vendor/lunr.min.js"></script>
  

  <script src="/textui/assets/js/just-the-docs.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  



  <!-- Begin Jekyll SEO tag v2.9.0 -->
<title>TextUI | A dependency-free TypeScript terminal UI runtime. Screens are plain data; JSX is one way to write them.</title>
<meta name="generator" content="Jekyll v4.4.1" />
<meta property="og:title" content="TextUI" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="A dependency-free TypeScript terminal UI runtime. Screens are plain data; JSX is one way to write them." />
<meta name="twitter:description" property="og:description" content="A dependency-free TypeScript terminal UI runtime. Screens are plain data; JSX is one way to write them." />
<link rel="canonical" href="https://softov.github.io/textui/assets/css/just-the-docs-head-nav.css" />
<meta property="og:url" content="https://softov.github.io/textui/assets/css/just-the-docs-head-nav.css" />
<meta property="og:site_name" content="TextUI" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="TextUI" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebPage","description":"A dependency-free TypeScript terminal UI runtime. Screens are plain data; JSX is one way to write them.","headline":"TextUI","url":"https://softov.github.io/textui/assets/css/just-the-docs-head-nav.css"}</script>
<!-- End Jekyll SEO tag -->


  <script>
  (function () {
    var base = '/textui/assets/css/just-the-docs-';
    var sheet = document.querySelector('link[rel="stylesheet"]');
    var prefersDark = window.matchMedia('(prefers-color-scheme: dark)');

    function chosen() {
      try { return localStorage.getItem('textui-theme'); } catch (e) { return null; }
    }

    function resolve(choice) {
      if (choice === 'light' || choice === 'dark') return choice;
      return prefersDark.matches ? 'dark' : 'light';
    }

    function apply(choice) {
      var scheme = resolve(choice);
      if (sheet) sheet.setAttribute('href', base + scheme + '.css');
      var root = document.documentElement;
      root.setAttribute('data-theme', scheme);
      root.setAttribute('data-theme-choice', choice || 'auto');
    }

    window.textuiTheme = {
      get: function () { return chosen() || 'auto'; },
      set: function (choice) {
        try {
          if (choice === 'auto') localStorage.removeItem('textui-theme');
          else localStorage.setItem('textui-theme', choice);
        } catch (e) { /* private windows still get a working page */ }
        apply(choice === 'auto' ? null : choice);
      }
    };

    apply(chosen());

    // Keep following the system, but only while the reader has not overridden it.
    var follow = function () { if (!chosen()) apply(null); };
    if (prefersDark.addEventListener) prefersDark.addEventListener('change', follow);
    else if (prefersDark.addListener) prefersDark.addListener(follow);
  })();
</script>


</head>

<body>
  <a class="skip-to-main" href="#main-content">Skip to main content</a>
  <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="svg-link" viewBox="0 0 24 24">
  <title>Link</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
  </svg>
</symbol>

  <symbol id="svg-menu" viewBox="0 0 24 24">
  <title>Menu</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
    <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
  </svg>
</symbol>

  <symbol id="svg-arrow-right" viewBox="0 0 24 24">
  <title>Expand</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right">
    <polyline points="9 18 15 12 9 6"></polyline>
  </svg>
</symbol>

  <!-- Feather. MIT License: https://github.com/feathericons/feather/blob/master/LICENSE -->
<symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link">
  <title id="svg-external-link-title">(external link)</title>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
</symbol>

  
    <symbol id="svg-doc" viewBox="0 0 24 24">
  <title>Document</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>
  </svg>
</symbol>

    <symbol id="svg-search" viewBox="0 0 24 24">
  <title>Search</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</symbol>

  
  
    <!-- Bootstrap Icons. MIT License: https://github.com/twbs/icons/blob/main/LICENSE.md -->
<symbol id="svg-copy" viewBox="0 0 16 16">
  <title>Copy</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
    <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
  </svg>
</symbol>
<symbol id="svg-copied" viewBox="0 0 16 16">
  <title>Copied</title>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16">
    <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
    <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/>
  </svg>
</symbol>

  
</svg>

  
    <header class="side-bar">
  <div class="site-header">
    <a href="/textui/" class="site-title lh-tight">
  TextUI

</a>
    <button id="menu-button" class="site-button btn-reset" aria-label="Menu" aria-expanded="false">
      <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
    </button>
  </div>

  <nav aria-label="Main" id="site-nav" class="site-nav">
  
  
    <ul class="nav-list"><li class="nav-list-item"><a href="/textui/" class="nav-list-link">Home</a></li><li class="nav-list-item"><a href="/textui/getting-started.html" class="nav-list-link">Getting started</a></li><li class="nav-list-item"><a href="/textui/vocabulary.html" class="nav-list-link">The vocabulary</a></li><li class="nav-list-item"><a href="/textui/architecture.html" class="nav-list-link">Architecture</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Store submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/store/" class="nav-list-link">Store</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/store/paths.html" class="nav-list-link">Paths and scopes</a></li><li class="nav-list-item"><a href="/textui/store/reading.html" class="nav-list-link">Reading and writing</a></li><li class="nav-list-item"><a href="/textui/store/derived.html" class="nav-list-link">Computed and collections</a></li><li class="nav-list-item"><a href="/textui/store/providers.html" class="nav-list-link">Providers and persistence</a></li><li class="nav-list-item"><a href="/textui/store/in-components.html" class="nav-list-link">In components</a></li><li class="nav-list-item"><a href="/textui/store/events.html" class="nav-list-link">Events</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Components submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/" class="nav-list-link">Components</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/nodes.html" class="nav-list-link">Nodes</a></li><li class="nav-list-item"><a href="/textui/components/base-props.html" class="nav-list-link">Base props</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="The four primitives submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/primitives.html" class="nav-list-link">The four primitives</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/primitives/box.html" class="nav-list-link">box</a></li><li class="nav-list-item"><a href="/textui/components/primitives/canvas.html" class="nav-list-link">canvas</a></li><li class="nav-list-item"><a href="/textui/components/primitives/spacer.html" class="nav-list-link">spacer</a></li><li class="nav-list-item"><a href="/textui/components/primitives/text.html" class="nav-list-link">text</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Layout and overflow submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/layout.html" class="nav-list-link">Layout and overflow</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/layout/center.html" class="nav-list-link">Center</a></li><li class="nav-list-item"><a href="/textui/components/layout/column.html" class="nav-list-link">Column</a></li><li class="nav-list-item"><a href="/textui/components/layout/divider.html" class="nav-list-link">Divider</a></li><li class="nav-list-item"><a href="/textui/components/layout/grid.html" class="nav-list-link">Grid</a></li><li class="nav-list-item"><a href="/textui/components/layout/panel.html" class="nav-list-link">Panel</a></li><li class="nav-list-item"><a href="/textui/components/layout/row.html" class="nav-list-link">Row</a></li><li class="nav-list-item"><a href="/textui/components/layout/scroll-view.html" class="nav-list-link">ScrollView</a></li><li class="nav-list-item"><a href="/textui/components/layout/spacer.html" class="nav-list-link">Spacer</a></li><li class="nav-list-item"><a href="/textui/components/layout/splitter.html" class="nav-list-link">Splitter</a></li><li class="nav-list-item"><a href="/textui/components/layout/stack.html" class="nav-list-link">Stack</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Display and data submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/display.html" class="nav-list-link">Display and data</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/display/alert.html" class="nav-list-link">Alert</a></li><li class="nav-list-item"><a href="/textui/components/display/area-chart.html" class="nav-list-link">AreaChart</a></li><li class="nav-list-item"><a href="/textui/components/display/badge.html" class="nav-list-link">Badge</a></li><li class="nav-list-item"><a href="/textui/components/display/bar-chart.html" class="nav-list-link">BarChart</a></li><li class="nav-list-item"><a href="/textui/components/display/card.html" class="nav-list-link">Card</a></li><li class="nav-list-item"><a href="/textui/components/display/code-viewer.html" class="nav-list-link">CodeViewer</a></li><li class="nav-list-item"><a href="/textui/components/display/empty-state.html" class="nav-list-link">EmptyState</a></li><li class="nav-list-item"><a href="/textui/components/display/error-state.html" class="nav-list-link">ErrorState</a></li><li class="nav-list-item"><a href="/textui/components/display/feed.html" class="nav-list-link">Feed</a></li><li class="nav-list-item"><a href="/textui/components/display/gauge.html" class="nav-list-link">Gauge</a></li><li class="nav-list-item"><a href="/textui/components/display/heading.html" class="nav-list-link">Heading</a></li><li class="nav-list-item"><a href="/textui/components/display/heatmap.html" class="nav-list-link">Heatmap</a></li><li class="nav-list-item"><a href="/textui/components/display/histogram.html" class="nav-list-link">Histogram</a></li><li class="nav-list-item"><a href="/textui/components/display/key-value.html" class="nav-list-link">KeyValue</a></li><li class="nav-list-item"><a href="/textui/components/display/label.html" class="nav-list-link">Label</a></li><li class="nav-list-item"><a href="/textui/components/display/line-chart.html" class="nav-list-link">LineChart</a></li><li class="nav-list-item"><a href="/textui/components/display/list.html" class="nav-list-link">List</a></li><li class="nav-list-item"><a href="/textui/components/display/log-viewer.html" class="nav-list-link">LogViewer</a></li><li class="nav-list-item"><a href="/textui/components/display/markdown-view.html" class="nav-list-link">MarkdownView</a></li><li class="nav-list-item"><a href="/textui/components/display/marquee.html" class="nav-list-link">Marquee</a></li><li class="nav-list-item"><a href="/textui/components/display/pagination.html" class="nav-list-link">Pagination</a></li><li class="nav-list-item"><a href="/textui/components/display/progress.html" class="nav-list-link">Progress</a></li><li class="nav-list-item"><a href="/textui/components/display/skeleton.html" class="nav-list-link">Skeleton</a></li><li class="nav-list-item"><a href="/textui/components/display/sparkline.html" class="nav-list-link">Sparkline</a></li><li class="nav-list-item"><a href="/textui/components/display/spinner.html" class="nav-list-link">Spinner</a></li><li class="nav-list-item"><a href="/textui/components/display/status-dot.html" class="nav-list-link">StatusDot</a></li><li class="nav-list-item"><a href="/textui/components/display/table.html" class="nav-list-link">Table</a></li><li class="nav-list-item"><a href="/textui/components/display/timeline.html" class="nav-list-link">Timeline</a></li><li class="nav-list-item"><a href="/textui/components/display/tree.html" class="nav-list-link">Tree</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Controls and forms submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/input.html" class="nav-list-link">Controls and forms</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/input/button.html" class="nav-list-link">Button</a></li><li class="nav-list-item"><a href="/textui/components/input/checkbox.html" class="nav-list-link">Checkbox</a></li><li class="nav-list-item"><a href="/textui/components/input/danger-zone.html" class="nav-list-link">DangerZone</a></li><li class="nav-list-item"><a href="/textui/components/input/field.html" class="nav-list-link">Field</a></li><li class="nav-list-item"><a href="/textui/components/input/form.html" class="nav-list-link">Form</a></li><li class="nav-list-item"><a href="/textui/components/input/form-actions.html" class="nav-list-link">FormActions</a></li><li class="nav-list-item"><a href="/textui/components/input/form-section.html" class="nav-list-link">FormSection</a></li><li class="nav-list-item"><a href="/textui/components/input/radio-group.html" class="nav-list-link">RadioGroup</a></li><li class="nav-list-item"><a href="/textui/components/input/search-box.html" class="nav-list-link">SearchBox</a></li><li class="nav-list-item"><a href="/textui/components/input/select.html" class="nav-list-link">Select</a></li><li class="nav-list-item"><a href="/textui/components/input/slider.html" class="nav-list-link">Slider</a></li><li class="nav-list-item"><a href="/textui/components/input/switch.html" class="nav-list-link">Switch</a></li><li class="nav-list-item"><a href="/textui/components/input/text-area.html" class="nav-list-link">TextArea</a></li><li class="nav-list-item"><a href="/textui/components/input/text-input.html" class="nav-list-link">TextInput</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Navigation and overlays submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/navigation.html" class="nav-list-link">Navigation and overlays</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/navigation/breadcrumb.html" class="nav-list-link">Breadcrumb</a></li><li class="nav-list-item"><a href="/textui/components/navigation/command-palette.html" class="nav-list-link">CommandPalette</a></li><li class="nav-list-item"><a href="/textui/components/navigation/dialog.html" class="nav-list-link">Dialog</a></li><li class="nav-list-item"><a href="/textui/components/navigation/key-hints.html" class="nav-list-link">KeyHints</a></li><li class="nav-list-item"><a href="/textui/components/navigation/layer-scope.html" class="nav-list-link">LayerScope</a></li><li class="nav-list-item"><a href="/textui/components/navigation/menu.html" class="nav-list-link">Menu</a></li><li class="nav-list-item"><a href="/textui/components/navigation/prompt-dialog.html" class="nav-list-link">PromptDialog</a></li><li class="nav-list-item"><a href="/textui/components/navigation/status-bar.html" class="nav-list-link">StatusBar</a></li><li class="nav-list-item"><a href="/textui/components/navigation/tabs.html" class="nav-list-link">Tabs</a></li><li class="nav-list-item"><a href="/textui/components/navigation/toast.html" class="nav-list-link">Toast</a></li><li class="nav-list-item"><a href="/textui/components/navigation/toast-host.html" class="nav-list-link">ToastHost</a></li><li class="nav-list-item"><a href="/textui/components/navigation/toolbar.html" class="nav-list-link">Toolbar</a></li><li class="nav-list-item"><a href="/textui/components/navigation/tooltip.html" class="nav-list-link">Tooltip</a></li><li class="nav-list-item"><a href="/textui/components/navigation/wizard.html" class="nav-list-link">Wizard</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Surfaces, shells and resources submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/components/surfaces.html" class="nav-list-link">Surfaces, shells and resources</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/components/surfaces/bar-layout.html" class="nav-list-link">BarLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/code-editor.html" class="nav-list-link">CodeEditor</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/console-shell.html" class="nav-list-link">ConsoleShell</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/fallback-viewer.html" class="nav-list-link">FallbackViewer</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/inline-layout.html" class="nav-list-link">InlineLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/json-tree-viewer.html" class="nav-list-link">JsonTreeViewer</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/json-viewer.html" class="nav-list-link">JsonViewer</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/markdown-viewer.html" class="nav-list-link">MarkdownViewer</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/mount-view.html" class="nav-list-link">MountView</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/paper-shell.html" class="nav-list-link">PaperShell</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/plain-shell.html" class="nav-list-link">PlainShell</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/rail-layout.html" class="nav-list-link">RailLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/resource-actions.html" class="nav-list-link">ResourceActions</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/resource-breadcrumb.html" class="nav-list-link">ResourceBreadcrumb</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/resource-explorer.html" class="nav-list-link">ResourceExplorer</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/resource-open-with.html" class="nav-list-link">ResourceOpenWith</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/resource-panel.html" class="nav-list-link">ResourcePanel</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/resource-view.html" class="nav-list-link">ResourceView</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/single-layout.html" class="nav-list-link">SingleLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/split-layout.html" class="nav-list-link">SplitLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/stack-layout.html" class="nav-list-link">StackLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/surface-area.html" class="nav-list-link">SurfaceArea</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/tabs-layout.html" class="nav-list-link">TabsLayout</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/text-viewer.html" class="nav-list-link">TextViewer</a></li><li class="nav-list-item"><a href="/textui/components/surfaces/workbench-shell.html" class="nav-list-link">WorkbenchShell</a></li></ul></li><li class="nav-list-item"><a href="/textui/components/writing.html" class="nav-list-link">Writing a component</a></li><li class="nav-list-item"><a href="/textui/components/errors.html" class="nav-list-link">When one throws</a></li><li class="nav-list-item"><a href="/textui/components/templates.html" class="nav-list-link">Templates</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Themes submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/themes/" class="nav-list-link">Themes</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/themes/tokens.html" class="nav-list-link">Tokens</a></li><li class="nav-list-item"><a href="/textui/themes/downgrade.html" class="nav-list-link">Glyphs, borders and colour depth</a></li><li class="nav-list-item"><a href="/textui/themes/built-in.html" class="nav-list-link">The built-in themes</a></li><li class="nav-list-item"><a href="/textui/themes/writing.html" class="nav-list-link">Writing a theme</a></li><li class="nav-list-item"><a href="/textui/themes/syntax.html" class="nav-list-link">Syntax highlighting</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Platform submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/platform/" class="nav-list-link">Platform</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/platform/commands.html" class="nav-list-link">Commands</a></li><li class="nav-list-item"><a href="/textui/platform/keybindings.html" class="nav-list-link">Keybindings</a></li><li class="nav-list-item"><a href="/textui/platform/focus.html" class="nav-list-link">Focus</a></li><li class="nav-list-item"><a href="/textui/platform/layers.html" class="nav-list-link">Layers</a></li><li class="nav-list-item"><a href="/textui/platform/navigation.html" class="nav-list-link">Navigation</a></li><li class="nav-list-item"><a href="/textui/platform/extending.html" class="nav-list-link">Extension points</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Terminal submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/terminal/" class="nav-list-link">Terminal</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/terminal/capabilities.html" class="nav-list-link">Capabilities</a></li><li class="nav-list-item"><a href="/textui/terminal/sessions.html" class="nav-list-link">Managed and embedded sessions</a></li><li class="nav-list-item"><a href="/textui/terminal/adapters.html" class="nav-list-link">Terminal adapters</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="Documents submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/documents/" class="nav-list-link">Documents</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/documents/providers.html" class="nav-list-link">Providers</a></li><li class="nav-list-item"><a href="/textui/documents/viewers.html" class="nav-list-link">Viewers, editors and actions</a></li><li class="nav-list-item"><a href="/textui/documents/adapters.html" class="nav-list-link">Resource adapters</a></li><li class="nav-list-item"><a href="/textui/documents/buffers.html" class="nav-list-link">Document buffers</a></li><li class="nav-list-item"><a href="/textui/documents/opening.html" class="nav-list-link">Opening one</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="CLI submenu" aria-expanded="false">
        <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
      </button><a href="/textui/cli/" class="nav-list-link">CLI</a><ul class="nav-list"><li class="nav-list-item"><a href="/textui/cli/commands.html" class="nav-list-link">CLI commands</a></li><li class="nav-list-item"><a href="/textui/cli/configuration.html" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/textui/cli/your-own.html" class="nav-list-link">Building your own CLI</a></li></ul></li><li class="nav-list-item"><a href="/textui/testing/" class="nav-list-link">Testing</a></li><li class="nav-list-item"><a href="/textui/decisions.html" class="nav-list-link">Decisions and tradeoffs</a></li></ul>
  
</nav>


<div class="d-md-block d-none site-footer">
  
  
    <button type="button" class="theme-toggle" id="theme-toggle" aria-live="polite">
  <span class="theme-toggle-dot" aria-hidden="true"></span>
  <span class="theme-toggle-label">Theme</span>
</button>
<script>
  (function () {
    var button = document.getElementById('theme-toggle');
    if (!button || !window.textuiTheme) return;

    var order = ['auto', 'light', 'dark'];
    var labels = { auto: 'Auto', light: 'Light', dark: 'Dark' };
    var text = button.querySelector('.theme-toggle-label');

    function paint() {
      var choice = window.textuiTheme.get();
      text.textContent = labels[choice];
      button.setAttribute('title', 'Colour scheme: ' + labels[choice].toLowerCase());
    }

    button.addEventListener('click', function () {
      var next = order[(order.indexOf(window.textuiTheme.get()) + 1) % order.length];
      window.textuiTheme.set(next);
      paint();
    });

    paint();
  })();
</script>

  
  </div>
</header>

  
  <div class="main" id="top">
    <div id="main-header" class="main-header">
  
    

<div class="search" role="search">
  <div class="search-input-wrap">
    <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search TextUI" autocomplete="off">
    <label for="search-input" class="search-label">
      <span class="sr-only">Search TextUI</span>
      <svg viewBox="0 0 24 24" class="search-icon" aria-hidden="true"><use xlink:href="#svg-search"></use></svg>
    </label>
  </div>
  <div id="search-results" class="search-results"></div>
</div>

  
  
  
    <nav aria-label="Auxiliary" class="aux-nav">
  <ul class="aux-nav-list">
    
      <li class="aux-nav-list-item">
        <a href="https://github.com/softov/textui" class="site-button"
          
          target="_blank" rel="noopener noreferrer"
          
        >
          GitHub
        </a>
      </li>
    
  </ul>
</nav>

  
</div>

    <div class="main-content-wrap">
      
      <div id="main-content" class="main-content">
        <main>
          
            <h.site-nav ul li a {
  background-image: linear-gradient(-90deg, #eaeef2 0%, rgba(234, 238, 242, 0.8) 80%, rgba(234, 238, 242, 0) 100%);
}

          

          
            
          
        </main>
        
<hr>
<footer>
  
    <p><a href="#top" id="back-to-top">Back to top</a></p>
  

  <p class="text-small mb-0">MIT licensed. Pre-1.0 - the surface is still moving.</p>

  
    <div class="d-flex mt-2">
      
      
        <p class="text-small mb-0">
          <a href="https://github.com/softov/textui/tree/main/docs/assets/css/just-the-docs-head-nav.css" id="edit-this-page">Edit this page on GitHub</a>
        </p>
      
    </div>
  <div class="d-md-none mt-4 fs-2">
    
    
      <button type="button" class="theme-toggle" id="theme-toggle" aria-live="polite">
  <span class="theme-toggle-dot" aria-hidden="true"></span>
  <span class="theme-toggle-label">Theme</span>
</button>
<script>
  (function () {
    var button = document.getElementById('theme-toggle');
    if (!button || !window.textuiTheme) return;

    var order = ['auto', 'light', 'dark'];
    var labels = { auto: 'Auto', light: 'Light', dark: 'Dark' };
    var text = button.querySelector('.theme-toggle-label');

    function paint() {
      var choice = window.textuiTheme.get();
      text.textContent = labels[choice];
      button.setAttribute('title', 'Colour scheme: ' + labels[choice].toLowerCase());
    }

    button.addEventListener('click', function () {
      var next = order[(order.indexOf(window.textuiTheme.get()) + 1) % order.length];
      window.textuiTheme.set(next);
      paint();
    });

    paint();
  })();
</script>

    
  </div>
</footer>

      </div>
    </div>
    
      

<div class="search-overlay"></div>

    
  </div>

  
</body>
</html>

