@spitch/reader

@spitch/reader

Add a ready-made audio player to your articles. @spitch/reader drops a player onto the page that reads the current article aloud — in English plus Yoruba, Hausa, and Igbo — with playback controls, language switching, and a live visualizer. Ships first-class wrappers for React and Vue, plus a framework-agnostic API.

Not using a bundler? You can embed the same player with a single <script> tag — see the CDN guide.

Install

npm install @spitch/reader

react + react-dom (for the /react entry) and vue (for the /vue entry) are optional peer dependencies — install only the one your app already uses. The core entry is self-contained, so vanilla and Vue apps don't need React.

Quick start

React / Next.js

import { Reader } from '@spitch/reader/react'

export function Article() {
  return (
    <article>
      <Reader />
      <h1>…</h1>
      <p>…</p>
    </article>
  )
}

<Reader /> renders an inline container and mounts the player into it, right where you place the component. It attaches to the surrounding article and tears itself down when the component unmounts.

Next.js App Router: render <Reader /> from a Client Component (the file needs 'use client') — the wrapper mounts the player in an effect.

Vue / Nuxt

<script setup>
import { Reader } from '@spitch/reader/vue'
</script>

<template>
  <article>
    <Reader />
    <h1>…</h1>
    <p>…</p>
  </article>
</template>

Vanilla JS / other frameworks

The package root exposes an imperative API:

import { mount } from '@spitch/reader'

// Mount into a specific element (CSS selector or Element)…
const handle = mount('#listen-here')

// …or omit the target to auto-place the player above the article:
// const handle = mount()

// Tear it down when you're done:
handle.destroy()

API

<Reader /> — React

<Reader /> — Vue

Standard attributes (e.g. class, style) fall through to the container element.

mount(target?) — imperative

function mount(target?: string | Element): { destroy(): void }

Mounts the player and returns a handle. Pass a selector or element to choose where it renders; omit target to let the Reader find the article and insert itself above the first readable block. Call handle.destroy() to remove it. The React and Vue components wrap this call and manage the lifecycle for you.

Requirements

The Reader talks to the Spitch backend, which only serves registered, secure origins. Two things to know before it will render:

• HTTPS + a registered domain. Register your site's domain with Spitch (via your Spitch dashboard, or email dev@spitch.app). The player checks the page origin and stays hidden on any origin it can't serve — including plain http://, localhost, and loopback IPs. To test locally, point at a deployed HTTPS origin (or a tunnel to one) that you've registered.
• Article content in the DOM. The player reads the article HTML already on the page, so the content must be server-rendered (SSR/SSG) or otherwise present before the player mounts. The React and Vue wrappers mount on the client, so they're safe to render during SSR — they simply attach once hydrated.

Entry points

The /react entry uses your app's React instance, so the player shares it; the core and /vue entries bundle their own renderer and need no React installed.

TypeScript

Types ship with the package — every entry point is fully typed, with no @types/* to install.

Links

• Website — https://spitch.app
• Access & support — dev@spitch.app