diff --git a/examples/widgets/index.sky b/examples/widgets/index.sky
index f83dc19329..7d758ee561 100644
--- a/examples/widgets/index.sky
+++ b/examples/widgets/index.sky
@@ -1,88 +1,8 @@
 #!mojo mojo:sky_viewer
 <!--
-// Copyright 2014 The Chromium Authors. All rights reserved.
+// Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
-<sky>
-<import src="/sky/framework/sky-box.sky"/>
-<import src="/sky/framework/sky-button.sky"/>
-<import src="/sky/framework/sky-checkbox.sky"/>
-<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
-<import src="/sky/framework/sky-input.sky"/>
-<import src="/sky/framework/sky-radio.sky"/>
-<sky-element name="widget-root">
-<template>
-  <style>
-  div {
-    display: flex;
-    align-items: center;
-  }
-  sky-checkbox {
-    margin: 5px;
-  }
-  .output {
-    margin-left: 48px;
-  }
-  </style>
-
-  <sky-box title='Text'>
-    <sky-input id="text" value="{{ inputValue }}" />
-    <div>value = {{ inputValue }}</div>
-  </sky-box>
-
-  <sky-box title='Buttons'>
-    <sky-button id='button' on-click='handleClick'>Button</sky-button>
-    <div>highlight: {{ myButton.highlight }}</div>
-    <div>clickCount: {{ clickCount }}</div>
-  </sky-box>
-
-  <sky-box title='Checkboxes'>
-    <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
-    <div class="output">highlight: {{ myCheckbox.highlight }}</div>
-    <div class="output">checked: {{ myCheckbox.checked }}</div>
-    <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
-    <div class="output">checked: {{ checked }}</div>
-  </sky-box>
-
-  <sky-box title='Radios'>
-    <sky-box title='Group One'>
-      <div><sky-radio group='foo'/>one</div>
-      <div><sky-radio group='foo' selected='true' />two</div>
-      <div><sky-radio group='foo'/>three</div>
-    </sky-box>
-    <sky-box title='Group Two'>
-      <div><sky-radio group='bar'/>A</div>
-      <div><sky-radio group='bar'/>B</div>
-      <div><sky-radio group='bar' selected='true' />C</div>
-    </sky-box>
-  </sky-box>
-
-</template>
-<script>
-module.exports = class extends SkyElement {
-  created() {
-    this.myButton = null;
-    this.myCheckbox = null;
-    this.myText = null;
-    this.clickCount = 0;
-    this.inputValue = "Ready";
-    this.checked = false;
-  }
-  attached() {
-    this.myButton = this.shadowRoot.getElementById('button');
-    this.myCheckbox = this.shadowRoot.getElementById('checkbox');
-    this.myText = this.shadowRoot.getElementById('text');
-    this.clickCount = 0;
-  }
-  handleClick(event) {
-    this.clickCount++;
-    this.checked = !this.checked;
-    this.inputValue = "Moar clicking " + this.clickCount;
-  }
-}.register();
-</script>
-</sky-element>
-
+<import src="widget-root.sky"/>
 <widget-root />
-</sky>
diff --git a/examples/widgets/widget-root.sky b/examples/widgets/widget-root.sky
new file mode 100644
index 0000000000..17975d9f1d
--- /dev/null
+++ b/examples/widgets/widget-root.sky
@@ -0,0 +1,93 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="/sky/framework/sky-box.sky" />
+<import src="/sky/framework/sky-button.sky" />
+<import src="/sky/framework/sky-checkbox.sky" />
+<import src="/sky/framework/sky-element.sky" />
+<import src="/sky/framework/sky-input.sky" />
+<import src="/sky/framework/sky-radio.sky" />
+<import src="/sky/framework/sky-scrollable.sky" />
+<sky-element>
+<template>
+  <style>
+  div {
+    display: flex;
+    align-items: center;
+  }
+  sky-checkbox {
+    margin: 5px;
+  }
+  .output {
+    margin-left: 48px;
+  }
+  sky-scrollable {
+    height: -webkit-fill-available;
+  }
+  </style>
+  <sky-scrollable>
+    <sky-box title='Text'>
+      <sky-input id="text" value="{{ inputValue }}" />
+      <div>value = {{ inputValue }}</div>
+    </sky-box>
+  
+    <sky-box title='Buttons'>
+      <sky-button id='button'>Button</sky-button>
+      <div>highlight: {{ myButton.highlight }}</div>
+      <div>clickCount: {{ clickCount }}</div>
+    </sky-box>
+  
+    <sky-box title='Checkboxes'>
+      <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
+      <div class="output">highlight: {{ myCheckbox.highlight }}</div>
+      <div class="output">checked: {{ myCheckbox.checked }}</div>
+      <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
+      <div class="output">checked: {{ checked }}</div>
+    </sky-box>
+  
+    <sky-box title='Radios'>
+      <sky-box title='Group One'>
+        <div><sky-radio group='foo'/>one</div>
+        <div><sky-radio group='foo' selected='true' />two</div>
+        <div><sky-radio group='foo'/>three</div>
+      </sky-box>
+      <sky-box title='Group Two'>
+        <div><sky-radio group='bar'/>A</div>
+        <div><sky-radio group='bar'/>B</div>
+        <div><sky-radio group='bar' selected='true' />C</div>
+      </sky-box>
+    </sky-box>
+  </sky-scrollable>
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('widget-root')
+class WidgetRoot extends SkyElement {
+  Element _button;
+  Element _checkbox;
+  Element _text;
+  int _clickCount = 0;
+  String _inputValue = "Ready";
+  bool _checked = false;
+
+  void shadowRootReady() {
+    _button = this.shadowRoot.getElementById('button');
+    _checkbox = this.shadowRoot.getElementById('checkbox');
+    _text = this.shadowRoot.getElementById('text');
+
+    _button.addEventListener('click', _handleClick);
+  }
+
+  void _handleClick(_) {
+    _clickCount++;
+    _checked = !_checked;
+    _inputValue = "Moar clicking ${_clickCount}";
+  }
+}
+
+_init(script) => register(script, WidgetRoot);
+</script>
+</sky-element>