TokenManager

Blocks · OT_TokenManager

Global text-token system. Authors define key–value pairs (e.g. product-name → Advantage Checking); any CMS field that contains {{product-name}} receives the value at render time — in the CMS preview and on published pages. Token keys are language-neutral; values can be translated per locale. Singleton shared block, like ThemeManager.

How tokens work

The Token Manager is a shared block (like Theme Manager) — one item in Shared Assets, applied globally. Authors place {{token-key}}placeholders in any CMS field: headlines, body copy, CTA labels, meta descriptions, even image alt text. At render time — both in the CMS preview and on the published page — each placeholder is replaced with the token's current value.

Step 1

Define

Create a Token Manager in Shared Assets. Add key–value pairs. Keys are language-neutral; values translate per locale.

Step 2

Author

Place {{token-key}} in any content field. The CMS editor shows the raw token; preview and publish show the value.

Step 3

Update

Change the value in the Token Manager. Every page that references the token updates instantly — no page edits needed.

Live replacement demo

Preset vertical:

Token definitions

Key	Value
`{{product-name}}`	Advantage Checking
`{{apy-rate}}`	5.25%
`{{institution-name}}`	First Meridian Bank
`{{min-balance}}`	$500
`{{open-cta}}`	Open an account today

Add a token

Content fields with replacements applied

Hero headline

Open your {{product-name}} at {{institution-name}} today.

Open your Advantage Checking at First Meridian Bank today.

Product subheading

Earn {{apy-rate}} APY with no hidden fees. {{open-cta}}.

Earn 5.25% APY with no hidden fees. Open an account today.

Body copy

The {{product-name}} from {{institution-name}} is designed for members who want more from their money. Minimum opening deposit of {{min-balance}}.

The Advantage Checking from First Meridian Bank is designed for members who want more from their money. Minimum opening deposit of $500.

Meta description

{{institution-name}} — {{product-name}}. {{coverage-note}}. {{open-cta}}.

First Meridian Bank — Advantage Checking. {{coverage-note}}. Open an account today.

CTA button label

Open an account today

Usage patterns

Server components (adapters)

Call applyTokensToContent() to replace tokens across the full content object before passing to the UI component.

import { getTokenMap, applyTokensToContent } from '@/lib/tokens'

export default async function OT_HeroBlockAdapter({ content }) {
  const tokens  = await getTokenMap()
  const content = applyTokensToContent(rawContent, tokens)
  return <HeroBlock {...content} />
}

Client components

Use the useReplaceTokens() hook — the token map is already in context from the site layout.

import { useReplaceTokens } from '@/components/providers/TokenProvider'

export function MyComponent({ text }) {
  const replace = useReplaceTokens()
  return <p>{replace(text)}</p>
}