{"id":18060540,"url":"https://github.com/im-beast/deno_tui","last_synced_at":"2025-09-12T22:36:45.255Z","repository":{"id":41544022,"uuid":"395967665","full_name":"Im-Beast/deno_tui","owner":"Im-Beast","description":"🦕 Deno module for creating Terminal User Interfaces","archived":false,"fork":false,"pushed_at":"2024-11-19T16:42:07.000Z","size":1024,"stargazers_count":294,"open_issues_count":5,"forks_count":18,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-16T14:07:43.401Z","etag":null,"topics":["console","deno","deno-module","terminal","terminal-user-interface","text-user-interface","ts","tui","typescript"],"latest_commit_sha":null,"homepage":"https://deno.land/x/tui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Im-Beast.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","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},"funding":{"github":["Im-Beast"]}},"created_at":"2021-08-14T10:06:08.000Z","updated_at":"2025-04-24T02:16:27.000Z","dependencies_parsed_at":"2023-02-19T20:16:04.188Z","dependency_job_id":"ac852fd3-f855-4aa1-9fd2-9dcd888d7cb3","html_url":"https://github.com/Im-Beast/deno_tui","commit_stats":{"total_commits":445,"total_committers":4,"mean_commits":111.25,"dds":"0.038202247191011285","last_synced_commit":"f8967e140baac8867b76e2edc223e469a2721efb"},"previous_names":[],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Beast%2Fdeno_tui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Beast%2Fdeno_tui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Beast%2Fdeno_tui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Beast%2Fdeno_tui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Im-Beast","download_url":"https://codeload.github.com/Im-Beast/deno_tui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254544146,"owners_count":22088807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["console","deno","deno-module","terminal","terminal-user-interface","text-user-interface","ts","tui","typescript"],"created_at":"2024-10-31T04:09:14.169Z","updated_at":"2025-05-16T14:07:45.082Z","avatar_url":"https://github.com/Im-Beast.png","language":"TypeScript","funding_links":["https://github.com/sponsors/Im-Beast"],"categories":[],"sub_categories":[],"readme":"# ⌨️ Tui\n\n\u003cimg src=\"https://raw.githubusercontent.com/Im-Beast/deno_tui/main/docs/logo-transparent.png\" align=\"right\" width=\"250\" height=\"250\" alt=\"Deno mascot made as ASCII art\" /\u003e\n\n[![Deno](https://github.com/Im-Beast/deno_tui/actions/workflows/deno.yml/badge.svg)](https://github.com/Im-Beast/deno_tui/actions/workflows/deno.yml)\n[![Deno doc](https://doc.deno.land/badge.svg)](https://doc.deno.land/https://deno.land/x/tui/mod.ts)\n\nSimple [Deno](https://github.com/denoland/deno/) module that allows easy creation of\n[Terminal User Interfaces](https://en.wikipedia.org/wiki/Text-based_user_interface).\n\n### 🔩 Features\n\n- 🔰 Ease of use\n- 👁️‍🗨️ Reactivity\n- 🖇️ No dependencies\n- 📄 Decent documentation\n- [📦 Multiple ready-to-use components](./src/components/)\n- 🎨 Styling framework agnostic\n  - This means you can use whatever terminal styling module you want\n  - [🖍️ Crayon](https://github.com/crayon-js/crayon) is recommended _but not imposed_ as it greatly integrates with Tui\n- 🪶 Relatively lightweight\n\n## 🖥️ OS Support\n\n| Operating system     | Linux | macOS | Windows¹ | WSL  |\n| -------------------- | ----- | ----- | -------- | ---- |\n| Base                 | ✔️     | ✔️     | ✔️        | ✔️    |\n| Keyboard support     | ✔️     | ✔️     | ✔️        | ✔️    |\n| Mouse support        | ✔️     | ✔️     | ✔️        | ✔️    |\n| Required permissions | none  | none  | none     | none |\n\n¹ - If unicode characters are displayed incorrectly type `chcp 65001` into the console to change active console code\npage to use UTF-8 encoding.\n\n## 🎓 Get started\n\n#### Replace {version} with relevant module versions\n\n1. Create Tui instance\n\n```ts\nimport { crayon } from \"https://deno.land/x/crayon@$MODULE_VERSION/mod.ts\";\nimport { Canvas, Tui } from \"https://deno.land/x/tui@$MODULE_VERSION/mod.ts\";\n\nconst tui = new Tui({\n  style: crayon.bgBlack, // Make background black\n  refreshRate: 1000 / 60, // Run in 60FPS\n});\n\ntui.dispatch(); // Close Tui on CTRL+C\n```\n\n2. Enable interaction using keyboard and mouse\n\n```ts\nimport { handleInput, handleKeyboardControls, handleMouseControls } from \"https://deno.land/x/tui@$MODULE_VERSION/mod.ts\";\n...\n\nhandleInput(tui);\nhandleMouseControls(tui);\nhandleKeyboardControls(tui);\n```\n\n3. Add some components\n\n```ts\nimport { Button } from \"https://deno.land/x/tui@$MODULE_VERSION/src/components/mod.ts\";\nimport { Signal, Computed } from \"https://deno.land/x/tui@$MODULE_VERSION/mod.ts\";\n\n...\n\n// Create signal to make number automatically reactive\nconst number = new Signal(0);\n\nconst button = new Button({\n  parent: tui,\n  zIndex: 0,\n  label: {\n    text: new Computed(() =\u003e number.value.toString()), // cast number to string\n  },\n  theme: {\n    base: crayon.bgRed,\n    focused: crayon.bgLightRed,\n    active: crayon.bgYellow,\n  },\n  rectangle: {\n    column: 1,\n    row: 1,\n    height: 5,\n    width: 10,\n  },\n});\n\n  // If button is active (pressed) make number bigger by one\nbutton.state.when(\"active\", (state) =\u003e {\n  ++number.value;\n});\n\n// Listen to mousePress event\nbutton.on(\"mousePress\", ({ drag, movementX, movementY }) =\u003e {\n  if (!drag) return;\n\n  // Use peek() to get signal's value when it happens outside of Signal/Computed/Effect\n  const rectangle = button.rectangle.peek();\n  // Move button by how much mouse has moved while dragging it\n  rectangle.column += movementX;\n  rectangle.row += movementY;\n});\n```\n\n4. Run Tui\n\n```ts\n...\n\ntui.run();\n```\n\n## 🤝 Contributing\n\n**Tui** is open for any contributions.\n\u003cbr /\u003e If you feel like you can enhance this project - please open an issue and/or pull request.\n\u003cbr /\u003e Code should be well document and easy to follow what's going on.\n\nThis project follows [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) spec.\n\u003cbr /\u003e If your pull request's code can be hard to understand, please add comments to it.\n\n## 📝 Licensing\n\nThis project is available under **MIT** License conditions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-beast%2Fdeno_tui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fim-beast%2Fdeno_tui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-beast%2Fdeno_tui/lists"}