           @raw item
 
     html = $('<div/>').append(selectList).html()
-    exhtml = html.replace(/</g, '&lt;')
-
-    @div class: 'example-code', =>
-      @div class: 'example', =>
+
+    coffeeScript = """
+      class OverlaySelectListView extends SelectList
+        @viewClass: ->
+          "\#{super} overlay from-top"
+
+        initialize: (@listOfItems) ->
+          super
+          @setArray(@listOfItems)
+
+        attach: ->
+          super
+          @appendTo(rootView)
+          @miniEditor.focus()
+
+        itemForElement: (item) ->
+          $$ ->
+            @li =>
+              @raw item
+
+      view = new OverlaySelectListView([#{array}])
+      view.attach()
+    """
+
+    @div class: 'example', =>
+      @div class: 'example-rendered', =>
         @subview '__', selectList
-      @pre =>
-        @code =>
-          @raw exhtml
+      @div class: 'example-code show-example-space-pen', =>
+        @div class: 'btn-group btn-group-xs btn-toggle', =>
+          @button class: 'btn selected', 'data-display-class': 'show-example-space-pen', 'space-pen'
+          @button class: 'btn', 'data-display-class': 'show-example-html', 'html'
+        @colorizedCodeBlock 'example-space-pen', 'source.coffee', coffeeScript
+        @colorizedCodeBlock 'example-html', 'text.xml', beautifyHtml(html)
 
 
   @deserialize: (options={}) ->


    @subview '__', editorBlock

  @exampleOverlaySelectList: (array) ->
    selectList = new OverlaySelectListView array, (item) ->
      $$ ->

          <code>.from-top</code> will come down from the top of the UI, etc.
        '''
        @exampleCode '''
          @div class: 'overlay from-top', =>
            @div 'Some content'
        '''

        @h2 'With a select-list'
