# Renderers

TypingFlow operates on "nodes" to build a <mark style="color:orange;">typing snapshot</mark>. Renderer is a function that should render a snapshot after processing each command. The package has several ready-made renderers.

### Types

```typescript
type TypingSnapshot = {
  content: Array<string>;
  cursorPosition: number;
};

type RendererType = (
  typingSnapshot: TypingSnapshot
) => void;
```

### Simple Browser Renderer

Will display each character by wrapping it in a <mark style="color:orange;">`span`</mark> with the specified classes. TypingFlow does not provide any styles. You can customize the display as you like.

{% code title="my-browser-renderer.ts" %}
```typescript
import { simpleBrowserRenderer } from "typing-flow/renderers";

type BrowserRendererConfig = {
  selector: string;
  baseNodeClasses?: string[]; // default: typing-node
  nodeWithCursorClasses?: string[]; // default: typing-node_with-cursor
};

const myBrowserRenderer = simpleBrowserRenderer({
  selector: ".example",
  baseNodeClasses: ["typing-node"],
  nodeWithCursorClasses: ["typing-node_with-cursor"],
});
```
{% endcode %}

### Attribute Renderer

Translates the current state of the animation into the specified container attributes.

{% code title="my-attribute-renderer.ts" %}
```typescript
import { attributeRenderer } from "typing-flow/renderers";

export type AttributeRendererConfig<T extends HTMLElement> = {
  selector: string;
  attributes: (keyof T | `data-${string}`)[];
}

const myAttributeRenderer = attributeRenderer<HTMLInputElement>({
    selector: ".example",
    attributes: ["placeholder", "data-text"]
});
```
{% endcode %}

### HTML Renderer

You can use HTML syntax in <mark style="color:orange;">text</mark> command when using this renderer.

{% code title="example" %}
```typescript
text(
    "<b class='bold'>Hello, <i class='cursive green'>Typing Flow</i></b>",
    { delay: 100 }
)
```
{% endcode %}

{% code title="my-html-renderer.ts" %}
```typescript
import { htmlRenderer } from "typing-flow/renderers";

type HtmlRendererConfig = {
  selector: string;
  baseNodeClasses?: string[]; // default: typing-node
  nodeWithCursorClasses?: string[]; // default: typing-node_with-cursor
};

const myHtmlRenderer = htmlRenderer({
  selector: ".example",
  baseNodeClasses: ["typing-node"],
  nodeWithCursorClasses: ["typing-node_with-cursor"],
});
```
{% endcode %}

### Custom Renderer

Renderer is a function like this:

```typescript
const someRenderer = (
  typingSnapshot: TypingSnapshot
) => {
  // render behavior
};
```

If you want to parametrize the renderer, you can do it like this:

```typescript
// definition
const someRenderer = (...args: unknown[]): RendererType => {
  return (typingSnapshot) => {
    // render behavior
  };
};


// usage
new TypingFlow({
  renderer: someRenderer(...args),
});
```

