diff --git a/demos/list/index.html b/demos/list/index.html
new file mode 100644
index 00000000..82e653e1
--- /dev/null
+++ b/demos/list/index.html
@@ -0,0 +1,13 @@
+
+
+
+ ox.js list demo
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demos/list/js/list.js b/demos/list/js/list.js
new file mode 100644
index 00000000..eeafcb32
--- /dev/null
+++ b/demos/list/js/list.js
@@ -0,0 +1,63 @@
+$(function() {
+
+ Ox.theme('modern');
+
+ var $treeList = new Ox.TreeList({
+ items: [
+ {id: 'D', title: 'D', items: [
+ {id: 'debord', title: 'Guy Debord', items: [
+ {id: 'in_girum', title: 'In girum imus nocte et consumimur igni'}
+ ]}
+ ]},
+ {id: 'G', title: 'G', expanded: true, items: [
+ {id: 'godard', title: 'Jean-Luc Godard', expanded: true, items: [
+ {id: 'allemagne_90', title: 'Allemagne 90 neuf zero'},
+ {id: 'film_socialisme', title: 'Film socialisme'}
+ ]},
+ {id: 'grandrieux', title: 'Philippe Grandrieux', items: [
+ {id: 'sombre', title: 'Sombre'}
+ ]}
+ ]},
+ {id: 'H', title: 'H', items: [
+ {id: 'haynes', title: 'Todd Haynes', items: [
+ {id: 'far_from_heaven', title: 'Far From Heaven'},
+ {id: 'i_m_not_there', title: 'I\'m Not There'}
+ ]}
+ ]},
+ {id: 'L', title: 'L', items: [
+ {id: 'lynch', title: 'David Lynch', items: [
+ {id: 'inland_empire', title: 'Inland Empire'}
+ ]}
+ ]},
+ {id: 'S', title: 'S', items: [
+ {id: 'scorsese', title: 'Martin Scorsese', items: [
+ {id: 'casino', title: 'Casino'}
+ ]}
+ ]}
+ ]
+ }),
+ $debug = new Ox.Element('div'),
+ $button = new Ox.Button({
+ title: 'Debug'
+ })
+ .bindEvent({
+ click: function() {
+ $text.html(JSON.stringify($treeList.$element.options('items')))
+ }
+ })
+ .appendTo($debug),
+ $text = new Ox.Element('div').appendTo($debug),
+ $splitPanel = new Ox.SplitPanel({
+ elements: [
+ {
+ element: $treeList,
+ size: 256
+ },
+ {
+ element: $debug
+ }
+ ],
+ orientation: 'horizontal'
+ }).appendTo($('body'));
+
+});
\ No newline at end of file