         @scroll_into_view()
 
     componentWillMount: ->
-        #if next.library != @props.library
+        meta = @props.library.getIn(['examples'])?.metadata
         docs = @props.library.getIn(['examples'])?.documents
+
         if docs?
-            sdocs = sortBy('title')(docs)
+            sortfn = (doc) -> [meta.categories[doc.category], doc.title?.toLowerCase() ? doc.id]
+            sdocs  = _.sortBy(docs, sortfn)
             @setState
                 copy        : false
                 sorted_docs : sdocs
-                metadata    : @props.library.getIn(['examples'])?.metadata
+                metadata    : meta
 
     target_path: ->
         doc = @state.selected

            border       : 'none'
            textAlign    : 'left'

        include = true
        if tag[0] == '-'
            include = false
            tag = tag[1...]
        else if tag[0] == '+'
            tag = tag[1...]

        @state.sorted_docs.map (doc) =>
            tags = doc.tags ? []
            if (include and (tag in tags)) or ((not include) and not (tag in tags))
                list.push(
                    <ListGroupItem
                        key         = {doc.id}
                        active      = {doc.id == @state.selected?.id}
                        onClick     = {=> @setState(selected:doc, show_thumb:false)}
                        style       = {item_style}
                        bsSize      = {'small'}
                    >
                        {doc.title ? doc.id}
                    </ListGroupItem>
                )

    selector: ->
        list_style =

            overflow   : 'auto'

        <div style={style}>
            <h5 style={marginTop: '0px'}>
                <strong>{doc.title ? doc.id}</strong>
                {" by #{doc.author}" if doc.author?}
            </h5>
