# Reactive Extensions > Build reactive marked extensions for @humanspeak/svelte-markdown in Svelte 5, dynamically rebuilding extension state without duplicate token handlers. **Source:** [https://markdown.svelte.page/examples/reactive-extensions](https://markdown.svelte.page/examples/reactive-extensions) **Markdown mirror:** [https://markdown.svelte.page/examples/reactive-extensions.md](https://markdown.svelte.page/examples/reactive-extensions.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: dynamic extension state. Rebuild a fresh `extensions` array from Svelte state whenever display format changes. The custom tokenizer captures the current format and the parser cache sees a new extension identity. **Metadata:** tag: `REACTIVE` | pattern: `$derived array` | issue: `#309` ### Notes - Treat `extensions` as immutable: assign a new array when reactive inputs change instead of mutating with `push`, `splice`, or `length = 0`. - The tokenizer closure captures the selected display format, then stores it on the custom `displayButton` token. - Static extensions can live in the same returned array: `$derived([makeCustom(displayFormat), markedKatex(), markedFootnote()])`. - Click the format buttons and watch both the rendered chips and tokenizer telemetry update from the same markdown source. ### Source #### ReactiveExtensionConsole.svelte Source file: [src/lib/examples/reactive-extensions/demos/ReactiveExtensionConsole.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/reactive-extensions/demos/ReactiveExtensionConsole.svelte) ```svelte
issue #309 repro pattern {displayButtons.length} custom tokens format: {formatLabels[displayFormat]} mode: {visualModeLabels[visualMode]}
format
{#each Object.entries(formatLabels) as [format, label] (format)} {/each}
chip mode
{#each Object.entries(visualModeLabels) as [mode, label] (mode)} {/each}
{#snippet left()} {/snippet} {#snippet right()}
{/snippet}
tokenizer telemetry fresh array from $derived
{#each displayButtons as token, index (`${token.raw}-${index}`)}
{token.raw} {token.number1?.toFixed(4)}, {token.number2?.toFixed(4)} {token.displayFormat} / {token.visualMode}
{:else}

No coordinate tokens yet. Add something like @(42.36, -71.06).

{/each}
``` #### DisplayButtonRenderer.svelte Source file: [src/lib/examples/reactive-extensions/demos/DisplayButtonRenderer.svelte](https://github.com/humanspeak/svelte-markdown/blob/main/docs/src/lib/examples/reactive-extensions/demos/DisplayButtonRenderer.svelte) ```svelte {#if displayFormat === 'decimal'} decimal lock {:else if displayFormat === 'dms'} nav-grade dms {:else} mission tile {/if} {#if displayFormat === 'decimal'} {decimalLabel} {:else if displayFormat === 'dms'} {dmsLabel} {:else} GRID-{missionLabel} {/if} ```