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-10Lines changed: 34 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,39 @@ 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.
28
+
29
+
```javascript
30
+
import { Terminal } from'@xterm/xterm';
31
+
```
32
+
33
+
> ![TIP]
34
+
> xterm.js ships both a CommonJS (`main` in package.json) and ES module files (`module` in package.json).
35
+
36
+
Then instantiate a `Terminal` object, open it on an element and write to it:
37
+
38
+
```javascript
39
+
constterm=newTerminal();
40
+
term.open(document.getElementById('terminal'));
41
+
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
42
+
```
43
+
44
+
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.
45
+
46
+
```javascript
47
+
pty.onData(data=>term.write(data));
48
+
term.onData(data=>pty.write(data));
49
+
```
50
+
51
+
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
60
29
61
```html
30
62
<!doctype html>
@@ -36,22 +68,14 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
36
68
<body>
37
69
<divid="terminal"></div>
38
70
<script>
39
-
var term =newTerminal();
71
+
constterm=newTerminal();
40
72
term.open(document.getElementById('terminal'));
41
73
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
42
74
</script>
43
75
</body>
44
76
</html>
45
77
```
46
78
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
79
### Addons
56
80
57
81
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:
0 commit comments