DConfig

Usage

DConfig lets you wire up declarative behaviour on any public page — no JavaScript required. Define event handlers and class toggles in JSON; the page runtime applies them automatically on load.

DConfig can be set in two ways, and both are merged at runtime (inline shortcode wins on selector conflict):

  • Page editor — the DConfig collapsible section accepts a JSON blob stored in page frontmatter and injected as window.__CMS_DCONFIG__.
  • Inline shortcode — place one or more [dconfig]…[/dconfig] blocks directly in the page body Markdown. 

{
  "#selector": {
    "events": {
      "eventName": {
        "target": "#target-selector",
        "action": "value"
      }
    }
  }
}

Multiple selectors and multiple event types can appear in a single config block.

Event Description
click Fires when the selector element is clicked.

Action key Value type Description
toggleClass string Adds the class if absent, removes it if present, on the target element. Typical use: show/hide content with a hidden class.

Additional actions (addClass, removeClass, setAttribute, scroll-to) are planned for future releases.

All shortcodes support an id attribute, which is written directly onto the generated element. Use this instead of raw HTML when you want DConfig to target a card, column, or grid:

[card id="my-panel" title="Hidden Details"]
Content goes here.
[/card]


[dconfig]
{
  "#my-btn": {
    "events": {
      "click": { "target": "#my-panel", "toggleClass": "hidden" }
    }
  }
}
[/dconfig]

Supported on: [card], [col], [row], [grid].

[dconfig]
{
  "#my-btn": {
    "events": {
      "click": { "target": "#my-panel", "toggleClass": "hidden" }
    }
  }
}
[/dconfig]


<button id="my-btn" class="btn btn-primary">Toggle</button>


<div id="my-panel" class="card hidden">
  <div class="card-body">Hidden content.</div>
</div>

Any number of selectors can appear in one block. Selectors are matched with document.querySelector — use IDs, classes, or attribute selectors.

[dconfig]
{
  "#show-btn": {
    "events": {
      "click": { "target": "#panel", "toggleClass": "hidden" }
    }
  },
  "#hide-btn": {
    "events": {
      "click": { "target": "#panel", "toggleClass": "hidden" }
    }
  }
}
[/dconfig]

The same JSON (without the shortcode tags) can be pasted directly into the DConfig card in the page editor. This is useful when the config should apply to the whole page without appearing in the body content. Inline [dconfig] shortcodes are applied last and will win on any shared selector key.

See live demos on the Interactive Resources page.