Skip to content

Commit 47235f4

Browse files
committed
Build out getting started section
Fixes #5725
1 parent 413c87c commit 47235f4

File tree

1 file changed

+34
-10
lines changed

1 file changed

+34
-10
lines changed

README.md

Lines changed: 34 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,39 @@ First, you need to install the module. We ship exclusively through [npm](https:/
2424
npm install --save @xterm/xterm
2525
```
2626

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+
const term = new Terminal();
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:
52+
53+
```html
54+
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
55+
```
56+
57+
### Standalone example
58+
59+
Here is a complete standalone example in a HTML file:
2860

2961
```html
3062
<!doctype html>
@@ -36,22 +68,14 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
3668
<body>
3769
<div id="terminal"></div>
3870
<script>
39-
var term = new Terminal();
71+
const term = new Terminal();
4072
term.open(document.getElementById('terminal'));
4173
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
4274
</script>
4375
</body>
4476
</html>
4577
```
4678

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-
5579
### Addons
5680

5781
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

Comments
 (0)