Text Typewriter — TikTok Live Text overlay
Text Typewriter types each line character by character, holds, backspaces, and moves on. The typing effect carries a 'someone is writing this' suspense — pure attention bait.
Prerequisite: install and run TKStudio (Windows desktop) and connect it to the TikTok LIVE room you are streaming. This article stands on its own — from configuration to OBS / TikTok LIVE Studio setup.
When to use it
Short slogans typed out hold attention — viewers wait for the next character, so read-through beats static text easily. Reveals (giveaway answers, blind-box results) pair perfectly with it, and the pure-JS build runs smooth on weak machines.
One line, no footprint: it fits any gap in your composition.
The demo video above shows Text Typewriter in action (both EN and ZH versions), and the cover previews the layout; the plugin page's live preview is the source of truth.
Configuration
Configure everything on the plugin page in TKStudio — tune on the left, preview live on the right, then hit Generate link. The table below lists every parameter in panel order, its default, and practical gotchas.
| Parameter | Description | Default | Gotchas |
|---|---|---|---|
clearMode | How the line clears (backspace or wipe). | backspace | Backspace keeps the typewriter feel; wipe is snappier. |
typeMs | Milliseconds per character. (20–200, step 5) | 55 | 40–80ms reads as human typing; under 20ms loses the effect. |
deleteMs | Milliseconds per deleted character. (15–150, step 5) | 35 | Deletion reads best at roughly half the typing speed. |
holdSec | Hold time for a result or message. (0.3–6, step 0.1) | 1.5 | Wheels need ≥3s so winners can screenshot the result. |
gapSec | Pause between lines. (0–3, step 0.1) | 0.4 | Shorten when you have many lines so a full loop stays snappy. |
fontSize | Font size in pixels. (16–64) | 28 | Works together with Scale: set font size first, then scale the whole overlay. |
size | Overall overlay scale (1–10). (1–10) | 5 | You can still resize in OBS / LIVE Studio afterwards; avoid stacking both too small. |
showCursor | Show the blinking caret. | true | Off reads like subtitles, on reads like a terminal. |
lines | List of text lines / ticker content. | — | Each line can carry its own color; order is the playback order. |
How to use it in OBS
This section assumes you have generated and copied the link: open TKStudio → pick Text Typewriter → choose the room and tune parameters → Generate link → Copy link. Keep TKStudio running while you stream — the overlay link talks to the local TKStudio process.
Add the link to OBS as a Browser Source:
- In the Sources dock click + → Browser.
- Paste the copied link into URL; set width / height to your canvas (usually 1920×1080).
- Leave Shutdown source when not visible unchecked so the overlay never pauses.
- Click OK, then drag / resize the source into position.
Placement: Subtitle position (lower-center) or a top strip; keep the font moderate — typing reads best up close.
- The page background is transparent out of the box — do not override it with custom CSS.
- After changing parameters, Generate link again and refresh the Browser Source (or update its URL).
- One plugin = one Browser Source; add more sources for more overlays.
How to use it in TikTok LIVE Studio
If you go live with TikTok LIVE Studio, the approach is the same — a browser layer, nearly identical to OBS:
- Open your scene / layer list in TikTok LIVE Studio.
- Add a Browser layer.
- Paste the link from Copy link into the URL field.
- Match the canvas size (e.g. 1920×1080) and keep the background transparent.
- Position the layer, go live, and send a test chat / gift to confirm it animates.
- TKStudio and TikTok LIVE Studio must run on the same PC (the link points to 127.0.0.1).
- Blank overlay? Make sure TKStudio is connected to the right room, then re-copy the link and refresh the layer.
- After regenerating a link, refresh or re-create the browser layer.
Related plugins
Browse all plugin docs or try them live in the TKStudio marketplace.