OPEN SOURCE · MIT LICENSE

TikTok Wrapped Text

Organic-looking TikTok content, in HTML.

Create captions, slideshows, and carousels that feel native to TikTok. Edit, reuse, and automate your content in HTML—with the font, wrapping, and rounded backgrounds already handled.

npm install tiktok-style-wrapped-text
Star on GitHub View live demos
✓ TikTok Sans included✓ Native HTML text✓ React wrapper included
LIVE PLAYGROUND

Make it yours.

Your text. Your colors. Copy the code and keep building.

PREVIEWLive HTML component
Find your
happy place.
Select the text. It’s still text.
Black
48 px

Font, padding, corners, and snapping included. No extra CSS required.

HOW IT WORKS

One import. One tag. You’re ready.

A small component that fits into what you’re already building.

1

Get the library

Copy dist/lib from the repository into your project as roundtext. Keep the font folder with it.

Get it on GitHub ↗
2

Import once

Load the module. TikTok Sans and the custom element are registered for you.

3

Add your words

Use <tiktok-text> anywhere on your page. Pick a style, set a color, and make it yours.

index.html
<!-- Import once -->
<script type="module"
  src="./roundtext/roundtext.js">
</script>

<!-- Make it yours -->
<tiktok-text size="48" color="teal">
  Find your<br>happy place.
</tiktok-text>
No framework required. No build step for plain HTML.

Literal newlines and <br> control line breaks inside one connected bubble. See line-break examples ↗

Fits your stack
HTML
React
Next.js
Vue
Svelte
Setup guides ↗
COLOR PRESETS

Eleven colors. Ready to use.

Pick a color. The matching background, text, and outline colors come with it.

Make it
your own.

Black

color="black"
Make it
your own.

White

color="white"
Make it
your own.

Red

color="red"
Make it
your own.

Orange

color="orange"
Make it
your own.

Yellow

color="yellow"
Make it
your own.

Green

color="green"
Make it
your own.

Teal

color="teal"
Make it
your own.

Cyan

color="cyan"
Make it
your own.

Blue

color="blue"
Make it
your own.

Indigo

color="indigo"
Make it
your own.

Purple

color="purple"
FOUR TEXT STYLES

Four different text styles

Choose a color to see it across all four styles.

Find your
happy place.

Connected background

A single shape, with rounded steps.

variant="box"
Find your
happy place.

Plain text

Just the type. No background or stroke.

variant="plain"
Find your
happy place.

Rounded outline

Filled letters with a contrasting edge.

variant="outline"
Find your
happy place.

Hollow letters

The background shows through the type.

variant="hollow"

A little library. Worth a star.

If this saves you some CSS, help another builder find it.

☆ Star on GitHub Read the documentation ↗
✓ Open source✓ MIT licensed✓ Contributions welcome