Installation

Requirements

Flutter 3.35 or later
Dart 3.9 or later
The Vyuh Property System package (included as a transitive dependency)

Authenticate with pub.vyuh.tech first

`vyuh_dashboard_editor` is hosted on the private pub.vyuh.tech registry. Before running pub get, register a Bearer token issued by Vyuh Technologies based on your plan.

Run the one-time setup:

dart pub token add https://pub.vyuh.tech

Don't have a token yet? Email ask@vyuh.tech to request one. For full details (CI, Docker, rotation, troubleshooting), see the Pub Token Setup guide.

Add Dependencies

Add vyuh_dashboard_editor to your pubspec.yaml as a hosted dependency:

Then resolve dependencies:

Setup

Consumers do not need to run build_runner just to use the editor. The package ships its generated model serializers, and the current stores use hand-written MobX observables.

Dependencies

The Dashboard Editor depends on the following packages, which are pulled in automatically:

Package	Purpose
`vyuh_property_system`	Type-safe property collections for component configuration
`vyuh_core`	Core framework types (TypeDescriptor, plugin infrastructure)
`vyuh_extension_content`	Vyuh content extension integration
`vyuh_feature_forms`	Form/property editor integration used by config surfaces
`mobx` / `flutter_mobx`	Reactive state management for engine and stores
`vyuh_cdx_ui`	Shared dialog and editor chrome primitives
`vyuh_feature_editor_history`	Editor history descriptor integration
`fl_chart`	Chart rendering for the built-in pie, donut, bar, line, area, sparkline, gauge, grouped bar, multi-line, and stacked bar renderers
`nanoid`	Unique ID generation for rows, columns, and components
`json_annotation`	JSON serialization for layout models
`http`	HTTP client for API data sources
`fluentui_system_icons`	Icon set used by editor controls
`flutter_code_editor` / `flutter_highlight` / `highlight`	JSON/code editing panels
`google_fonts`	Typography support in code/editor surfaces

Verify the Setup

Import the package and confirm it resolves:

dart

import 'package:vyuh_dashboard_editor/vyuh_dashboard_editor.dart';

void main() {
  // Create an empty layout to verify the import works
  final layout = DashboardLayout.empty();
  print('Dashboard Editor installed: ${layout.version}');
}

Project Layout

Once installed, your project will interact with these key entry points:

vyuh_dashboard_editor/
  lib/
    models/           # DashboardLayout, Row, Column, ComponentInstance
    engine/           # DashboardEngine, events, extensions
    commands/         # 20 reversible commands
    component_system/ # ComponentDescriptor, Registry, Descriptor
    renderers/        # 10 chart renderers
    data_sources/     # ChartDataSource, ApiChartDataSource
    editor/           # DashboardEditor widget, Controller
    extensions/       # History, Persistence, Selection, Analytics
    stores/           # DashboardDataStore (MobX)
    actions/          # Serializable dashboard actions and action editors

Installation ​

Next Steps ​

Next Steps