# preview-json

> Render and preview JSON files in browser with syntax highlighting, collapsible tree view, and search

- Author: Vitalii Elenhaupt
- Repository: veelenga/preview-skills
- Version: 20260126103309
- Stars: 3
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/veelenga/preview-skills
- Web: https://mule.run/skillshub/@@veelenga/preview-skills~preview-json:20260126103309

---

---
name: preview-json
description: Render and preview JSON files in browser with syntax highlighting, collapsible tree view, and search
user-invocable: true
commands:
  - preview
  - preview-json
---

# Preview JSON Skill

Interactive JSON viewer that generates HTML visualizations with syntax highlighting, collapsible tree structure, and search functionality.

## Usage

```bash
# Preview a JSON file
/preview data.json

# Pipe JSON data (preferred for temporary content)
cat data.json | /preview
echo '{"name":"test","value":123}' | /preview

# With custom background color
/preview data.json --background "#1e1e1e"
```

**Best Practice:** For temporary or generated content, prefer piping over creating temporary files. This avoids cluttering your filesystem and the content is automatically cleaned up.

## Features

- **Syntax highlighting** with color-coded types:
  - Strings (green)
  - Numbers (blue)
  - Booleans (orange)
  - Null values (red)
  - Keys (purple)
- **Collapsible tree view** for nested structures
- **Search** through keys and values in real-time
- **Copy values** to clipboard with one click
- **Pretty formatted** with proper indentation
- **Type indicators** for each value
- **Line numbers** for easy reference
- **Responsive design** adapts to screen size

## When to Use This Skill

Use this skill when the user wants to:

- View and explore JSON data files
- Inspect API responses
- Debug JSON structures
- Verify JSON formatting
- Share formatted JSON data

## Examples

**Natural language requests:**

- "preview this JSON file"
- "show me the API response"
- "open the config.json"
- "visualize this JSON"
- "let me see what's in package.json"

## Technical Details

### File Requirements

- File extension: `.json`
- Maximum size: 10MB (configurable)
- Encoding: UTF-8
- Valid JSON format (validated with `jq` if available)

### Features in Detail

#### Syntax Highlighting

- Automatic color coding based on data type
- Clear visual distinction between keys and values
- Proper formatting for readability

#### Collapsible Tree View

- Click arrows to expand/collapse objects and arrays
- Collapse all / expand all buttons
- Memory of collapsed state during session
- Visual nesting indicators

#### Search Functionality

- Live search as you type
- Case-insensitive matching
- Searches both keys and values
- Highlights matching results

#### Copy to Clipboard

- Click any value to copy
- Automatic formatting for strings
- Visual feedback on copy

### Browser Compatibility

- Modern browsers (Chrome, Firefox, Safari, Edge)
- Requires JavaScript enabled
- No external dependencies (all assets bundled)

## Output

The skill generates a standalone HTML file at:

```
/tmp/preview-skills/preview-json-{filename}.html
```

The file is self-contained and can be:

- Opened directly in any browser
- Shared with others (no dependencies)
- Archived for later viewing

## Troubleshooting

### JSON doesn't display correctly

- Ensure file is valid JSON format
- Check for trailing commas (invalid in JSON)
- Verify UTF-8 encoding
- Run through a JSON validator

### Invalid JSON error

- Check syntax: missing brackets, quotes, or commas
- Ensure proper escaping of special characters
- Use `jq` to validate: `cat file.json | jq .`

### File too large

- Files over 10MB may fail to load
- Consider splitting large JSON files
- Use JSON streaming for very large files

### Search not working

- Ensure JavaScript is enabled
- Check browser console for errors
- Try refreshing the page

## Development

This skill is standalone and includes all dependencies:

- Shared libraries bundled in `lib/`
- Templates bundled in `templates/`
- No external CDN requirements

To modify the skill:

1. Edit `config.sh` for configuration
2. Edit `templates/scripts/json-renderer.js` for behavior
3. Edit `templates/styles/json.css` for styling
4. Run `run.sh` to test changes