# Snippet Overrides
> Replace the default renderer for any primitive, Date, bigint, function, or field label using Svelte 5 snippets.
**Source:** [https://jsonview.svelte.page/docs/snippet-overrides](https://jsonview.svelte.page/docs/snippet-overrides)
---
Snippet overrides are the one deliberate extension the Svelte port adds on top of [react-json-view-lite's API](/compare/vs-react-json-view-lite). Pass a `Snippet` as any of the nine type-keyed props and the viewer calls it instead of the built-in renderer for every matching value.
```svelte
{#snippet string({ value })}
{value}
{/snippet}
```
## Snippet Props
Every value snippet receives the same shape — just with a differently typed `value`:
```ts
interface ValueSnippetProps {
value: T
field?: string // parent key, or undefined at the root / inside arrays
level: number // depth (root = 0)
}
```
| Snippet | Fires for | `value` type |
|---------|-----------|--------------|
| `string` | String leaves | `string` |
| `number` | Number leaves | `number` |
| `boolean` | Boolean leaves | `boolean` |
| `null` | `null` leaves | `null` |
| `undefined` | `undefined` leaves | `undefined` |
| `bigint` | `bigint` leaves | `bigint` |
| `date` | `Date` instances | `Date` |
| `function` | Function values | `Function` |
| `label` | Every field label (key) | — (`{ field, level }`) |
See [Types & snippets](/docs/api/types) for the exported type aliases.
## Render URLs as links
```svelte
{#snippet string({ value })}
{#if isUrl(value)}
{value}
{:else}
"{value}"
{/if}
{/snippet}
```
## Relative time for `Date` values
```svelte
{#snippet date({ value })}
{/snippet}
```
## Format large numbers
```svelte
{#snippet number({ value })}
{fmt.format(value)}
{/snippet}
```
## Badge booleans
```svelte
{#snippet boolean({ value })}
{value ? 'yes' : 'no'}
{/snippet}
```
## Field-scoped rendering
The `field` prop lets you key behavior off the parent label:
```svelte
{#snippet string({ value, field })}
{#if field === 'email'}
{value}
{:else}
"{value}"
{/if}
{/snippet}
```
`field` is `undefined` at the root and inside array elements. `level` is the depth — useful for nested-specific styling.
## Custom label renderer
The `label` snippet replaces the default key rendering. It receives `{ field, level }` and no `value`:
```svelte
{#snippet label({ field, level })}
{field}
{/snippet}
```
## Mixing themes and snippets
Snippets only replace the value cell. The surrounding container, punctuation, and field label continue to use `StyleProps` classes and `--sjv-*` tokens. Combine both for full theming:
```svelte
{#snippet string({ value })}
{value}
{/snippet}
```
## Related
- [JsonView props](/docs/api/json-view) — every snippet listed alongside the other props
- [Types & snippets](/docs/api/types) — exported prop types for each snippet
- [Themes & CSS variables](/docs/themes) — theming the parts snippets don't touch