# Get started

### Installation

{% code fullWidth="false" %}

```bash
npm install typing-flow
```

{% endcode %}

### Usage

You should make sure that at the time the animation starts, the element with the specified <mark style="color:orange;">selector</mark> is rendered in the DOM.

{% code title="flow\.ts" %}

```typescript
import { TypingFlow } from "typing-flow";
import { simpleBrowserRenderer } from "typing-flow/renderers";
import {
  backspace,
  cursorLeft,
  cursorRight,
  delay,
  text,
} from "typing-flow/commands";

// Step 1. Create instance
const flow = new TypingFlow({
  renderer: simpleBrowserRenderer({ selector: ".test" }),
});

// Step 2. Declare animation commands
flow.commands([
  text("Hello, worldd!!!", {
    delay: 130,
    instant: false,
  }),
  delay(300),
  cursorLeft(3, { delay: 120 }),
  backspace({ amount: 1, delay: 280 }),
  delay(310),
  cursorRight(3, { instant: true }),
]);

// Step 3. Start
flow.start();

```

{% endcode %}