The JSON editor

The Tokens tab has a List / JSON toggle. JSON mode shows the entire token document as editable text.

---

What it gives you

Syntax highlighting	DTCG-aware, with rainbow brackets and indentation markers
Live linting	JSON errors appear in the gutter as you type
Theme	Follows your appearance setting

Two buttons, both disabled until you change something: discard changes and save json. A parse error is shown inline and blocks saving.

---

What you can do here that you cannot do in the forms

• Author a stroke style in its object form (dashArray + lineCap)
• Bulk-rename or restructure a whole token group with find and replace
• Paste a token tree from another tool
• Add $extensions fields by hand
• Delete many tokens at once

---

The document shape

{
  "$schema": "…",
  "$version": "2025.10",
  "tokens": {
    "color": {
      "primary": {
        "500": {
          "$type": "color",
          "$value": { "colorSpace": "srgb", "components": [0.23, 0.51, 0.96], "alpha": 1 },
          "$description": "Primary action colour"
        }
      }
    }
  }
}

Token names become nested groups: color.primary.500 is three levels of object.

---

Saving replaces everything

save json is a replace, not a merge

Saving in the JSON editor replaces the entire token document with the editor’s contents. A token you deleted from the text is deleted from the document.

This is the opposite of the import dialog, which merges. If you meant to add tokens from a file, use Import.

There is no undo. Export a backup before a large edit.

Layer bindings are unaffected by an edit here — they live on Figma layers. But a binding whose token no longer exists becomes dead: it will not re-apply on Sync to selection.

---

Safe editing routine

1. Export → Single JSON        (backup)
2. Switch to JSON view
3. Edit; watch the gutter for lint errors
4. save json
5. Switch to List view and confirm the token count looks right