# Snippet Overrides
> See typed per-type Snippet overrides in action — URL linkification, relative dates, number formatting, boolean badges.
**Source:** [https://jsonview.svelte.page/examples/snippet-overrides](https://jsonview.svelte.page/examples/snippet-overrides)
**Markdown mirror:** [https://jsonview.svelte.page/examples/snippet-overrides.md](https://jsonview.svelte.page/examples/snippet-overrides.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: snippet overrides.
Flip typed snippet renderers on and off to customize URLs, dates, booleans, numbers, and labels.
**Metadata:** tag: `SNIPPETS` | api: `snippets` | slots: `typed`
### Notes
- Each value type has its own `Snippet` slot — here strings become clickable links and get relative-date formatting.
- Overrides are opt-in per type: turn one on to customize numbers or booleans and leave the rest on the default renderer.
- The snippet props are fully typed, so the value handed to each renderer matches the node it decorates.
### Source
#### SnippetOverrides.svelte
Source file: [src/lib/examples/snippet-overrides/demos/SnippetOverrides.svelte](https://github.com/humanspeak/svelte-json-view-lite/blob/main/docs/src/lib/examples/snippet-overrides/demos/SnippetOverrides.svelte)
```svelte
{#snippet string({ value, field })}
{#if linkify && isUrl(value)}
{value}
{:else if linkify && field === 'email'}
{value}
{:else}
"{value}"
{/if}
{/snippet}
{#snippet number({ value })}
{#if formatNumbers}
{numberFormatter.format(value)}
{:else}
{value}
{/if}
{/snippet}
{#snippet boolean({ value })}
{#if badgeBooleans}
{value ? 'yes' : 'no'}
{:else}
{value}
{/if}
{/snippet}
{#snippet date({ value })}
{#if relativeDates}
{:else}
"{value.toISOString()}"
{/if}
{/snippet}