diff --git a/.gitignore b/.gitignore
index eb802e8b91..5ec560fae9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,5 @@
 /build/ol-all.js
 /build/proj4js-combined.js
 /build/require-all.js
-/demos/*/advanced-optimizations.*
-/demos/*/build.html
-/demos/*/index.html
+/demos/*.json
+/demos/*.combined.js
diff --git a/Makefile b/Makefile
index bac9f7ff84..05114f8fa8 100644
--- a/Makefile
+++ b/Makefile
@@ -4,6 +4,7 @@ PLOVR_JAR = bin/plovr-b254c26318c5.jar
 SPEC = $(shell find test/spec -name \*.js)
 SRC = $(shell find exports externs src/ol -name \*.js)
 TARGETS = $(shell find demos -name advanced-optimizations.js)
+EXAMPLES = $(shell find demos -maxdepth 1 -name \*.html)
 comma := ,
 empty :=
 space := $(empty) $(empty)
@@ -32,77 +33,19 @@ build/require-all.js: $(SRC)
 	( echo "goog.require('goog.dom');" ; find src/ol -name \*.js | xargs grep -rh ^goog.provide | sort | uniq | sed -e 's/provide/require/g' ) >$@
 
 .PHONY: demos
-demos: demos/full-screen demos/proj4js demos/side-by-side demos/two-layers
+demos: $(subst .html,.json,$(EXAMPLES))
 
-.PHONY: demos/proj4js
-demos/proj4js: \
-	demos/proj4js/build.html \
-	demos/proj4js/index.html
+demos/%.json: base.json
+	@echo "{\"id\": \"$(basename $(notdir $@))\", \"inherits\": \"../base.json\", \"inputs\": \"$(subst .json,.js,$@)\"}" > $@
 
-demos/proj4js/build.html: demos/proj4js/template.html.in
-	sed -e 's|@SRC@|../../build/ol.js|' $< >$@
-
-demos/proj4js/index.html: demos/proj4js/template.html.in
-	sed -e 's|@SRC@|http://localhost:9810/compile?id=ol|' $< >$@
-
-.PHONY: demos/full-screen
-demos/full-screen: \
-	demos/full-screen/advanced-optimizations.html \
-	demos/full-screen/advanced-optimizations.js \
-	demos/full-screen/index.html
-
-demos/full-screen/advanced-optimizations.html: demos/full-screen/template.html.in
-	sed -e 's|@SRC@|advanced-optimizations.js|' $< >$@
-
-demos/full-screen/advanced-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \
-	demos/full-screen/full-screen.json demos/full-screen/full-screen.js
-	java -jar $(PLOVR_JAR) build demos/full-screen/full-screen.json >$@
+demos/%.combined.js: $(PLOVR_JAR) base.json demos/%.js
+	java -jar $(PLOVR_JAR) build $(subst .combined.js,.json,$@) >$@
 	@echo $@ "uncompressed:" $$(wc -c <$@) bytes
 	@echo $@ "  compressed:" $$(gzip -9 -c <$@ | wc -c) bytes
 
-demos/full-screen/index.html: demos/full-screen/template.html.in
-	sed -e 's|@SRC@|../loader.js?id=demo-full-screen|' $< >$@
-
-
-.PHONY: demos/side-by-side
-demos/side-by-side: \
-	demos/side-by-side/advanced-optimizations.html \
-	demos/side-by-side/advanced-optimizations.js \
-	demos/side-by-side/index.html
-
-demos/side-by-side/advanced-optimizations.html: demos/side-by-side/template.html.in
-	sed -e 's|@SRC@|advanced-optimizations.js|' $< >$@
-
-demos/side-by-side/advanced-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \
-	demos/side-by-side/side-by-side.json demos/side-by-side/side-by-side.js
-	java -jar $(PLOVR_JAR) build demos/side-by-side/side-by-side.json >$@
-	@echo $@ "uncompressed:" $$(wc -c <$@) bytes
-	@echo $@ "  compressed:" $$(gzip -9 -c <$@ | wc -c) bytes
-
-demos/side-by-side/index.html: demos/side-by-side/template.html.in
-	sed -e 's|@SRC@|../loader.js?id=demo-side-by-side|' $< >$@
-
-.PHONY: demos/two-layers
-demos/two-layers: \
-	demos/two-layers/advanced-optimizations.html \
-	demos/two-layers/advanced-optimizations.js \
-	demos/two-layers/index.html
-
-demos/two-layers/advanced-optimizations.html: demos/two-layers/template.html.in
-	sed -e 's|@SRC@|advanced-optimizations.js|' $< >$@
-
-demos/two-layers/advanced-optimizations.js: $(PLOVR_JAR) $(SRC) base.json \
-	demos/two-layers/two-layers.json demos/two-layers/two-layers.js
-	java -jar $(PLOVR_JAR) build demos/two-layers/two-layers.json >$@
-	@echo $@ "uncompressed:" $$(wc -c <$@) bytes
-	@echo $@ "  compressed:" $$(gzip -9 -c <$@ | wc -c) bytes
-
-demos/two-layers/index.html: demos/two-layers/template.html.in
-	sed -e 's|@SRC@|../loader.js?id=demo-two-layers|' $< >$@
-
 .PHONY: serve
 serve: $(PLOVR_JAR) build/require-all.js
-	java -jar $(PLOVR_JAR) serve build/*.json demos/*/*.json
+	java -jar $(PLOVR_JAR) serve build/*.json demos/*.json
 
 .PHONY: lint
 lint: build/lint-src-timestamp build/lint-spec-timestamp
@@ -138,8 +81,8 @@ clean:
 	rm -f build/ol.js
 	rm -f build/ol-all.js
 	rm -f build/require-all.js
-	rm -f demos/*/advanced-optimizations.*
-	rm -f demos/*/index.html
+	rm -f demos/*.json
+	rm -f demos/*.combined.js
 	rm -rf build/apidoc
 
 reallyclean: clean
diff --git a/demos/api/full-screen.html b/demos/api/full-screen.html
deleted file mode 100644
index f79dad20c2..0000000000
--- a/demos/api/full-screen.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
-        <style type="text/css">
-            html, body, #map {
-                margin: 0;
-                padding: 0;
-                width: 100%;
-                height: 100%;
-            }
-        </style>
-        <link rel="stylesheet" href="../../css/ol.css" type="text/css">
-        <title>ol3 full-screen demo</title>
-    </head>
-    <body>
-        <div id="map"></div>
-        <script src="../../build/ol.js" type="text/javascript"></script>
-        <script type="text/javascript">
-
-            var layer = new ol.layer.TileLayer({
-              source: new ol.source.MapQuestOpenAerial()
-            });
-            var map = new ol.Map(document.getElementById('map'), {
-              center: new ol.Coordinate(0, 0),
-              layers: new ol.Collection([layer]),
-              zoom: 0
-            });
-
-        </script>
-    </body>
-</html>
diff --git a/demos/full-screen/template.html.in b/demos/full-screen.html
similarity index 75%
rename from demos/full-screen/template.html.in
rename to demos/full-screen.html
index 792c77202d..42debe1d0f 100644
--- a/demos/full-screen/template.html.in
+++ b/demos/full-screen.html
@@ -10,11 +10,11 @@
                 height: 100%;
             }
         </style>
-        <link rel="stylesheet" href="../../css/ol.css" type="text/css">
+        <link rel="stylesheet" href="../css/ol.css" type="text/css">
         <title>ol3 full-screen demo</title>
     </head>
     <body>
         <div id="map"></div>
-        <script src="@SRC@" type="text/javascript"></script>
+        <script src="loader.js?id=full-screen" type="text/javascript"></script>
     </body>
 </html>
diff --git a/demos/full-screen/full-screen.js b/demos/full-screen.js
similarity index 100%
rename from demos/full-screen/full-screen.js
rename to demos/full-screen.js
diff --git a/demos/full-screen/full-screen.json b/demos/full-screen/full-screen.json
deleted file mode 100644
index 8b116fe5ab..0000000000
--- a/demos/full-screen/full-screen.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-
-  "id": "demo-full-screen",
-
-  "inherits": "../../base.json",
-
-  "inputs": "demos/full-screen/full-screen.js"
-
-}
diff --git a/demos/proj4js.html b/demos/proj4js.html
new file mode 100644
index 0000000000..c11c4e05ac
--- /dev/null
+++ b/demos/proj4js.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+    <head>
+        <link rel="stylesheet" href="../css/ol.css" type="text/css">
+        <script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js" type="text/javascript"></script>
+        <title>ol3 proj4js demo</title>
+    </head>
+    <body>
+        <h1>ol3 proj4js demo</h1>
+        <div id="output"></div>
+        <script src="loader.js?id=proj4js" type="text/javascript"></script>
+    </body>
+</html>
diff --git a/demos/proj4js/proj4js.js b/demos/proj4js.js
similarity index 100%
rename from demos/proj4js/proj4js.js
rename to demos/proj4js.js
diff --git a/demos/proj4js/template.html.in b/demos/proj4js/template.html.in
deleted file mode 100644
index ccd62f8a86..0000000000
--- a/demos/proj4js/template.html.in
+++ /dev/null
@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-    <head>
-        <link rel="stylesheet" href="../../css/ol.css" type="text/css">
-        <script src="../../build/proj4js-combined.js" type="text/javascript"></script>
-        <script src="@SRC@" type="text/javascript"></script>
-        <title>ol3 proj4js demo</title>
-    </head>
-    <body>
-        <h1>ol3 proj4js demo</h1>
-        <div id="output"></div>
-        <script src="proj4js.js" type="text/javascript"></script>
-    </body>
-</html>
diff --git a/demos/side-by-side/template.html.in b/demos/side-by-side.html
similarity index 94%
rename from demos/side-by-side/template.html.in
rename to demos/side-by-side.html
index 9d9a167928..7f84a0bee8 100644
--- a/demos/side-by-side/template.html.in
+++ b/demos/side-by-side.html
@@ -8,7 +8,7 @@
                 border: thin solid;
             }
         </style>
-        <link rel="stylesheet" href="../../css/ol.css" type="text/css">
+        <link rel="stylesheet" href="../css/ol.css" type="text/css">
         <title>ol3 side-by-side demo</title>
     </head>
     <body>
@@ -67,6 +67,6 @@
             </tr>
         </table>
         <p><b>Notes:</b> The two maps share the same center, resolution, rotation and layers.  Currently the DOM map does not support rotation.</p>
-        <script src="@SRC@" type="text/javascript"></script>
+        <script src="loader.js?id=side-by-side" type="text/javascript"></script>
     </body>
 </html>
diff --git a/demos/side-by-side/side-by-side.js b/demos/side-by-side.js
similarity index 100%
rename from demos/side-by-side/side-by-side.js
rename to demos/side-by-side.js
diff --git a/demos/side-by-side/side-by-side.json b/demos/side-by-side/side-by-side.json
deleted file mode 100644
index 9b14a6766a..0000000000
--- a/demos/side-by-side/side-by-side.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-
-  "id": "demo-side-by-side",
-
-  "inherits": "../../base.json",
-
-  "inputs": "demos/side-by-side/side-by-side.js"
-
-}
diff --git a/demos/two-layers/template.html.in b/demos/two-layers.html
similarity index 91%
rename from demos/two-layers/template.html.in
rename to demos/two-layers.html
index 4bc97589b3..50c31b640b 100644
--- a/demos/two-layers/template.html.in
+++ b/demos/two-layers.html
@@ -28,6 +28,6 @@
                 </td>
             </tr>
         </table>
-        <script src="@SRC@" type="text/javascript"></script>
+        <script src="loader.js?id=two-layers" type="text/javascript"></script>
     </body>
 </html>
diff --git a/demos/two-layers/two-layers.js b/demos/two-layers.js
similarity index 100%
rename from demos/two-layers/two-layers.js
rename to demos/two-layers.js
diff --git a/demos/two-layers/two-layers.json b/demos/two-layers/two-layers.json
deleted file mode 100644
index 722701e841..0000000000
--- a/demos/two-layers/two-layers.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-
-  "id": "demo-two-layers",
-
-  "inherits": "../../base.json",
-
-  "inputs": "demos/two-layers/two-layers.js"
-
-}