Template Syntax

Write {{config.KEY}}inline in your JavaScript or CSS body. When the loader builds the bundle for a workspace, it replaces each placeholder with the matching value from that script's saved config.

const pixelId = {{config.fbPixelId}};
const width   = {{config.width}};
const isOn    = {{config.enabled}};

Whitespace inside the braces is tolerated — these all mean the same thing:

{{config.pixelId}}
{{ config.pixelId }}
{{   config.pixelId   }}

In JS bodies, values are JSON-stringified so the output is always a valid JavaScript literal:

• "red" → "red" (with quotes — a string literal)
• 120 → 120 (bare number)
• true → true (bare boolean)
• missing key → null (so the surrounding JS stays parseable)

In CSS bodies, values render raw (no quotes) because CSS property values are unquoted:

.logo {
  width: {{config.width}}px;
  color: {{config.brandColor}};
}

→ becomes

.logo {
  width: 120px;
  color: #818cf8;
}

Bare {{config}} (without a key) dumps the full config object as a JSON literal. Handy when you want to pass everything to a library:

myLibrary.init({{config}});
// → myLibrary.init({"pixelId":"FB-123","width":120,"enabled":true});

In CSS this just evaluates to empty string — there's no useful CSS analog for an object literal.

The JSON-stringify step neutralizes code injection inside config values. A malicious installer pasting "; alert(1); // into a field ends up as the escaped string "\"; alert(1); //" — still just a string, not executable.

Templates resolve when the loader bundle is built — which is either on the first request after a save, or at bundle-cache expiry (~30 seconds). So if you change a config value, expect a brief window before live sites pick up the new value. The bundle cache is short and workspace-specific; all your customer sites fetch the same updated bundle within a minute.

{{…}} is only replaced when followed by config orconfig.SOMETHING. Everything else — template literals in backticks, JSX-style braces in strings, Vue/Handlebars syntax you happen to have in a string — is left untouched.

// All of these pass through unchanged:
const tpl = "Hello {{name}}!";
const jsx = "{ foo: 'bar' }";
const vue = "{{ user.name }}";