pbakaus/impeccable · warning

[impeccable] Invalid data-impeccable-params JSON:

Error message

[impeccable] Invalid data-impeccable-params JSON:

What it means

In-page live-mode JS warns that the `data-impeccable-params` attribute on a variant element is not valid JSON. The parse error is caught, the attribute is ignored (returns []), and no variants are generated from params.

Source

Thrown at skill/scripts/live-browser.js:3181

  function parseVariantParams(variantEl) {
    // Svelte component variants can't carry a `data-impeccable-params` attribute:
    // the compiler reads `{` inside attribute values as expression delimiters, so
    // JSON-with-braces breaks the build. For that path the params live in a sidecar
    // params.json keyed by variant number, loaded into the session at mount time.
    if (svelteComponentSession?.sessionId === currentSessionId) {
      const byVariant = svelteComponentSession.paramsByVariant || {};
      const params = byVariant[String(visibleVariant)] || byVariant[visibleVariant];
      return Array.isArray(params) ? params : [];
    }
    if (!variantEl) return [];
    const raw = variantEl.getAttribute('data-impeccable-params');
    if (!raw) return [];
    try {
      const parsed = JSON.parse(raw);
      return Array.isArray(parsed) ? parsed : [];
    } catch (err) {
      console.warn('[impeccable] Invalid data-impeccable-params JSON:', err.message);
      return [];
    }
  }

  function applyParamValue(variantEl, param, value) {
    if (!variantEl) return;
    const attr = 'data-p-' + param.id;
    if (param.kind === 'toggle') {
      const on = !!value;
      if (on) variantEl.setAttribute(attr, 'on');
      else variantEl.removeAttribute(attr);
    } else if (param.kind === 'steps') {
      variantEl.setAttribute(attr, String(value));
    }
    // Svelte component variants are client-mounted into
    // [data-impeccable-component-mount] with no [data-impeccable-variant="N"]
    // wrapper for the state stylesheet to target, and the element is not SSR'd,
    // so there is no React hydration to mismatch. Drive range/toggle --p-* inline

View on GitHub (pinned to 2bc2879276)

Solutions

1. Inspect element.getAttribute('data-impeccable-params') in devtools and fix the JSON syntax.
2. Ensure the value is a JSON array (e.g. '[{"x":1}]'), not an object.
3. Serialize with JSON.stringify on the generating side instead of hand-writing the attribute.
4. Check that the template engine isn't HTML-escaping the quotes in the attribute.

Example fix

// before
div.setAttribute('data-impeccable-params', "{'color':'red'}");
// after
div.setAttribute('data-impeccable-params', JSON.stringify([{ color: 'red' }]));

function paramsAreValid(el) {
  const raw = el.getAttribute('data-impeccable-params');
  if (!raw) return true;
  try { return Array.isArray(JSON.parse(raw)); } catch { return false; }
}

function isVariantParamArray(v) {
  return Array.isArray(v) && v.every(p => p !== null && typeof p === 'object');
}

try {
  const params = JSON.parse(el.getAttribute('data-impeccable-params'));
} catch (err) {
  console.warn('[impeccable] Invalid data-impeccable-params JSON:', err.message);
}

When it happens

Trigger: A variant element's data-impeccable-params attribute contains malformed JSON (JSON.parse throws) or is valid JSON but not an array; the warning fires at skill/scripts/live-browser.js:3181 and the function returns an empty array.

Common situations: Hand-written attribute with single quotes or unescaped characters; HTML-escaping corrupting quotes ("); params serialized as an object instead of an array.

Understand the failure class

Background: JSON parse error: "Unexpected token" / "not valid JSON" / "failed to parse" — what JSON parsers are really complaining about — this error's family across 45 libraries.

Related errors

• AI copy-edit batch did not return a valid completion payload
• config.json must be an object
• Live browser script part missing: ${part.name} (${part.path}
• manual_edit_buffer_invalid_schema
• manual_edit_buffer_unreadable: {err.message}

AI-assisted analysis of pbakaus/impeccable@2bc2879276 (2026-09-08). Data as JSON: /api/errors/9f8a2a1524221d26. Report an issue: GitHub.