Svelte Json Viewer

kaifronsdal

A performant JSON viewer component for Svelte 5 with collapsible blocks, string truncation, inline short containers, and theming support.

Download

Svelte JSON Viewer

A performant JSON viewer component for Svelte 5 with collapsible blocks, string truncation, inline short containers, and theming support.

Features

🎯 Collapsible Objects & Arrays: Click to expand/collapse nested structures
✂️ String Truncation: Long strings are automatically truncated with expandable ellipsis
📦 Inline Short Containers: Smart inline rendering for short objects and arrays
🎨 Theming Support: Light and dark themes with customizable CSS variables
🔍 Type-aware Rendering: Different colors for strings, numbers, booleans, null, etc.
📊 Metadata Display: Shows object key counts and array lengths
🎛️ Configurable: Customizable indentation, collapse behavior, and display options
⚡ Performance: Built with Svelte 5 reactivity and optimized for large JSON structures
🎪 Hover Effects: Visual feedback on hover
🗂️ Modular Architecture: Well-structured components for maintainability

Installation

npm install svelte-json-viewer

Basic Usage

<script>
  import { JsonViewer } from 'svelte-json-viewer';
  
  const data = {
    name: "John Doe",
    age: 30,
    hobbies: ["reading", "coding"],
    address: {
      city: "New York",
      zipCode: "10001"
    }
  };
</script>

<JsonViewer value={data} />

Props

Prop	Type	Default	Description
`value`	`JsonValue`	-	The JSON data to display
`theme`	`'light' \| 'dark'`	`'light'`	Theme for the viewer
`collapsed`	`boolean \| number`	`false`	Control collapse behavior. If boolean, applies to all levels. If number, collapses levels >= that number
`collapseStringsAfterLength`	`number`	`50`	Truncate strings longer than this length
`indentWidth`	`number`	`12`	Indentation width in pixels
`sortKeys`	`boolean`	`false`	Sort object keys alphabetically
`displayDataTypes`	`boolean`	`false`	Show data types next to values
`displayObjectSize`	`boolean`	`true`	Show object/array size metadata
`displayArrayKey`	`boolean`	`false`	Show array indices as keys
`inlineShortContainers`	`boolean \| number`	`false`	Render short containers inline. If boolean true, uses 40 char limit. If number, uses that as the character limit

Examples

Custom Theme and Collapse Behavior

<JsonViewer 
  value={data} 
  theme="dark"
  collapsed={2}
  collapseStringsAfterLength={30}
  sortKeys={true}
  displayDataTypes={true}
/>

Inline Short Containers

The inlineShortContainers feature renders short objects and arrays on a single line while preserving full expand/collapse functionality:

<script>
  const data = {
    coordinates: { lat: 40.7128, lng: -74.0060 },
    tags: ["javascript", "svelte", "json"],
    user: { name: "Alice", age: 25 },
    longArray: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] // won't be inlined
  };
</script>

<JsonViewer 
  value={data}
  inlineShortContainers={true}  // Uses 40 character limit
/>

<!-- Or with custom character limit -->
<JsonViewer 
  value={data}
  inlineShortContainers={60}  // Custom 60 character limit
/>

This will render short containers like:

{lat: 40.7128, lng: -74.0060} instead of multi-line format
["javascript", "svelte", "json"] instead of each item on separate lines
Maintains syntax highlighting with proper colors for strings, numbers, etc.
Containers can still be expanded to full view when clicked

Minimal Configuration

<JsonViewer 
  value={data} 
  displayObjectSize={false}
  indentWidth={8}
/>

Theming

The component supports extensive theming through CSS custom properties:

.my-json-viewer {
  --json-viewer-bg: #ffffff;
  --json-viewer-string-color: #d73a49;
  --json-viewer-number-color: #005cc5;
  --json-viewer-boolean-color: #d73a49;
  --json-viewer-null-color: #6f42c1;
  --json-viewer-property-color: #032f62;
  --json-viewer-brace-color: #24292e;
  --json-viewer-bracket-color: #24292e;
  --json-viewer-comma-color: #24292e;
  --json-viewer-colon-color: #24292e;
  --json-viewer-meta-color: #6a737d;
  --json-viewer-ellipsis-color: #6a737d;
  --json-viewer-hover-bg: #f6f8fa;
  --json-viewer-border-color: #e1e4e8;
  --json-viewer-indent-guide-color: #e1e4e8;
  --json-viewer-expand-icon-color: #586069;
  --json-viewer-expand-icon-hover-color: #0366d6;
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Run tests
npm run test

License

MIT

Top categories