An object editor for Dart. Also known as an 'object inspector' or a 'property grid'.

Build Status

object editor

Status (Dart SDK r27487)

The examples work in Dartium.

The examples fail compilation with dart2js due to issue 12287.

Issues that you can star to improve this project are:

  • issue 6433: InstanceMirror get reflectedType;
  • issue 11186: Add typedef bool Predicate<E>(E element) to dart:core
  • ~~issue 11345: Generic type parameter as literal in the VM.~~ FIXED in r24861

  • ~~issue 11550: Metadata call to constant constructor regression in dart2js.~~ FIXED in r24595

  • issue 12022: dart2js: VariableMirror.type always returns dynamic
  • issue 12287: dart2js: type parameter as literal in constant expression
  • ~~issue 12319: vm: getting the members of a ClassMirror on 'Null' crash~~ FIXED in r25982


Please consult the API documentation.


Create an ObjectEditor

import 'dart:html';
import 'package:fields/fields.dart';

main() {  
  var editor = new ObjectEditor();
  // Append the editor's element to your document where and when you like.

Select an Object

// Select any dart object instance for edition.
editor.selected = new KitchenSink();

Annotate Fields

By default, we do our best to provide a standard editor for each of your object's fields based on its Type. However, sometimes you want to tell us more about your fields and you may do this by applying annotations:

import 'package:fields/fields.dart';

// Annotate your model objects to constrain the editor for any field.
class Sunflower {
  String color = "#ff8000";
  @UseRange(min: 0, max: 1000)  
  int seeds = 500;
  @UseRange(min: 1, max:3) 
  int seedRadius = 2;





Fields uses the MIT license as described in the LICENSE file, and follows semantic versioning.

The default icons were created by and are released under the Creative Commons Attribution 3.0 Unported.