# Textwriter

[GitHub Repository](https://github.com/FelixLind1/textwriter)

![npm version](https://img.shields.io/npm/v/@felixlind/textwriter.svg)  
![npm downloads](https://img.shields.io/npm/dm/@felixlind/textwriter.svg)  
![license](https://img.shields.io/npm/l/@felixlind/textwriter.svg?cacheBust=1)  

A simple **frontend library** to create textwriter effects on web pages.  
**Note:** This library runs in the browser and is **not** intended for server-side Node.js execution.

---

## Installation

```bash
npm install @felixlind/textwriter

Usage

Important: Do not include textwriter.js directly as a <script> if you are using npm. Always import it in your JavaScript file.

ES Modules (Browser)

If you are using npm without a bundler (no Webpack/Rollup/Parcel):

1. The package is installed in node_modules/@felixlind/textwriter.
2. The browser cannot read package names directly, so you must import using a relative path to src/textwriter.js:

import { runTextwriters, typeWriterAsync } from './node_modules/@felixlind/textwriter/src/textwriter.js';

// Dynamically create HTML
document.querySelector('.container').innerHTML = `
  <div class="textwriter" data-speed="20">Hello and welcome!</div>
  <div class="textwriter" data-speed="15">Line two appears next.</div>
  <div class="textwriter" data-speed="10">And line three.</div>
`;

// Run all lines sequentially
runTextwriters("sequential");

// Example: Promise-based typing for a single element
const el = document.querySelector('.textwriter');
typeWriterAsync("Hello!", el, 15).then(() => {
  console.log("Typing finished!");
});

CSS example:

.textwriter {
  color: purple;          /* text color */
  font-size: 18px;        /* example font size */
  font-family: monospace; /* typewriter-style font */
}

CommonJS (for bundlers like Webpack)

const Textwriter = require('@felixlind/textwriter');
const { runTextwriters, typeWriterAsync } = Textwriter;

document.querySelector('.container').innerHTML = `
  <div class="textwriter" data-speed="20">Hello and welcome!</div>
  <div class="textwriter" data-speed="15">Line two appears next.</div>
`;

runTextwriters("sequential");

const el = document.querySelector('.textwriter');
typeWriterAsync("Hello!", el, 15).then(() => {
  console.log("Typing finished!");
});

Parameters

• mode: "sequential" or "simultaneous"

  • "sequential" → types one line at a time
  • "simultaneous" → types all lines at the same time

• data-speed: Typing speed in characters per second (higher = faster). Default = 10 cps.

Example:

<div class="textwriter" data-speed="20">Text here</div>

.textwriter {
  color: purple;
}

Browser Usage Notes

• Works on any modern browser that supports ES Modules.
• Does not require a backend; all typing happens on the client side.
• If you are not using a bundler, you must import using a relative path from node_modules (e.g., ./node_modules/@felixlind/textwriter/src/textwriter.js).
• The Promise-based function typeWriterAsync allows sequential typing for individual elements, with .then() triggered after completion.

License

MIT