diff --git a/README.md b/README.md index ab8698f82..a6fecc191 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,36 @@ First, you need to install the module. We ship exclusively through [npm](https:/ npm install --save @xterm/xterm ``` -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 `
` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`. +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. + +```javascript +import { Terminal } from '@xterm/xterm'; +``` + +Then instantiate a `Terminal` object, open it on an element and write to it: + +```javascript +const term = new Terminal(); +term.open(document.getElementById('terminal')); +term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ') +``` + +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. + +```javascript +pty.onData(data => term.write(data)); +term.onData(data => pty.write(data)); +``` + +Then make sure to also include the `css/xterm.css` file, for example in HTML: + +```html + +``` + +### Standalone example + +Here is a complete standalone example in a HTML file: ```html @@ -36,7 +65,7 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
@@ -44,14 +73,6 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t ``` -### Importing - -The recommended way to load xterm.js is via the ES6 module syntax: - -```javascript -import { Terminal } from '@xterm/xterm'; -``` - ### Addons 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: