Spectre Json
A beautiful and feature-rich JSON editor widget for Flutter with syntax highlighting, tree view navigation, real-time validation, and customizable themes. Perfect for configuration editors, API testing tools, and data management interfaces.
Links
Features
Customizable Themes
Beautiful built-in themes including dark mode, or create your own custom themes to match your app's design.
Tree View Navigation
Intuitive tree view with expandable/collapsible nodes for easy navigation through complex JSON structures.
Real-time Validation
Instant JSON validation with clear error indicators and helpful error messages.
Search & Filter
Powerful search functionality to quickly find specific keys or values in large JSON documents.
Mobile Optimized
Responsive design that works perfectly on mobile devices with touch-friendly interactions.
Highly Configurable
Extensive customization options including fonts, colors, behaviors, and interaction modes.
Getting Started
Installation
Add Spectre Json to your Flutter project:
dependencies:
spectre_json: ^1.0.0
Basic Usage
1import 'package:spectre_json/spectre_json.dart';
2
3class MyJsonEditor extends StatefulWidget {
4
5 _MyJsonEditorState createState() => _MyJsonEditorState();
6}
7
8class _MyJsonEditorState extends State<MyJsonEditor> {
9 String jsonString = '{"name": "John", "age": 30}';
10
11
12 Widget build(BuildContext context) {
13 return SpectreJsonEditor(
14 initialJson: jsonString,
15 onJsonChanged: (String json) {
16 setState(() {
17 jsonString = json;
18 });
19 },
20 theme: SpectreTheme.dark(),
21 );
22 }
23}
Use Cases
Configuration Editors
Perfect for apps that need to edit configuration files or settings in JSON format.
API Testing Tools
Build powerful API testing interfaces where users need to compose and validate JSON requests.
Data Management
Create interfaces for managing structured data with an intuitive and user-friendly editor.
Development Tools
Build developer tools, debugging interfaces, and data inspection utilities.