Variable Interpolation

SchemaForms Data supports variable interpolation in schema text using the {{key}} syntax. This lets you personalise labels, titles, and hints with data from the event context or your application.

How it works

Text properties in schemas are automatically interpolated by the renderer when externalData is provided.

Properties that support interpolation:

• FormStep.titulo
• FormStep.descricao
• FormContainer.titulo
• FormContainer.descricao
• FormField.label
• FormField.hint
• FormField.placeholder
• FormField.termoTexto

Configure externalData

<FormRenderer
  schema={schema}
  externalData={{
    "evento.nome": "Summer Camp 2026",
    "evento.valor": 5000,
    "evento.dataInicio": "January 15, 2026",
    "evento.local": "Sunshine Ranch, Austin TX",
    "usuario.nome": "John Smith",
  }}
  onComplete={handler}
/>

Using interpolation in the schema

{
  "steps": [
    {
      "titulo": "Registration — {{evento.nome}}",
      "descricao": "Secure your spot for {{evento.dataInicio}} at {{evento.local}}",
      "containers": [
        {
          "campos": [
            {
              "label": "Hi, {{usuario.nome}}! Confirm your e-mail",
              "hint": "This e-mail will be used to send your receipt for {{evento.nome}}"
            }
          ]
        }
      ]
    }
  ]
}

Available variables in the builder

The builder has 20 pre-configured event variables accessible via the VarPicker UI:

Variable	Description
{{evento.nome}}	Event name
{{evento.descricao}}	Event description
{{evento.dataInicio}}	Start date
{{evento.dataFim}}	End date
{{evento.local}}	Event venue
{{evento.endereco}}	Full address
{{evento.valor}}	Registration fee
{{evento.vagas}}	Total spots
{{evento.vagasDisponiveis}}	Available spots
{{evento.organizador}}	Organizer name
{{evento.contato}}	Organizer contact
{{evento.linkCertificado}}	Certificate link
{{evento.linkGrupo}}	Group link (WhatsApp, etc.)
{{evento.linkSite}}	Official website
{{evento.politicaCancelamento}}	Cancellation policy
{{evento.nomeTermos}}	Terms name
{{evento.regulamento}}	Regulation link
{{evento.informacoesAdicionais}}	Additional information
{{evento.codigo}}	Event code

Using programmatically

import {
  interpolate,
  interpolateField,
  interpolateContainer,
  interpolateStep,
} from "@schema-forms-data/renderer";

const vars = { "evento.nome": "Camp 2026" };

// Interpolate a string
const text = interpolate("Welcome to {{evento.nome}}!", vars);
// → "Welcome to Camp 2026!"

// Interpolate an entire field (label, hint, placeholder, etc.)
const interpolatedField = interpolateField(field, vars);

// Interpolate a container and all its fields
const interpolatedContainer = interpolateContainer(container, vars);

// Interpolate an entire step
const interpolatedStep = interpolateStep(step, vars);

Conditionals with externalData

Prefix the campo with evento. in conditionals to compare against externalData values:

{
  "condicional": {
    "campo": "evento.tipoEvento",
    "operador": "igual",
    "valor": "presencial"
  }
}

<FormRenderer
  externalData={{ "evento.tipoEvento": "presencial" }}
  onComplete={handler}
/>