{"id":39735378,"url":"https://github.com/patricklx/ember-tui","last_synced_at":"2026-04-24T14:01:32.029Z","repository":{"id":325231707,"uuid":"1100352692","full_name":"patricklx/ember-tui","owner":"patricklx","description":"ember terminal ui library for interactive console applications","archived":false,"fork":false,"pushed_at":"2026-04-18T09:27:54.000Z","size":2379,"stargazers_count":7,"open_issues_count":4,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-18T09:28:05.405Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patricklx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-11-20T07:03:05.000Z","updated_at":"2026-04-15T12:03:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/patricklx/ember-tui","commit_stats":null,"previous_names":["patricklx/ember-console","patricklx/ember-tui"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/patricklx/ember-tui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-tui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-tui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-tui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-tui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patricklx","download_url":"https://codeload.github.com/patricklx/ember-tui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patricklx%2Fember-tui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32122001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T00:31:26.853Z","status":"online","status_checked_at":"2026-04-22T02:00:05.693Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-18T11:05:28.042Z","updated_at":"2026-04-24T14:01:31.981Z","avatar_url":"https://github.com/patricklx.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":["Alternative Rendering"],"readme":"# Ember TUI\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"logo.svg\" alt=\"Ember TUI Logo\" width=\"200\" height=\"200\"\u003e\n\u003c/p\u003e\n\n\u003e Ember.js Terminal UI Library. Build and test your CLI tool using ember.js.\n\nEmber TUI provides the same component-based UI building experience that Ember.js offers in the browser, but for command-line apps.\nIt uses [Yoga](https://github.com/facebook/yoga) to build Flexbox layouts in the terminal, so most CSS-like properties are available in Ember TUI as well.\nIf you are already familiar with Ember.js, you already know Ember TUI.\n\nSince Ember TUI is built on Ember.js, all features of Ember.js are supported.\nHead over to the [Ember.js](https://emberjs.com) website for documentation on how to use it.\nOnly Ember TUI's methods are documented in this readme.\n\n## start developing\n\nto create a new terminal app just run\n```\nnpx ember-tui create-app \u003cmy-cli-app\u003e --pnpm\npnpm prebuild\npnpm start\n```\n\nthat will create the app with emberjs blueprint and adjust some files for ember-tui\n\n## Contents\n\n- [Getting Started](#getting-started)\n- [Components](#components)\n  - [`\u003cText\u003e`](#text)\n  - [`\u003cBox\u003e`](#box)\n  - [`\u003cNewline\u003e`](#newline)\n  - [`\u003cSpacer\u003e`](#spacer)\n  - [`\u003cStatic\u003e`](#static)\n  - [`\u003cTransform\u003e`](#transform)\n- [API](#api)\n- [Examples](#examples)\n\n## Getting Started\n\nEmber TUI uses [Yoga](https://github.com/facebook/yoga), a Flexbox layout engine, to build great user interfaces for your CLIs using familiar CSS-like properties you've used when building apps for the browser.\nIt's important to remember that each element is a Flexbox container.\nThink of it as if every `\u003cdiv\u003e` in the browser had `display: flex`.\nSee [`\u003cBox\u003e`](#box) built-in component below for documentation on how to use Flexbox layouts in Ember TUI.\nNote that all text must be wrapped in a [`\u003cText\u003e`](#text) component.\n\n## Components\n\n### `\u003cText\u003e`\n\nThis component can display text and change its style to make it bold, underlined, italic, or strikethrough.\n\n```glimmer-ts\nimport { render, Text } from 'ember-tui';\n\nconst template = \u003ctemplate\u003e\n  \u003cText @color=\"green\"\u003eI am green\u003c/Text\u003e\n  \u003cText @color=\"black\" @backgroundColor=\"white\"\u003eI am black on white\u003c/Text\u003e\n  \u003cText @color=\"#ffffff\"\u003eI am white\u003c/Text\u003e\n  \u003cText @bold={{true}}\u003eI am bold\u003c/Text\u003e\n  \u003cText @italic={{true}}\u003eI am italic\u003c/Text\u003e\n  \u003cText @underline={{true}}\u003eI am underline\u003c/Text\u003e\n  \u003cText @strikethrough={{true}}\u003eI am strikethrough\u003c/Text\u003e\n  \u003cText @inverse={{true}}\u003eI am inversed\u003c/Text\u003e\n\u003c/template\u003e;\n\nrender(template);\n```\n\n**Note:** `\u003cText\u003e` allows only text nodes and nested `\u003cText\u003e` components inside of it. For example, `\u003cBox\u003e` component can't be used inside `\u003cText\u003e`.\n\n#### color\n\nType: `string`\n\nChange text color.\nEmber TUI uses [chalk](https://github.com/chalk/chalk) under the hood, so all its functionality is supported.\n\n```glimmer-ts\n\u003cText @color=\"green\"\u003eGreen\u003c/Text\u003e\n\u003cText @color=\"#005cc5\"\u003eBlue\u003c/Text\u003e\n\u003cText @color=\"rgb(232, 131, 136)\"\u003eRed\u003c/Text\u003e\n```\n\n#### backgroundColor\n\nType: `string`\n\nSame as `color` above, but for background.\n\n```glimmer-ts\n\u003cText @backgroundColor=\"green\" @color=\"white\"\u003eGreen\u003c/Text\u003e\n\u003cText @backgroundColor=\"#005cc5\" @color=\"white\"\u003eBlue\u003c/Text\u003e\n\u003cText @backgroundColor=\"rgb(232, 131, 136)\" @color=\"white\"\u003eRed\u003c/Text\u003e\n```\n\n#### dimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the color (make it less bright).\n\n```glimmer-ts\n\u003cText @color=\"red\" @dimColor={{true}}\u003eDimmed Red\u003c/Text\u003e\n```\n\n#### bold\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text bold.\n\n#### italic\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text italic.\n\n#### underline\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text underlined.\n\n#### strikethrough\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text crossed with a line.\n\n#### inverse\n\nType: `boolean`\\\nDefault: `false`\n\nInvert background and foreground colors.\n\n```glimmer-ts\n\u003cText @inverse={{true}} @color=\"yellow\"\u003eInversed Yellow\u003c/Text\u003e\n```\n\n#### wrap\n\nType: `string`\\\nAllowed values: `wrap` `truncate` `truncate-start` `truncate-middle` `truncate-end`\\\nDefault: `wrap`\n\nThis property tells Ember TUI to wrap or truncate text if its width is larger than the container.\nIf `wrap` is passed (the default), Ember TUI will wrap text and split it into multiple lines.\nIf `truncate-*` is passed, Ember TUI will truncate text instead, resulting in one line of text with the rest cut off.\n\n```glimmer-ts\n\u003cBox @width={{7}}\u003e\n  \u003cText\u003eHello World\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'Hello\\nWorld'\n\n// `truncate` is an alias to `truncate-end`\n\u003cBox @width={{7}}\u003e\n  \u003cText @wrap=\"truncate\"\u003eHello World\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'Hello…'\n\n\u003cBox @width={{7}}\u003e\n  \u003cText @wrap=\"truncate-middle\"\u003eHello World\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'He…ld'\n\n\u003cBox @width={{7}}\u003e\n  \u003cText @wrap=\"truncate-start\"\u003eHello World\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e '…World'\n```\n\n### `\u003cBox\u003e`\n\n`\u003cBox\u003e` is an essential Ember TUI component to build your layout.\nIt's like `\u003cdiv style=\"display: flex\"\u003e` in the browser.\n\n```glimmer-ts\nimport { render, Box, Text } from 'ember-tui';\n\nconst template = \u003ctemplate\u003e\n  \u003cBox @margin={{2}}\u003e\n    \u003cText\u003eThis is a box with margin\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/template\u003e;\n\nrender(template);\n```\n\n#### Dimensions\n\n##### width\n\nType: `number` `string`\n\nWidth of the element in spaces.\nYou can also set it as a percentage, which will calculate the width based on the width of the parent element.\n\n```glimmer-ts\n\u003cBox @width={{4}}\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'X   '\n```\n\n```glimmer-ts\n\u003cBox @width={{10}}\u003e\n  \u003cBox @width=\"50%\"\u003e\n    \u003cText\u003eX\u003c/Text\u003e\n  \u003c/Box\u003e\n  \u003cText\u003eY\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'X    Y'\n```\n\n##### height\n\nType: `number` `string`\n\nHeight of the element in lines (rows).\nYou can also set it as a percentage, which will calculate the height based on the height of the parent element.\n\n```glimmer-ts\n\u003cBox @height={{4}}\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'X\\n\\n\\n'\n```\n\n##### minWidth\n\nType: `number`\n\nSets a minimum width of the element.\n\n##### minHeight\n\nType: `number`\n\nSets a minimum height of the element.\n\n#### Padding\n\n##### paddingTop\n\nType: `number`\\\nDefault: `0`\n\nTop padding.\n\n##### paddingBottom\n\nType: `number`\\\nDefault: `0`\n\nBottom padding.\n\n##### paddingLeft\n\nType: `number`\\\nDefault: `0`\n\nLeft padding.\n\n##### paddingRight\n\nType: `number`\\\nDefault: `0`\n\nRight padding.\n\n##### paddingX\n\nType: `number`\\\nDefault: `0`\n\nHorizontal padding. Equivalent to setting `paddingLeft` and `paddingRight`.\n\n##### paddingY\n\nType: `number`\\\nDefault: `0`\n\nVertical padding. Equivalent to setting `paddingTop` and `paddingBottom`.\n\n##### padding\n\nType: `number`\\\nDefault: `0`\n\nPadding on all sides. Equivalent to setting `paddingTop`, `paddingBottom`, `paddingLeft` and `paddingRight`.\n\n```glimmer-ts\n\u003cBox @paddingTop={{2}}\u003e\u003cText\u003eTop\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox paddingBottom={{2}}\u003e\u003cText\u003eBottom\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox @paddingLeft={{2}}\u003e\u003cText\u003eLeft\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox paddingRight={{2}}\u003e\u003cText\u003eRight\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox paddingX={{2}}\u003e\u003cText\u003eLeft and right\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox paddingY={{2}}\u003e\u003cText\u003eTop and bottom\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox padding={{2}}\u003e\u003cText\u003eTop, bottom, left and right\u003c/Text\u003e\u003c/Box\u003e\n```\n\n#### Margin\n\n##### marginTop\n\nType: `number`\\\nDefault: `0`\n\nTop margin.\n\n##### marginBottom\n\nType: `number`\\\nDefault: `0`\n\nBottom margin.\n\n##### marginLeft\n\nType: `number`\\\nDefault: `0`\n\nLeft margin.\n\n##### marginRight\n\nType: `number`\\\nDefault: `0`\n\nRight margin.\n\n##### marginX\n\nType: `number`\\\nDefault: `0`\n\nHorizontal margin. Equivalent to setting `marginLeft` and `marginRight`.\n\n##### marginY\n\nType: `number`\\\nDefault: `0`\n\nVertical margin. Equivalent to setting `marginTop` and `marginBottom`.\n\n##### margin\n\nType: `number`\\\nDefault: `0`\n\nMargin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginLeft` and `marginRight`.\n\n```glimmer-ts\n\u003cBox @marginTop={{2}}\u003e\u003cText\u003eTop\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox marginBottom={{2}}\u003e\u003cText\u003eBottom\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox marginLeft={{2}}\u003e\u003cText\u003eLeft\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox @marginRight={{2}}\u003e\u003cText\u003eRight\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox marginX={{2}}\u003e\u003cText\u003eLeft and right\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox marginY={{2}}\u003e\u003cText\u003eTop and bottom\u003c/Text\u003e\u003c/Box\u003e\n\u003cBox margin={{2}}\u003e\u003cText\u003eTop, bottom, left and right\u003c/Text\u003e\u003c/Box\u003e\n```\n\n#### Gap\n\n##### gap\n\nType: `number`\\\nDefault: `0`\n\nSize of the gap between an element's columns and rows. A shorthand for `columnGap` and `rowGap`.\n\n```glimmer-ts\n\u003cBox @gap={{1}} @width={{3}} @flexWrap=\"wrap\"\u003e\n  \u003cText\u003eA\u003c/Text\u003e\n  \u003cText\u003eB\u003c/Text\u003e\n  \u003cText\u003eC\u003c/Text\u003e\n\u003c/Box\u003e\n// A B\n//\n// C\n```\n\n##### columnGap\n\nType: `number`\\\nDefault: `0`\n\nSize of the gap between an element's columns.\n\n```glimmer-ts\n\u003cBox @columnGap={{1}}\u003e\n  \u003cText\u003eA\u003c/Text\u003e\n  \u003cText\u003eB\u003c/Text\u003e\n\u003c/Box\u003e\n// A B\n```\n\n##### rowGap\n\nType: `number`\\\nDefault: `0`\n\nSize of the gap between an element's rows.\n\n```glimmer-ts\n\u003cBox @flexDirection=\"column\" @rowGap={{1}}\u003e\n  \u003cText\u003eA\u003c/Text\u003e\n  \u003cText\u003eB\u003c/Text\u003e\n\u003c/Box\u003e\n// A\n//\n// B\n```\n\n#### Flex\n\n##### flexGrow\n\nType: `number`\\\nDefault: `0`\n\nSee [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).\n\n```glimmer-ts\n\u003cBox\u003e\n  \u003cText\u003eLabel:\u003c/Text\u003e\n  \u003cBox @flexGrow={{1}}\u003e\n    \u003cText\u003eFills all remaining space\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n```\n\n##### flexShrink\n\nType: `number`\\\nDefault: `1`\n\nSee [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).\n\n```glimmer-ts\n\u003cBox @width={{20}}\u003e\n  \u003cBox @flexShrink={{2}} @width={{10}}\u003e\n    \u003cText\u003eWill be 1/4\u003c/Text\u003e\n  \u003c/Box\u003e\n  \u003cBox @width={{10}}\u003e\n    \u003cText\u003eWill be 3/4\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n```\n\n##### flexBasis\n\nType: `number` `string`\n\nSee [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).\n\n```glimmer-ts\n\u003cBox @width={{6}}\u003e\n  \u003cBox @flexBasis={{3}}\u003e\n    \u003cText\u003eX\u003c/Text\u003e\n  \u003c/Box\u003e\n  \u003cText\u003eY\u003c/Text\u003e\n\u003c/Box\u003e\n//=\u003e 'X  Y'\n```\n\n##### flexDirection\n\nType: `string`\\\nAllowed values: `row` `row-reverse` `column` `column-reverse`\n\nSee [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/).\n\n```glimmer-ts\n\u003cBox\u003e\n  \u003cBox @marginRight={{1}}\u003e\n    \u003cText\u003eX\u003c/Text\u003e\n  \u003c/Box\u003e\n  \u003cText\u003eY\u003c/Text\u003e\n\u003c/Box\u003e\n// X Y\n\n\u003cBox @flexDirection=\"row-reverse\"\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n  \u003cBox @marginRight={{1}}\u003e\n    \u003cText\u003eY\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n// Y X\n\n\u003cBox @flexDirection=\"column\"\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n  \u003cText\u003eY\u003c/Text\u003e\n\u003c/Box\u003e\n// X\n// Y\n```\n\n##### flexWrap\n\nType: `string`\\\nAllowed values: `nowrap` `wrap` `wrap-reverse`\n\nSee [flex-wrap](https://css-tricks.com/almanac/properties/f/flex-wrap/).\n\n```glimmer-ts\n\u003cBox @width={{2}} @flexWrap=\"wrap\"\u003e\n  \u003cText\u003eA\u003c/Text\u003e\n  \u003cText\u003eBC\u003c/Text\u003e\n\u003c/Box\u003e\n// A\n// B C\n```\n\n##### alignItems\n\nType: `string`\\\nAllowed values: `flex-start` `center` `flex-end`\n\nSee [align-items](https://css-tricks.com/almanac/properties/a/align-items/).\n\n```glimmer-ts\n\u003cBox @alignItems=\"flex-start\"\u003e\n  \u003cBox @marginRight={{1}}\u003e\n    \u003cText\u003eX\u003c/Text\u003e\n  \u003c/Box\u003e\n  \u003cText\u003eA\u003cNewline/\u003eB\u003cNewline/\u003eC\u003c/Text\u003e\n\u003c/Box\u003e\n// X A\n//   B\n//   C\n```\n\n##### alignSelf\n\nType: `string`\\\nDefault: `auto`\\\nAllowed values: `auto` `flex-start` `center` `flex-end`\n\nSee [align-self](https://css-tricks.com/almanac/properties/a/align-self/).\n\n```glimmer-ts\n\u003cBox @height={{3}}\u003e\n  \u003cBox @alignSelf=\"flex-start\"\u003e\n    \u003cText\u003eX\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n// X\n//\n//\n```\n\n##### justifyContent\n\nType: `string`\\\nAllowed values: `flex-start` `center` `flex-end` `space-between` `space-around` `space-evenly`\n\nSee [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).\n\n```glimmer-ts\n\u003cBox @justifyContent=\"flex-start\"\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n\u003c/Box\u003e\n// [X      ]\n\n\u003cBox @justifyContent=\"center\"\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n\u003c/Box\u003e\n// [   X   ]\n\n\u003cBox @justifyContent=\"flex-end\"\u003e\n  \u003cText\u003eX\u003c/Text\u003e\n\u003c/Box\u003e\n// [      X]\n```\n\n#### Visibility\n\n##### display\n\nType: `string`\\\nAllowed values: `flex` `none`\\\nDefault: `flex`\n\nSet this property to `none` to hide the element.\n\n##### overflowX\n\nType: `string`\\\nAllowed values: `visible` `hidden`\\\nDefault: `visible`\n\nBehavior for an element's overflow in the horizontal direction.\n\n##### overflowY\n\nType: `string`\\\nAllowed values: `visible` `hidden`\\\nDefault: `visible`\n\nBehavior for an element's overflow in the vertical direction.\n\n##### overflow\n\nType: `string`\\\nAllowed values: `visible` `hidden`\\\nDefault: `visible`\n\nA shortcut for setting `overflowX` and `overflowY` at the same time.\n\n#### Borders\n\n##### borderStyle\n\nType: `string`\\\nAllowed values: `single` `double` `round` `bold` `singleDouble` `doubleSingle` `classic`\n\nAdd a border with a specified style.\nIf `borderStyle` is `undefined` (the default), no border will be added.\nEmber TUI uses border styles from the [`cli-boxes`](https://github.com/sindresorhus/cli-boxes) module.\n\n```glimmer-ts\n\u003cBox @flexDirection=\"column\"\u003e\n  \u003cBox\u003e\n    \u003cBox @borderStyle=\"single\" @marginRight={{2}}\u003e\n      \u003cText\u003esingle\u003c/Text\u003e\n    \u003c/Box\u003e\n    \u003cBox @borderStyle=\"double\" @marginRight={{2}}\u003e\n      \u003cText\u003edouble\u003c/Text\u003e\n    \u003c/Box\u003e\n    \u003cBox @borderStyle=\"round\" @marginRight={{2}}\u003e\n      \u003cText\u003eround\u003c/Text\u003e\n    \u003c/Box\u003e\n    \u003cBox @borderStyle=\"bold\"\u003e\n      \u003cText\u003ebold\u003c/Text\u003e\n    \u003c/Box\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n```\n\n##### borderColor\n\nType: `string`\n\nChange border color.\nA shorthand for setting `borderTopColor`, `borderRightColor`, `borderBottomColor`, and `borderLeftColor`.\n\n```glimmer-ts\n\u003cBox @borderStyle=\"round\" @borderColor=\"green\"\u003e\n  \u003cText\u003eGreen Rounded Box\u003c/Text\u003e\n\u003c/Box\u003e\n```\n\n##### borderDimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the border color.\nA shorthand for setting `borderTopDimColor`, `borderBottomDimColor`, `borderLeftDimColor`, and `borderRightDimColor`.\n\n```glimmer-ts\n\u003cBox @borderStyle=\"round\" @borderDimColor={{true}}\u003e\n  \u003cText\u003eHello world\u003c/Text\u003e\n\u003c/Box\u003e\n```\n\n##### borderTop / borderRight / borderBottom / borderLeft\n\nType: `boolean`\\\nDefault: `true`\n\nDetermines whether the respective border is visible.\n\n#### Background\n\n##### backgroundColor\n\nType: `string`\n\nBackground color for the element.\n\nAccepts the same values as [`color`](#color) in the `\u003cText\u003e` component.\n\n```glimmer-ts\n\u003cBox @flexDirection=\"column\"\u003e\n  \u003cBox @backgroundColor=\"red\" @width={{20}} @height={{5}} @alignSelf=\"flex-start\"\u003e\n    \u003cText\u003eRed background\u003c/Text\u003e\n  \u003c/Box\u003e\n  \u003cBox @backgroundColor=\"#FF8800\" @width={{20}} @height={{3}} @marginTop={{1}} @alignSelf=\"flex-start\"\u003e\n    \u003cText\u003eOrange background\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/Box\u003e\n```\n\nThe background color fills the entire `\u003cBox\u003e` area and is inherited by child `\u003cText\u003e` components unless they specify their own `backgroundColor`.\n\n### `\u003cNewline\u003e`\n\nAdds one or more newline (`\\n`) characters.\nMust be used within `\u003cText\u003e` components.\n\n#### count\n\nType: `number`\\\nDefault: `1`\n\nNumber of newlines to insert.\n\n```glimmer-ts\nimport { render, Text, Newline } from 'ember-tui';\n\nconst template = \u003ctemplate\u003e\n  \u003cText\u003e\n    \u003cText @color=\"green\"\u003eHello\u003c/Text\u003e\n    \u003cNewline /\u003e\n    \u003cText @color=\"red\"\u003eWorld\u003c/Text\u003e\n  \u003c/Text\u003e\n\u003c/template\u003e;\n\nrender(template);\n```\n\nOutput:\n\n```\nHello\nWorld\n```\n\n### `\u003cSpacer\u003e`\n\nA flexible space that expands along the major axis of its containing layout.\nIt's useful as a shortcut for filling all the available space between elements.\n\nFor example, using `\u003cSpacer\u003e` in a `\u003cBox\u003e` with default flex direction (`row`) will position \"Left\" on the left side and will push \"Right\" to the right side.\n\n```glimmer-ts\nimport { render, Box, Text, Spacer } from 'ember-tui';\n\nconst template = \u003ctemplate\u003e\n  \u003cBox\u003e\n    \u003cText\u003eLeft\u003c/Text\u003e\n    \u003cSpacer /\u003e\n    \u003cText\u003eRight\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/template\u003e;\n\nrender(template);\n```\n\n### `\u003cStatic\u003e`\n\n`\u003cStatic\u003e` component permanently renders its output above everything else.\nIt's useful for displaying activity like completed tasks or logs - things that\ndon't change after they're rendered (hence the name \"Static\").\n\n```glimmer-ts\nimport { render, Static, Box, Text } from 'ember-tui';\nimport { tracked } from '@glimmer/tracking';\n\nclass TestRunner {\n  @tracked tests = [];\n\n  constructor() {\n    let completedTests = 0;\n    const run = () =\u003e {\n      if (completedTests++ \u003c 10) {\n        this.tests = [\n          ...this.tests,\n          {\n            id: this.tests.length,\n            title: `Test #${this.tests.length + 1}`\n          }\n        ];\n        setTimeout(run, 100);\n      }\n    };\n    run();\n  }\n}\n\nconst runner = new TestRunner();\n\nconst template = \u003ctemplate\u003e\n  \u003cStatic @items={{runner.tests}} as |test|\u003e\n    \u003cBox key={{test.id}}\u003e\n      \u003cText color=\"green\"\u003e✔ {{test.title}}\u003c/Text\u003e\n    \u003c/Box\u003e\n  \u003c/Static\u003e\n\n  \u003cBox @marginTop={{1}}\u003e\n    \u003cText @dimColor={{true}}\u003eCompleted tests: {{runner.tests.length}}\u003c/Text\u003e\n  \u003c/Box\u003e\n\u003c/template\u003e;\n\nrender(template);\n```\n\n**Note:** `\u003cStatic\u003e` only renders new items in the `items` array and ignores items\nthat were previously rendered.\n\n#### items\n\nType: `Array`\n\nArray of items of any type to render using the block you pass as component content.\n\n### `\u003cTransform\u003e`\n\nTransform a string representation of components before they're written to output.\nFor example, you might want to apply a gradient to text or create some text effects.\n\n**Note:** `\u003cTransform\u003e` must be applied only to `\u003cText\u003e` children components and shouldn't change the dimensions of the output; otherwise, the layout will be incorrect.\n\n```glimmer-ts\nimport { render, Transform, Text } from 'ember-tui';\n\nconst template = \u003ctemplate\u003e\n  \u003cTransform @transform={{fn (output) =\u003e output.toUpperCase()}}\u003e\n    \u003cText\u003eHello World\u003c/Text\u003e\n  \u003c/Transform\u003e\n\u003c/template\u003e;\n\nrender(template);\n```\n\nSince the `transform` function converts all characters to uppercase, the final output rendered to the terminal will be \"HELLO WORLD\", not \"Hello World\".\n\n#### transform(outputLine, index)\n\nType: `Function`\n\nFunction that transforms children output.\nIt accepts children and must return transformed children as well.\n\n##### children\n\nType: `string`\n\nOutput of child components.\n\n##### index\n\nType: `number`\n\nThe zero-indexed line number of the line that's currently being transformed.\n\n## API\n\n### render(tree, options?)\n\nMount a component and render the output.\n\n#### tree\n\nType: `Component`\n\nThe root component to render.\n\n#### options\n\nType: `object`\n\n##### stdout\n\nType: `stream.Writable`\\\nDefault: `process.stdout`\n\nOutput stream where the app will be rendered.\n\n##### stdin\n\nType: `stream.Readable`\\\nDefault: `process.stdin`\n\nInput stream where the app will listen for input.\n\n##### stderr\n\nType: `stream.Writable`\\\nDefault: `process.stderr`\n\nError stream.\n\n### startRender(document, options?)\n\nStart the render loop for a document.\n\n#### document\n\nType: `DocumentNode`\n\nThe document node to render.\n\n#### options\n\nType: `object`\n\nSame options as `render()`.\n\n## Examples\n\nCheck out the [examples](ember-tui-demo/app/templates) directory for more examples:\n\n- [Colors Demo](ember-tui-demo/app/templates/colors.gts) - Demonstrates text colors and styles\n- [Box Layout Demo](ember-tui-demo/app/templates/box-demo.gts) - Shows flexbox layout capabilities\n- [Static Component](ember-tui-demo/app/templates/static-test.gts) - Example of using Static component\n- [Lorem Ipsum](ember-tui-demo/app/templates/lorem.gts) - Text wrapping and layout\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatricklx%2Fember-tui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatricklx%2Fember-tui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatricklx%2Fember-tui/lists"}