Pulsar syntax cheatsheet: every tag, in one page

This is the complete Pulsar syntax reference: every tag, every modifier, in one page. If you've installed Pulsar and you just need to know what @{...}, $c{...}, or $h{...} actually do — bookmark this and never read another tutorial. Each section has a copy-paste demo, the literal HTML it expands to, and the gotcha that breaks it.

TL;DR — every Pulsar tag at a glance

• @{color}text@ — solid color (free)
• @{c1-c2}text@ — smart two-stop gradient (free)
• @g{css-gradient}text@ — arbitrary CSS gradient (free)
• ${attrs}text$ — universal Pro span with any inline attributes (Pro)
• $c{key: val; ...}text$ — animated SVG circle around the text (Pro)
• $h{key: val; ...}text$ — animated SVG highlight underline (Pro)

The universal anatomy of a Pulsar tag

Every Pulsar tag follows the same shape: a single-character opener (@ or $), an argument in braces, the content to be styled, and a single-character closer (@ or $). The opener and closer always match.

<opener>{<argument>}<content><closer>

@{red}hello@        → opener @, argument "red",  content "hello", closer @
$c{color: red;}hi$  → opener $, argument "color: red;", content "hi", closer $

There are only two openers in the entire grammar: @ (free tier, color and gradient) and $ (Pro tier, animated effects and arbitrary attributes). If you remember nothing else, remember that distinction — it tells you exactly which plan a tag needs.

The pulsar color tag — @{color}text@

The simplest tag in the language. Wrap any text in @{color}...@ and Pulsar paints it that color. The color argument accepts anything CSS accepts in a color: property — named colors (red, tomato, rebeccapurple), hex codes (#a855f7), rgb(...), hsl(...), even currentColor.

This headline has a @{tomato}tomato@ word in it.

We sell @{#10b981}sustainable@ candles.

The pulsar gradient tag — @{c1-c2}text@

The two-stop gradient tag is the most-used Pulsar tag in the wild. The syntax is @{color1-color2}text@ — a hyphen separates the two stops. Pulsar renders it as a 90° linear-gradient clipped to the text. See the full gradient guide for the design rationale behind picking stops that don't look like a 2014 startup.

Get @{purple-pink}premium@ candles, shipped today.

Hand-poured, @{#4f46e5-#ec4899}small-batch@ candles.

The arbitrary gradient tag — @g{...}text@

When @{c1-c2} isn't enough, @g{...} accepts any valid CSS background-image value. Three-stop linears, conic, radial, multi-color, custom angles — all fair game. The trade-off is verbosity: you're writing real CSS, not the shorthand.

@g{linear-gradient(110deg, #f59e0b 0%, #ec4899 50%, #8b5cf6 100%)}sunset vibes@

@g{conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #3b82f6, #ef4444)}rainbow@

Anything you'd put after background-image: in CSS goes inside the braces. The renderer drops it in verbatim, then clips it to the text shape using background-clip: text plus the -webkit- prefix Safari requires.

The universal Pro tag — ${attrs}text$

The Pro tier opens a second family of tags using $ as opener and closer. The simplest of these is the universal span — ${...}text$ — which accepts any inline HTML attributes you want and applies them to a wrapping <span>. Think of it as the escape hatch for everything the named tags don't cover.

${style="text-shadow: 2px 2px 0 #fde047; font-weight: 900;"}LAUNCH$

${class="shimmer-text"}new arrivals$

The pulsar circle tag — $c{...}text$

The circle tag renders an animated SVG loop around the wrapped text. Argument is a CSS-property-style key/value list inside the braces, separated by semicolons. The rendered output is a <pulsar-circle> custom element that draws an SVG path on scroll-into-view. There's a deeper walkthrough in the animated circle guide.

$c{color: #ec4899; opacity: 0.9; data-stroke-width: 6; effect-id: 1; duration: 2}magic$

Recognised keys (all optional, sensible defaults shipped):

• color — stroke color, any CSS color. Default #60A5FA.
• opacity — 0 to 1. Default 1.
• data-stroke-width — SVG stroke width in px. Default 10.
• effect-id — which preset path to draw (1, 2, 3...). Default 1.
• offset-scale — the SVG's scale relative to the text. Default 1.1, 1.1.
• is-animated — true or false. Default true.
• duration — animation length in seconds. Default 3.2.

Now $c{color: #ec4899}40% off$ everything.

The $c{color: #10b981; effect-id: 2; duration: 1.5}fastest$ checkout in Shopify.

The pulsar highlight tag — $h{...}text$

The highlight tag is the underline cousin of the circle: same argument grammar, same keys, but the rendered SVG is a hand-drawn underline that animates in on scroll. Useful for emphasis without the disruption of a circle. See the highlight tutorial for design-direction tips.

$h{color: #fde047; opacity: 0.6; data-stroke-width: 18; effect-id: 1; duration: 2}emphasised$

The keys are identical to $c{}, with two defaults that shift to suit underlines:

• opacity defaults to 0.4 (so the highlight reads as marker ink, not a flat slab).
• data-stroke-width defaults to 20 (underlines need to be visibly thick).
• All other keys (color, effect-id, is-animated, duration, offset-scale) behave the same as in $c{}.

We make $h{color: #fde047}thoughtful$ products.

All $h{color: #f59e0b; is-animated: false}orders ship free$ over $50.

Every Pulsar tag in one table

Common mistakes that quietly break Pulsar tags

1. The closer doesn't match the opener

@{red}hello$ is invalid — @ opens, so @ must close. Pulsar's regex requires the matching pair. If a tag isn't rendering, this is the first thing to check.

2. The tag is on an unscanned element

By default the embed scans h1, h2, p. If you put a tag inside a <button>, a <div>, or an <h3>, nothing happens. The block settings expose a selector input — add the element you need (e.g. h1, h2, h3, p, .product-card__title) and save.

3. The tag is split across two HTML elements

Pulsar operates on element.innerHTML per scanned element. If your tag opens in one <p> and closes in another, neither half matches. Keep each tag inside one element.

4. Pro tag, free shop

If a $c{...} or $h{...} flashes briefly and then vanishes, the beacon at /apps/plsr returned a non-Pro response and the runtime stripped the element. Upgrade or switch to a free @{...} tag.

5. Hyphen inside a non-shorthand gradient

Already covered above — @{c1-c2} splits on the first hyphen. Anything with rgb(...), hsl(...), or negative offsets in the color stops belongs in @g{...} instead.

6. Quotes around attribute values in ${...}

The universal Pro tag takes attributes exactly as they'd appear in HTML — ${style="color: red;"}word$. Don't escape the quotes, don't drop them. The tag is parsed by string-splitting on = and whitespace inside the braces.

Cheatsheet FAQ

Print this. Pin it. Ship faster.

That's the entire Pulsar language. Six tags, two openers, one consistent grammar. If you've made it this far you officially know more than 99% of merchants using the app — go style a headline. Or, if you haven't installed Pulsar yet, the free tier covers everything in the @-family forever.