🚀 JSON Viewer Component for Blazor

A powerful, feature-rich JSON viewer component for Blazor applications with VS Code-style syntax highlighting.

Demo | Documentation | Report Bug | Request Feature

---

✨ Features

• 🎨 VS Code-style syntax highlighting
• 🌓 Dark & Light theme support with persistence
• 🔍 Real-time search with match highlighting and navigation
• 📊 JSON statistics (size, depth, type distribution)
• 📝 Edit mode with auto-formatting and validation
• 📋 Copy & Export functionality
• ⌨️ Keyboard shortcuts (Enter, Shift+Enter for search navigation)
• 🔢 Line numbers with active line highlighting
• 🎯 Expand/Collapse individual or all nodes
• 📱 Fully responsive design for mobile, tablet, and desktop
• ⚡ High performance - handles large JSON files efficiently
• 🎭 Smooth animations and transitions

---

📦 Installation

Install via NuGet Package Manager:

dotnet add package JsonViewer.Blazor

Or via Package Manager Console:

Install-Package JsonViewer.Blazor

---

🚀 Quick Start

1️⃣ Add namespace to _Imports.razor:

@using JsonViewerComponent
@using JsonViewerComponent.Components

2️⃣ Use in your component:

@page "/json-demo"

<JsonViewer JsonData="@jsonString" IsEditable="true" />

@code {
private string jsonString = @"{
""name"": ""John Doe"",
""age"": 30,
""email"": ""[email protected]"",
""hobbies"": [""reading"", ""gaming"", ""coding""]
}";
}

---

📖 Usage Examples

Read-Only Mode

<JsonViewer JsonData="@jsonData" IsEditable="false" />

Editable Mode with Two-Way Binding

<JsonViewer @bind-JsonData="jsonData" IsEditable="true" />

@code {
private string jsonData = "{}";
}

Dynamic JSON Loading

<button @onclick="LoadSampleData">Load Sample</button>
<JsonViewer JsonData="@jsonData" IsEditable="true" />

@code {
private string jsonData = "";

private void LoadSampleData()
{
jsonData = @"{""userId"": 1, ""userName"": ""Alice""}";
}
}

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Enter	Navigate to next search match
Shift + Enter	Navigate to previous search match
Escape	Clear search (when search is active)

---

🎨 Theme Support

The component automatically saves your theme preference to localStorage:

@* Theme persists across page refreshes *@
<JsonViewer JsonData="@jsonData" IsEditable="true" />

---

📊 JSON Statistics

View detailed statistics about your JSON:

• Total Size (bytes)
• Total Properties
• Object Count
• Array Count
• Max Depth
• Average Array Length

Access statistics via the stats button in the sidebar.

---

🔍 Search Features

• Real-time highlighting of all matches
• Match counter showing current match / total matches
• Navigation buttons to jump between matches
• Keyboard support for quick navigation
• Case-insensitive search

---

🛠️ Configuration

Currently, the component works out-of-the-box with minimal configuration. Future versions will support:

• Custom themes
• Plugin system
• Additional export formats
• And more!

---

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please read our Contributing Guide for more details.

---

🐛 Bug Reports & Feature Requests

Found a bug or have an idea? Please open an issue:

• Report a Bug
• Request a Feature

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

💖 Support

If you find this project helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs or suggesting features
• 📢 Sharing with others
• ☕ Sponsoring the project

---

👨‍💻 Author

Parsa Panahpoor

• GitHub: @parsapanahpoor
• Website: Your Website

---

🌟 Acknowledgments

Special thanks to all contributors and the Blazor community!

---

Made with ❤️ by JsonViewer Component

---