JSON Canvas Viewer

pub package likes popularity pub points license

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

  1. Fork the repository
  2. Clone your fork: git clone https://github.com/yourusername/jsoncanvasviewer.git
  3. Create a branch: git checkout -b feature/my-feature
  4. Make your changes
  5. Run tests: flutter test
  6. Format code: dart format .
  7. Analyze: flutter analyze
  8. Commit: git commit -am 'Add new feature'
  9. Push: git push origin feature/my-feature
  10. 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

Made with πŸ’™ by Conty Team

Libraries

jsoncanvasviewer
A Flutter package for creating, editing and rendering interactive JSON-based canvas layouts.
main