diff --git a/public/docs/_examples/user-input/dart/lib/app-component.html b/public/docs/_examples/user-input/dart/lib/app-component.html
new file mode 100644
index 0000000000..ecda463827
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/app-component.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+Give me some keys!
+
+
+keyup loop-back component
+
+
+
+Give me some more keys!
+
+
+Type away! Press [enter] when done.
+
+
+Type away! Press [enter] or click elsewhere when done.
+
+
+Little Tour of Heroes
+Add a new hero
+
diff --git a/public/docs/_examples/user-input/dart/lib/app_component.dart b/public/docs/_examples/user-input/dart/lib/app_component.dart
new file mode 100644
index 0000000000..5aacf15756
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/app_component.dart
@@ -0,0 +1,24 @@
+// #docregion
+library user_input.app_component;
+
+import 'package:angular2/angular2.dart';
+import 'package:user_input/click_me_component.dart';
+import 'package:user_input/click_me_component_2.dart';
+import 'package:user_input/loop_back_component.dart';
+import 'package:user_input/key_up_components.dart';
+import 'package:user_input/little_tour_component.dart';
+
+@Component(
+ selector: 'my-app',
+ templateUrl: 'app-component.html',
+ directives: const [
+ ClickMeComponent,
+ ClickMeComponent2,
+ KeyUpComponentV1,
+ KeyUpComponentV2,
+ KeyUpComponentV3,
+ KeyUpComponentV4,
+ LoopBackComponent,
+ LittleTourComponent
+ ])
+class AppComponent {}
diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component.dart b/public/docs/_examples/user-input/dart/lib/click_me_component.dart
new file mode 100644
index 0000000000..1c11cca4bf
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/click_me_component.dart
@@ -0,0 +1,18 @@
+// #docregion
+library user_input.click_me_component;
+
+import 'package:angular2/angular2.dart';
+
+// #docregion click-me-component
+@Component(
+ selector: 'click-me',
+ template: '''
+ {{clickMessage}}''')
+class ClickMeComponent {
+ String clickMessage = '';
+
+ onClickMe() {
+ clickMessage = 'You are my hero!';
+ }
+}
+// #enddocregion click-me-component
diff --git a/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
new file mode 100644
index 0000000000..7b1a66418e
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/click_me_component_2.dart
@@ -0,0 +1,19 @@
+// #docregion
+library user_input.click_me_component_2;
+
+import 'package:angular2/angular2.dart';
+
+@Component(
+ selector: 'click-me2',
+ template: '''
+ {{clickMessage}}''')
+class ClickMeComponent2 {
+ String clickMessage = '';
+ int clicks = 1;
+
+ onClickMe2(dynamic event) {
+ var evtMsg =
+ event != null ? ' Event target is ' + event.target.tagName : '';
+ clickMessage = ('Click #${clicks++}. ${evtMsg}');
+ }
+}
diff --git a/public/docs/_examples/user-input/dart/lib/key_up_components.dart b/public/docs/_examples/user-input/dart/lib/key_up_components.dart
new file mode 100644
index 0000000000..3af1f77958
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/key_up_components.dart
@@ -0,0 +1,85 @@
+// #docplaster
+// #docregion
+library user_input.key_up_components;
+
+import 'dart:html';
+
+import 'package:angular2/angular2.dart';
+
+// #docregion key-up-component-1
+@Component(
+ selector: 'key-up1',
+// #docregion key-up-component-1-template
+ template: '''
+
+ {{values}}
+ '''
+// #enddocregion key-up-component-1-template
+ )
+// #docregion key-up-component-1-class, key-up-component-1-class-no-type
+class KeyUpComponentV1 {
+ String values = '';
+
+ // #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
+ /*
+ // #docregion key-up-component-1-class-no-type
+ onKey(dynamic event) {
+ values += event.target.value + ' | ';
+ }
+ // #enddocregion key-up-component-1-class-no-type
+ */
+ // #docregion key-up-component-1-class
+ onKey(KeyboardEvent event) {
+ InputElement el = event.target;
+ values += '${el.value} | ';
+ }
+// #docregion key-up-component-1-class-no-type
+}
+// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-2
+@Component(
+ selector: 'key-up2',
+ template: '''
+
+ {{values}}
+ ''')
+class KeyUpComponentV2 {
+ String values = '';
+ onKey(value) {
+ values += '$value | ';
+ }
+}
+// #enddocregion key-up-component-2
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-3
+@Component(
+ selector: 'key-up3',
+ template: '''
+
+ {{values}}
+ ''')
+class KeyUpComponentV3 {
+ String values = '';
+}
+// #enddocregion key-up-component-3
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-4
+@Component(
+ selector: 'key-up4',
+ template: '''
+
+ {{values}}
+ ''')
+class KeyUpComponentV4 {
+ String values = '';
+}
+// #enddocregion key-up-component-4
diff --git a/public/docs/_examples/user-input/dart/lib/little_tour_component.dart b/public/docs/_examples/user-input/dart/lib/little_tour_component.dart
new file mode 100644
index 0000000000..3cbc36c4a6
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/little_tour_component.dart
@@ -0,0 +1,29 @@
+// #docregion
+library user_input.little_tour_component;
+
+import 'dart:html';
+
+import 'package:angular2/angular2.dart';
+
+// #docregion little-tour
+@Component(
+ selector: 'little-tour',
+ template: '''
+
+
+
+
+
+ ''')
+class LittleTourComponent {
+ List heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+
+ void addHero(String newHero) {
+ if (newHero?.length > 0) {
+ heroes.add(newHero);
+ }
+ }
+}
+// #enddocregion little-tour
diff --git a/public/docs/_examples/user-input/dart/lib/loop_back_component.dart b/public/docs/_examples/user-input/dart/lib/loop_back_component.dart
new file mode 100644
index 0000000000..a65a135255
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/lib/loop_back_component.dart
@@ -0,0 +1,14 @@
+// #docregion
+library user_input.loop_back_component;
+
+import 'package:angular2/angular2.dart';
+
+// #docregion loop-back-component
+@Component(
+ selector: 'loop-back',
+ template: '''
+
+ {{box.value}}
+ ''')
+class LoopBackComponent {}
+// #enddocregion loop-back-component
diff --git a/public/docs/_examples/user-input/dart/pubspec.yaml b/public/docs/_examples/user-input/dart/pubspec.yaml
new file mode 100644
index 0000000000..7789ff50be
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/pubspec.yaml
@@ -0,0 +1,10 @@
+name: user_input
+description: User Input
+version: 0.0.1
+dependencies:
+ angular2: 2.0.0-beta.0
+ browser: ^0.10.0
+transformers:
+- angular2:
+ platform_directives: 'package:angular2/src/common/directives.dart#CORE_DIRECTIVES'
+ entry_points: web/main.dart
diff --git a/public/docs/_examples/user-input/dart/web/index.html b/public/docs/_examples/user-input/dart/web/index.html
new file mode 100644
index 0000000000..760bf63340
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/web/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ User Input
+
+
+
+
+ Loading...
+
+
diff --git a/public/docs/_examples/user-input/dart/web/main.dart b/public/docs/_examples/user-input/dart/web/main.dart
new file mode 100644
index 0000000000..f74bf40a09
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/web/main.dart
@@ -0,0 +1,7 @@
+// #docregion
+import 'package:angular2/bootstrap.dart';
+import 'package:user_input/app_component.dart';
+
+main() {
+ bootstrap(AppComponent);
+}
diff --git a/public/docs/_examples/user-input/dart/web/style.css b/public/docs/_examples/user-input/dart/web/style.css
new file mode 100644
index 0000000000..cab2e32d5e
--- /dev/null
+++ b/public/docs/_examples/user-input/dart/web/style.css
@@ -0,0 +1,10 @@
+/* #docregion */
+fieldset {border-style:none}
+img {height: 100px;}
+.box {border: 1px solid black; padding:3px}
+.child-div {margin-left: 1em; font-weight: normal}
+.hidden {display: none}
+.parent-div {margin-top: 1em; font-weight: bold}
+.special {font-weight:bold;}
+.toe {margin-left: 1em; font-style: italic;}
+little-hero {color:blue; font-size: smaller; background-color: Turquoise }