{"id":22226475,"url":"https://github.com/zhw2590582/term-web","last_synced_at":"2025-07-27T18:32:00.813Z","repository":{"id":65478651,"uuid":"252458267","full_name":"zhw2590582/term-web","owner":"zhw2590582","description":":pager: A simple Terminal UI that run on the web","archived":false,"fork":false,"pushed_at":"2022-04-27T22:33:38.000Z","size":7749,"stargazers_count":17,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-05-21T18:46:10.237Z","etag":null,"topics":["browser","canvas","terminal","ui","web"],"latest_commit_sha":null,"homepage":"https://term-web.js.org","language":"JavaScript","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/zhw2590582.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-02T13:08:10.000Z","updated_at":"2024-02-04T03:13:59.000Z","dependencies_parsed_at":"2023-01-25T15:16:23.429Z","dependency_job_id":null,"html_url":"https://github.com/zhw2590582/term-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2Fterm-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2Fterm-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2Fterm-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2Fterm-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhw2590582","download_url":"https://codeload.github.com/zhw2590582/term-web/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227827819,"owners_count":17825747,"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":["browser","canvas","terminal","ui","web"],"created_at":"2024-12-03T00:29:14.465Z","updated_at":"2024-12-03T00:29:15.084Z","avatar_url":"https://github.com/zhw2590582.png","language":"JavaScript","funding_links":["https://www.paypal.me/harveyzack"],"categories":[],"sub_categories":[],"readme":"# Term-Web\n\n\u003e :pager: A Simple Terminal UI That Run On The Web\n\n![version](https://badgen.net/npm/v/term-web)\n![license](https://badgen.net/npm/license/term-web)\n![size](https://badgen.net/bundlephobia/minzip/term-web)\n[![npm Downloads](https://img.shields.io/npm/dt/term-web.svg)](https://www.npmjs.com/package/term-web)\n\n![Screenshot](./images/screenshot.png)\n\n## Demo\n\n[Checkout the demo](https://term-web.js.org) from Github Pages\n\n## Install\n\nInstall with `npm`:\n\n```bash\n$ npm install term-web\n```\n\nOr install with `yarn`:\n\n```bash\n$ yarn add term-web\n```\n\n```js\nimport Term from 'term-web';\n```\n\nOr umd builds are also available:\n\n```html\n\u003cscript src=\"path/to/term-web.js\"\u003e\u003c/script\u003e\n```\n\nOr from jsDelivr CDN:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/term-web/dist/term-web.js\"\u003e\u003c/script\u003e\n```\n\nWill expose the global variable to `window.Term`.\n\n## Usage\n\n```html\n\u003cdiv id=\"term\"\u003e\u003c/div\u003e\n```\n\n```js\nvar term = new Term({\n    // ... options\n    container: '#term',\n});\n```\n\n## Options\n\n```js\n{\n    // Mounted dom element\n    container: '#term',\n\n    // Debug mode\n    debug: false,\n\n    // Initial size\n    width: 600,\n    height: 500,\n\n    // Custom actions\n    actions: [],\n\n    // Use the display recorder button\n    recorder: true,\n\n    // Is it draggable\n    draggable: true,\n\n    // Font size\n    fontSize: 13,\n\n    // Font family\n    fontFamily: 'monospace',\n\n    // Watermark image url\n    watermark: '',\n\n    // Font color\n    color: '#b0b2b6',\n\n    // Background color\n    background: 'rgb(42, 39, 52)',\n\n    // Title on the topbar\n    title: 'Term Web',\n\n    // Entered prefix\n    prefix: 'root@linux: ~ \u003cd color=\"#00f501\"\u003e$\u003c/d\u003e ',\n\n    // Welcome Message\n    welcome: `Last login: ${new Date()}`,\n\n    // Loading tips\n    loading: (val) =\u003e '\u003cd color=\"yellow\"\u003eLoading...\u003c/d\u003e',\n\n    // Pixel ratio\n    pixelRatio: window.devicePixelRatio,\n\n    // Callback when command is not found\n    notFound: (val) =\u003e `-bash: \u003cd color='red'\u003e${val}\u003c/d\u003e: command not found`,\n}\n```\n\n## API\n\n#### term.input(text, isReplace)\n\n-   `text` is the string to be displayed.\n-   `isReplace` indicates whether to replace the previous record, default is `false`;\n\n#### term.output(text, isReplace)\n\n-   `text` is the string to be displayed.\n-   `isReplace` indicates whether to replace the previous record, default is `false`;\n\n#### term.type(text, isExecute)\n\n-   `text` is the string to be displayed.\n-   `isExecute` Whether to execute immediately after typing, default is `true`;\n\n#### term.clear()\n\nClear all log\n\n#### term.ask(text)\n\n-   `text` is the question string to be displayed.\n\n```js\nterm.ask('How are you ?').then((answer) =\u003e console.log(answer));\n```\n\n#### term.radio(list)\n\nOutput radio list\n\n```js\nterm.radio([\n    {\n        key: 1,\n        text: 'hi',\n    },\n    {\n        key: 0,\n        text: 'bye',\n    },\n]).then((key) =\u003e {\n    console.log(key);\n});\n```\n\n#### term.checkbox(list)\n\nOutput checkbox list\n\n```js\nterm.checkbox([\n    {\n        key: 1,\n        text: 'hi',\n    },\n    {\n        key: 0,\n        text: 'bye',\n    },\n]).then((key) =\u003e {\n    console.log(key);\n});\n```\n\n## Dynamically modify the UI\n\n#### term.color\n\nModify font color\n\n```js\nterm.color = '#fff';\n```\n\n#### term.background\n\nModify background color\n\n```js\nterm.background = '#000';\n```\n\n#### term.watermark\n\nModify watermark image\n\n```js\nterm.watermark = 'img.png';\n```\n\n#### term.width\n\nModify terminal width\n\n```js\nterm.width = 500;\n```\n\n#### term.height\n\nModify terminal height\n\n```js\nterm.height = 500;\n```\n\n## Style attribute\n\nThe output interface supports multiple styles through a html tag, currently does not support tag nesting effect\n\n#### color\n\n```js\nterm.output('\u003cd color=\"#666\"\u003esome text\u003c/d\u003e');\n```\n\n#### background\n\n```js\nterm.output('\u003cd color=\"#fff\" background=\"red\"\u003esome text\u003c/d\u003e');\n```\n\n#### border\n\nSelect the color attribute or fontColor attribute of the option by default\n\n```js\nterm.output('\u003cd color=\"yellow\" border\u003esome text\u003c/d\u003e');\n```\n\n#### underline\n\nSelect the color attribute or fontColor attribute of the option by default\n\n```js\nterm.output('\u003cd color=\"yellow\" underline\u003esome text\u003c/d\u003e');\n```\n\n#### del\n\nSelect the color attribute or fontColor attribute of the option by default\n\n```js\nterm.output('\u003cd color=\"yellow\" del\u003esome text\u003c/d\u003e');\n```\n\n#### href\n\nLink jump behavior\n\n```js\nterm.output('\u003cd href=\"www.google.com\"\u003egoogle\u003c/d\u003e');\n```\n\n## Common problem\n\n#### How to use the font after the font file is loaded?\n\n[MDN Web Docs - FontFace](https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace)\n\n```js\nTerm.font('Font Name', 'path/to/font.ttf').then((font) =\u003e {\n    var term = new Term({\n        fontFamily: font.family,\n        // ... options\n    });\n});\n```\n\n## Donations\n\nWe accept donations through these channels:\n\n-   [Paypal](https://www.paypal.me/harveyzack)\n-   [WeChat Pay](./images/wechatpay.jpg)\n-   [Alipay](./images/alipay.jpg)\n\n## QQ Group\n\n![QQ Group](./images/qqgroup.png)\n\n## License\n\nMIT © [Harvey Zack](https://sleepy.im/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhw2590582%2Fterm-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhw2590582%2Fterm-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhw2590582%2Fterm-web/lists"}