<!-- Source: https://jsonview.svelte.page/examples/edge-cases -->

# Edge Cases

> Render every supported value type — dates, bigints, functions, nulls, empty containers, and long strings — against the canonical upstream fixture.

**Source:** [https://jsonview.svelte.page/examples/edge-cases](https://jsonview.svelte.page/examples/edge-cases)

**Markdown mirror:** [https://jsonview.svelte.page/examples/edge-cases.md](https://jsonview.svelte.page/examples/edge-cases.md)

---

This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.

## FIG-001: edge cases.

Render dates, bigints, functions, nulls, empty containers, nested arrays, and long strings in one payload.

**Metadata:** tag: `VALUES` | fixture: `mixed values` | coverage: `all values`

### Notes

- Non-JSON primitives — `BigInt`, `Date`, `function`, `undefined`, `null` — each get their own typed renderer.
- Empty objects and arrays, deeply nested containers, and long strings all render without collapsing the layout.
- Driven by the same canonical fixture as the react-json-view-lite Storybook , so behavior is directly comparable.

### Source

#### EdgeCases.svelte

Source file: [src/lib/examples/edge-cases/demos/EdgeCases.svelte](https://github.com/humanspeak/svelte-json-view-lite/blob/main/docs/src/lib/examples/edge-cases/demos/EdgeCases.svelte)

```svelte
<script lang="ts">
    import { JsonView, allExpanded } from '@humanspeak/svelte-json-view-lite'
    import { docsDarkJsonViewStyles, docsDefaultJsonViewStyles } from '$lib/json-view-docs-style'
    import { mode } from 'mode-watcher'
    import { jsonData } from '../../../../../../src/routes/test/sample'

    let stringifyStringValues = $state(false)
    let quotesForFieldNames = $state(false)
    let noQuotesForStringValues = $state(false)
    let compactTopLevel = $state(false)

    const demoData = {
        'escaped string': 'line one\nline two\t"quoted"',
        ...jsonData
    }

    const style = $derived({
        ...(mode.current === 'light' ? docsDefaultJsonViewStyles : docsDarkJsonViewStyles),
        stringifyStringValues,
        quotesForFieldNames,
        noQuotesForStringValues
    })
</script>

<div class="json-demo column">
    <div class="json-demo-controls">
        <label class="json-demo-control">
            <input type="checkbox" bind:checked={stringifyStringValues} />
            stringifyStringValues
        </label>
        <label class="json-demo-control">
            <input type="checkbox" bind:checked={quotesForFieldNames} />
            quotesForFieldNames
        </label>
        <label class="json-demo-control">
            <input type="checkbox" bind:checked={noQuotesForStringValues} />
            noQuotesForStringValues
        </label>
        <label class="json-demo-control">
            <input type="checkbox" bind:checked={compactTopLevel} />
            compactTopLevel
        </label>
    </div>

    <div class="json-demo-body">
        <JsonView data={demoData} {style} shouldExpandNode={allExpanded} {compactTopLevel} />
    </div>
</div>
```
