diff --git a/examples/forms/editable_elements/css/example.css b/examples/forms/editable_elements/css/example.css
new file mode 100644
index 00000000..02fee088
--- /dev/null
+++ b/examples/forms/editable_elements/css/example.css
@@ -0,0 +1,11 @@
+#box {
+ width: 512px;
+ margin: 16px;
+}
+
+.label {
+ font-weight: bold;
+}
+div.label {
+ margin-top: 16px;
+}
\ No newline at end of file
diff --git a/examples/forms/editable_elements/index.html b/examples/forms/editable_elements/index.html
new file mode 100644
index 00000000..c58d8ab3
--- /dev/null
+++ b/examples/forms/editable_elements/index.html
@@ -0,0 +1,14 @@
+
+
+
+ Editable Elements
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/forms/editable_elements/js/example.js b/examples/forms/editable_elements/js/example.js
new file mode 100644
index 00000000..e61e9f56
--- /dev/null
+++ b/examples/forms/editable_elements/js/example.js
@@ -0,0 +1,36 @@
+/*
+This example shows elements that are editable inline — either a span or a
+div.
+*/
+'use strict';
+
+Ox.load('UI', function() {
+
+ var $box = Ox.Element()
+ .attr({id: 'box'})
+ .appendTo(Ox.$body);
+
+ Ox.loop(1, 4, function(i) {
+ Ox.$('')
+ .addClass('label')
+ .html((i > 1 ? ' ' : '') + 'Editable ' + i + ': ')
+ .appendTo($box);
+ Ox.EditableContent({
+ placeholder: 'Placeholder ' + i,
+ tooltip: 'Doubleclick to edit'
+ })
+ .appendTo($box);
+ });
+
+ Ox.$('')
+ .addClass('label')
+ .html('Editable 4:')
+ .appendTo($box);
+ Ox.EditableContent({
+ placeholder: 'Placeholder 4',
+ tooltip: 'Doubleclick to edit',
+ type: 'div'
+ })
+ .appendTo($box);
+
+});