You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+34-11Lines changed: 34 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,36 @@ First, you need to install the module. We ship exclusively through [npm](https:/
24
24
npm install --save @xterm/xterm
25
25
```
26
26
27
-
To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
27
+
The recommended way to load xterm.js with the ES module syntax, either using TypeScript or a modern JS tooling. Note that both CommonJS and ES module files are shipped with the npm package.
28
+
29
+
```javascript
30
+
import { Terminal } from'@xterm/xterm';
31
+
```
32
+
33
+
Then instantiate a `Terminal` object, open it on an element and write to it:
34
+
35
+
```javascript
36
+
constterm=newTerminal();
37
+
term.open(document.getElementById('terminal'));
38
+
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
39
+
```
40
+
41
+
Most use cases will hook up input and output to a pseudoterminal API such as [node-pty](https://www.npmjs.com/package/node-pty) which will drive the terminal.
42
+
43
+
```javascript
44
+
pty.onData(data=>term.write(data));
45
+
term.onData(data=>pty.write(data));
46
+
```
47
+
48
+
Then make sure to also include the `css/xterm.css` file, for example in HTML:
Here is a complete standalone example in a HTML file:
28
57
29
58
```html
30
59
<!doctype html>
@@ -36,22 +65,14 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
36
65
<body>
37
66
<divid="terminal"></div>
38
67
<script>
39
-
var term =newTerminal();
68
+
constterm=newTerminal();
40
69
term.open(document.getElementById('terminal'));
41
70
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
42
71
</script>
43
72
</body>
44
73
</html>
45
74
```
46
75
47
-
### Importing
48
-
49
-
The recommended way to load xterm.js is via the ES6 module syntax:
50
-
51
-
```javascript
52
-
import { Terminal } from'@xterm/xterm';
53
-
```
54
-
55
76
### Addons
56
77
57
78
Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon, you first need to install it in your project:
@@ -94,7 +115,7 @@ Since xterm.js is typically implemented as a developer tool, generally only mode
94
115
95
116
### Node.js Support
96
117
97
-
We also publish [`xterm-headless`](https://www.npmjs.com/package/xterm-headless) which is a stripped down version of xterm.js that runs headless in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the [serialize addon](https://www.npmjs.com/package/@xterm/addon-serialize) so it can get all state restored upon reconnection.
118
+
We also publish [`@xterm/headless`](https://www.npmjs.com/package/@xterm/headless) which is a stripped down version of xterm.js that runs headless in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the [serialize addon](https://www.npmjs.com/package/@xterm/addon-serialize) so it can get all state restored upon reconnection.
98
119
99
120
## API
100
121
@@ -229,6 +250,8 @@ Xterm.js is used in many world-class applications to provide great terminal expe
229
250
-[**ecmaOS**](https://ecmaos.sh): A kernel and suite of applications tying modern web technologies into a browser-based operating system.
230
251
-[**LabEx**](https://labex.io): Interactive learning platform with hands-on labs and xterm.js-based online terminals, focused on learn-by-doing approach.
231
252
-[**EmuDevz**](https://afska.github.io/emudevz): A free coding game where players learn how to build an emulator from scratch.
253
+
-[**SSH Connection Manager**](https://github.com/Amtrend/ssh-manager): Modern web-based SSH terminal and SFTP manager with AES-256 encryption, PWA support, and session management.
254
+
-[**WooTTY**](https://github.com/icoretech/wootty): Flawless browser terminal for real operators.
232
255
-[And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)
233
256
234
257
Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Please add any new contributions to the end of the list.
0 commit comments