StringTune/Docs

Start Here

Quick Start

Minimal setup for registering modules, starting the runtime, and wiring your first element.

Quick Start

1. Create the instance

TypeScript
import StringTune, { StringProgress, StringResponsive } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();

2. Register built-in modules

TypeScript
stringTune.use(StringProgress);
stringTune.use(StringResponsive);

Use stringTune.use(...) for both element modules and global modules. The difference is in how the module activates:

  • element modules are attached through string="..."
  • global modules are activated by registration and then manage global behavior

3. Start the runtime

TypeScript
stringTune.start(60);

4. Mark up your first object

HTML
<section string="progress" string-id="hero"></section>

If the module emits an object-scoped event, string-id becomes the anchor for that channel.

5. Consume the result

Many built-in modules expose one or more of:

  • CSS variables
  • object-scoped events
  • global events
  • DOM class changes

For example, StringProgress can drive CSS through --progress and emit object:progress:<id>.

Common mistake

Do not reach into private runtime fields such as internal managers. If you need to integrate with the library, stay on the public package exports and documented attributes/events.