Audio versions help readers keep moving through a story while they cook, commute, or rest their eyes between tasks.
React package
Text to Speech Highlight for React and Next.js
Add a text to speech player that highlights sentences and words as they are being spoken in React and Next.js apps. Works with any TTS API, including OpenAI, ElevenLabs, ReinventWP Cloud, etc..
Features
A React player that keeps setup light.
The package is built for app developers who want a predictable component, simple configuration, and an easy path from prototype to hosted audio.
React component API
Mount the player beside an article ref instead of manually scanning the DOM.
Next.js friendly
Use browser speech first, or pass a server resolver that calls your own API route.
Cloud-ready
Use a public project key when you want hosted audio without provider credentials in the browser.
Generated config
Use the UI generator to produce copy-paste React code from the same config shape.
Implementation
Install, pass a ref, ship the player.
The simple setup uses browser speech plus a public site key, so React developers can validate the component before adding hosted audio.
Install
Add the package to your app.
npm install @reinventwp/text-to-speechSimple React component
Minimal config, one public site key, one article ref.
"use client";
import ReinventTTS from "@reinventwp/text-to-speech";
import { useRef } from "react";
const pluginConfig = {
audio_source: "browser",
read_title: true
};
const publicKey = "rwp_public_xxx";
export default function ArticlePage() {
const articleRef = useRef<HTMLElement | null>(null);
return (
<>
<ReinventTTS
target={articleRef}
publicKey={publicKey}
pluginConfig={pluginConfig}
/>
<article ref={articleRef}>...</article>
</>
);
}What the developer does
1.
Install the React package.
2.
Buy any plan from the pricing section.
3.
Go to the Text To Speech Cloud dashboard.
4.
Create a project, add your domain, and copy the public site key.
5.
Create an articleRef and pass it with publicKey to ReinventTTS.
6.
Wrap the content in an article element.
Code generator
Configure it visually, copy React code.
Use the controls on the right to generate the component snippet on the left. It is designed to be copied straight into your app.
Try it out!
Go to the Text To Speech Cloud dashboard to get the public key.
Plugin config:
Read section
Which sections of your page will be read?
Altering Text
Edit text before sending it to the TTS API. The text will processed with the following sequence steps:
Exclude HTML Selectors
script
style
noscript
code
pre
Enter HTML selectors, then press Enter to add. You can also paste comma or space-separated values.
Exclude Texts
Enter text or words to exclude, then press Enter to add
Global Text Spoken Form
Example: Displayed =WP → Spoken form = WeePeeCase Sensitive
Spoken Prefix
Automatically say a short phrase before matched content such as image captions.
Caption Spoken Prefix Rules
Example: selectors =figcaption, prefix = Image showcasingNo spoken prefix rules yet. Add one to automatically say something like Image showcasing before matched caption text.