Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTitle, slug and description fields beside a search-result card that updates live and cuts text where results pages do.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in a CMS or page settings panel so writers see the search result they are producing, not just three fields. The cut-off is the honest part: text that will not show is removed in the preview.
Do not use it when: you only need a length count (use Meta Title Length Meter) or the page has no search presence.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
site | string | "example.com" | The domain shown in the preview. |
defaultTitle | string | "" | Starting title. |
defaultSlug | string | "" | Starting slug; typing keeps it URL-safe. |
defaultDescription | string | "" | Starting description. |
limits | { title: number; description: number } | { title: 60, description: 160 } | Characters shown before the cut. |
Three labelled fields. The preview card is aria-live="polite" with an accessible name, so each change is announced after the person pauses. Nothing relies on colour: the cut is a visible ellipsis.
The pattern ships with a test (serp-snippet-preview.test.tsx). It covers mirroring, the ellipsis at the limits, slug sanitising and the empty placeholders.