Add tipping to any site.
One npm package, three ways to ship. Drop tippable paragraphs into a React app, sign tips inline without a redirect, or paste a single script tag onto WordPress, Ghost, or plain HTML. Every tip is sub-cent cUSD on Celo.
Three entries, one balance
Pick the entry that matches your stack.
Lite
@tipitip/embedneeds react
- ·Zero extra deps
- ·Deep-links to TipiTip to sign
- ·Best for Substack, MDX, constrained surfaces
Inline
@tipitip/embed/inlineneeds react + viem
- ·Signs in place, no redirect
- ·MiniPay-aware (gas in cUSD)
- ·Best for React blogs that want the tip to land here
Vanilla
@tipitip/embed/vanillaneeds one script tag
- ·No React, no build step
- ·<tipitip-paragraphs> custom element
- ·Best for WordPress, Ghost, plain HTML
All three target the same on-chain article, so tips made through any entry aggregate to the writer's single balance. Mix and match across your surfaces.
Playground
Paste an article id. Copy the snippet.
Publish at /write to get your own, or keep the live example loaded.
Zero deps. Deep-links to TipiTip to sign.
pnpm add @tipitip/embed
import { TipParagraphs } from "@tipitip/embed";
<TipParagraphs articleId="0x…" />Live preview
Enter a valid 32-byte article id (0x + 64 hex chars) to render a live embed.
Preview uses the lite embed (read-and-redirect). Inline and vanilla render the same paragraphs but complete the tip without leaving the page.
API reference
Props & attributes.
React props (lite & inline)
| Prop | Type | Default | Notes |
|---|---|---|---|
| articleId | 0x${string} | required | 32-byte on-chain article id |
| baseUrl | string | production | TipiTip API origin |
| chainId | 42220 | 11142220 | 42220 | Celo Mainnet or Sepolia |
| pollIntervalMs | number | 30000 | Counter refresh; 0 disables |
| tipAmountsCusd | number[] | [0.001, 0.005, 0.01] | inline only — selectable amounts |
| className / style | string / CSSProperties | — | Wrapper styling |
Web component attributes (vanilla)
| Attribute | Default | Notes |
|---|---|---|
| article-id | required | 32-byte hex id |
| tip-amount | 0.005 | Whole cUSD per tap |
| chain-id | 42220 | Mainnet / Sepolia |
| base-url | production | API origin |
| poll-interval | 30000 | Stats refresh ms |
Theming
It inherits your page.
The React embed renders semantic HTML with minimal inline styles you can override via class selectors. The vanilla web component isolates its styles in a shadow root so host CSS never collides.
.tipitip-embed { /* outer <article> */ }
.tipitip-embed__paragraph { /* one paragraph block */ }
.tipitip-embed__body { /* rendered markdown */ }
.tipitip-embed__tip { /* heart counter button */ }