diff --git a/CHANGELOG.md b/CHANGELOG.md
index da2c7ed6..e454d077 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,13 @@
 
 - Put your changes here...
 
+## 0.6.3
+
+- Restored template-level caching feature with an improved API.
+- Restored compile method but now with an API similar to other templating systems. It will now take a template string and return a function which when given model data will render HTML from the template and model data.
+- Now hosting the Teddy playground on [https://rooseveltframework.github.io/teddy/playground.html](https://rooseveltframework.github.io/teddy/playground.html). Thanks to [jsDelivr](https://www.jsdelivr.com/package/npm/teddy?tab=files) for CDN hosting.
+- Various dependencies bumped.
+
 ## 0.6.2
 
 - Significant performance improvements.
diff --git a/README.md b/README.md
index e0e0beb4..951fe7e7 100644
--- a/README.md
+++ b/README.md
@@ -9,9 +9,11 @@ Teddy is the most readable and easy to learn templating language there is!
 
 Or put a more technical way, Teddy is an easy to read, HTML-inspired, mostly logic-less DOM templating engine with support for both server-side and client-side templating.
 
-It uses HTML-like `<tags>` for rudimentary templating logic and Teddy Roosevelt's facial hair for `{variables}`.
+It uses HTML-like `<tags>` for rudimentary templating logic and Teddy Roosevelt's facial hair for `{variables}`. 
 
-![Teddy Roosevelt's facial hair is a curly brace.](https://github.com/rooseveltframework/generator-roosevelt/blob/master/generators/app/templates/statics/images/teddy.jpg "Teddy Roosevelt's facial hair is a curly brace.")
+[Check out this live demo](https://rooseveltframework.github.io/teddy/playground.html) or see below for documentation on how to write Teddy templates.
+
+![Teddy Roosevelt's facial hair is a curly brace.](https://github.com/rooseveltframework/generator-roosevelt/blob/main/generators/app/templates/statics/images/teddy.jpg "Teddy Roosevelt's facial hair is a curly brace.")
 
 
 Table of contents
@@ -379,8 +381,13 @@ Here's what the attributes mean:
   - `teddy.clearCache(name, keyVal)` will delete just the value at that keyVal, e.g. just the cache for when `{city}` resolves to NY if you set keyVal to NY.
 - `key`: The model value to use to index new caches.
   - Example: Suppose `city` in the above example could resolve to three possible values: NY, SF, and LA. In that case, the caching feature will create 3 caches using the `city` key: one for each of the three possible values.
+- `maxAge`: How old the cache can be in milliseconds before it is invalidated and will be re-rendered.
+  - Default: 0 (no limit).
+
 - `maxCaches`: The maximum number of caches that Teddy will be allowed to create for a given `<cache>` element. If the maximum is reached, Teddy will remove the oldest cache in the stack, where oldest is defined as the least recently created *or* accessed.
-  - Default: 10.
+  - Default: 1000.
+
+You can also cache whole templates. For more details about that, see the API docs below. 
 
 A complex example combining many tags
 ---
@@ -443,22 +450,73 @@ API documentation
 ===
 
 - `teddy.getTemplates()`: Get the internal cache of templates.
+
 - `teddy.setTemplate(name, template)`: Add a new template to the template cache.
+
 - `teddy.render(template, model)`: Render a template by supplying either source code or a file name (in Node.js).
+
   - Returns fully rendered HTML.
   - Removes `{! teddy comments !}`
+
 - `teddy.setTemplateRoot(path)`: Set the location of your templates directory.
+
   - Default is the current directory.
+
+- `teddy.compile(templateString)`: Takes a template string and returns a function which when given model data will render HTML from the template and model data.
+
+  - e.g.
+
+    - ```javascript
+      const templateFunction = teddy.compile('<p>{hello}</p>')
+      templateFunction({ hello: 'world' }) // returns "<p>world</p>"
+
 - `teddy.setVerbosity(n)`: Sets the level of verbosity in Teddy's console logs. Call `teddy.setVerbosity(n)` where `n` equals one of the below values to change the default:
+
   - `0`: No logging.
   - `1`: The default. Concise logging. Will usually only log serious errors.
   - `2`: Verbose logging. Logs even minor errors.
   - `3`: Debug mode. Very verbose.
+
 - `teddy.setDefaultParams()`: Reset all params to default.
+
 - `teddy.maxPasses(n)`: Sets the maximum number of passes the parser can execute over your template. If this maximum is exceeded, Teddy will stop attempting to render the template. The limit exists to prevent the possibility of teddy producing infinite loops due to improperly coded templates.
   - Default: 1000.
-- `teddy.clearCache(name)`: Deletes the whole cache at that name.
-- `teddy.clearCache(name, keyVal)`: Deletes just the value at that keyVal.
+
+- `teddy.setCache(params)`: Declare a template-level cache.
+
+  - Params:
+
+    - `template`: Name of the template to cache.
+    - `key`: Model variable to cache it by.
+      - Set to `none` to cache the first render for all model values.
+
+    - `maxAge`: How old the cache can be in milliseconds before it is invalidated and will be re-rendered.
+      - Default: 0 (no limit).
+
+    - `maxCaches`: The maximum number of caches that Teddy will be allowed to create for a given template/key combination. If the maximum is reached, Teddy will remove the oldest cache in the stack, where oldest is defined as the least recently created *or* accessed.
+      - Default: 1000.
+      - Note: does not apply to caches where `key` is not also set.
+
+  - Example:
+
+    - ```javascript
+      teddy.setCache({
+        template: 'someTemplate.html',
+        key: 'city',
+        maxAge: 1000
+      })
+
+- `teddy.clearCache(name)`: If `name` is a string, it will delete the whole cache at that name.
+
+- `teddy.clearCache(name, keyVal)`: Deletes just the value at that keyVal. Assumes `name` will be a string.
+
+- `teddy.clearCache(params)`: If `params` is an object, it will delete a whole template-level cache.
+
+  - Params:
+    - `template`: Name of the template to delete the cache of.
+    - `key`: Model variable cache index to delete it by.
+      - If `key` is not provided, it will delete all caches of that template.
+
 
 Hacking the code
 ===
diff --git a/package-lock.json b/package-lock.json
index ac6f9102..9f736c7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "teddy",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "teddy",
-      "version": "0.6.2",
+      "version": "0.6.3",
       "license": "CC-BY-4.0",
       "dependencies": {
         "cheerio": "1.0.0-rc.12",
@@ -24,7 +24,7 @@
         "karma": "6.4.2",
         "karma-chrome-launcher": "3.2.0",
         "karma-cli": "2.0.0",
-        "karma-coverage": "2.2.0",
+        "karma-coverage": "2.2.1",
         "karma-edge-launcher": "0.4.2",
         "karma-firefox-launcher": "2.1.2",
         "karma-html2js-preprocessor": "1.1.0",
@@ -759,9 +759,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.3.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.1.tgz",
-      "integrity": "sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==",
+      "version": "20.3.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.2.tgz",
+      "integrity": "sha512-vOBLVQeCQfIcF/2Y7eKFTqrMnizK5lRNQ7ykML/5RuwVXVWxYkgwS7xbt4B6fKCUPgbSL5FSsjHQpaGQP/dQmw==",
       "dev": true
     },
     "node_modules/@webassemblyjs/ast": {
@@ -1769,9 +1769,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001506",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001506.tgz",
-      "integrity": "sha512-6XNEcpygZMCKaufIcgpQNZNf00GEqc7VQON+9Rd0K1bMYo8xhMZRAo5zpbnbMNizi4YNgIDAFrdykWsvY3H4Hw==",
+      "version": "1.0.30001508",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001508.tgz",
+      "integrity": "sha512-sdQZOJdmt3GJs1UMNpCCCyeuS2IEGLXnHyAo9yIO5JJDjbjoVRij4M1qep6P6gFpptD1PqIYgzM+gwJbOi92mw==",
       "dev": true,
       "funding": [
         {
@@ -2562,9 +2562,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.439",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.439.tgz",
-      "integrity": "sha512-BHpErPSNhb9FB25+OwQP6mCAf3ZXfGbmuvc4LzBNVJwpCcXQJm++LerimocYRG9FRxUVRKZqaB7d0+pImSTPSg==",
+      "version": "1.4.441",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.441.tgz",
+      "integrity": "sha512-LlCgQ8zgYZPymf5H4aE9itwiIWH4YlCiv1HFLmmcBeFYi5E+3eaIFnjHzYtcFQbaKfAW+CqZ9pgxo33DZuoqPg==",
       "dev": true
     },
     "node_modules/elliptic": {
@@ -4907,9 +4907,9 @@
       }
     },
     "node_modules/karma-coverage": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/karma-coverage/-/karma-coverage-2.2.0.tgz",
-      "integrity": "sha512-gPVdoZBNDZ08UCzdMHHhEImKrw1+PAOQOIiffv1YsvxFhBjqvo/SVXNk4tqn1SYqX0BJZT6S/59zgxiBe+9OuA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/karma-coverage/-/karma-coverage-2.2.1.tgz",
+      "integrity": "sha512-yj7hbequkQP2qOSb20GuNSIyE//PgJWHwC2IydLE6XRtsnaflv+/OSGNssPjobYUlhVVagy99TQpqUt3vAUG7A==",
       "dev": true,
       "dependencies": {
         "istanbul-lib-coverage": "^3.2.0",
diff --git a/package.json b/package.json
index b346fe84..21312b5e 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
       "url": "https://github.com/rooseveltframework/teddy/graphs/contributors"
     }
   ],
-  "version": "0.6.2",
+  "version": "0.6.3",
   "files": [
     "dist/teddy.js",
     "dist/cheerio.client.js"
@@ -36,7 +36,7 @@
     "karma": "6.4.2",
     "karma-chrome-launcher": "3.2.0",
     "karma-cli": "2.0.0",
-    "karma-coverage": "2.2.0",
+    "karma-coverage": "2.2.1",
     "karma-edge-launcher": "0.4.2",
     "karma-firefox-launcher": "2.1.2",
     "karma-html2js-preprocessor": "1.1.0",
diff --git a/playground.html b/playground.html
index f80bed98..b4505889 100644
--- a/playground.html
+++ b/playground.html
@@ -39,7 +39,10 @@ <h1>Teddy Templating Engine playground</h1>
     </main>
 
     <!-- include teddy library -->
-    <script src='dist/teddy.js'></script>
+    <script src='https://cdn.jsdelivr.net/npm/teddy@latest/dist/teddy.min.js'></script>
+
+    <!-- uncomment this to do local testing -->
+    <!-- <script src='dist/teddy.js'></script> -->
 
     <script>
     (function() {
diff --git a/teddy.js b/teddy.js
index a2475244..dcd4a02e 100644
--- a/teddy.js
+++ b/teddy.js
@@ -15,7 +15,8 @@ const XRegExp = require('xregexp') // needed for matchRecursive
 const params = {} // teddy parameters
 setDefaultParams() // set params to the defaults
 const templates = {} // loaded templates are stored as object collections, e.g. { "myTemplate.html": "<p>some markup</p>"}
-const caches = {} // a place to store cached templates
+const caches = {} // a place to store cached portions of templates
+const templateCaches = {} // a place to store cached full templates
 
 // private methods
 
@@ -170,14 +171,23 @@ function replaceCacheElements (dom, model) {
         if (cache && cache.entries) {
           const keyVal = el.attribs.key ? getOrSetObjectByDotNotation(model, key) : 'none'
           if (cache.entries[keyVal]) {
-            const cacheContent = cache.entries[keyVal].markup
-            cache.entries[keyVal].timestamp = Date.now()
-            dom(el).replaceWith(cacheContent)
+            const now = Date.now()
+            // if max age is not set, then there is no max age and the cache content is still valid
+            // or if last accessed + max age > now then the cache is not stale and the cache is still valid
+            if (!cache.maxAge || cache.entries[keyVal].lastAccessed + cache.maxAge > now) {
+              const cacheContent = cache.entries[keyVal].markup
+              cache.entries[keyVal].lastAccessed = now
+              dom(el).replaceWith(cacheContent)
+            } else {
+              // if last accessed + max age <= now then the cache is stale and the cache is no longer valid
+              delete caches[name].entries[keyVal]
+              dom(el).attr('defer', 'true') // create a new cache
+            }
           } else {
-            dom(el).attr('defer', 'true')
+            dom(el).attr('defer', 'true') // no cache exists for this yet; create after the template renders
           }
         } else {
-          dom(el).attr('defer', 'true')
+          dom(el).attr('defer', 'true') // no cache exists for this yet; create after the template renders
         }
         parsedTags++
       }
@@ -778,22 +788,26 @@ function defineNewCaches (dom, model) {
       for (const el of tags) {
         const name = el.attribs.name
         const key = el.attribs.key || 'none'
-        const maxCaches = parseInt(el.attribs.maxCaches) || 10
+        const maxAge = parseInt(el.attribs.maxAge) || 0
+        const maxCaches = parseInt(el.attribs.maxCaches) || 1000
         const timestamp = Date.now()
         const markup = dom(el).html()
         if (!caches[name]) {
           caches[name] = {
             key,
+            maxAge,
             maxCaches,
             entries: {}
           }
         }
         caches[name].entries[el.attribs.key ? getOrSetObjectByDotNotation(model, key) : 'none'] = {
-          timestamp,
+          lastAccessed: timestamp,
+          created: timestamp,
           markup
         }
+        // invalidate oldest cache if we've reached max caches limit
         if (Object.keys(caches[name].entries).length > maxCaches) {
-          const lowestKeyVal = Object.keys(caches[name].entries).reduce((a, b) => caches[name].entries[a].timestamp < caches[name].entries[b].timestamp ? a : b)
+          const lowestKeyVal = Object.keys(caches[name].entries).reduce((a, b) => caches[name].entries[a].lastAccessed < caches[name].entries[b].lastAccessed ? a : b)
           delete caches[name].entries[lowestKeyVal]
         }
         dom(el).replaceWith(markup)
@@ -854,12 +868,6 @@ function getOrSetObjectByDotNotation (obj, dotNotation, value) {
 function setDefaultParams () {
   params.verbosity = 1
   params.templateRoot = './'
-  params.cacheRenders = false
-  params.defaultCaches = 1
-  params.templateMaxCaches = {}
-  params.cacheWhitelist = false
-  params.cacheBlacklist = []
-  params.minify = false
   params.maxPasses = 1000
 }
 
@@ -899,19 +907,57 @@ function getTemplates () {
   return templates
 }
 
+// takes in a template string and outputs a function which when given data will render out html
+function compile (templateString) {
+  return function (model) {
+    return render(templateString, model)
+  }
+}
+
 // mutator method to cache template
 function setTemplate (file, template) {
   templates[file] = template
 }
 
+function setCache (params) {
+  if (!templateCaches[params.template]) {
+    templateCaches[params.template] = {}
+  }
+  if (params.key) {
+    templateCaches[params.template][params.key] = {
+      maxAge: params.maxAge,
+      maxCaches: params.maxCaches || 1000,
+      entries: {}
+    }
+  } else {
+    templateCaches[params.template].none = {
+      maxAge: params.maxAge,
+      markup: null,
+      created: null
+    }
+  }
+}
+
 // delete one or more cached templates
-// 1 argument deletes the whole cache at that name
-// 2 arguments deletes just the value at that keyVal
+// 1 string argument deletes the whole cache at that name for template partial caches
+// 2 arguments deletes just the value at that keyVal for template partial caches
+// 1 object argument assumes we're clearing whole template level cache
 function clearCache (name, keyVal) {
-  if (!keyVal) {
-    delete caches[name]
+  if (typeof name === 'string') {
+    if (keyVal) {
+      delete caches[name].entries[keyVal]
+    } else {
+      delete caches[name]
+    }
+  } else if (typeof name === 'object') {
+    const params = name
+    if (params.key) {
+      delete templateCaches[params.template][params.key]
+    } else {
+      delete templateCaches[params.template]
+    }
   } else {
-    delete caches[name].entries[keyVal]
+    console.error('teddy: invalid params passed to clearCache')
   }
 }
 
@@ -940,9 +986,62 @@ function render (template, model, callback) {
     template = template.replace(params.templateRoot, '')
   }
 
+  // whole template caching
+  const templateCache = templateCaches[template]
+  let cacheKey = null
+  let cacheKeyModelVal = null
+  if (templateCache) {
+    const singletonCache = templateCache.none
+    if (singletonCache) {
+      // check if the timestamp exceeds max age
+      if (!singletonCache.created) {
+        cacheKey = 'none'
+      } else if (!singletonCache.maxAge) {
+        // if no max age is set, then this cache doesn't expire
+        return singletonCache.markup
+      } else if (singletonCache.created + singletonCache.maxAge < Date.now()) {
+        // if yes re-render the template and cache it again
+        cacheKey = 'none'
+      } else {
+        // if no return the cached markup and skip the template render
+        return singletonCache.markup
+      }
+    } else {
+      // loop through its keys
+      for (const key in templateCache) {
+        // if there's a model value for that key name
+        cacheKeyModelVal = getOrSetObjectByDotNotation(model, key)
+        if (cacheKeyModelVal) {
+          // loop through its entries
+          const templateCacheAtThisKey = templateCache[key]
+          for (const entryKey in templateCacheAtThisKey.entries) {
+            // if any entry keys match the model value for that key name
+            if (entryKey === cacheKeyModelVal) {
+              // check if the timestamp exceeds max age
+              const entry = templateCacheAtThisKey.entries[entryKey]
+              if (!templateCacheAtThisKey.maxAge) {
+                // if no max age is set, then this cache doesn't expire
+                return entry.markup
+              } else if (entry.created + templateCacheAtThisKey.maxAge < Date.now()) {
+                // if yes re-render the template and cache it again
+                cacheKey = key
+                break
+              } else {
+                // if no return the cached markup and skip the template render
+                return entry.markup
+              }
+            }
+          }
+          // this is a new model value so it needs a new entry
+          cacheKey = key
+          break
+        }
+      }
+    }
+  }
+
   // start the render
   renderedTemplate = loadTemplate(template)
-  renderedTemplate = removeTeddyComments(renderedTemplate)
   dom = cheerio.load(renderedTemplate || '', cheerioOptions)
   let oldTemplate
   let passes = 0
@@ -1008,6 +1107,23 @@ function render (template, model, callback) {
     renderedTemplate = renderedTemplate.replace(`<noteddy id="${blockId}"></noteddy>`, model._noTeddyBlocks[blockId])
   }
 
+  // cache the template
+  if (cacheKey === 'none') {
+    templateCaches[template].none.markup = renderedTemplate
+    templateCaches[template].none.created = Date.now()
+  } else if (cacheKey) {
+    if (!templateCaches[template][cacheKey].entries[cacheKeyModelVal]) {
+      templateCaches[template][cacheKey].entries[cacheKeyModelVal] = {}
+    }
+    templateCaches[template][cacheKey].entries[cacheKeyModelVal].markup = renderedTemplate
+    templateCaches[template][cacheKey].entries[cacheKeyModelVal].created = Date.now()
+    // invalidate oldest cache if we've reached max caches limit
+    if (Object.keys(templateCaches[template][cacheKey].entries).length > templateCaches[template][cacheKey].maxCaches) {
+      const lowestKeyVal = Object.keys(templateCaches[template][cacheKey].entries).reduce((a, b) => templateCaches[template][cacheKey].entries[a].created < templateCaches[template][cacheKey].entries[b].created ? a : b)
+      delete templateCaches[template][cacheKey].entries[lowestKeyVal]
+    }
+  }
+
   // execute callback if present, otherwise simply return the rendered template string
   if (typeof callback === 'function') {
     callback(null, renderedTemplate)
@@ -1022,14 +1138,17 @@ module.exports = {
   // state
   params,
   caches,
+  templateCaches,
 
   // functions
+  compile,
   setDefaultParams,
   setVerbosity,
   setTemplateRoot,
   setMaxPasses,
   getTemplates,
   setTemplate,
+  setCache,
   clearCache,
   render
 }
diff --git a/test/misc.js b/test/misc.js
index 33c2faca..e8b1f9e4 100644
--- a/test/misc.js
+++ b/test/misc.js
@@ -13,6 +13,10 @@ if (typeof process === 'object') {
   chai.use(chaiString)
 }
 
+function timeout (ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
 describe('Misc', function () {
   before(function () {
     teddy.setTemplateRoot('test/templates')
@@ -26,6 +30,11 @@ describe('Misc', function () {
     }
   })
 
+  it('should compile a template and return a function which when given data will render HTML', function () {
+    const templateFunction = teddy.compile('<p>{hello}</p>')
+    assert.equalIgnoreSpaces(templateFunction({ hello: 'world' }), '<p>world</p>')
+  })
+
   it('should not escape HTML entities present in {variables} which are properly {flagged|p|s} (misc/barPandSTest.html)', function () {
     assert.equalIgnoreSpaces(teddy.render('misc/barPandSTest.html', model), '<h1>double bars</h1> {something}')
   })
@@ -97,10 +106,6 @@ describe('Misc', function () {
   })
 
   it('should cache the contents of the cache element but not anything outside of it (misc/cacheElement.html)', async function () {
-    function timeout (ms) {
-      return new Promise(resolve => setTimeout(resolve, ms))
-    }
-
     // these will be cached
     const render1 = teddy.render('misc/cacheElement.html', { user: 'Joe', city: 'NY', value: 30 })
     assert.equalIgnoreSpaces(render1, '<p>Dynamic: Welcome Joe!</p><p>Cached: High temperature today in NY is 30.</p>')
@@ -151,10 +156,27 @@ describe('Misc', function () {
     assert.equal(missingAll, true)
   })
 
+  it('should cache the contents of the cache element but not anything outside of it (misc/cacheElementMaxAge.html)', async function () {
+    // these will be cached
+    const render1 = teddy.render('misc/cacheElementMaxAge.html', { user: 'Joe', city: 'NY', value: 30 })
+    assert.equalIgnoreSpaces(render1, '<p>Dynamic: Welcome Joe!</p><p>Cached: High temperature today in NY is 30.</p>')
+    assert.equalIgnoreSpaces(teddy.caches.weather.entries.NY.markup, '<p>Cached: High temperature today in NY is 30.</p>')
+    await timeout(100)
+
+    // will display from cache
+    const render4 = teddy.render('misc/cacheElementMaxAge.html', { user: 'Sue', city: 'NY', value: 300 }) // new temperature value should not print because old value is cached
+    assert.equalIgnoreSpaces(render4, '<p>Dynamic: Welcome Sue!</p><p>Cached: High temperature today in NY is 30.</p>')
+    assert.equalIgnoreSpaces(teddy.caches.weather.entries.NY.markup, '<p>Cached: High temperature today in NY is 30.</p>')
+    await timeout(1100)
+
+    // will not be cached
+    const render5 = teddy.render('misc/cacheElementMaxAge.html', { user: 'Moe', city: 'NY', value: 60 })
+    assert.equalIgnoreSpaces(render5, '<p>Dynamic: Welcome Moe!</p><p>Cached: High temperature today in NY is 60.</p>')
+    assert.equalIgnoreSpaces(teddy.caches.weather.entries.NY.markup, '<p>Cached: High temperature today in NY is 60.</p>')
+  })
+
   it('should render cache element correctly with dynamic attributes (misc/cacheElementDynamicAttrs.html)', async function () {
-    function timeout (ms) {
-      return new Promise(resolve => setTimeout(resolve, ms))
-    }
+    teddy.clearCache('weather')
 
     // these will be cached
     const render1 = teddy.render('misc/cacheElementDynamicAttrs.html', { name: 'weather', key: 'city', user: 'Joe', city: 'NY', value: 30 })
@@ -207,9 +229,7 @@ describe('Misc', function () {
   })
 
   it('should render cache element correctly with dynamic attributes (misc/cacheElementDynamicAttrsNested.html)', async function () {
-    function timeout (ms) {
-      return new Promise(resolve => setTimeout(resolve, ms))
-    }
+    teddy.clearCache('weather')
 
     // these will be cached
     const render1 = teddy.render('misc/cacheElementDynamicAttrsNested.html', { name: 'weather', key: 'city.acronym', user: 'Joe', city: { acronym: 'NY' }, value: 30 })
@@ -261,6 +281,256 @@ describe('Misc', function () {
     assert.equal(missingAll, true)
   })
 
+  it('should render template, then render cached template, then render the template again when the cache expires (misc/cacheWholeTemplate.html)', async function () {
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: null,
+      maxAge: 1000
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', model)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse: ', time1)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', model)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Cached time to parse:     ', time2)
+
+    await timeout(1100)
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', model)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Non-cached time to parse after clearing cache: ', time3)
+    const fasterSlower = time2 < 100 && time3 > 100
+    assert.isTrue(fasterSlower)
+  })
+
+  it('should render template, then render cached template, then render the template again when the cache is explicitly cleared (misc/cacheWholeTemplate.html)', async function () {
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: null,
+      maxAge: 1000
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', model)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse: ', time1)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', model)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Cached time to parse:     ', time2)
+    teddy.clearCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: null
+    })
+
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', model)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Non-cached time to parse after clearing cache: ', time3)
+    const fasterSlower = time2 < 100 && time3 > 100
+    assert.isTrue(fasterSlower)
+  })
+
+  it('should render template, then render cached template, then render the template again when the cache expires via keyed values (misc/cacheWholeTemplate.html)', async function () {
+    const modelNY = Object.assign({ city: 'NY' }, model)
+    const modelSF = Object.assign({ city: 'SF' }, model)
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city',
+      maxAge: 1000
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse (NY): ', time1)
+
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Cached time to parse (NY):     ', time3)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Non-cached time to parse (SF): ', time2)
+
+    await timeout(1100)
+    const start4 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end4 = new Date().getTime()
+    const time4 = end4 - start4
+    console.log('    → Non-cached time to parse after clearing cache (SF): ', time4)
+    const fasterSlower = time3 < 100 && time4 > 100
+    assert.isTrue(fasterSlower)
+  })
+
+  it('should render template, then render cached template, then render the template again when the cache expires via keyed values when the cache is explicitly cleared (misc/cacheWholeTemplate.html)', async function () {
+    const modelNY = Object.assign({ city: 'NY' }, model)
+    const modelSF = Object.assign({ city: 'SF' }, model)
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city',
+      maxAge: 1000
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse (NY): ', time1)
+
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Cached time to parse (NY):     ', time3)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Non-cached time to parse (SF): ', time2)
+    teddy.clearCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city'
+    })
+
+    const start4 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end4 = new Date().getTime()
+    const time4 = end4 - start4
+    console.log('    → Non-cached time to parse after clearing cache (SF): ', time4)
+    const fasterSlower = time3 < 100 && time4 > 100
+    assert.isTrue(fasterSlower)
+  })
+
+  it('should render template, then render cached template, then render the template again when the cache expires via keyed values with nesting (misc/cacheWholeTemplate.html)', async function () {
+    const modelNY = Object.assign({ city: { acronym: 'NY' } }, model)
+    const modelSF = Object.assign({ city: { acronym: 'SF' } }, model)
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city.acronym',
+      maxAge: 1000
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse (NY): ', time1)
+
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Cached time to parse (NY):     ', time3)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Non-cached time to parse (SF): ', time2)
+
+    await timeout(1100)
+    const start4 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end4 = new Date().getTime()
+    const time4 = end4 - start4
+    console.log('    → Non-cached time to parse after clearing cache (SF): ', time4)
+    const fasterSlower = time3 < 100 && time4 > 100
+    assert.isTrue(fasterSlower)
+  })
+
+  it('should render template, then render cached template, then render the template again when the cache expires via keyed values with nesting when the cache is explicitly cleared (misc/cacheWholeTemplate.html)', async function () {
+    const modelNY = Object.assign({ city: { acronym: 'NY' } }, model)
+    const modelSF = Object.assign({ city: { acronym: 'SF' } }, model)
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city.acronym',
+      maxAge: 1000
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse (NY): ', time1)
+
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Cached time to parse (NY):     ', time3)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Non-cached time to parse (SF): ', time2)
+    teddy.clearCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city.acronym'
+    })
+
+    const start4 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end4 = new Date().getTime()
+    const time4 = end4 - start4
+    console.log('    → Non-cached time to parse after clearing cache (SF): ', time4)
+    const fasterSlower = time3 < 100 && time4 > 100
+    assert.isTrue(fasterSlower)
+  })
+
+  it('should drop caches which have expired due to maximum being reached (misc/cacheWholeTemplate.html)', async function () {
+    const modelNY = Object.assign({ city: { acronym: 'NY' } }, model)
+    const modelSF = Object.assign({ city: { acronym: 'SF' } }, model)
+    const modelLA = Object.assign({ city: { acronym: 'LA' } }, model)
+    let present
+    teddy.setCache({
+      template: 'misc/cacheWholeTemplate.html',
+      key: 'city.acronym',
+      maxAge: 1000,
+      maxCaches: 2
+    })
+    const start1 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelNY)
+    const end1 = new Date().getTime()
+    const time1 = end1 - start1
+    console.log('    → Non-cached time to parse (NY): ', time1)
+    present = typeof teddy.templateCaches['misc/cacheWholeTemplate.html']['city.acronym'].entries.NY === 'object'
+    assert.isTrue(present)
+    await timeout(100)
+
+    const start2 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelSF)
+    const end2 = new Date().getTime()
+    const time2 = end2 - start2
+    console.log('    → Non-cached time to parse (SF): ', time2)
+    present = typeof teddy.templateCaches['misc/cacheWholeTemplate.html']['city.acronym'].entries.SF === 'object'
+    assert.isTrue(present)
+    await timeout(100)
+
+    const start3 = new Date().getTime()
+    teddy.render('misc/cacheWholeTemplate.html', modelLA)
+    const end3 = new Date().getTime()
+    const time3 = end3 - start3
+    console.log('    → Non-cached time to parse (LA): ', time3)
+    present = typeof teddy.templateCaches['misc/cacheWholeTemplate.html']['city.acronym'].entries.LA === 'object'
+    assert.isTrue(present)
+
+    present = typeof teddy.templateCaches['misc/cacheWholeTemplate.html']['city.acronym'].entries.NY !== 'object'
+    assert.isTrue(present)
+  })
+
   it('should avoid rendering templates that are not strings', function () {
     assert.equalIgnoreSpaces(teddy.render(5, model), '')
   })
diff --git a/test/templates/misc/cacheElementMaxAge.html b/test/templates/misc/cacheElementMaxAge.html
new file mode 100644
index 00000000..51c16638
--- /dev/null
+++ b/test/templates/misc/cacheElementMaxAge.html
@@ -0,0 +1,8 @@
+{!
+  should cache the contents of the cache element but not anything outside of it
+!}
+
+<p>Dynamic: Welcome {user}!</p>
+<cache name="weather" key="city" maxAge="1000" maxCaches="3">
+  <p>Cached: High temperature today in {city} is {value}.</p>
+</cache>
diff --git a/test/templates/misc/cacheWholeTemplate.html b/test/templates/misc/cacheWholeTemplate.html
new file mode 100644
index 00000000..96e91831
--- /dev/null
+++ b/test/templates/misc/cacheWholeTemplate.html
@@ -0,0 +1,10 @@
+{!
+  should loop through a large data set performantly after it has been cached
+!}
+
+<loop through='largeDataSet' key='i' val='item'>
+  <p>{i}</p>
+  <p>{item.one}</p>
+  <p>{item.two}</p>
+  <p>{item.three}</p>
+</loop>