diff --git a/README.md b/README.md
index 368ef6d..233f11b 100644
--- a/README.md
+++ b/README.md
@@ -4,13 +4,12 @@ PMTiles is a single-file archive format for tiled data. A PMTiles archive can be
 
 * [Protomaps Blog: Dynamic Maps, Static Storage](http://protomaps.com/blog/dynamic-maps-static-storage)
 
-* [Leaflet + Raster Tiles Demo](https://protomaps.github.io/PMTiles/examples/leaflet.html) - watch your network request log
+* [PMTiles Inspector](https://protomaps.github.io/PMTiles/) - inspect and preview PMTiles local or remote PMTiles archives. Archives on cloud storage may require CORS for the origin https://protomaps.github.io.
 
-* [MapLibre GL + Vector Tiles - US Zip Codes](https://protomaps.github.io/PMTiles/examples/maplibre_zipcodes.html)
+* [Raster Tiles Demo (OSM Carto)](https://protomaps.github.io/PMTiles/?url=https%3A%2F%2Fprotomaps-static.sfo3.digitaloceanspaces.com%2Fosm_carto.pmtiles)
 
-* [MapLibre GL + Vector Tiles - Basemap](https://protomaps.github.io/PMTiles/examples/maplibre.html)
+* [Vector Tiles Example (US Zip Codes)](https://protomaps.github.io/PMTiles/?url=https%3A%2F%2Fprotomaps-static.sfo3.digitaloceanspaces.com%2Fcb_2018_us_zcta510_500k_nolimit.pmtiles)
 
-* [PMTiles inspector for local archives](https://protomaps.github.io/PMTiles/examples/inspector.html)
 
 Demos require MapLibre GL JS v1.14.1-rc.2 or later
 
@@ -80,6 +79,18 @@ An entry consists of:
 * The order of tile data in the archive is unspecified; an optimized implementation should arrange tiles on a 2D space-filling curve.
 * PMTiles readers should cache directory entries by byte offset, not by Z/X/Y. This means that deduplicated leaf directories result in cache hits.
 
+## Recipes
+
+Example of how to create a PMTiles archive from the [Census Bureau Zip Code Tabulation Areas Shapefile](https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html) using [tippecanoe](http://github.com/protomaps/tippecanoe) and the `pmtiles-convert` python program:
+
+```sh
+    # use GDAL/OGR to convert SHP to GeoJSON
+    ogr2ogr -t_srs EPSG:4326 cb_2018_us_zcta510_500k.json cb_2018_us_zcta510_500k.shp
+    # Creates a layer in the vector tiles named "zcta"
+    tippecanoe -zg --projection=EPSG:4326 --no-tile-compression --no-feature-limit --no-tile-size-limit -o cb_2018_us_zcta510_500k_nolimit.mbtiles -l zcta cb_2018_us_zcta510_500k.json
+    pmtiles-convert cb_2018_us_zcta510_500k_nolimit.mbtiles cb_2018_us_zcta510_500k_nolimit.pmtiles
+```
+
 ## License
 
 The reference implementations of PMTiles are published under the BSD 3-Clause License. The PMTiles specification itself is public domain, or under a CC0 license where applicable.
diff --git a/app/public/examples/inspector.html b/app/public/examples/inspector.html
deleted file mode 100644
index 2e587ce..0000000
--- a/app/public/examples/inspector.html
+++ /dev/null
@@ -1,192 +0,0 @@
-<html>
-    <head>
-    </head>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://d3js.org/d3.v7.min.js"></script>
-        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css"/>
-        <script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
-        <!-- <script src="../js/dist/index.js"></script> -->
-        <title>PMTiles inspector</title>
-    </head>
-    <body class="sans-serif v-scroll bg-dark-gray flex">
-        <div class="w-50 vh-100 bg-light-gray pa4 flex flex-column">
-            <div class="f4 w-100 dn" id="inputPanel" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
-                <div class=" f4 fw5 dark-gray b--dark-gray ba4 b--dotted bw1 pa3">Drag and drop a local PMTiles file here...</div>
-<!--                 <div class="pv3">
-                    <div class="flex">
-                        <input placeholder="PMTiles file url (not yet implemented)" class="flex-grow-1 f6"/>
-                        <button class="ml3 link bg-white dim ba pointer">Inspect</button>
-                    </div>
-                </div>
- -->            </div>
-            <div class="fw5 f6 mt2">spec version: <span id="spec_version">?</span></div>
-            <div class="fw5 f6 mt2">metadata length: <span id="metadata_length">?</span></div>
-            <div id="metadata" class="f6"></div>
-            <div class="overflow-y-scroll flex-grow-1 f6 mt2">
-                <table class="w-100">
-                    <thead class="tl">
-                        <tr>
-                            <th>z</th>
-                            <th>x</th>
-                            <th>y</th>
-                            <th>offset</th>
-                            <th>length</th>
-                            <th>dir</th>
-                        </tr>
-                    </thead>
-                    <tbody id="root_entries">
-                    </tbody>
-                </table>
-            </div>
-            <div class="f6 mt2"><span id="root_entries_count">?</span> root entries</div>
-        </div>
-        <div class="w-50 flex items-center justify-center">
-            <div>
-                <div id="preview_label" class="white mb2"></div>
-                <div id="preview"></div>
-            </div>
-        </div>
-        <div id="tooltip" class="absolute pa1 bg-black white f6 dn">
-        </div>
-    </body>
-    <script type="module">
-        window.dragOverHandler = (ev) => {
-          ev.preventDefault();
-        }
-
-        let smartCompare = (a,b) => {
-            if (a.name === "earth") return -4
-            if (a.name === "water") return -3
-            if (a.name === "natural") return -2
-            if (a.name === "landuse") return -1
-            if (a.name === "places") return 1
-            return 0
-
-        }
-
-        import {VectorTile} from "https://cdn.skypack.dev/@mapbox/vector-tile";
-        import Protobuf from "https://cdn.skypack.dev/pbf";
-        import {schemeSet3} from "https://cdn.skypack.dev/d3-scale-chromatic@3";
-        import pako from "https://cdn.skypack.dev/pako";
-        d3.select("#inputPanel").classed("dn",false);
-
-        let loadEntry = async (file,format,compression,row) => {
-            var blob = file.slice(row.offset,row.offset+row.length);
-            var imageUrl = window.URL.createObjectURL(blob);
-            d3.select("#preview_label").text(`${row.z} ${row.x} ${row.y}`);
-            d3.select("#preview").selectAll("*").remove();
-            if (format === "pbf") {
-                var a = await blob.arrayBuffer();
-                if (compression === "gzip") {
-                    a = pako.inflate(a);
-                }
-                let tile = new VectorTile(new Protobuf(a));
-                let data = [];
-                for (let [name,layer] of Object.entries(tile.layers)) {
-                    let features = [];
-                    for (var i = 0; i < layer.length; i++) {
-                        let feature = layer.feature(i);
-                        let path = d3.path();
-                        let geom = feature.loadGeometry();
-
-                        if (feature.type === 1) {
-                            for (let ring of geom) {
-                                for (let pt of ring) {
-                                    path.arc(pt.x,pt.y,20,0, 2*Math.PI);
-                                }
-                            }
-                        } else {
-                            for (let ring of geom) {
-                                path.moveTo(ring[0].x,ring[0].y);
-                                for (var j = 1; j < ring.length; j++) {
-                                    path.lineTo(ring[j].x,ring[j].y);
-                                }
-                                path.closePath();
-                            }
-                        }
-                        features.push({path:path.toString(),type:feature.type,properties:feature.properties,id:feature.id})
-                    }
-                    data.push({name:name,features:features})
-                }
-
-                data.sort(smartCompare);
-
-                let svg = d3.select("#preview").append("svg").attr("viewBox","0 0 4096 4096").attr("width",600).attr("height",600);
-                let layers = svg.selectAll("g").data(data).enter().append("g").attr("color",(d,i) => { return schemeSet3[i % 12]});
-                let features = layers.selectAll("path").data(d => d.features).enter().append("path")
-
-                features.attr("d",d => d.path)
-                    .attr("stroke",d => { return d.type === 2 ? "currentColor" : "" })
-                    .attr("stroke-width",d => { return d.type === 2 ? 10 : undefined })
-                    .attr("fill",d => { return d.type === 2 ? "none" : "currentColor" })
-                    .attr("fill-opacity",d => { d.type === 3 ? 1 : 0.5 })
-                    .attr("stroke-opacity",0.5);
-
-                features.on("mouseover", function(ev,d) {
-                    d3.select(this).attr("color","white");
-                    let tooltip = d3.select("#tooltip")
-                    let rows = Object.entries(d.properties).map(a => `${a[0]}: ${a[1]}`);
-                    rows.unshift(d3.select(this.parentNode).datum().name);
-                    tooltip.classed("dn",false).selectAll("div")
-                        .data(rows).enter().append("div")
-                        .text(d => d);
-                })
-                features.on("mousemove", function(ev) {
-                    let tooltip = d3.select("#tooltip")
-                    .style("top",(ev.pageY+5) +"px")
-                    .style("left",(ev.pageX+5) +"px")
-                })
-
-                features.on("mouseout", function(ev,d,i) {
-                    d3.select(this).attr("color","currentColor");
-                    let tooltip = d3.select("#tooltip")
-                    tooltip.classed("dn",true)
-                        .selectAll("div").remove();
-                })
-            } else {
-                d3.select("#preview").append("img").attr("src",imageUrl);
-            }
-        }
-
-        window.dropHandler = ev => {
-            ev.preventDefault();
-            var data = ev.dataTransfer.items;
-            var file = data[0].getAsFile();
-            var blob = file.slice(0,512000);
-
-            let truncated = (str) => {
-                if (str.length < 80) return str;
-                return str.slice(0,80) + "..."
-            }
-
-            blob.arrayBuffer().then(a => {
-                var header = pmtiles.parseHeader(new DataView(a,0,10));
-                let dec = new TextDecoder("utf-8")
-                let metadata = JSON.parse(dec.decode(new DataView(a,10,header.json_size)));
-                d3.select("#spec_version").text(header.version);
-                d3.select("#metadata_length").text(header.json_size);
-                d3.select("#root_entries_count").text(header.root_entries);
-                d3.select("#metadata").selectAll("div")
-                    .data(Object.entries(metadata).map(a => `${a[0]}: ${a[1]}`))
-                    .enter().append("div").text(d => truncated(d));
-                var entries_view = new DataView(a,10+header.json_size,17*header.root_entries);
-                let entries = [];
-                for (var i = 0; i < entries_view.byteLength/17; i++) {
-                    entries.push(pmtiles.parseEntry(entries_view,i));
-                }
-                let row = d3.select("#root_entries").selectAll("tr").data(entries).enter().append("tr")
-                    .attr("class","f6 pv1 dim pointer").on("click", (ev,d) => { loadEntry(file, metadata.format, metadata.compression, d); });
-                row.selectAll("td").data(d => [d.z,d.x,d.y,d.offset,d.length,d.is_dir]).enter().append("td").text(d => { return d } );
-            })
-        }
-
-        // const queryString = window.location.search;
-        // const urlParams = new URLSearchParams(queryString);
-        // const loadUrl = urlParams.get("url");
-        // if (loadUrl) {
-        //     console.log("load url", loadUrl);
-        // }
-    </script>
-</html>
\ No newline at end of file
diff --git a/app/public/examples/leaflet.html b/app/public/examples/leaflet.html
deleted file mode 100644
index ab6ed83..0000000
--- a/app/public/examples/leaflet.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<html>
-    <head>
-    </head>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
-        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-        <script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
-        <!-- <script src="../js/dist/index.js"></script> -->
-        <style>
-            body, #map {
-                height:100vh;
-                margin:0px;
-            }
-        </style>
-    </head>
-    <body>
-       <div id="map"></div> 
-       <script>
-        const map = L.map('map',{maxZoom:4}).setView([0,0],0)
-        const p = new pmtiles.PMTiles('osm_carto.pmtiles')
-        pmtiles.leafletLayer(p,{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'}).addTo(map)
-       </script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/app/public/examples/maplibre.html b/app/public/examples/maplibre.html
deleted file mode 100644
index 2923ebf..0000000
--- a/app/public/examples/maplibre.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<html>
-    <head>
-    </head>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.css" crossorigin="anonymous">
-        <script src="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.js" crossorigin="anonymous"></script>
-        <script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
-        <!-- <script src="../js/dist/index.js"></script> -->
-        <style>
-            body, #map {
-                height:100vh;
-                margin:0px;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="map"></div>
-        <script>
-            let cache = new pmtiles.ProtocolCache();
-            maplibregl.addProtocol("pmtiles",cache.protocol);
-            var style = {
-                "version": 8,
-                "sources": {
-                    "tpe_sample": {
-                        "type": "vector",
-                        "tiles": ["pmtiles://tpe_sample.pmtiles/{z}/{x}/{y}"],
-                        "maxzoom":14
-                    }
-                },
-                "layers": [
-                    {
-                        "id": "buildings",
-                        "type": "fill",
-                        "source":"tpe_sample",
-                        "source-layer":"buildings",
-                        "paint": {
-                            "fill-color":"black"
-                        }
-                    },
-                    {
-                        "id": "roads",
-                        "type": "line",
-                        "source":"tpe_sample",
-                        "source-layer":"roads",
-                        "paint": {
-                            "line-color":"red"
-                        }
-                    },
-                    {
-                        "id": "mask",
-                        "type": "fill",
-                        "source":"tpe_sample",
-                        "source-layer":"mask",
-                        "paint": {
-                            "fill-color":"white"
-                        }
-                    }
-                ]
-            }
-            var map = new maplibregl.Map({
-                container: 'map',
-                center: [121.5177,25.0412],
-                zoom: 14,
-                style: style
-            });
-        </script>
-    </body>
-</html>
\ No newline at end of file
diff --git a/app/public/examples/maplibre_zipcodes.html b/app/public/examples/maplibre_zipcodes.html
deleted file mode 100644
index 74b6d6d..0000000
--- a/app/public/examples/maplibre_zipcodes.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<html>
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.css" crossorigin="anonymous">
-        <script src="https://unpkg.com/maplibre-gl@1.14.1-rc.2/dist/maplibre-gl.js" crossorigin="anonymous"></script>
-        <script src="https://unpkg.com/pmtiles@1.0.0/dist/index.js"></script>
-         <!-- <script src="../js/dist/index.js"></script> -->
-        <style>
-            body, #map {
-                height:100vh;
-                margin:0px;
-                background-color: #222222;
-            }
-
-            #overlay {
-                position: absolute;
-                top: 0px;
-                padding: 1rem;
-                background-color: white;
-            }
-        </style>
-        <title>zcta - gl</title>
-    </head>
-    <body>
-        <div id="map"></div>
-        <div id="overlay">
-           displaying archive: <a href="https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles">cb_2018_us_zcta510_500k_nolimit.pmtiles</a>
-           <pre>ogr2ogr -t_srs EPSG:4326 cb_2018_us_zcta510_500k.json cb_2018_us_zcta510_500k.shp
-tippecanoe -zg --projection=EPSG:4326 --no-tile-compression --no-feature-limit --no-tile-size-limit -o cb_2018_us_zcta510_500k_nolimit.mbtiles -l zcta cb_2018_us_zcta510_500k.json
-pmtiles-convert cb_2018_us_zcta510_500k_nolimit.mbtiles cb_2018_us_zcta510_500k_nolimit.pmtiles</pre>
-        </div>
-        <script>
-            let cache = new pmtiles.ProtocolCache();
-            maplibregl.addProtocol("pmtiles",cache.protocol);
-            var style = {
-                "version": 8,
-                "sources": {
-                    "zcta": {
-                        "type": "vector",
-                        "tiles": ["pmtiles://https://protomaps-static.sfo3.digitaloceanspaces.com/cb_2018_us_zcta510_500k_nolimit.pmtiles/{z}/{x}/{y}"],
-                        "maxzoom":7
-                    }
-                },
-                "layers": [
-                    {
-                        "id": "ztcta_fill",
-                        "type": "fill",
-                        "source":"zcta",
-                        "source-layer":"zcta",
-                        "paint": {
-                            "fill-color":"white"
-                        }
-                    },
-                    {
-                        "id": "zcta_stroke",
-                        "type": "line",
-                        "source":"zcta",
-                        "source-layer":"zcta",
-                        "paint": {
-                            "line-color":"steelblue",
-                            "line-width":0.5
-                        }
-                    }
-                ]
-            }
-            var map = new maplibregl.Map({
-                container: 'map',
-                center: [-101.43,44.34],
-                zoom: 3,
-                style: style
-            });
-        </script>
-    </body>
-</html>
\ No newline at end of file
