Package Exports

@kaifronsdal/svelte-json-viewer
@kaifronsdal/svelte-json-viewer/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@kaifronsdal/svelte-json-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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