new file mode 100644
--- /dev/null
+++ b/roster.js
@@ -0,0 +1,81 @@
+'use strict';
+
+function initRoster(connection) {
+    const roster_table = document.getElementById('roster-table');
+
+    const iq = $iq({type: 'get'})
+        .c('query', {xmlns: NS.roster});
+    connection.sendIQ(iq, onRoster, onRosterError.bind(null, 'roster query failed.'));
+
+    function onRoster(result_iq)
+    {
+        const items = parseXPath(result_iq, './roster:query/roster:item', XPathResult.ORDERED_NODE_ITERATOR_TYPE);
+        while (true) {
+            const item = items.iterateNext();
+            if (!item)
+                break;
+            const jid = item.getAttributeNS(null, 'jid');
+            const subscription = item.getAttributeNS(null, 'subscription');
+            const name = item.getAttributeNS(null, 'name');
+            const groups = item.children;
+            const tr = document.createElementNS('http://www.w3.org/1999/xhtml', 'tr');
+            let td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
+            const a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
+            a.setAttributeNS(null, 'href', 'xmpp:' + jid);
+            a.textContent = jid;
+            td.appendChild(a);
+            tr.appendChild(td);
+            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
+            const input = document.createElementNS('http://www.w3.org/1999/xhtml', 'input');
+            input.value = name;
+            input.onblur = function (evt) {
+                const iq = $iq({type: 'set'})
+                    .c('query', {xmlns: NS.roster})
+                        .c('item', {jid: jid, name: evt.target.value});
+                for (let group of groups)
+                    iq.c('group').t(group.textContent).up();
+                connection.sendIQ(iq, onRosterSet, onRosterSetError.bind(null, 'Roster set failed.'));
+            };
+            td.appendChild(input);
+            tr.appendChild(td);
+            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
+            td.textContent = subscription;
+            tr.appendChild(td);
+            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
+            for (let group of groups) {
+                const span = document.createElementNS('http://www.w3.org/1999/xhtml', 'span');
+                // TODO: use a tag system for the UI.
+                span.textContent = group.textContent;
+                td.appendChild(span);
+            }
+            tr.appendChild(td);
+            td = document.createElementNS('http://www.w3.org/1999/xhtml', 'td');
+            const button = document.createElementNS('http://www.w3.org/1999/xhtml', 'button');
+            button.textContent = 'Remove this contact';
+            button.onclick = function (evt) {
+                const iq = $iq({type: 'set'})
+                    .c('query', {xmlns: NS.roster})
+                        .c('item', {jid: jid, subscription: 'unsubscribe'});
+                connection.sendIQ(iq, onRosterSet.bind(node), onRosterSetError.bind(node, 'contact removal failed.'));
+            };
+            td.appendChild(button);
+            tr.appendChild(td);
+            roster_table.appendChild(tr);
+        }
+    }
+
+    function onRosterError(string)
+    {
+        console.log('Failed to retrieve your contact list: ' + string);
+    }
+
+    function onRosterSet(result_iq)
+    {
+        console.log(result_iq);
+    }
+
+    function onRosterSetError(string)
+    {
+        console.log('Failed to retrieve your contact list: ' + string);
+    }
+}