JSON Canvas Viewer #

A powerful Flutter package for creating, editing, and rendering interactive JSON-based canvas layouts with drag-and-drop support, real-time editing, and comprehensive element types.

JSON Canvas Viewer Demo

Made with 💙 by Conty Team

Features #

✨ Interactive Canvas - Drag, drop, and resize elements in real-time
🎨 Rich Element Types - Text, images, shapes, icons, gradients, and more
📝 Full Editor - Built-in JSON editor with syntax highlighting and validation
🔄 Real-time Sync - Bidirectional synchronization between JSON and visual representation
🎭 Google Fonts - Dynamic loading of any Google Font
🖼️ Image Filters - Built-in filters (Paris, Vintage, Classic) and blur effects
📐 Smart Scaling - Automatic canvas scaling based on design dimensions
⚡ High Performance - Optimized rendering and debounced updates
🌐 Cross-platform - Works on Web, iOS, and Android
🎯 Type-safe - Written in Dart with comprehensive type safety

Getting Started #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  jsoncanvasviewer: ^0.1.0

Then run:

flutter pub get

Basic Usage #

Simple Canvas Viewer

Render a canvas from JSON:

import 'package:flutter/material.dart';
import 'package:jsoncanvasviewer/jsoncanvasviewer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: JsonCanvasViewer(
            jsonString: '''
            {
              "canvas": {
                "width": 360,
                "height": 640,
                "backgroundColor": "#F8F9FA"
              },
              "elements": [
                {
                  "type": "text",
                  "content": "Hello World!",
                  "x": "center",
                  "y": 100,
                  "fontSize": 32,
                  "fontFamily": "Roboto",
                  "weight": "bold",
                  "color": "#2D3748"
                }
              ]
            }
            ''',
          ),
        ),
      ),
    );
  }
}

Full Editor Application

Use the complete editor with JSON editing:

import 'package:flutter/material.dart';
import 'package:jsoncanvasviewer/jsoncanvasviewer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSON Canvas Editor',
      theme: ThemeData.dark(),
      home: HomePage(), // Complete editor interface
    );
  }
}

Interactive Canvas with Callbacks

Handle element interactions:

JsonCanvasViewer(
  jsonString: myJsonString,
  width: 400,
  height: 600,
  onElementMoved: (index, x, y, {width, height}) {
    print('Element $index moved to ($x, $y)');
    if (width != null && height != null) {
      print('New size: ${width}x$height');
    }
  },
)

Element Types #

JSON Canvas Viewer supports a rich set of element types:

Text #

Rich text with Google Fonts, styling, and alignment:

{
  "type": "text",
  "content": "Hello World",
  "x": "center",
  "y": 100,
  "fontSize": 24,
  "fontFamily": "Roboto",
  "weight": "bold",
  "color": "#000000",
  "textAlign": "center",
  "lineHeight": 1.5,
  "letterSpacing": 2.0
}

Rectangle #

Rectangles with gradients, borders, and rounded corners:

{
  "type": "rect",
  "x": 50,
  "y": 50,
  "width": 200,
  "height": 150,
  "color": "#FF0000",
  "borderRadius": 20,
  "borderWidth": 2,
  "borderColor": "#000000"
}

Image #

Images with filters, blur, and various fit modes:

{
  "type": "image",
  "src": "https://example.com/image.jpg",
  "x": 0,
  "y": 0,
  "width": 300,
  "height": 200,
  "fit": "cover",
  "filter": "vintage",
  "blur": 5
}

Circle #

Circles with customizable appearance:

{
  "type": "circle",
  "x": 100,
  "y": 100,
  "width": 50,
  "height": 50,
  "color": "#00FF00",
  "borderWidth": 2,
  "borderColor": "#000000"
}

Icon #

Material Design icons:

{
  "type": "icon",
  "name": "star",
  "x": 100,
  "y": 100,
  "size": 32,
  "color": "#FFD700"
}

Gradient #

Linear and radial gradients:

{
  "type": "gradient",
  "gradientType": "linear",
  "x": 0,
  "y": 0,
  "width": 360,
  "height": 640,
  "startX": 0.0,
  "startY": 0.0,
  "endX": 1.0,
  "endY": 1.0,
  "colorStops": [
    {"color": "#FF0000", "stop": 0.0, "opacity": 1.0},
    {"color": "#0000FF", "stop": 1.0, "opacity": 1.0}
  ]
}

Line #

Lines with customizable thickness:

{
  "type": "line",
  "x": 50,
  "y": 100,
  "width": 300,
  "thickness": 2,
  "color": "#000000"
}

Advanced Features #

Positioning #

Multiple positioning modes:

// Absolute positioning
{"x": 100, "y": 200}

// Centered
{"x": "center", "y": "center"}

// Flags
{"x": 50, "y": 50, "centerX": true, "centerY": false}

Transformations #

Rotation and opacity:

{
  "type": "rect",
  "rotation": 45,
  "opacity": 0.8
}

Z-Index Layering #

Control element stacking:

{
  "type": "rect",
  "zIndex": 1  // Higher values appear in front
}

Google Fonts Integration #

Use any Google Font:

{
  "type": "text",
  "fontFamily": "Pacifico",
  "weight": "regular"
}

Image Filters #

Built-in filters:

paris: Smooth, warm filter
vintage: Sepia-toned retro look
classic: Black and white

{
  "type": "image",
  "filter": "vintage"
}

Platform Support #

Platform	Supported	Tested
Web	✅	✅ Chrome, Edge
Android	✅	⚠️ Basic testing
iOS	✅	⚠️ Basic testing
Windows	⚠️	❌ Untested
macOS	⚠️	❌ Untested
Linux	⚠️	❌ Untested

Examples #

Check out the example/ directory for complete working examples:

Basic canvas viewer
Full editor application
Custom interactions
Multiple element types

To run the example:

cd example
flutter run -d chrome

Documentation #

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Setup #

Fork the repository
Clone your fork: git clone https://github.com/yourusername/jsoncanvasviewer.git
Create a branch: git checkout -b feature/my-feature
Make your changes
Run tests: flutter test
Format code: dart format .
Analyze: flutter analyze
Commit: git commit -am 'Add new feature'
Push: git push origin feature/my-feature
Create a Pull Request

Roadmap #

❌ Undo/Redo support
❌ Multi-select elements
❌ Snapping and alignment guides
❌ Export to image (PNG, JPG)
❌ Custom element types via plugins
❌ Animation support
❌ Collaborative editing
❌ Template library

License #

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

Support #

Acknowledgments #

Built with Flutter
Syntax highlighting by highlight.dart
Code editor by flutter_code_editor
Fonts by Google Fonts