diff --git a/.c8rc.json b/.c8rc.json
index fe91f7331..5d44abeee 100644
--- a/.c8rc.json
+++ b/.c8rc.json
@@ -20,7 +20,7 @@
 
   "statements": 80,
   "branches": 85,
-  "functions": 90,
+  "functions": 85,
   "lines": 80,
 
   "watermarks": {
diff --git a/greenwood.config.js b/greenwood.config.js
index a87785498..e913c0891 100644
--- a/greenwood.config.js
+++ b/greenwood.config.js
@@ -4,6 +4,7 @@ import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
 import { greenwoodPluginImportJson } from '@greenwood/plugin-import-json';
 import { greenwoodPluginPolyfills } from '@greenwood/plugin-polyfills';
 import { greenwoodPluginPostCss } from '@greenwood/plugin-postcss';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 import rollupPluginAnalyzer from 'rollup-plugin-analyzer';
 import { fileURLToPath, URL } from 'url';
 
@@ -33,7 +34,8 @@ export default {
         ];
       }
     },
-    ...greenwoodPluginIncludeHTML()
+    ...greenwoodPluginIncludeHTML(),
+    ...greenwoodPluginRendererPuppeteer()
   ],
   markdown: {
     plugins: [
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 668f18b6d..aa7e9c3ad 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -23,18 +23,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "peerDependencies": {
-    "puppeteer": "^13.5.2"
-  },
-  "peerDependenciesMeta": {
-    "puppeteer": {
-      "optional": true
-    }
-  },
   "dependencies": {
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.3.4",
-    "@webcomponents/webcomponentsjs": "^2.6.0",
     "acorn": "^8.0.1",
     "acorn-walk": "^8.0.0",
     "commander": "^2.20.0",
@@ -56,7 +47,7 @@
     "rollup": "^2.58.0",
     "rollup-plugin-terser": "^7.0.0",
     "unified": "^9.2.0",
-    "wc-compiler": "~0.3.1"
+    "wc-compiler": "~0.4.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.10.4",
@@ -70,7 +61,6 @@
     "lit-redux-router": "~0.20.0",
     "lodash-es": "^4.17.20",
     "postcss-nested": "^4.1.2",
-    "puppeteer": "^13.5.2",
     "pwa-helpers": "^0.9.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
diff --git a/packages/cli/src/commands/build.js b/packages/cli/src/commands/build.js
index 7181ffe96..27f78eaf5 100644
--- a/packages/cli/src/commands/build.js
+++ b/packages/cli/src/commands/build.js
@@ -1,8 +1,7 @@
 import { bundleCompilation } from '../lifecycles/bundle.js';
 import { copyAssets } from '../lifecycles/copy.js';
-import { getDevServer } from '../lifecycles/serve.js';
 import fs from 'fs';
-import { preRenderCompilationCustom, preRenderCompilationDefault, staticRenderCompilation } from '../lifecycles/prerender.js';
+import { preRenderCompilationWorker, preRenderCompilationCustom, staticRenderCompilation } from '../lifecycles/prerender.js';
 import { ServerInterface } from '../lib/server-interface.js';
 
 const runProductionBuild = async (compilation) => {
@@ -11,8 +10,10 @@ const runProductionBuild = async (compilation) => {
 
     try {
       const { prerender } = compilation.config;
-      const port = compilation.config.devServer.port;
       const outputDir = compilation.context.outputDir;
+      const defaultPrerender = (compilation.config.plugins.filter(plugin => plugin.type === 'renderer' && plugin.isGreenwoodDefaultPlugin) || []).length === 1
+        ? compilation.config.plugins.filter(plugin => plugin.type === 'renderer')[0].provider(compilation)
+        : {};
       const customPrerender = (compilation.config.plugins.filter(plugin => plugin.type === 'renderer' && !plugin.isGreenwoodDefaultPlugin) || []).length === 1
         ? compilation.config.plugins.filter(plugin => plugin.type === 'renderer')[0].provider(compilation)
         : {};
@@ -22,45 +23,40 @@ const runProductionBuild = async (compilation) => {
       }
 
       if (prerender || customPrerender.prerender) {
-        if (customPrerender.prerender) {
+        // start any servers if needed
+        const servers = [...compilation.config.plugins.filter((plugin) => {
+          return plugin.type === 'server';
+        }).map((plugin) => {
+          const provider = plugin.provider(compilation);
+  
+          if (!(provider instanceof ServerInterface)) {
+            console.warn(`WARNING: ${plugin.name}'s provider is not an instance of ServerInterface.`);
+          }
+  
+          return provider;
+        })];
+  
+        await Promise.all(servers.map(async (server) => {
+          await server.start();
+  
+          return Promise.resolve(server);
+        }));
+
+        if (customPrerender.workerUrl) {
+          await preRenderCompilationWorker(compilation, customPrerender);
+        } else if (customPrerender.customUrl) {
           await preRenderCompilationCustom(compilation, customPrerender);
+        } else if (defaultPrerender && prerender) {
+          await preRenderCompilationWorker(compilation, defaultPrerender);
         } else {
-          await new Promise(async (resolve, reject) => {
-            try {
-              (await getDevServer(compilation)).listen(port, async () => {
-                console.info(`Started prerender server at localhost:${port}`);
-
-                const servers = [...compilation.config.plugins.filter((plugin) => {
-                  return plugin.type === 'server';
-                }).map((plugin) => {
-                  const provider = plugin.provider(compilation);
-
-                  if (!(provider instanceof ServerInterface)) {
-                    console.warn(`WARNING: ${plugin.name}'s provider is not an instance of ServerInterface.`);
-                  }
-
-                  return provider;
-                })];
-
-                await Promise.all(servers.map(async (server) => {
-                  server.start();
-
-                  return Promise.resolve(server);
-                }));
-
-                await preRenderCompilationDefault(compilation);
-    
-                resolve();
-              });
-            } catch (e) {
-              reject(e);
-            }
-          });
+          reject('This is an unhandled pre-rendering case!  Please report.');
         }
       } else {
         await staticRenderCompilation(compilation);
       }
 
+      console.info('success, done generating all pages!');
+
       await bundleCompilation(compilation);
       await copyAssets(compilation);
 
diff --git a/packages/cli/src/index.js b/packages/cli/src/index.js
index 2976351a9..042b80d51 100755
--- a/packages/cli/src/index.js
+++ b/packages/cli/src/index.js
@@ -7,7 +7,6 @@ process.setMaxListeners(0);
 
 import { generateCompilation } from './lifecycles/compile.js';
 import fs from 'fs';
-import path from 'path';
 import program from 'commander';
 import { URL } from 'url';
 
@@ -60,40 +59,6 @@ if (program.parse.length === 0) {
   program.help();
 }
 
-// auto install puppeteer if user has enabled prerendering and not installed it already
-async function checkForPuppeteer(compilation) {
-  if (compilation.config.prerender && !fs.existsSync(path.join(process.cwd(), '/node_modules/puppeteer'))) {
-    const puppeteerVersion = greenwoodPackageJson.peerDependencies.puppeteer;
-    console.log('prerender configuration detected but puppeteer is not detected.');
-    console.log(`attempting to auto-install puppeteer@${puppeteerVersion} ...`);
-
-    try {
-      await new Promise(async (resolve, reject) => {
-        const os = await import('os');
-        const spawn = (await import('child_process')).spawn;
-        const pkgMng = fs.existsSync(path.join(process.cwd(), 'yarn.lock')) ? 'yarn' : 'npm';
-        const command = pkgMng === 'yarn' ? 'add' : 'install';
-        const commandFlags = pkgMng === 'yarn' ? '--dev' : '--save-dev';
-        const pkgCommand = os.platform() === 'win32' ? `${pkgMng}.cmd` : pkgMng;
-        const args = [command, `puppeteer@${puppeteerVersion}`, commandFlags];
-        const childProcess = spawn(pkgCommand, args, { stdio: 'ignore' });
-
-        childProcess.on('close', code => {
-          if (code !== 0) {
-            reject();
-            return;
-          }
-          console.log('auto installation successful!');
-          resolve();
-        });
-      });
-    } catch (e) {
-      console.error(`Sorry, we were unable to auto-install puppeteer@${puppeteerVersion}.`);
-      console.log('Please visit our website for more information on self-installation: https://www.greenwoodjs.io/docs/configuration/#prerender');
-    }
-  }
-}
-
 const run = async() => {
   const compilation = await generateCompilation();
 
@@ -104,7 +69,6 @@ const run = async() => {
     switch (command) {
 
       case 'build':
-        await checkForPuppeteer(compilation);
         await (await import('./commands/build.js')).runProductionBuild(compilation);
 
         break;
@@ -115,7 +79,6 @@ const run = async() => {
       case 'serve':
         process.env.__GWD_COMMAND__ = 'build';
 
-        await checkForPuppeteer(compilation);
         await (await import('./commands/build.js')).runProductionBuild(Object.assign({}, compilation));
         await (await import('./commands/serve.js')).runProdServer(compilation);
 
diff --git a/packages/cli/src/lib/ssr-route-worker.js b/packages/cli/src/lib/ssr-route-worker.js
index 3a30e0b8b..3b8f62f14 100644
--- a/packages/cli/src/lib/ssr-route-worker.js
+++ b/packages/cli/src/lib/ssr-route-worker.js
@@ -1,34 +1,42 @@
 // https://github.com/nodejs/modules/issues/307#issuecomment-858729422
 import { pathToFileURL } from 'url';
 import { workerData, parentPort } from 'worker_threads';
-import { renderToString } from 'wc-compiler';
+import { renderToString, renderFromHTML } from 'wc-compiler';
 
-async function executeRouteModule({ modulePath, compilation, route, label, id }) {
-  const moduleURL = pathToFileURL(modulePath);
-  const module = await import(moduleURL).then(module => module);
-  const { getFrontmatter = null, getBody = null, getTemplate = null } = module;
+async function executeRouteModule({ modulePath, compilation, route, label, id, prerender, htmlContents, scripts }) {
   const parsedCompilation = JSON.parse(compilation);
   const data = {
     template: null,
     body: null,
-    frontmatter: null
+    frontmatter: null,
+    html: null
   };
 
-  if (getFrontmatter) {
-    data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
-  }
+  if (prerender) {
+    const scriptURLs = JSON.parse(scripts).map(scriptFile => new URL(scriptFile));
+    const { html } = await renderFromHTML(htmlContents, scriptURLs);
 
-  if (getTemplate) {
-    data.template = await getTemplate(parsedCompilation, route);
-  }
+    data.html = html;
+  } else {
+    const module = await import(pathToFileURL(modulePath)).then(module => module);
+    const { getTemplate = null, getBody = null, getFrontmatter = null } = module;
 
-  if (module.default) {
-    const { html } = await renderToString(moduleURL);
+    if (module.default) {
+      const { html } = await renderToString(pathToFileURL(modulePath));
 
-    data.body = html;
-  } else {
-    if (getBody) {
-      data.body = await getBody(parsedCompilation, route);
+      data.body = html;
+    } else {
+      if (getBody) {
+        data.body = await getBody(parsedCompilation, route);
+      }
+    }
+
+    if (getTemplate) {
+      data.template = await getTemplate(parsedCompilation, route);
+    }
+
+    if (getFrontmatter) {
+      data.frontmatter = await getFrontmatter(parsedCompilation, route, label, id);
     }
   }
 
diff --git a/packages/cli/src/lifecycles/prerender.js b/packages/cli/src/lifecycles/prerender.js
index 0d605a563..b9f52bf57 100644
--- a/packages/cli/src/lifecycles/prerender.js
+++ b/packages/cli/src/lifecycles/prerender.js
@@ -56,11 +56,13 @@ async function optimizePage(compilation, contents, route, outputPath, outputDir)
   return htmlOptimized;
 }
 
-async function preRenderCompilationCustom(compilation, customPrerender) {
+async function preRenderCompilationWorker(compilation, workerPrerender) {
   const pages = compilation.graph.filter(page => !page.isSSR);
   const outputDir = compilation.context.scratchDir;
 
-  for (const page of pages) {
+  console.info('pages to generate', `\n ${pages.map(page => page.route).join('\n ')}`);
+
+  await Promise.all(pages.map(async (page) => {
     const { outputPath, route } = page;
     const outputPathDir = path.join(outputDir, route);
     const htmlResource = compilation.config.plugins.filter((plugin) => {
@@ -87,7 +89,7 @@ async function preRenderCompilationCustom(compilation, customPrerender) {
       });
 
     await new Promise((resolve, reject) => {
-      const worker = new Worker(customPrerender.workerUrl, {
+      const worker = new Worker(workerPrerender.workerUrl, {
         workerData: {
           modulePath: null,
           compilation: JSON.stringify(compilation),
@@ -119,75 +121,25 @@ async function preRenderCompilationCustom(compilation, customPrerender) {
       });
     }
 
+    console.info('generated page...', route);
+
     await fs.promises.writeFile(path.join(outputDir, outputPath), html);
-  }
+  }));
 }
 
-async function preRenderCompilationDefault(compilation) {
-  const BrowserRunner = (await import('../lib/browser.js')).BrowserRunner;
-  const browserRunner = new BrowserRunner();
-
-  const runBrowser = async (serverUrl, pages, outputDir) => {
-    try {
-      return Promise.all(pages.map(async(page) => {
-        const { outputPath, route } = page;
-        console.info('prerendering page...', route);
-        
-        return await browserRunner
-          .serialize(`${serverUrl}${route}`)
-          .then(async (indexHtml) => {
-            console.info(`prerendering complete for page ${route}.`);
-            
-            const html = await optimizePage(compilation, indexHtml, route, outputPath, outputDir);
-            await fs.promises.writeFile(path.join(outputDir, outputPath), html);
-          });
-      }));
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(err);
-      return false;
-    }
-  };
-
-  // gracefully handle if puppeteer is not installed correctly
-  // like may happen in a stackblitz environment and just reject early
-  // otherwise we can feel confident attempting to prerender all pages
-  // https://github.com/ProjectEvergreen/greenwood/discussions/639
-  try {
-    await browserRunner.init();
-  } catch (e) {
-    console.error(e);
-
-    console.error('*******************************************************************');
-    console.error('*******************************************************************');
-
-    console.error('There was an error trying to initialize puppeteer for pre-rendering.');
-
-    console.info('To troubleshoot, please check your environment for any npm install or postinstall errors, as may be the case in a Stackblitz or other sandbox like environment.');
-    console.info('For more information please see this guide - https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md');
-
-    return Promise.reject();
-  }
-
-  return new Promise(async (resolve, reject) => {
-    try {
-      const pages = compilation.graph.filter(page => !page.isSSR);
-      const port = compilation.config.devServer.port;
-      const outputDir = compilation.context.scratchDir;
-      const serverAddress = `http://127.0.0.1:${port}`;
+async function preRenderCompilationCustom(compilation, customPrerender) {
+  const { scratchDir } = compilation.context;
+  const renderer = (await import(customPrerender.customUrl)).default;
 
-      console.debug('pages to render', `\n ${pages.map(page => page.route).join('\n ')}`);
-      console.info(`Prerendering pages at ${serverAddress}`);
+  console.info('pages to generate', `\n ${compilation.graph.map(page => page.route).join('\n ')}`);
 
-      await runBrowser(serverAddress, pages, outputDir);
-      browserRunner.close();
+  await renderer(compilation, async (page, contents) => {
+    const { outputPath, route } = page;
 
-      console.info('done prerendering all pages');
+    console.info('generated page...', route);
 
-      resolve();
-    } catch (err) {
-      reject(err);
-    }
+    const html = await optimizePage(compilation, contents, route, outputPath, scratchDir);
+    await fs.promises.writeFile(path.join(scratchDir, outputPath), html);
   });
 }
 
@@ -200,7 +152,7 @@ async function staticRenderCompilation(compilation) {
     return plugin.provider(compilation);
   })[0];
 
-  console.info('pages to generate', `\n ${pages.map(page => page.path).join('\n ')}`);
+  console.info('pages to generate', `\n ${pages.map(page => page.route).join('\n ')}`);
   
   await Promise.all(pages.map(async (page) => {
     const { route, outputPath } = page;
@@ -211,14 +163,14 @@ async function staticRenderCompilation(compilation) {
 
     await fs.promises.writeFile(path.join(scratchDir, outputPath), html);
 
+    console.info('generated page...', route);
+
     return Promise.resolve();
   }));
-  
-  console.info('success, done generating all pages!');
 }
 
 export {
+  preRenderCompilationWorker,
   preRenderCompilationCustom,
-  preRenderCompilationDefault,
   staticRenderCompilation
 };
\ No newline at end of file
diff --git a/packages/cli/src/plugins/resource/plugin-standard-html.js b/packages/cli/src/plugins/resource/plugin-standard-html.js
index 289784400..0195e4227 100644
--- a/packages/cli/src/plugins/resource/plugin-standard-html.js
+++ b/packages/cli/src/plugins/resource/plugin-standard-html.js
@@ -263,7 +263,6 @@ const getAppTemplate = (contents, templatesDir, customImports = [], contextPlugi
 };
 
 const getUserScripts = (contents, context) => {
-  // polyfill chromium for WC support
   // https://lit.dev/docs/tools/requirements/#polyfills
   if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
     const { projectDirectory, userWorkspace } = context;
@@ -280,7 +279,6 @@ const getUserScripts = (contents, context) => {
     contents = contents.replace('<head>', `
       <head>
         ${litPolyfill}
-        <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     `);
   }
   return contents;
@@ -507,7 +505,6 @@ class StandardHtmlResource extends ResourceInterface {
           let contents = hasHead[0];
 
           contents = contents.replace(/<script src="(.*lit\/polyfill-support.js)"><\/script>/, '');
-          contents = contents.replace(/<script src="(.*webcomponents-bundle.js)"><\/script>/, '');
           contents = contents.replace(/<script type="importmap-shim">.*?<\/script>/s, '');
           contents = contents.replace(/<script defer="" src="(.*es-module-shims.js)"><\/script>/, '');
           contents = contents.replace(/type="module-shim"/g, 'type="module"');
diff --git a/packages/cli/test/cases/build.config.optimization-static/build.config-optimization-static.spec.js b/packages/cli/test/cases/build.config.optimization-static/build.config-optimization-static.spec.js
index 48caec0bc..19c3fb36f 100644
--- a/packages/cli/test/cases/build.config.optimization-static/build.config-optimization-static.spec.js
+++ b/packages/cli/test/cases/build.config.optimization-static/build.config-optimization-static.spec.js
@@ -1,6 +1,6 @@
 /*
  * Use Case
- * Run Greenwood build command with static setting for optimization and adds prerender to true to validate with puppeteer.
+ * Run Greenwood build command with static setting for optimization.
  *
  * User Result
  * Should generate a Greenwood build that strips all <script> tags and files from the final HTML and output.
@@ -10,8 +10,7 @@
  *
  * User Config
  * {
- *   optimization: 'static',
- *   prerender: true
+ *   optimization: 'static'
  * }
  *
  * Custom Workspace
@@ -25,7 +24,7 @@ import chai from 'chai';
 import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
-import { copyDirectory, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -47,9 +46,6 @@ describe('Build Greenwood With: ', function() {
   describe(LABEL, function() {
 
     before(async function() {
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, getSetupFiles(outputPath));
       await runner.runCommand(cliPath, 'build');
     });
@@ -78,13 +74,6 @@ describe('Build Greenwood With: ', function() {
 
         expect(scriptTags.length).to.be.equal(0);
       });
-
-      it('should contain the expected content from <app-header> in the <body>', function() {
-        const header = dom.window.document.querySelectorAll('body header');
-
-        expect(header.length).to.be.equal(1);
-        expect(header[0].textContent).to.be.equal('This is the header component.');
-      });
     });
   });
 
diff --git a/packages/cli/test/cases/build.config.optimization-static/greenwood.config.js b/packages/cli/test/cases/build.config.optimization-static/greenwood.config.js
index 4b0fb7c1f..55059cd7f 100644
--- a/packages/cli/test/cases/build.config.optimization-static/greenwood.config.js
+++ b/packages/cli/test/cases/build.config.optimization-static/greenwood.config.js
@@ -1,4 +1,3 @@
 export default {
-  optimization: 'static',
-  prerender: true
+  optimization: 'static'
 };
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender/build.config.prerender.spec.js b/packages/cli/test/cases/build.config.prerender/build.config.prerender.spec.js
index 23609c82a..1b0c6eb3a 100644
--- a/packages/cli/test/cases/build.config.prerender/build.config.prerender.spec.js
+++ b/packages/cli/test/cases/build.config.prerender/build.config.prerender.spec.js
@@ -21,18 +21,17 @@
  *     index.html
  */
 import chai from 'chai';
-import fs from 'fs/promises';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { getSetupFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
 const expect = chai.expect;
 
 describe('Build Greenwood With: ', function() {
-  const LABEL = 'Prerender Configuration turned off';
+  const LABEL = 'Prerender Configuration turned on';
   const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
   const outputPath = fileURLToPath(new URL('.', import.meta.url));
   let runner;
@@ -114,15 +113,9 @@ describe('Build Greenwood With: ', function() {
         expect(header[0].textContent).to.equal('This is the header component.');
       });
     });
+  });
 
-    after(async function() {
-      // using unlink instead of runner.teardown since when auto-install puppeteer
-      // our spawned process of a spawned process does not clean up as expected
-      await fs.rm(path.join(outputPath, 'package.json'), { recursive: true, force: true });
-      await fs.rm(path.join(outputPath, 'package-lock.json'), { recursive: true, force: true });
-      await fs.rm(path.join(outputPath, '.greenwood'), { recursive: true, force: true });
-      await fs.rm(path.join(outputPath, 'node_modules'), { recursive: true, force: true });
-      await fs.rm(path.join(outputPath, 'public'), { recursive: true, force: true });
-    });
+  after(async function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
   });
 });
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.config.prerender/src/components/header.js b/packages/cli/test/cases/build.config.prerender/src/components/header.js
index 4fb4641e6..271b77b0a 100644
--- a/packages/cli/test/cases/build.config.prerender/src/components/header.js
+++ b/packages/cli/test/cases/build.config.prerender/src/components/header.js
@@ -1,4 +1,6 @@
-class HeaderComponent extends HTMLElement {
+// note: this example is misleading in its understanding / use of shadow dom
+// but leaving it as since it should also technically work as written too
+export default class HeaderComponent extends HTMLElement {
   constructor() {
     super();
 
diff --git a/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js b/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js
index 5574e82d5..9b17bf736 100644
--- a/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js
+++ b/packages/cli/test/cases/build.default.import-node-modules/build.default.import-node-modules.spec.js
@@ -23,7 +23,7 @@ import chai from 'chai';
 import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -132,7 +132,7 @@ describe('Build Greenwood With: ', function() {
         `${process.cwd()}/node_modules/symbol-observable/es/*.js`, 
         `${outputPath}/node_modules/symbol-observable/es`
       );
-      const symobolLibsPackageJson = await getDependencyFiles(
+      const symbolLibsPackageJson = await getDependencyFiles(
         `${process.cwd()}/node_modules/symbol-observable/package.json`, 
         `${outputPath}/node_modules/symbol-observable/`
       );
@@ -169,8 +169,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/prismjs/`
       );
 
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...reduxLibs,
@@ -180,7 +178,7 @@ describe('Build Greenwood With: ', function() {
         ...tokensLibs,
         ...tokensLibsPackageJson,
         ...symbolLibs,
-        ...symobolLibsPackageJson,
+        ...symbolLibsPackageJson,
         ...lit,
         ...litPackageJson,
         ...litDirectives,
@@ -226,48 +224,13 @@ describe('Build Greenwood With: ', function() {
       it('should have the expected main.js file in the output directory', async function() {
         expect(await glob.promise(path.join(this.context.publicDir, 'main.*.js'))).to.have.lengthOf(1);
       });
-
-      it('should have the expected output from main.js for lit (ESM) in the page output', async function() {
-        const litOutput = dom.window.document.querySelectorAll('body > .output-lit');
-        
-        expect(litOutput.length).to.be.equal(1);
-        expect(litOutput[0].textContent).to.be.equal('import from lit W29iamVjdCBIVE1M');
-      });
-
-      it('should have the expected output from main.js for lodash-es (ESM) in the page output', async function() {
-        const litOutput = dom.window.document.querySelectorAll('body > .output-lodash');
-        
-        expect(litOutput.length).to.be.equal(1);
-        expect(litOutput[0].textContent).to.be.equal('import from lodash-es {"a":1,"b":2}');
-      });
-
-      it('should have the expected output from main.js for pwa-helpers (ESM) in the page output', async function() {
-        const litOutput = dom.window.document.querySelectorAll('body > .output-pwa');
-        
-        expect(litOutput.length).to.be.equal(1);
-        expect(litOutput[0].textContent).to.be.equal('import from pwa-helpers KGNvbWJpbmVSZWR1');
-      });
-
-      it('should have the expected output from main.js for Redux (MJS) in the page output', async function() {
-        const reduxOutput = dom.window.document.querySelectorAll('body > .output-redux');
-        
-        expect(reduxOutput.length).to.be.equal(1);
-        expect(reduxOutput[0].textContent).to.be.equal('import from redux ZnVuY3Rpb24gbyh0');
-      });
-
-      it('should have the expected output from main.js for try / catch error of no error text', async function() {
-        const errorOutput = dom.window.document.querySelectorAll('body > .output-error');
-        
-        expect(errorOutput.length).to.be.equal(1);
-        expect(errorOutput[0].textContent).to.be.equal('');
-      });
     });
 
     describe('<script> tag with inline code in the <head> tag', function() {
       it('should have one <script> tag with inline code loaded in the <head> tag', function() {
         const scriptTagsInline = dom.window.document.querySelectorAll('head > script:not([src])');
         
-        expect(scriptTagsInline.length).to.be.equal(2);
+        expect(scriptTagsInline.length).to.be.equal(1);
       });
 
       it('should have the expected lit related files in the output directory', async function() {
@@ -278,21 +241,7 @@ describe('Build Greenwood With: ', function() {
         const inlineScriptTag = dom.window.document.querySelectorAll('head > script:not([src])')[0];
         
         expect(inlineScriptTag.textContent.replace('\n', '')).to
-          // eslint-disable-next-line max-len
-          .equal('import"/lit-element.ae169679.js";import"/lit-html.7f7a9139.js";document.getElementsByClassName("output-script-inline")[0].innerHTML="script tag module inline"//# sourceMappingURL=1807818843-scratch.ee52d4f0.js.map');
-      });
-
-      it('should have the expected inline node_modules content in the second inline script tag which should include extra code from rollup', async function() {
-        const inlineScriptTag = dom.window.document.querySelectorAll('head > script:not([src])')[1];
-
-        expect(inlineScriptTag.textContent.replace('\n', '')).to.equal('import"/lit-element.ae169679.js";import"/lit-html.7f7a9139.js";//# sourceMappingURL=2012376258-scratch.0a6fc17c.js.map');
-      });
-
-      it('should have the expected output from the first inline <script> tag in the page output', async function() {
-        const inlineScriptOutput = dom.window.document.querySelectorAll('body > .output-script-inline');
-        
-        expect(inlineScriptOutput.length).to.be.equal(1);
-        expect(inlineScriptOutput[0].textContent).to.be.equal('script tag module inline');
+          .equal('import"/lit-element.ae169679.js";import"/lit-html.7f7a9139.js";//# sourceMappingURL=2012376258-scratch.0a6fc17c.js.map');
       });
     });
 
diff --git a/packages/cli/test/cases/build.default.import-node-modules/greenwood.config.js b/packages/cli/test/cases/build.default.import-node-modules/greenwood.config.js
deleted file mode 100644
index 8dc4be464..000000000
--- a/packages/cli/test/cases/build.default.import-node-modules/greenwood.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  prerender: true
-};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.import-node-modules/src/pages/index.html b/packages/cli/test/cases/build.default.import-node-modules/src/pages/index.html
index 0e041a0e4..9d79257ca 100644
--- a/packages/cli/test/cases/build.default.import-node-modules/src/pages/index.html
+++ b/packages/cli/test/cases/build.default.import-node-modules/src/pages/index.html
@@ -3,11 +3,6 @@
 
   <head>
     <script type="module" src="../scripts/main.js"></script>
-    <script type="module">
-      import { html } from 'lit';
-
-      document.getElementsByClassName('output-script-inline')[0].innerHTML = 'script tag module inline';
-    </script>
     <script type="module">
       import { html } from 'lit';
     </script>
@@ -15,13 +10,4 @@
     <link rel="stylesheet" href="/node_modules/prismjs/themes/prism-tomorrow.css"></link>
   </head>
 
-  <body>
-    <span class="output-lit"></span>
-    <span class="output-lodash"></span>
-    <span class="output-pwa"></span>
-    <span class="output-redux"></span>
-    <span class="output-script-inline"></span>
-    <span class="output-error"></span>
-  </body>
-
 </html>
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.quick-start-npx/build.default.quick-start-npx.spec.js b/packages/cli/test/cases/build.default.quick-start-npx/build.default.quick-start-npx.spec.js
index 0321b6c36..03c6d2344 100644
--- a/packages/cli/test/cases/build.default.quick-start-npx/build.default.quick-start-npx.spec.js
+++ b/packages/cli/test/cases/build.default.quick-start-npx/build.default.quick-start-npx.spec.js
@@ -55,7 +55,7 @@ describe('Build Greenwood With: ', function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, './index.html'));
       });
 
-      xdescribe('head section tags', function() {
+      describe('head section tags', function() {
         let metaTags;
 
         before(function() {
diff --git a/packages/cli/test/cases/build.default.spa/build.default.spa.spec.js b/packages/cli/test/cases/build.default.spa/build.default.spa.spec.js
index f99381ca8..f44518c5b 100644
--- a/packages/cli/test/cases/build.default.spa/build.default.spa.spec.js
+++ b/packages/cli/test/cases/build.default.spa/build.default.spa.spec.js
@@ -163,7 +163,7 @@ describe('Build Greenwood With: ', function() {
         `${process.cwd()}/node_modules/symbol-observable/es/*.js`,
         `${outputPath}/node_modules/symbol-observable/es`
       );
-      const symobolLibsPackageJson = await getDependencyFiles(
+      const symbolLibsPackageJson = await getDependencyFiles(
         `${process.cwd()}/node_modules/symbol-observable/package.json`,
         `${outputPath}/node_modules/symbol-observable/`
       );
@@ -206,7 +206,7 @@ describe('Build Greenwood With: ', function() {
         ...tokensLibs,
         ...tokensLibsPackageJson,
         ...symbolLibs,
-        ...symobolLibsPackageJson,
+        ...symbolLibsPackageJson,
         ...reduxThunkPackageJson,
         ...reduxThunk
       ]);
diff --git a/packages/cli/test/cases/build.default.ssr-static-export/greenwood.config.js b/packages/cli/test/cases/build.default.ssr-static-export/greenwood.config.js
deleted file mode 100644
index b31c8b19b..000000000
--- a/packages/cli/test/cases/build.default.ssr-static-export/greenwood.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  prerender: false // TODO should allow this to be false and mix and match rendering options
-};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/build.default.workspace-frontmatter-imports.spec.js b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/build.default.workspace-frontmatter-imports.spec.js
index 58916c211..9e8295f4d 100644
--- a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/build.default.workspace-frontmatter-imports.spec.js
+++ b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/build.default.workspace-frontmatter-imports.spec.js
@@ -30,7 +30,7 @@ import fs from 'fs';
 import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
-import { copyDirectory, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
@@ -53,21 +53,18 @@ describe('Build Greenwood With: ', function() {
   describe(LABEL, function() {
 
     before(async function() {
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, getSetupFiles(outputPath));
       await runner.runCommand(cliPath, 'build');
     });
-    
+
     runSmokeTest(['public', 'index'], LABEL);
-  
-    describe('Content and file output for the Counter page', function() {
+
+    describe('Content and file output for the Demo page', function() {
       let dom;
       let html;
 
       before(async function() {
-        const htmlPath = path.resolve(this.context.publicDir, 'examples/counter', 'index.html');
+        const htmlPath = path.resolve(this.context.publicDir, 'examples/demo', 'index.html');
 
         dom = await JSDOM.fromFile(path.resolve(htmlPath));
         html = await fs.promises.readFile(htmlPath, 'utf-8');
@@ -85,14 +82,20 @@ describe('Build Greenwood With: ', function() {
         expect(jsFiles).to.have.lengthOf(1);
       });
 
+      it('should output a multi-hyphen.js file from frontmatter import', async function() {
+        const jsFiles = await glob.promise(`${this.context.publicDir}**/**/multi-hyphen.*.js`);
+          
+        expect(jsFiles).to.have.lengthOf(1);
+      });
+
       it('should a page heading', function() {
         const heading = dom.window.document.querySelectorAll('body h2');
 
         expect(heading.length).to.be.equal(1);
-        expect(heading[0].textContent).to.be.equal('Counter Page Example');
+        expect(heading[0].textContent).to.be.equal('Demo Page Example');
       });
 
-      describe('Counter <x-counter> component from front matter', () => {
+      describe('Counter <x-counter> component from front matter that is prerendered', () => {
         it('should output a custom <x-counter> tag that', function() {
           const counter = dom.window.document.querySelectorAll('body x-counter');
   
@@ -105,43 +108,25 @@ describe('Build Greenwood With: ', function() {
         });
   
         it('should output a heading tag from the custom element', function() {
-          const heading = dom.window.document.querySelectorAll('body h3');
-  
-          expect(heading.length).to.be.equal(1);
-          expect(heading[0].textContent).to.be.equal('My Counter');
-        });
-      });
-
-      describe('Custom <app-header> component', () => {
-        it('should output a custom <app-header> tag that', function() {
-          const header = dom.window.document.querySelectorAll('body app-header');
-  
-          expect(header.length).to.be.equal(1);
-        });
-  
-        it('should output a <app-header> tag that is _not_ wrapped in a <p> tag', function() {
-          expect((/<p><app-header>/).test(html)).to.be.false;
-          expect((/<\/app-header><\/p>/).test(html)).to.be.false;
-        });
-  
-        it('should output a <app-header> tag with expected content', function() {
-          const header = dom.window.document.querySelectorAll('body app-header');
-  
-          expect(header[0].textContent).to.be.equal('I am a header');
+          expect(html).to.contain('<h3>My Counter</h3>');
         });
       });
 
-      describe('Custom Multihypen component', () => {
-        it('should output a custom <multihyphen-custom-element> tag that', function() {
-          const header = dom.window.document.querySelectorAll('body multihyphen-custom-element');
+      describe('Custom Multihyphen component', () => {
+        it('should output a custom <multihyphen-custom-element> tag', function() {
+          const hyphen = dom.window.document.querySelectorAll('body multihyphen-custom-element');
   
-          expect(header.length).to.be.equal(1);
+          expect(hyphen.length).to.be.equal(1);
         });
   
         it('should output a <multihyphen-custom-element> tag that is _not_ wrapped in a <p> tag', function() {
           expect((/<p><multihyphen-custom-element>/).test(html)).to.be.false;
           expect((/<\/multihyphen-custom-element><\/p>/).test(html)).to.be.false;
         });
+
+        it('should have the expected prerendered content', function() {
+          expect(html).to.contain('I have multiple hyphens in my tag name!');
+        });
       });
     });
   });
diff --git a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/counter/counter.js b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/counter/counter.js
index b102faa27..e1296f7b1 100644
--- a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/counter/counter.js
+++ b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/counter/counter.js
@@ -12,18 +12,17 @@ template.innerHTML = `
   <button id="inc">+</button>
 `;
 
-class MyCounter extends HTMLElement {
+export default class MyCounter extends HTMLElement {
   constructor() {
     super();
     this.count = 0;
-    this.attachShadow({ mode: 'open' });
   }
 
-  async connectedCallback() {    
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-    this.shadowRoot.getElementById('inc').onclick = () => this.inc();
-    this.shadowRoot.getElementById('dec').onclick = () => this.dec();
-    this.update();
+  async connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
   }
 
   inc() {
diff --git a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/multi-hyphen/multi-hyphen.js b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/multi-hyphen/multi-hyphen.js
new file mode 100644
index 000000000..e48a71f3b
--- /dev/null
+++ b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/components/multi-hyphen/multi-hyphen.js
@@ -0,0 +1,16 @@
+const template = document.createElement('template');
+      
+template.innerHTML = `
+  <p>I have multiple hyphens in my tag name!</p>
+`;
+
+export default class MultiHyphen extends HTMLElement {
+  async connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('multihyphen-custom-element', MultiHyphen);
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/counter.md b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/demo.md
similarity index 67%
rename from packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/counter.md
rename to packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/demo.md
index c77fc15f7..c67290c5f 100644
--- a/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/counter.md
+++ b/packages/cli/test/cases/build.default.workspace-frontmatter-imports/src/pages/examples/demo.md
@@ -1,14 +1,13 @@
 ---
-title: Counter Page
+title: Demo Page
 imports:
   - /components/counter/counter.js
   - /components/counter/counter.css
+  - /components/multi-hyphen/multi-hyphen.js
 ---
 
-## Counter Page Example
+## Demo Page Example
 
 <x-counter></x-counter>
 
-<app-header>I am a header</app-header>
-
 <multihyphen-custom-element></multihyphen-custom-element>
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js b/packages/cli/test/cases/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js
index b81acca3c..19579c28a 100644
--- a/packages/cli/test/cases/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js
+++ b/packages/cli/test/cases/build.default.workspace-javascript-css/build.default.workspace-javascript-css.spec.js
@@ -1,7 +1,6 @@
 /*
  * Use Case
- * Run Greenwood with various usages of JavaScript (<script>) and CSS (<style> / <link>) tags, with inlined or file based content.
- * Takes advantage of prerendering to validate a more complete (server rendered) example.
+ * Run Greenwood with various usages of JavaScript (<script>) and CSS (<style> / <link>) tags.
  * 
  * Uaer Result
  * Should generate a bare bones Greenwood build without erroring.
@@ -10,15 +9,13 @@
  * greenwood build
  *
  * User Config
- * export default {
- *   prerender: true
- * };
  *
  * User Workspace
  * src/
  *   pages/
  *     index.html
  *   scripts/
+ *     non-module.js
  *     other.js
  *   styles/
  *     main.css
@@ -28,7 +25,7 @@ import chai from 'chai';
 import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
-import { copyDirectory, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -51,9 +48,6 @@ describe('Build Greenwood With: ', function() {
     let dom;
 
     before(async function() {
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, getSetupFiles(outputPath));
       await runner.runCommand(cliPath, 'build');
 
@@ -61,15 +55,6 @@ describe('Build Greenwood With: ', function() {
     });
 
     describe('<script type="module" src="..."></script> tags in the <head>', function() {
-      it('should have one <script> tag for main.js loaded in the <head>', function() {
-        const scriptTags = dom.window.document.querySelectorAll('head > script[type="module"]');
-        const mainScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
-          return (/main.*.js/).test(script.src);
-        });
-        
-        expect(mainScriptTags.length).to.be.equal(1);
-      });
-
       it('should have one <script> tag for other.js loaded in the <head>', function() {
         const scriptTags = dom.window.document.querySelectorAll('head > script[type="module"]');
         const mainScriptTags = Array.prototype.slice.call(scriptTags).filter(script => {
@@ -81,22 +66,12 @@ describe('Build Greenwood With: ', function() {
 
       // this includes the non module file in a spec below
       it('should have the expected number of bundled .js files in the output directory', async function() {
-        expect(await glob.promise(path.join(this.context.publicDir, '*.js'))).to.have.lengthOf(3);
-      });
-
-      it('should have the expected main.js file in the output directory', async function() {
-        expect(await glob.promise(path.join(this.context.publicDir, 'main.*.js'))).to.have.lengthOf(1);
+        expect(await glob.promise(path.join(this.context.publicDir, '*.js'))).to.have.lengthOf(2);
       });
 
       it('should have the expected other.js file in the output directory', async function() {
         expect(await glob.promise(path.join(this.context.publicDir, 'other.*.js'))).to.have.lengthOf(1);
       });
-
-      it('should have the expected output from main.js file in index.html', async function() {
-        const scriptTagSrc = dom.window.document.querySelector('body > .output-script-src');
-
-        expect(scriptTagSrc.textContent).to.be.equal('script tag module with src');
-      });
     });
 
     describe('<script ...>...</script> tag in the <head> with mixed attribute ordering', function() {
@@ -112,23 +87,11 @@ describe('Build Greenwood With: ', function() {
         expect(scriptTagSrcOne.textContent).to.be.contain('document.getElementsByClassName("output-script-inline-one")[0].innerHTML="script tag module inline one"');
       });
 
-      it('should have the expected output from inline <script> tag one in index.html', async function() {
-        const scriptTagOneOutput = dom.window.document.querySelector('body > .output-script-inline-one');
-
-        expect(scriptTagOneOutput.textContent).to.be.equal('script tag module inline one');
-      });
-
       it('should have the expected inline content from inline <script> tag two in index.html', async function() {
         const scriptTagSrcTwo = dom.window.document.querySelectorAll('head > script:not([src])')[1];
 
         expect(scriptTagSrcTwo.textContent).to.be.contain('document.getElementsByClassName("output-script-inline-two")[0].innerHTML="script tag module inline two"');
       });
-      
-      it('should have the expected output from inline <script> tag two in index.html', async function() {
-        const scriptTagTwoOutput = dom.window.document.querySelector('body > .output-script-inline-two');
-
-        expect(scriptTagTwoOutput.textContent).to.be.contain('script tag module inline two');
-      });
 
       it('should have the expected inline content from inline <script> tag three in index.html', async function() {
         const scriptTagSrcTwo = dom.window.document.querySelectorAll('head > script:not([src])')[2];
@@ -151,34 +114,25 @@ describe('Build Greenwood With: ', function() {
       it('should have the expected non-module.js file in the output directory', async function() {
         expect(await glob.promise(path.join(this.context.publicDir, 'non-module.*.js'))).to.have.lengthOf(1);
       });
-
-      it('should have the expected output from non-module.js file in index.html', async function() {
-        const scriptTagSrc = dom.window.document.querySelector('body > .output-script-non-module');
-
-        expect(scriptTagSrc.textContent).to.be.equal('script tag non module with src');
-      });
     });
 
     describe('<style>...</style> tag in the <head>', function() {
       it('should have one <style> tag in the <head>', function() {
         const styleTags = dom.window.document.querySelectorAll('head > style');
-        
-        // first <style> tag comes from puppeteer output
-        expect(styleTags.length).to.be.equal(3);
+
+        expect(styleTags.length).to.be.equal(2);
       });
 
       it('should have the expected output from the first inline <style> tag in index.html', async function() {
         const styleTags = dom.window.document.querySelectorAll('head > style');
 
-        // first <style> tag comes from puppeteer output
-        expect(styleTags[1].textContent.replace(/\n/g, '').trim().replace(' ', '')).to.be.contain('p.output-style{        color: green;      }');
+        expect(styleTags[0].textContent.replace(/\n/g, '').trim().replace(' ', '')).to.be.contain('p.output-style{        color: green;      }');
       });
 
       it('should have the expected output from the second inline <style> tag in index.html', async function() {
         const styleTags = dom.window.document.querySelectorAll('head > style');
 
-        // first <style> tag comes from puppeteer output
-        expect(styleTags[2].textContent.replace(/\n/g, '').trim().replace(' ', '')).to.be.contain('span.output-style{        color: red;      }');
+        expect(styleTags[1].textContent.replace(/\n/g, '').trim().replace(' ', '')).to.be.contain('span.output-style{        color: red;      }');
       });
 
       it('should have the color style for the output element', function() {
diff --git a/packages/cli/test/cases/build.default.workspace-javascript-css/greenwood.config.js b/packages/cli/test/cases/build.default.workspace-javascript-css/greenwood.config.js
deleted file mode 100644
index 8dc4be464..000000000
--- a/packages/cli/test/cases/build.default.workspace-javascript-css/greenwood.config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export default {
-  prerender: true
-};
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.default.workspace-javascript-css/src/pages/index.html b/packages/cli/test/cases/build.default.workspace-javascript-css/src/pages/index.html
index fcfa869c0..820fb8c4d 100644
--- a/packages/cli/test/cases/build.default.workspace-javascript-css/src/pages/index.html
+++ b/packages/cli/test/cases/build.default.workspace-javascript-css/src/pages/index.html
@@ -2,7 +2,6 @@
 <html lang="en" prefix="og:http://ogp.me/ns#">
 
   <head>
-    <script type="module" src="../scripts/main.js"></script>
     <script src="../scripts/other.js" type="module"></script>
     
     <script type="module">
diff --git a/packages/cli/test/cases/build.default.workspace-javascript-css/src/scripts/main.js b/packages/cli/test/cases/build.default.workspace-javascript-css/src/scripts/main.js
deleted file mode 100644
index c977bde13..000000000
--- a/packages/cli/test/cases/build.default.workspace-javascript-css/src/scripts/main.js
+++ /dev/null
@@ -1 +0,0 @@
-document.getElementsByClassName('output-script-src')[0].innerHTML = 'script tag module with src';
\ No newline at end of file
diff --git a/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js b/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js
index 70d85e410..a2d9371af 100644
--- a/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js
+++ b/packages/cli/test/cases/build.plugins.resource/build.config.plugins-resource.spec.js
@@ -1,6 +1,6 @@
 /*
  * Use Case
- * Run Greenwood with a custom resource plugin and default workspace.  Uses prerender to validate this functionality.
+ * Run Greenwood with a custom resource plugin and default workspace.
  *
  * Uaer Result
  * Should generate a bare bones Greenwood build with expected custom file (.foo) behavior.
@@ -14,7 +14,6 @@
  * }
  * 
  * {
- *   prerender: true,
  *   plugins: [{
  *     type: 'resource',
  *     name: 'plugin-foo',
@@ -31,9 +30,10 @@
  *     my-other-custom-file.foo
  */
 import chai from 'chai';
-import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import glob from 'glob-promise';
 import path from 'path';
-import { copyDirectory, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -54,24 +54,25 @@ describe('Build Greenwood With: ', function() {
 
   describe(LABEL, function() {
     before(async function() {
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, getSetupFiles(outputPath));
       await runner.runCommand(cliPath, 'build');
     });
 
     describe('Transpiling and DOM Manipulation', function() {
-      let dom;
+      let files;
 
       before(async function() {
-        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+        files = await glob.promise(path.join(this.context.publicDir, '*.js'));
+      });
+
+      it('should have the expected JavaScript equivalent file in the output directory', function() {
+        expect(files).to.have.lengthOf(1);
       });
 
-      it('should have expected text executed from my-custom-file.foo in the DOM', function() {
-        const placeholder = dom.window.document.querySelector('body h6');
+      it('should have expected text from from my-other-custom-file.foo in the script output file', function() {
+        const contents = fs.readFileSync(files[0], 'utf-8');
 
-        expect(placeholder.textContent).to.be.equal('hello from my-custom-file.foo');
+        expect(contents).to.contain('hello from some-other-custom-file.foo!');
       });
     });
   });
diff --git a/packages/cli/test/cases/build.plugins.resource/greenwood.config.js b/packages/cli/test/cases/build.plugins.resource/greenwood.config.js
index e6573c304..18265ec27 100644
--- a/packages/cli/test/cases/build.plugins.resource/greenwood.config.js
+++ b/packages/cli/test/cases/build.plugins.resource/greenwood.config.js
@@ -28,7 +28,6 @@ class FooResource extends ResourceInterface {
 }
 
 export default {
-  prerender: true,
   plugins: [{
     type: 'resource',
     name: 'plugin-foo',
diff --git a/packages/cli/test/cases/develop.default/develop.default.spec.js b/packages/cli/test/cases/develop.default/develop.default.spec.js
index 4d715f709..c1d9e06d6 100644
--- a/packages/cli/test/cases/develop.default/develop.default.spec.js
+++ b/packages/cli/test/cases/develop.default/develop.default.spec.js
@@ -614,7 +614,7 @@ describe('Develop Greenwood With: ', function() {
       });
     });
 
-    describe('Develop command specific JavaScript behaviors', function() {
+    describe('Develop command specific JavaScript behaviors for user authored custom element', function() {
       let response = {};
 
       before(async function() {
diff --git a/packages/init/test/cases/build.default/build.default.spec.js b/packages/init/test/cases/build.default/build.default.spec.js
index e490f7c72..4bdafc670 100644
--- a/packages/init/test/cases/build.default/build.default.spec.js
+++ b/packages/init/test/cases/build.default/build.default.spec.js
@@ -20,6 +20,7 @@ import { fileURLToPath, URL } from 'url';
 
 const expect = chai.expect;
 
+// https://github.com/ProjectEvergreen/greenwood/issues/787
 xdescribe('Scaffold Greenwood and Run Build command: ', function() {
   const LABEL = 'Default Greenwood Configuration and Workspace';
   const initPath = path.join(process.cwd(), 'packages/init/src/index.js');
diff --git a/packages/init/test/cases/develop.default/develop.default.spec.js b/packages/init/test/cases/develop.default/develop.default.spec.js
index 2ccd1dda2..9cf7ecc51 100644
--- a/packages/init/test/cases/develop.default/develop.default.spec.js
+++ b/packages/init/test/cases/develop.default/develop.default.spec.js
@@ -23,6 +23,7 @@ import { fileURLToPath, URL } from 'url';
 
 const expect = chai.expect;
 
+// https://github.com/ProjectEvergreen/greenwood/issues/787
 xdescribe('Scaffold Greenwood and Run Develop command: ', function() {
   const initPath = path.join(process.cwd(), 'packages/init/src/index.js');
   const outputPath = fileURLToPath(new URL('./my-app', import.meta.url));
diff --git a/packages/init/test/cases/init.yarn/init.yarn.spec.js b/packages/init/test/cases/init.yarn/init.yarn.spec.js
index 4e8afa0e5..043c6385b 100644
--- a/packages/init/test/cases/init.yarn/init.yarn.spec.js
+++ b/packages/init/test/cases/init.yarn/init.yarn.spec.js
@@ -20,6 +20,7 @@ import { fileURLToPath, URL } from 'url';
 
 const expect = chai.expect;
 
+// https://github.com/ProjectEvergreen/greenwood/issues/787
 xdescribe('Scaffold Greenwood With Yarn: ', function() {
   const LABEL = 'Default Greenwood Configuration and Workspace';
   const initPath = path.join(process.cwd(), 'packages/init/src/index.js');
diff --git a/packages/plugin-graphql/README.md b/packages/plugin-graphql/README.md
index 7dfd077a0..140a39597 100644
--- a/packages/plugin-graphql/README.md
+++ b/packages/plugin-graphql/README.md
@@ -1,14 +1,28 @@
 # @greenwood/plugin-graphql
 
 ## Overview
-A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query your content graph.  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend and provides an [**@apollo/client** like](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend.
+A plugin for Greenwood to support using [GraphQL](https://graphql.org/) to query Greenwood's content graph.  It runs [**apollo-server**](https://www.apollographql.com/docs/apollo-server/) on the backend and provides an [**@apollo/client** _"like"_](https://www.apollographql.com/docs/react/api/core/ApolloClient/#ApolloClient.readQuery) interface for the frontend that you can use.
 
 > This package assumes you already have `@greenwood/cli` installed.
 
+## Caveats
+
+As of now, this plugin can only be used in conjunction with our [Puppeteer rendering plugin](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer).  Please make sure you have it installed first to get the benefits of this plugin.
+
+```bash
+# npm
+npm install @greenwood/plugin-renderer-puppeteer --save-dev
+
+# yarn
+yarn add  @greenwood/plugin-renderer-puppeteer --dev
+```
+
+> _We are working on re-evaluating and improving our [data loading](https://github.com/ProjectEvergreen/greenwood/issues/952) and [rendering strategies](https://github.com/ProjectEvergreen/greenwood/issues/951) as part of our [1.0 release](https://github.com/ProjectEvergreen/greenwood/milestone/3)._
+
+
 ## Installation
 You can use your favorite JavaScript package manager to install this package.
 
-_examples:_
 ```bash
 # npm
 npm install @greenwood/plugin-graphql --save-dev
@@ -18,22 +32,24 @@ yarn add @greenwood/plugin-graphql --dev
 ```
 
 ## Usage
-Add this plugin to your _greenwood.config.js_ and spread the `export`.
+Add this plugin and the Puppeteer plugins to your _greenwood.config.js_.
 
 ```javascript
 import { greenwoodPluginGraphQL } from '@greenwood/plugin-graphql';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
   ...
 
   plugins: [
-    ...greenwoodPluginGraphQL() // notice the spread ... !
+    ...greenwoodPluginGraphQL(), // notice the spread ... !
+    ...greenwoodPluginRendererPuppeteer() // notice the spread ... !
   ]
 }
 ```
 
 ## Example
-This will then allow you to use GraphQL to query your content.
+This will then allow you to use GraphQL to query your content from your client side.  At build time, it will generate JSON files so that the data is still accessible statically.
 
 ```js
 import client from '@greenwood/plugin-graphql/core/client';
diff --git a/packages/plugin-graphql/test/cases/query-children/greenwood.config.js b/packages/plugin-graphql/test/cases/query-children/greenwood.config.js
index 1322c5629..556625d69 100644
--- a/packages/plugin-graphql/test/cases/query-children/greenwood.config.js
+++ b/packages/plugin-graphql/test/cases/query-children/greenwood.config.js
@@ -1,12 +1,12 @@
 import { greenwoodPluginGraphQL } from '../../../src/index.js';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  title: 'GraphQL CHildrenQuery Spec',
-
-  prerender: true,
+  title: 'GraphQL ChildrenQuery Spec',
 
   plugins: [
-    ...greenwoodPluginGraphQL()
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
   ]
 
 };
\ No newline at end of file
diff --git a/packages/plugin-graphql/test/cases/query-children/query-children.spec.js b/packages/plugin-graphql/test/cases/query-children/query-children.spec.js
index 1b17a33ff..596a5928f 100644
--- a/packages/plugin-graphql/test/cases/query-children/query-children.spec.js
+++ b/packages/plugin-graphql/test/cases/query-children/query-children.spec.js
@@ -30,7 +30,7 @@ import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -120,9 +120,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/@lit/reactive-element/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...greenwoodGraphqlCoreLibs,
diff --git a/packages/plugin-graphql/test/cases/query-config/greenwood.config.js b/packages/plugin-graphql/test/cases/query-config/greenwood.config.js
index ba2e56655..c38b0c8dd 100644
--- a/packages/plugin-graphql/test/cases/query-config/greenwood.config.js
+++ b/packages/plugin-graphql/test/cases/query-config/greenwood.config.js
@@ -1,11 +1,11 @@
 import { greenwoodPluginGraphQL } from '../../../src/index.js';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
 
-  prerender: true,
-
   plugins: [
-    ...greenwoodPluginGraphQL()
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
   ]
 
 };
\ No newline at end of file
diff --git a/packages/plugin-graphql/test/cases/query-config/query-config.spec.js b/packages/plugin-graphql/test/cases/query-config/query-config.spec.js
index 6f0272d56..a964d0e09 100644
--- a/packages/plugin-graphql/test/cases/query-config/query-config.spec.js
+++ b/packages/plugin-graphql/test/cases/query-config/query-config.spec.js
@@ -26,7 +26,7 @@ import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -58,9 +58,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/@greenwood/plugin-graphql/src/queries/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [ 
         ...getSetupFiles(outputPath),
         ...greenwoodGraphqlCoreLibs,
diff --git a/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js b/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js
index 447834f5d..c38b0c8dd 100644
--- a/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js
+++ b/packages/plugin-graphql/test/cases/query-custom-frontmatter/greenwood.config.js
@@ -1,10 +1,11 @@
 import { greenwoodPluginGraphQL } from '../../../src/index.js';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  prerender: true,
 
   plugins: [
-    ...greenwoodPluginGraphQL()
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
   ]
 
 };
\ No newline at end of file
diff --git a/packages/plugin-graphql/test/cases/query-custom-frontmatter/query-custom-frontmatter.spec.js b/packages/plugin-graphql/test/cases/query-custom-frontmatter/query-custom-frontmatter.spec.js
index 2c8aecb3f..d6a83c170 100644
--- a/packages/plugin-graphql/test/cases/query-custom-frontmatter/query-custom-frontmatter.spec.js
+++ b/packages/plugin-graphql/test/cases/query-custom-frontmatter/query-custom-frontmatter.spec.js
@@ -32,7 +32,7 @@ import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -122,9 +122,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/@lit/reactive-element/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...greenwoodGraphqlCoreLibs,
diff --git a/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js b/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js
index 447834f5d..c38b0c8dd 100644
--- a/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js
+++ b/packages/plugin-graphql/test/cases/query-custom-schema/greenwood.config.js
@@ -1,10 +1,11 @@
 import { greenwoodPluginGraphQL } from '../../../src/index.js';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  prerender: true,
 
   plugins: [
-    ...greenwoodPluginGraphQL()
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
   ]
 
 };
\ No newline at end of file
diff --git a/packages/plugin-graphql/test/cases/query-custom-schema/query-custom-schema.spec.js b/packages/plugin-graphql/test/cases/query-custom-schema/query-custom-schema.spec.js
index 2ac576671..8d99a8f49 100644
--- a/packages/plugin-graphql/test/cases/query-custom-schema/query-custom-schema.spec.js
+++ b/packages/plugin-graphql/test/cases/query-custom-schema/query-custom-schema.spec.js
@@ -27,7 +27,7 @@ import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -55,9 +55,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/@greenwood/plugin-graphql/src/core/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...greenwoodGraphqlCoreLibs
diff --git a/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js b/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js
index 447834f5d..c38b0c8dd 100644
--- a/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js
+++ b/packages/plugin-graphql/test/cases/query-graph/greenwood.config.js
@@ -1,10 +1,11 @@
 import { greenwoodPluginGraphQL } from '../../../src/index.js';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  prerender: true,
 
   plugins: [
-    ...greenwoodPluginGraphQL()
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
   ]
 
 };
\ No newline at end of file
diff --git a/packages/plugin-graphql/test/cases/query-graph/query-graph.spec.js b/packages/plugin-graphql/test/cases/query-graph/query-graph.spec.js
index b0a7d1b46..7ec91861d 100644
--- a/packages/plugin-graphql/test/cases/query-graph/query-graph.spec.js
+++ b/packages/plugin-graphql/test/cases/query-graph/query-graph.spec.js
@@ -28,7 +28,7 @@ import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -118,9 +118,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/@lit/reactive-element/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...greenwoodGraphqlCoreLibs,
diff --git a/packages/plugin-graphql/test/cases/query-menu/greenwood.config.js b/packages/plugin-graphql/test/cases/query-menu/greenwood.config.js
index 447834f5d..c38b0c8dd 100644
--- a/packages/plugin-graphql/test/cases/query-menu/greenwood.config.js
+++ b/packages/plugin-graphql/test/cases/query-menu/greenwood.config.js
@@ -1,10 +1,11 @@
 import { greenwoodPluginGraphQL } from '../../../src/index.js';
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
 
 export default {
-  prerender: true,
 
   plugins: [
-    ...greenwoodPluginGraphQL()
+    ...greenwoodPluginGraphQL(),
+    ...greenwoodPluginRendererPuppeteer() // automatically invokes prerendering
   ]
 
 };
\ No newline at end of file
diff --git a/packages/plugin-graphql/test/cases/query-menu/query-menu.spec.js b/packages/plugin-graphql/test/cases/query-menu/query-menu.spec.js
index a2c0190d0..24a4b1024 100644
--- a/packages/plugin-graphql/test/cases/query-menu/query-menu.spec.js
+++ b/packages/plugin-graphql/test/cases/query-menu/query-menu.spec.js
@@ -30,7 +30,7 @@ import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -120,9 +120,6 @@ describe('Build Greenwood With: ', async function() {
         `${outputPath}/node_modules/@lit/reactive-element/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...greenwoodGraphqlCoreLibs,
diff --git a/packages/plugin-import-commonjs/test/cases/default/default.spec.js b/packages/plugin-import-commonjs/test/cases/default/default.spec.js
index b52640239..99b9b2326 100644
--- a/packages/plugin-import-commonjs/test/cases/default/default.spec.js
+++ b/packages/plugin-import-commonjs/test/cases/default/default.spec.js
@@ -26,11 +26,12 @@
  *     main.js
  */
 import chai from 'chai';
+import fs from 'fs';
 import glob from 'glob-promise';
 import { JSDOM } from 'jsdom';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getDependencyFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -60,9 +61,6 @@ describe('Build Greenwood With: ', function() {
         `${outputPath}/node_modules/lodash/`
       );
 
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, [
         ...getSetupFiles(outputPath),
         ...lodashLibs,
@@ -75,9 +73,11 @@ describe('Build Greenwood With: ', function() {
 
     describe('Script tag in the <head> tag', function() {
       let dom;
+      let scripts;
 
       before(async function() {
         dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+        scripts = await glob.promise(path.join(this.context.publicDir, 'main.*.js'));
       });
 
       it('should have one <script> tag for main.js loaded in the <head> tag', function() {
@@ -90,14 +90,14 @@ describe('Build Greenwood With: ', function() {
       });
 
       it('should have the expected main.js file in the output directory', async function() {
-        expect(await glob.promise(path.join(this.context.publicDir, 'main.*.js'))).to.have.lengthOf(1);
+        expect(scripts.length).to.be.equal(1);
       });
 
-      it('should have the expected output from main.js (lodash) in the page output', async function() {
-        const spanTags = dom.window.document.querySelectorAll('body > span');
-        
-        expect(spanTags.length).to.be.equal(1);
-        expect(spanTags[0].textContent).to.be.equal('import from lodash {"a":1,"b":2}');
+      it('should have the expected CommonJS contents from main.js (lodash) in the output', async function() {
+        const contents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(contents).to.contain('n=e,t=e.exports,function()');
+        expect(contents).to.contain('document.getElementsByTagName("span")[0].innerHTML="import from lodash "+i;');
       });
     });
   });
diff --git a/packages/plugin-import-commonjs/test/cases/default/greenwood.config.js b/packages/plugin-import-commonjs/test/cases/default/greenwood.config.js
index 1573b558d..2cb3ac046 100644
--- a/packages/plugin-import-commonjs/test/cases/default/greenwood.config.js
+++ b/packages/plugin-import-commonjs/test/cases/default/greenwood.config.js
@@ -1,7 +1,6 @@
 import { greenwodPluginImportCommonJs } from '../../../src/index.js';
 
 export default {
-  prerender: true,
 
   plugins: [
     ...greenwodPluginImportCommonJs()
diff --git a/packages/plugin-import-css/README.md b/packages/plugin-import-css/README.md
index 65c6f19ea..4f973933c 100644
--- a/packages/plugin-import-css/README.md
+++ b/packages/plugin-import-css/README.md
@@ -5,6 +5,10 @@ A Greenwood plugin to allow you use ESM (`import`) syntax to load your CSS.
 
 > This package assumes you already have `@greenwood/cli` installed.
 
+## Caveats
+
+As of now, this transformation is only supported for client side (browser) code and will not run correctly in NodeJS until [support for this is introduced into Greenwood](https://github.com/ProjectEvergreen/greenwood/issues/878), or natively by NodeJS.  This means it will not work when using `prerender` option with WCC.
+
 ## Installation
 You can use your favorite JavaScript package manager to install this package.
 
diff --git a/packages/plugin-import-css/test/cases/default/default.spec.js b/packages/plugin-import-css/test/cases/default/default.spec.js
index 73dedaab0..aaad0ddd3 100644
--- a/packages/plugin-import-css/test/cases/default/default.spec.js
+++ b/packages/plugin-import-css/test/cases/default/default.spec.js
@@ -1,7 +1,6 @@
 /*
  * Use Case
  * Run Greenwood with pluginImportCss plugin with default options.
- * Sets prerender: true to validate the functionality.
  * 
  * Uaer Result
  * Should generate a bare bones Greenwood build without erroring when using ESM (import) with CSS.
@@ -26,10 +25,11 @@
  *     index.html
  */
 import chai from 'chai';
-import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import glob from 'glob-promise';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -50,9 +50,6 @@ describe('Build Greenwood With: ', function() {
 
   describe(LABEL, function() {
     before(async function() {
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, getSetupFiles(outputPath));
       await runner.runCommand(cliPath, 'build');
     });
@@ -60,17 +57,20 @@ describe('Build Greenwood With: ', function() {
     runSmokeTest(['public', 'index'], LABEL);
 
     describe('importing CSS using ESM (import)', function() {
-      let dom;
+      let scripts;
 
       before(async function() {
-        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+        scripts = await glob.promise(path.join(this.context.publicDir, '*.js'));
+      });
+
+      it('should contain one (CSS-in) JavaScript file in the output directory', function() {
+        expect(scripts.length).to.be.equal(1);
       });
 
-      it('should have the expected output from main.js (lodash) in the page output', async function() {
-        const spanTags = dom.window.document.querySelectorAll('body > span');
-        
-        expect(spanTags.length).to.be.equal(1);
-        expect(spanTags[0].textContent).to.be.equal('import from styles.css: p {   color: red; }');
+      it('should have the expected output from importing styles.css in main.js', function() {
+        const contents = fs.readFileSync(scripts[0], 'utf-8');
+
+        expect(contents).to.be.contain('import from styles.css: p{color:red}"');
       });
     });
   });
diff --git a/packages/plugin-import-css/test/cases/default/greenwood.config.js b/packages/plugin-import-css/test/cases/default/greenwood.config.js
index f1e28c472..4e8dbd7ce 100644
--- a/packages/plugin-import-css/test/cases/default/greenwood.config.js
+++ b/packages/plugin-import-css/test/cases/default/greenwood.config.js
@@ -1,7 +1,6 @@
 import { greenwoodPluginImportCss } from '../../../src/index.js';
 
 export default {
-  prerender: true,
 
   plugins: [
     ...greenwoodPluginImportCss()
diff --git a/packages/plugin-import-json/README.md b/packages/plugin-import-json/README.md
index 1651f5db9..c12064cc7 100644
--- a/packages/plugin-import-json/README.md
+++ b/packages/plugin-import-json/README.md
@@ -5,6 +5,10 @@ A Greenwood plugin to allow you use ESM (`import`) syntax to load your JSON.
 
 > This package assumes you already have `@greenwood/cli` installed.
 
+## Caveats
+
+As of now, this transformation is only supported for client side (browser) code and will not run correctly in NodeJS until [support for this is introduced into Greenwood](https://github.com/ProjectEvergreen/greenwood/issues/878), or [natively by NodeJS](https://github.com/ProjectEvergreen/greenwood/issues/957).  This means it will not work when using `prerender` option with WCC.
+
 ## Installation
 You can use your favorite JavaScript package manager to install this package.
 
diff --git a/packages/plugin-import-json/test/cases/default/default.spec.js b/packages/plugin-import-json/test/cases/default/default.spec.js
index b09ca2253..8d0beac48 100644
--- a/packages/plugin-import-json/test/cases/default/default.spec.js
+++ b/packages/plugin-import-json/test/cases/default/default.spec.js
@@ -1,7 +1,6 @@
 /*
  * Use Case
  * Run Greenwood with pluginImportCss plugin with default options.
- * Sets prerender: true to validate the functionality.
  * 
  * Uaer Result
  * Should generate a bare bones Greenwood build without erroring when using ESM (import) with CSS.
@@ -28,10 +27,11 @@
  *     main.js
  */
 import chai from 'chai';
-import { JSDOM } from 'jsdom';
+import fs from 'fs';
+import glob from 'glob-promise';
 import path from 'path';
 import { runSmokeTest } from '../../../../../test/smoke-test.js';
-import { copyDirectory, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
 import { Runner } from 'gallinago';
 import { fileURLToPath, URL } from 'url';
 
@@ -52,9 +52,6 @@ describe('Build Greenwood With: ', function() {
 
   describe(LABEL, function() {
     before(async function() {
-      // stub puppeteer dependency to avoid package manager installation when running specs that need prerendering
-      await copyDirectory(`${process.cwd()}/node_modules/puppeteer`, `${outputPath}node_modules/puppeteer`);
-
       await runner.setup(outputPath, getSetupFiles(outputPath));
       await runner.runCommand(cliPath, 'build');
     });
@@ -62,16 +59,20 @@ describe('Build Greenwood With: ', function() {
     runSmokeTest(['public', 'index'], LABEL);
 
     describe('importing JSON using ESM (import)', function() {
-      let dom;
+      let scripts;
 
       before(async function() {
-        dom = await JSDOM.fromFile(path.resolve(this.context.publicDir, 'index.html'));
+        scripts = await glob.promise(path.join(this.context.publicDir, '*.js'));
       });
     
-      it('should have the expected output from importing data.json in main.js', async function() {
-        const scriptTagOneOutput = dom.window.document.querySelector('body > .output-json-import');
+      it('should contain one javascript file in the output directory', function() {
+        expect(scripts.length).to.be.equal(1);
+      });
+
+      it('should have the expected output from importing data.json in main.js', function() {
+        const contents = fs.readFileSync(scripts[0], 'utf-8');
 
-        expect(scriptTagOneOutput.textContent).to.be.equal('got json via import, status is - 200');
+        expect(contents).to.be.contain('const t=`${"got json"} via import, status is - ${200}`');
       });
     });
   });
diff --git a/packages/plugin-import-json/test/cases/default/greenwood.config.js b/packages/plugin-import-json/test/cases/default/greenwood.config.js
index 945ba2d23..069de4a0d 100644
--- a/packages/plugin-import-json/test/cases/default/greenwood.config.js
+++ b/packages/plugin-import-json/test/cases/default/greenwood.config.js
@@ -1,7 +1,6 @@
 import { greenwoodPluginImportJson } from '../../../src/index.js';
 
 export default {
-  prerender: true,
 
   plugins: [
     ...greenwoodPluginImportJson()
diff --git a/packages/plugin-renderer-puppeteer/README.md b/packages/plugin-renderer-puppeteer/README.md
new file mode 100644
index 000000000..b9178e624
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/README.md
@@ -0,0 +1,40 @@
+# plugin-renderer-puppeteer
+
+## Overview
+
+A Greenwood plugin for using [**Puppeteer**](https://pptr.dev) as a custom [pre-rendering solution](/docs/server-rendering/#render-vs-prerender).  As Puppeteer is a headless browser, it provides a lot more power and capabilities for fully rendering things like Web Components Web Components, GraphQL calls, and other very browser dependent features.
+
+### Caveats
+
+Given this plugin instruments an entire browser, this plugin _only_ supports Greenwood's [`prerender` configuration](/docs/configuration/#prerender) option and so will NOT be viable for any [SSR](/docs/server-rendering/) or [Serverless and Edge](https://github.com/ProjectEvergreen/greenwood/discussions/626) features.  Instead, Greenwood will be focusing on making [**WCC**](https://github.com/ProjectEvergreen/wcc) the default and recommended first-party solution.
+
+> This package assumes you already have `@greenwood/cli` installed.
+
+## Installation
+
+You can use your favorite JavaScript package manager to install this package.
+
+```bash
+# npm
+npm install @greenwood/plugin-renderer-puppeteer --save-dev
+
+# yarn
+yarn add @greenwood/plugin-renderer-puppeteer --dev
+```
+
+## Usage
+Add this plugin to your _greenwood.config.js_.
+
+```javascript
+import { greenwoodPluginRendererPuppeteer } from '@greenwood/plugin-renderer-puppeteer';
+
+export default {
+  ...
+
+  plugins: [
+    ...greenwoodPluginRendererPuppeteer() // notice the spread!
+  ]
+}
+```
+
+Now, when running `greenwood build`, all your pages will get run through Puppeteer and any JavaScript / Web Components that you author will get a one time pass execution and the resulting HTML generated from that process will be captured and further optimized through Greenwood's build pipeline.
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/package.json b/packages/plugin-renderer-puppeteer/package.json
new file mode 100644
index 000000000..aabc5fc15
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@greenwood/plugin-renderer-puppeteer",
+  "version": "0.26.0-alpha.0",
+  "description": "A Greenwood plugin to allow headless browser rendering with Puppeteer.",
+  "repository": "https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer",
+  "author": "Owen Buckley <owen@thegreenhouse.io>",
+  "license": "MIT",
+  "keywords": [
+    "Greenwood",
+    "Static Site Generator",
+    "Web Components",
+    "Puppeteer"
+  ],
+  "main": "src/index.js",
+  "type": "module",
+  "files": [
+    "src/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@greenwood/cli": "^0.4.0"
+  },
+  "dependencies": {
+    "@webcomponents/webcomponentsjs": "^2.6.0",
+    "puppeteer": "^15.3.2"
+  },
+  "devDependencies": {
+    "@greenwood/cli": "^0.26.0-alpha.0"
+  }
+}
diff --git a/packages/plugin-renderer-puppeteer/src/index.js b/packages/plugin-renderer-puppeteer/src/index.js
new file mode 100644
index 000000000..98a8231b0
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/src/index.js
@@ -0,0 +1,27 @@
+import { PuppeteerResource } from './plugins/resource.js';
+import { PuppeteerServer } from './plugins/server.js';
+
+const greenwoodPluginRendererPuppeteer = (options = {}) => {
+  return [{
+    type: 'resource',
+    name: 'plugin-renderer-puppeteer:resource',
+    provider: (compilation) => new PuppeteerResource(compilation, options)
+  }, {
+    type: 'server',
+    name: 'plugin-renderer-puppeteer:server',
+    provider: (compilation) => new PuppeteerServer(compilation, options)
+  }, {
+    type: 'renderer',
+    name: 'plugin-renderer-puppeteer:renderer',
+    provider: () => {
+      return {
+        customUrl: new URL('./puppeteer-handler.js', import.meta.url),
+        prerender: true
+      };
+    }
+  }];
+};
+
+export {
+  greenwoodPluginRendererPuppeteer
+};
\ No newline at end of file
diff --git a/packages/cli/src/lib/browser.js b/packages/plugin-renderer-puppeteer/src/lib/browser.js
similarity index 95%
rename from packages/cli/src/lib/browser.js
rename to packages/plugin-renderer-puppeteer/src/lib/browser.js
index 8092a4b87..a76cd8a73 100644
--- a/packages/cli/src/lib/browser.js
+++ b/packages/plugin-renderer-puppeteer/src/lib/browser.js
@@ -14,7 +14,6 @@ class BrowserRunner {
 
   constructor() {
     this.browser = {};
-    this.renderer = {};
   }
 
   async init() {
@@ -52,7 +51,7 @@ class BrowserRunner {
     });
 
     try {
-      // Navigate to page. Wait until there are no oustanding network requests.
+      // Navigate to page. Wait until there are no outstanding network requests.
       // https://pptr.dev/#?product=Puppeteer&version=v1.8.0&show=api-pagegotourl-options
       response = await page.goto(requestUrl, {
         waitUntil: 'networkidle0',
diff --git a/packages/plugin-renderer-puppeteer/src/plugins/resource.js b/packages/plugin-renderer-puppeteer/src/plugins/resource.js
new file mode 100644
index 000000000..c5aeb617c
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/src/plugins/resource.js
@@ -0,0 +1,48 @@
+import path from 'path';
+import { ResourceInterface } from '@greenwood/cli/src/lib/resource-interface.js';
+
+class PuppeteerResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+
+    this.extensions = ['.html'];
+    this.contentType = 'text/html';
+  }
+
+  async shouldIntercept(url, body, headers = {}) {
+    const shouldIntercept = url.endsWith(path.sep) && headers.request && headers.request.accept.indexOf(this.contentType) >= 0;
+  
+    return process.env.__GWD_COMMAND__ === 'build' && shouldIntercept;// eslint-disable-line no-underscore-dangle
+  }
+
+  async intercept(url, body) {
+    body = body.replace('<head>', `
+      <head>
+        <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    `);
+
+    return Promise.resolve({ body });
+  }
+
+  async shouldOptimize(url = '', body, headers = {}) {
+    return Promise.resolve(path.extname(url) === '.html' || (headers.request && headers.request['content-type'].indexOf(this.contentType) >= 0));
+  }
+
+  async optimize(url, body) {
+    return new Promise((resolve, reject) => {
+      try {
+        const hasHead = body.match(/\<head>(.*)<\/head>/s);
+
+        if (hasHead && hasHead.length > 0) {
+          body = body.replace(/<script src="(.*webcomponents-bundle.js)"><\/script>/, '');
+        }
+
+        resolve(body);
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+export { PuppeteerResource };
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/src/plugins/server.js b/packages/plugin-renderer-puppeteer/src/plugins/server.js
new file mode 100644
index 000000000..cd416c545
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/src/plugins/server.js
@@ -0,0 +1,23 @@
+import { ServerInterface } from '@greenwood/cli/src/lib/server-interface.js';
+import { getDevServer } from '@greenwood/cli/src/lifecycles/serve.js';
+
+class PuppeteerServer extends ServerInterface {
+  constructor(compilation, options = {}) {
+    super(compilation, options);
+  }
+
+  // only need this running for production builds when prerendering
+  async start() {
+    if (process.env.__GWD_COMMAND__ === 'build') { // eslint-disable-line no-underscore-dangle
+      const { port } = this.compilation.config.devServer;
+  
+      (await getDevServer(this.compilation)).listen(port, async () => {
+        console.info(`Started puppeteer prerender server at localhost:${port}`);
+      });
+    } else {
+      await Promise.resolve();
+    }
+  }
+}
+
+export { PuppeteerServer };
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/src/puppeteer-handler.js b/packages/plugin-renderer-puppeteer/src/puppeteer-handler.js
new file mode 100644
index 000000000..5c65284fb
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/src/puppeteer-handler.js
@@ -0,0 +1,60 @@
+export default async function(compilation, callback) {
+  const BrowserRunner = (await import('./lib/browser.js')).BrowserRunner;
+  const browserRunner = new BrowserRunner();
+
+  const runBrowser = async (serverUrl, pages) => {
+    try {
+      return Promise.all(pages.map(async(page) => {
+        const { route } = page;
+        console.info('prerendering page...', route);
+        
+        return await browserRunner
+          .serialize(`${serverUrl}${route}`)
+          .then(async (contents) => {
+            console.info(`prerendering complete for page ${route}.`);
+            
+            await callback(page, contents);
+          });
+      }));
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(err);
+      return false;
+    }
+  };
+
+  // gracefully handle if puppeteer is not installed correctly
+  // like may happen in a stackblitz environment and just reject early
+  // otherwise we can feel confident attempting to prerender all pages
+  // https://github.com/ProjectEvergreen/greenwood/discussions/639
+  try {
+    await browserRunner.init();
+  } catch (e) {
+    console.error(e);
+
+    console.error('*******************************************************************');
+    console.error('*******************************************************************');
+
+    console.error('There was an error trying to initialize puppeteer for pre-rendering.');
+
+    console.info('To troubleshoot, please check your environment for any npm install or postinstall errors, as may be the case in a Stackblitz or other sandbox like environment.');
+    console.info('For more information please see this guide - https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md');
+
+    return Promise.reject();
+  }
+
+  return new Promise(async (resolve, reject) => {
+    try {
+      const pages = compilation.graph.filter(page => !page.isSSR);
+      const port = compilation.config.devServer.port;
+      const serverAddress = `http://127.0.0.1:${port}`;
+
+      await runBrowser(serverAddress, pages);
+      browserRunner.close();
+
+      resolve();
+    } catch (err) {
+      reject(err);
+    }
+  });
+}
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/test/cases/build.default/build.default.spec.js b/packages/plugin-renderer-puppeteer/test/cases/build.default/build.default.spec.js
new file mode 100644
index 000000000..3c004c8c3
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/test/cases/build.default/build.default.spec.js
@@ -0,0 +1,313 @@
+/*
+ * Use Case
+ * Run Greenwood build command when using the puppeteer renderer plugin for prerendering.
+ *
+ * User Result
+ * Should generate a Greenwood build with puppeteer generated output for Web Components.
+ *
+ * User Command
+ * greenwood build
+ *
+ * User Config
+ * {
+ *   plugins: [ 
+ *     ...greenwoodPluginRendererPuppeteer()
+ *   ]
+ * }
+ *
+ * User Workspace
+ *  src/
+ *   components/
+ *     header.js
+ *   pages/
+ *     index.html
+ *   scripts/
+ *     main.js
+ */
+import chai from 'chai';
+import fs from 'fs/promises';
+import { JSDOM } from 'jsdom';
+import path from 'path';
+import { runSmokeTest } from '../../../../../test/smoke-test.js';
+import { getDependencyFiles, getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
+import { Runner } from 'gallinago';
+import { fileURLToPath, URL } from 'url';
+
+const expect = chai.expect;
+
+describe('Build Greenwood With: ', function() {
+  const LABEL = 'Puppeteer prerendering enabled';
+  const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
+  const outputPath = fileURLToPath(new URL('.', import.meta.url));
+  let runner;
+
+  before(function() {
+    this.context = {
+      publicDir: path.join(outputPath, 'public')
+    };
+    runner = new Runner();
+  });
+
+  describe(LABEL, function() {
+
+    before(async function() {
+      const lit = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/*.js`, 
+        `${outputPath}/node_modules/lit/`
+      );
+      const litDecorators = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/decorators/*.js`, 
+        `${outputPath}/node_modules/lit/decorators/`
+      );
+      const litDirectives = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/directives/*.js`, 
+        `${outputPath}/node_modules/lit/directives/`
+      );
+      const litPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit/package.json`, 
+        `${outputPath}/node_modules/lit/`
+      );
+      const litElement = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-element/*.js`, 
+        `${outputPath}/node_modules/lit-element/`
+      );
+      const litElementPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-element/package.json`, 
+        `${outputPath}/node_modules/lit-element/`
+      );
+      const litElementDecorators = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-element/decorators/*.js`, 
+        `${outputPath}/node_modules/lit-element/decorators/`
+      );
+      const litHtml = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-html/*.js`, 
+        `${outputPath}/node_modules/lit-html/`
+      );
+      const litHtmlPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-html/package.json`, 
+        `${outputPath}/node_modules/lit-html/`
+      );
+      const litHtmlDirectives = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lit-html/directives/*.js`, 
+        `${outputPath}/node_modules/lit-html/directives/`
+      );
+      // lit-html has a dependency on this
+      // https://github.com/lit/lit/blob/main/packages/lit-html/package.json#L82
+      const trustedTypes = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@types/trusted-types/package.json`,
+        `${outputPath}/node_modules/@types/trusted-types/`
+      );
+      const litReactiveElement = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@lit/reactive-element/*.js`, 
+        `${outputPath}/node_modules/@lit/reactive-element/`
+      );
+      const litReactiveElementDecorators = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@lit/reactive-element/decorators/*.js`, 
+        `${outputPath}/node_modules/@lit/reactive-element/decorators/`
+      );
+      const litReactiveElementPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/@lit/reactive-element/package.json`, 
+        `${outputPath}/node_modules/@lit/reactive-element/`
+      );
+      const reduxLibs = await getDependencyFiles(
+        `${process.cwd()}/node_modules/redux/es/redux.mjs`, 
+        `${outputPath}/node_modules/redux/es`
+      );
+      const reduxPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/redux/package.json`, 
+        `${outputPath}/node_modules/redux/`
+      );
+      const looseLibs = await getDependencyFiles(
+        `${process.cwd()}/node_modules/loose-envify/index.js`, 
+        `${outputPath}/node_modules/loose-envify`
+      );
+      const looseLibsPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/loose-envify/package.json`, 
+        `${outputPath}/node_modules/loose-envify/`
+      );
+      const tokensLibs = await getDependencyFiles(
+        `${process.cwd()}/node_modules/js-tokens/index.js`, 
+        `${outputPath}/node_modules/js-tokens`
+      );
+      const tokensLibsPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/js-tokens/package.json`, 
+        `${outputPath}/node_modules/js-tokens/`
+      );
+      const symbolLibs = await getDependencyFiles(
+        `${process.cwd()}/node_modules/symbol-observable/es/*.js`, 
+        `${outputPath}/node_modules/symbol-observable/es`
+      );
+      const symbolLibsPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/symbol-observable/package.json`, 
+        `${outputPath}/node_modules/symbol-observable/`
+      );
+      const lodashEsLibs = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lodash-es/*.js`, 
+        `${outputPath}/node_modules/lodash-es/`
+      );
+      const lodashEsLibsPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/lodash-es/package.json`, 
+        `${outputPath}/node_modules/lodash-es/`
+      );
+      const pwaHelpersLibs = await getDependencyFiles(
+        `${process.cwd()}/node_modules/pwa-helpers/*.js`, 
+        `${outputPath}/node_modules/pwa-helpers/`
+      );
+      const pwaHelpersPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/pwa-helpers/package.json`, 
+        `${outputPath}/node_modules/pwa-helpers/`
+      );
+      const simpleCss = await getDependencyFiles(
+        `${process.cwd()}/node_modules/simpledotcss/simple.css`, 
+        `${outputPath}/node_modules/simpledotcss/`
+      );
+      const simpleCssPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/simpledotcss/package.json`, 
+        `${outputPath}/node_modules/simpledotcss/`
+      );
+      const prismCss = await getDependencyFiles(
+        `${process.cwd()}/node_modules/prismjs/themes/prism-tomorrow.css`,
+        `${outputPath}/node_modules/prismjs/themes/`
+      );
+      const prismPackageJson = await getDependencyFiles(
+        `${process.cwd()}/node_modules/prismjs/package.json`, 
+        `${outputPath}/node_modules/prismjs/`
+      );
+
+      await runner.setup(outputPath, [
+        ...getSetupFiles(outputPath),
+        ...reduxLibs,
+        ...reduxPackageJson,
+        ...looseLibs,
+        ...looseLibsPackageJson,
+        ...tokensLibs,
+        ...tokensLibsPackageJson,
+        ...symbolLibs,
+        ...symbolLibsPackageJson,
+        ...lit,
+        ...litPackageJson,
+        ...litDirectives,
+        ...litDecorators,
+        ...litElementPackageJson,
+        ...litElement,
+        ...litElementDecorators,
+        ...litHtmlPackageJson,
+        ...litHtml,
+        ...litHtmlDirectives,
+        ...trustedTypes,
+        ...litReactiveElement,
+        ...litReactiveElementDecorators,
+        ...litReactiveElementPackageJson,
+        ...lodashEsLibs,
+        ...lodashEsLibsPackageJson,
+        ...pwaHelpersPackageJson,    
+        ...pwaHelpersLibs,
+        ...prismCss,
+        ...prismPackageJson,
+        ...simpleCss,
+        ...simpleCssPackageJson
+      ]);
+      await runner.setup(outputPath, getSetupFiles(outputPath));
+      await runner.runCommand(cliPath, 'build');
+    });
+    
+    runSmokeTest(['public', 'index'], LABEL);
+  
+    describe('Default output for index.html', function() {
+      let dom;
+      let raw;
+
+      before(async function() {
+        const outputFile = path.join(this.context.publicDir, './index.html');
+
+        raw = await fs.readFile(outputFile, 'utf-8');
+        dom = await JSDOM.fromFile(outputFile);
+      });
+
+      describe('head section tags', function() {
+        it('should have a <title> tag in the <head>', function() {
+          const title = dom.window.document.querySelector('head title').textContent;
+    
+          expect(title).to.be.equal('My App');
+        });
+
+        it('should have one <style> tag in the <head> from puppeteer', function() {
+          const styleTag = dom.window.document.querySelectorAll('head style');
+    
+          expect(raw).to.contain('<!-- Shady DOM styles for app-header -->');
+          expect(styleTag.length).to.be.equal(1);
+          expect(styleTag[0].textContent).to.contain('body[unresolved]');
+        });
+      });
+
+      it('should have the expected heading text within the index page in the public directory', function() {
+        const heading = dom.window.document.querySelector('body h1').textContent;
+
+        expect(heading).to.equal('Welcome to Greenwood!');
+      });
+
+      it('should have the expected output from main.js for lit (ESM) in the page output', async function() {
+        const litOutput = dom.window.document.querySelectorAll('body > .output-lit');
+        
+        expect(litOutput.length).to.be.equal(1);
+        expect(litOutput[0].textContent).to.be.equal('import from lit W29iamVjdCBIVE1M');
+      });
+
+      it('should have the expected output from main.js for lodash-es (ESM) in the page output', async function() {
+        const litOutput = dom.window.document.querySelectorAll('body > .output-lodash');
+        
+        expect(litOutput.length).to.be.equal(1);
+        expect(litOutput[0].textContent).to.be.equal('import from lodash-es {"a":1,"b":2}');
+      });
+
+      it('should have the expected output from main.js for pwa-helpers (ESM) in the page output', async function() {
+        const litOutput = dom.window.document.querySelectorAll('body > .output-pwa');
+        
+        expect(litOutput.length).to.be.equal(1);
+        expect(litOutput[0].textContent).to.be.equal('import from pwa-helpers KGNvbWJpbmVSZWR1');
+      });
+
+      it('should have the expected output from main.js for Redux (MJS) in the page output', async function() {
+        const reduxOutput = dom.window.document.querySelectorAll('body > .output-redux');
+        
+        expect(reduxOutput.length).to.be.equal(1);
+        expect(reduxOutput[0].textContent).to.be.equal('import from redux ZnVuY3Rpb24gbyh0');
+      });
+
+      it('should have the expected output from the first inline <script> tag in the page output', async function() {
+        const inlineScriptOutput = dom.window.document.querySelectorAll('body > .output-script-inline');
+        
+        expect(inlineScriptOutput.length).to.be.equal(1);
+        expect(inlineScriptOutput[0].textContent).to.be.equal('script tag module inline');
+      });
+
+      it('should have the expected output from main.js for try / catch error of no error text', async function() {
+        const errorOutput = dom.window.document.querySelectorAll('body > .output-error');
+
+        expect(errorOutput.length).to.be.equal(1);
+        expect(errorOutput[0].textContent).to.be.equal('');
+      });
+
+      it('should have the expected inline node_modules content in the first inline script tag which should include extra code from rollup', async function() {
+        const inlineScriptTag = dom.window.document.querySelectorAll('head > script:not([src])')[0];
+
+        expect(inlineScriptTag.textContent.replace('\n', '')).to
+          // eslint-disable-next-line max-len
+          .equal('import"/lit-element.6ff69bae.js";document.getElementsByClassName("output-script-inline")[0].innerHTML="script tag module inline"//# sourceMappingURL=1807818843-scratch.537e8f03.js.map');
+      });
+
+      it('should have prerendered content from <app-header> component', function() {
+        const appHeader = dom.window.document.querySelectorAll('body app-header');
+        const header = dom.window.document.querySelectorAll('body header');
+
+        expect(appHeader.length).to.equal(1);
+        expect(header.length).to.equal(1);
+        expect(header[0].textContent.trim()).to.equal('This is the header component.');
+      });
+    });
+  });
+
+  after(async function() {
+    runner.teardown(getOutputTeardownFiles(outputPath));
+  });
+});
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/test/cases/build.default/greenwood.config.js b/packages/plugin-renderer-puppeteer/test/cases/build.default/greenwood.config.js
new file mode 100644
index 000000000..20b4c2a73
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/test/cases/build.default/greenwood.config.js
@@ -0,0 +1,7 @@
+import { greenwoodPluginRendererPuppeteer } from '../../../src/index.js';
+
+export default {
+  plugins: [
+    ...greenwoodPluginRendererPuppeteer()
+  ]
+};
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/test/cases/build.default/package.json b/packages/plugin-renderer-puppeteer/test/cases/build.default/package.json
new file mode 100644
index 000000000..9348db6f7
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/test/cases/build.default/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "test-renderer-puppeteer",
+  "type": "module",
+  "dependencies": {
+    "lit": "^2.0.0",
+    "lodash-es": "^4.17.20",
+    "prismjs": "^1.21.0",
+    "pwa-helpers": "^0.9.1",
+    "redux": "^4.0.5",
+    "simpledotcss": "^1.0.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/test/cases/build.default/src/components/header.js b/packages/plugin-renderer-puppeteer/test/cases/build.default/src/components/header.js
new file mode 100644
index 000000000..271b77b0a
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/test/cases/build.default/src/components/header.js
@@ -0,0 +1,24 @@
+// note: this example is misleading in its understanding / use of shadow dom
+// but leaving it as since it should also technically work as written too
+export default class HeaderComponent extends HTMLElement {
+  constructor() {
+    super();
+
+    // create a Shadow DOM
+    this.root = this.attachShadow({ mode: 'open' });
+  }
+
+  // run some code when the component is ready
+  connectedCallback() {
+    this.root.innerHTML = this.getTemplate();
+  }
+
+  // create templates that interpolate variables and HTML!
+  getTemplate() {
+    return `
+      <header>This is the header component.</header>
+    `;
+  }
+}
+
+customElements.define('app-header', HeaderComponent);
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/test/cases/build.default/src/pages/index.html b/packages/plugin-renderer-puppeteer/test/cases/build.default/src/pages/index.html
new file mode 100644
index 000000000..137f80655
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/test/cases/build.default/src/pages/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="../scripts/main.js"></script>
+    <script type="module">
+      import { html } from 'lit';
+
+      document.getElementsByClassName('output-script-inline')[0].innerHTML = 'script tag module inline';
+    </script>
+    <script type="module" src="/components/header.js"></script>
+  </head>
+
+  <body>
+    <app-header></app-header>
+
+    <content-outlet></content-outlet>
+
+    <span class="output-lit"></span>
+    <span class="output-lodash"></span>
+    <span class="output-pwa"></span>
+    <span class="output-redux"></span>
+    <span class="output-script-inline"></span>
+    <span class="output-error"></span>
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/packages/plugin-renderer-puppeteer/test/cases/build.default/src/scripts/main.js b/packages/plugin-renderer-puppeteer/test/cases/build.default/src/scripts/main.js
new file mode 100644
index 000000000..8276a7960
--- /dev/null
+++ b/packages/plugin-renderer-puppeteer/test/cases/build.default/src/scripts/main.js
@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { defaults } from 'lodash-es';
+import { lazyReducerEnhancer } from 'pwa-helpers';
+import { createStore } from 'redux';
+
+try {
+  document.getElementsByClassName('output-lit')[0].innerHTML = `import from lit ${btoa(LitElement.prototype).slice(0, 16)}`;
+  document.getElementsByClassName('output-lodash')[0].innerHTML = `import from lodash-es ${JSON.stringify(defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 }))}`;
+  document.getElementsByClassName('output-pwa')[0].innerHTML = `import from pwa-helpers ${btoa(lazyReducerEnhancer).slice(0, 16)}`;
+  document.getElementsByClassName('output-redux')[0].innerHTML = `import from redux ${btoa(createStore).slice(0, 16)}`;
+} catch (e) {
+  document.getElementsByClassName('output-error')[0].innerHTML = e;
+}
\ No newline at end of file
diff --git a/packages/plugin-typescript/README.md b/packages/plugin-typescript/README.md
index 20a2792ba..301b95693 100644
--- a/packages/plugin-typescript/README.md
+++ b/packages/plugin-typescript/README.md
@@ -5,6 +5,10 @@ A Greenwood plugin for writing [**TypeScript**](https://www.typescriptlang.org/)
 
 > This package assumes you already have `@greenwood/cli` installed.
 
+## Caveats
+
+As of now, this transformation is only supported for client side (browser) code and will not run correctly in NodeJS until [support for this is introduced into Greenwood](https://github.com/ProjectEvergreen/greenwood/issues/878), or natively by NodeJS.  This means it will not work when using `prerender` option with WCC.
+
 ## Installation
 You can use your favorite JavaScript package manager to install this package.
 
diff --git a/test/smoke-test.js b/test/smoke-test.js
index 348383fe7..3ce3b5722 100644
--- a/test/smoke-test.js
+++ b/test/smoke-test.js
@@ -66,7 +66,6 @@ function commonIndexSpecs(dom, html, label) {
         expect(tagsMatch('link', html)).to.be.equal(true);
       });
 
-      // note: one will always be present when using puppeteer
       it('should have matching opening and closing <style> tags in the <head>', function() {
         expect(tagsMatch('style', html)).to.be.equal(true);
       });
diff --git a/test/utils.js b/test/utils.js
index 674b9ff98..c82e52fe4 100644
--- a/test/utils.js
+++ b/test/utils.js
@@ -1,38 +1,6 @@
-import fs from 'fs';
 import glob from 'glob-promise';
 import path from 'path';
 
-async function rreaddir (dir, allFiles = []) {
-  const files = (await fs.promises.readdir(dir)).map(f => path.join(dir, f));
-
-  allFiles.push(...files);
-
-  await Promise.all(files.map(async f => (
-    await fs.promises.stat(f)).isDirectory() && rreaddir(f, allFiles
-  )));
-
-  return allFiles;
-}
-
-// https://stackoverflow.com/a/30405105/417806
-async function copyFile(source, target) {
-  const rd = fs.createReadStream(source);
-  const wr = fs.createWriteStream(target);
-
-  try {
-    return await new Promise((resolve, reject) => {
-      rd.on('error', reject);
-      wr.on('error', reject);
-      wr.on('finish', resolve);
-      rd.pipe(wr);
-    });
-  } catch (error) {
-    console.error('ERROR', error);
-    rd.destroy();
-    wr.end();
-  }
-}
-
 function tagsMatch(tagName, html, expected = null) {
   const openTagRegex = new RegExp(`<${tagName}`, 'g');
   const closeTagRegex = new RegExp(`<\/${tagName.replace('>', '')}>`, 'g');
@@ -72,28 +40,9 @@ async function getDependencyFiles(sourcePath, outputPath) {
   });
 }
 
-async function copyDirectory(sourcePath, outputPath) {
-  const sourceRootFiles = await rreaddir(sourcePath);
-
-  await fs.promises.mkdir(outputPath, { recursive: true });
-
-  for (const filepath of sourceRootFiles) {
-    const target = filepath.replace(path.normalize(sourcePath), path.normalize(outputPath));
-    const stats = fs.lstatSync(filepath);
-
-    // TODO possible race condition?
-    if (stats.isDirectory() && !filepath.endsWith('LICENSE') && !fs.existsSync(target)) {
-      await fs.promises.mkdir(target, { recursive: true });
-    } else if (stats.isFile()) {
-      await copyFile(filepath, target);
-    }
-  }
-}
-
 export {
   getDependencyFiles,
   getOutputTeardownFiles,
   getSetupFiles,
-  copyDirectory,
   tagsMatch
 };
\ No newline at end of file
diff --git a/www/pages/about/how-it-works.md b/www/pages/about/how-it-works.md
index f4f55897c..ce324ec5a 100644
--- a/www/pages/about/how-it-works.md
+++ b/www/pages/about/how-it-works.md
@@ -29,7 +29,7 @@ During _development_ the CLI will:
 For _production_ builds:
 - Combine all your code and dependencies into efficient modern bundles including minifying your JavaScript and CSS.
 - Optimizes loading of JavaScript and CSS assets using web hints like `preload` and `prefetch`.
-- Provides the option to pre-render your JavaScript (e.g. Web Components) to static HTML (using **puppeteer** or the server rendering solution of your choice) to provide a web standards based templating solution.
+- Provides the option to server render or pre-render your JavaScript (e.g. Web Components) to static HTML using [**WCC**](https://github.com/ProjectEvergreen/wcc) as a means of providing a fully web standards based templating solution.
 - Can [support](/docs/layouts/) a static site (SSG) or server rendered site (SSR), or a hybrid of the two!  Single Page Application's (SPA) also welcome!
 - Supports [further optimization](/docs/config#optimization) for additional hints like inlining or only statically pre-rendering JavaScript with no runtime cost.
 
diff --git a/www/pages/artists.js b/www/pages/artists.js
deleted file mode 100644
index 0fe8d1bc9..000000000
--- a/www/pages/artists.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import '../components/card/card.native.js';
-import fetch from 'node-fetch';
-
-export default class ArtistsPage extends HTMLElement {
-  async connectedCallback() {
-    if (!this.shadowRoot) {
-      const artists = await fetch('https://www.analogstudios.net/api/artists').then(resp => resp.json());
-      const html = artists.map(artist => {
-        return `
-          <wc-card>
-            <h2 slot="title">${artist.name}</h2>
-            <img slot="image" src="${artist.imageUrl}" alt="${artist.name}"/>
-          </wc-card>
-        `;
-      }).join('');
-
-      this.attachShadow({ mode: 'open' });
-      this.shadowRoot.innerHTML = `
-        <template shadowroot="open">
-          ${html}
-        </template>
-      `;
-    }
-  }
-}
-
-async function getFrontmatter() {
-  return {
-    menu: 'navigation',
-    index: 7
-  };
-}
-
-export {
-  getFrontmatter
-};
\ No newline at end of file
diff --git a/www/pages/docs/configuration.md b/www/pages/docs/configuration.md
index d05282ce2..91b071bb4 100644
--- a/www/pages/docs/configuration.md
+++ b/www/pages/docs/configuration.md
@@ -175,7 +175,7 @@ export default {
 
 ### Prerender
 
-Though `false` by default, when this feature is enabled, [Greenwood will pre-render](/about/how-it-works/) your application using a browser (**puppeteer**), including your _runtime_ JavaScript (Web Components, GraphQL calls, etc) across all your pages and capture the output as part of the final static HTML build output.
+When set to `true` [Greenwood will pre-render](/about/how-it-works/) your application using [**WCC**](https://github.com/ProjectEvergreen/wcc) and generate HTML from any Web Components you include in your pages and templates as part of the final static HTML build output.
 
 You can combine this with ["static" components](/docs/configuration/#optimization) so that you can just do single pass rendering of your Web Components and get their output as static HTML and CSS at build time without having to ship any runtime JavaScript!
 
@@ -186,17 +186,6 @@ export default {
 }
 ```
 
-Given how heavy the dependency of a full browser is, _you will need to have puppeteer installed to use this feature_,as Greenwood does not include puppeteer by default.  Greenwood _will_ try and install it for you automatically if you set this to `true` and have not installed it already, but if that fails for any reason, you can just install it with your preferred manager.
-```shell
-# npm
-$ npm install puppeteer --save-dev
-
-# yarn
-$ yarn add puppeteer --dev
-```
-
-> _**As of now, if you are using [plugin-graphql](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-graphql) you must set this to `true`.**  We are working on improving support for server [side rendering and templating](https://github.com/ProjectEvergreen/greenwood/discussions/576) (with Web Components) as part of our [1.0 release](https://github.com/ProjectEvergreen/greenwood/milestone/3)._
-
 ### Static Router
 
 Setting the `staticRouter` option to `true` will add a small router runtime in production for static pages to prevent needing full page reloads when navigation between pages that share a template.  For example, the Greenwood website is entirely static, outputting an HTML file per page however, if you navigate from the _Docs_ page to the _Getting Started_ page, you will notice the site does not require a full page load.  Instead, the router will just swap out the content of the page much like client-side SPA router would.  This technique is similar to how projects like [**pjax**](https://github.com/defunkt/jquery-pjax) and [**Turbolinks**](https://github.com/turbolinks/turbolinks) work, and like what you can see on websites like GitHub.
diff --git a/www/pages/docs/server-rendering.md b/www/pages/docs/server-rendering.md
index cb5094109..515fc16c1 100644
--- a/www/pages/docs/server-rendering.md
+++ b/www/pages/docs/server-rendering.md
@@ -237,7 +237,7 @@ Greenwood will now build and serve all the static content from the _pages/_ dire
 
 ### Render vs Prerender
 
-Greenwood provides the ability to [prerender](/docs/configuration/#prerender) your project and Web Components using Puppeteer.  So what is the difference between that and rendering?   In the context of Greenwood, _rendering_ is the process of generating the _initial_ HTML as you would when running on a server.  _Prerendering_ is the ability to execute exclusively browser code in a browser and capture that result as static HTML.
+Greenwood provides the ability to [prerender](/docs/configuration/#prerender) your project and Web Components.  So what is the difference between that and rendering?   In the context of Greenwood, _rendering_ is the process of generating the _initial_ HTML as you would when running on a server.  _Prerendering_ is the ability to execute exclusively browser code in a browser and capture that result as static HTML.
 
 So what does that mean, exactly?  Basically, you can think of them as being complimentary, where in you might have server side routes that pull content server side (`getBody`), but can be composed of static HTML templates (in your _src/templates_ directory) that can have client side code (Web Components) with `<script>` tags that could be run after through a headless browser.
 
diff --git a/www/pages/docs/tech-stack.md b/www/pages/docs/tech-stack.md
index b32a0656d..8eeebae22 100644
--- a/www/pages/docs/tech-stack.md
+++ b/www/pages/docs/tech-stack.md
@@ -18,14 +18,14 @@ For processing markdown, **Greenwood** taps into the unified ecosystem taking ad
 
 ### Browsers
 
-Web standards like Web Components and ES Modules, coupled with network standards like HTTP caching, makes the browser a great platform not only for the browsing experience, but for the developer experience as well.  Philosophies adopted by Greenwood like bundleless development take full advantage of what the platform offers, so as to enable rapid development as well as ensure performant and optimized sites for users.
+Web standards like Web Components and ES Modules, coupled with network standards like HTTP caching, makes the browser a great platform not only for the browsing experience, but for the developer experience as well.  Philosophies adopted by Greenwood like bundle-less development take full advantage of what the platform offers, so as to enable rapid development as well as ensure performant and optimized sites for users.
 
 
 ### Rollup
 Greenwood makes use of [**Rollup**](https://rollupjs.org/) as part of build phase to optimize all the HTML / CSS and JavaScript for a given project.  This affords **Greenwood** the ability to bundle, minify and otherwise prepare the site for final deployment in the best way possible based on the code you've written.
 
-### Puppeteer
-When pre-rendering content for Web Components, Greenwood  makes use of [**Puppeteer**](https://developers.google.com/web/tools/puppeteer) as part of build phase to generate all the appropriate static HTML and CSS.  Other (server) rendering options are available through [plugins](/plugins/).
+### WCC
+The Project Evergreen team has been hard at work on creating [**WCC**](https://github.com/ProjectEvergreen/wcc) as part of our commitment to providing more first-party solutions for building websites with Greenwood.
 
 
 ### Development
diff --git a/www/pages/plugins/custom-plugins.md b/www/pages/plugins/custom-plugins.md
index 9d5e09922..2d648a37b 100644
--- a/www/pages/plugins/custom-plugins.md
+++ b/www/pages/plugins/custom-plugins.md
@@ -21,6 +21,7 @@ The available plugins built and maintained by Greenwood team and contributors ha
 | [Polyfills](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-polyfills) | Although most modern browsers now support the APIs that make up Web Component, for older browsers use this plugin to Let Greenwood automatically take care of progressively loading polyfills for you. |
 | [PostCSS](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-postcss) | Allows usage of [**PostCSS**](https://postcss.org/) plugins and configuration in your project. |
 | [Renderer Lit](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-lit) | A server-side rendering plugin for Lit based Greenwood projects. |
+| [Renderer Puppeteer](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-renderer-puppeteer) | A rendering plugin to support prerendering a Greenwood project using Puppeteer. |
 | [TypeScript](https://github.com/ProjectEvergreen/greenwood/tree/master/packages/plugin-typescript) | Allows usage of [**TypeScript**](https://www.typescriptlang.org/) for writing JavaScript. |
 
 > See something missing?  Please review our [open issues](https://github.com/ProjectEvergreen/greenwood/issues), we might be [working on it](https://github.com/ProjectEvergreen/greenwood/projects)!  Or if not, please request it, we would be interested to learn how you need to use Greenwood and how the team can help!
\ No newline at end of file
diff --git a/www/pages/plugins/renderer.md b/www/pages/plugins/renderer.md
index 144600b41..75a58fe30 100644
--- a/www/pages/plugins/renderer.md
+++ b/www/pages/plugins/renderer.md
@@ -11,11 +11,7 @@ Renderer plugins allow users to customize how Greenwood server renders (and prer
 
 ### API
 
-Given that rendering Web Components on the server side often involves implementations needing to patch the NodeJS globals space, the Greenwood API for executing server rendered code will need to happen in a [Worker](https://nodejs.org/api/worker_threads.html) thread.  So at a high level, each implementation will need to provide a path to a worker script.
-
-- `workerUrl` (required) - URL to the location of the worker thread to use for SSR
-- `prerender` (optional) - If this custom renderer should be used to statically [prerender](/docs/configuration/#prerender) pages too.
-
+Given that rendering Web Components on the server side often involves implementations needing to patch the NodeJS globals space or more complex needs like running an entire headless browser, Greenwood provides a couple ways to manage the rendering lifecycle.
 
 ```js
 const greenwoodPluginMyCustomRenderer = (options = {}) => {
@@ -36,5 +32,20 @@ export {
 };
 ```
 
-## Example
-As with Greenwood's default server rendering implementation, each worker is expected to implement [the API](/docs/server-rendering/#api) of `getBody`, `getTemplate`, `getFrontmatter`.  You can see how Greenwood implemented this for [our Lit renderer Worker](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-renderer-lit/src/index.js) as a reference.
\ No newline at end of file
+#### Options
+- `workerUrl` (recommended) - URL to the location of a file with a worker thread implementation to use for rendering.
+- `customUrl` - URL to a file that has a `default export` of a function for handling the _prerendering_ lifecyle of a Greenwood build, and running the provided `callback` function
+- `prerender` (optional) - Flag can be used to indicate if this custom renderer should be used to statically [prerender](/docs/configuration/#prerender) pages too.
+
+## Examples
+
+### Workers
+
+The recommended Greenwood API for executing server rendered code is in a [Worker](https://nodejs.org/api/worker_threads.html) thread, to avoid global namespace and API collisions.
+Each worker is expected to implement [the API](/docs/server-rendering/#api) of `default export`, `getBody`, `getTemplate`, and `getFrontmatter`.
+
+You can follow the [WCC default implementation for Greenwood](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/cli/src/lib/ssr-route-worker.js) as a reference.
+
+### Custom Implementation
+
+This option is useful for exerting full control over the rendering lifecycle.  You can follow [Greenwood's implementation for Puppeteer](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-renderer-puppeteer/src/puppeteer-handler.js) as a reference.
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index f119a21f5..ee8de2402 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4891,10 +4891,10 @@ detect-indent@^5.0.0:
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
   integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=
 
-devtools-protocol@0.0.969999:
-  version "0.0.969999"
-  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.969999.tgz#3d6be0a126b3607bb399ae2719b471dda71f3478"
-  integrity sha512-6GfzuDWU0OFAuOvBokXpXPLxjOJ5DZ157Ue3sGQQM3LgAamb8m0R0ruSfN0DDu+XG5XJgT50i6zZ/0o8RglreQ==
+devtools-protocol@0.0.1011705:
+  version "0.0.1011705"
+  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.1011705.tgz#2582ed29f84848df83fba488122015540a744539"
+  integrity sha512-OKvTvu9n3swmgYshvsyVHYX0+aPzCoYUnyXUacfQMmFtBtBKewV/gT4I9jkAbpTqtTi2E4S9MXLlvzBDUlqg0Q==
 
 dezalgo@^1.0.0:
   version "1.0.3"
@@ -6612,10 +6612,10 @@ http-signature@~1.2.0:
     jsprim "^1.2.2"
     sshpk "^1.7.0"
 
-https-proxy-agent@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
-  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+https-proxy-agent@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
   dependencies:
     agent-base "6"
     debug "4"
@@ -9931,23 +9931,23 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-puppeteer@^13.5.2:
-  version "13.5.2"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-13.5.2.tgz#73ae84969cbf514aeee871a05ec4549d67f6abee"
-  integrity sha512-DJAyXODBikZ3xPs8C35CtExEw78LZR9RyelGDAs0tX1dERv3OfW7qpQ9VPBgsfz+hG2HiMTO/Tyf7BuMVWsrxg==
+puppeteer@^15.3.2:
+  version "15.3.2"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-15.3.2.tgz#62162739044d570ab9907f85b1e1bbcf52adc79e"
+  integrity sha512-6z4fTHCHTpG3Yu7zqP0mLfCmkNkgw5KSUfLAwuBabz9Pkqoe0Z08hqUx5GNxhhMgEo4YVOSPBshePA6zliznWQ==
   dependencies:
     cross-fetch "3.1.5"
     debug "4.3.4"
-    devtools-protocol "0.0.969999"
+    devtools-protocol "0.0.1011705"
     extract-zip "2.0.1"
-    https-proxy-agent "5.0.0"
+    https-proxy-agent "5.0.1"
     pkg-dir "4.2.0"
     progress "2.0.3"
     proxy-from-env "1.1.0"
     rimraf "3.0.2"
     tar-fs "2.1.1"
     unbzip2-stream "1.4.3"
-    ws "8.5.0"
+    ws "8.8.0"
 
 pwa-helpers@^0.9.1:
   version "0.9.1"
@@ -12218,10 +12218,10 @@ w3c-xmlserializer@^1.1.2:
     webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
-wc-compiler@~0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.3.1.tgz#fedd4249947092ef8d30c41156911a2891c7cef4"
-  integrity sha512-hY72m2EX6WW9k8+kXzrOCxyJetaTRKmGODnW3Ftl2u1d5pOw6mXSZkBI6/5SEw07jbQK/CLs/Tem/SF2PBO0mQ==
+wc-compiler@~0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/wc-compiler/-/wc-compiler-0.4.1.tgz#7a970760f6decaedfba4d99939d590b43a5ad6a2"
+  integrity sha512-TmjrquaS83Ra+q58L7fhHY2sJPM22oFRbrAnC6Djvq5Ex+qc/iAn/jg4pXRgLzWHlhLwI+6Z8C3sBpINFq0O4Q==
   dependencies:
     acorn "^8.7.0"
     acorn-walk "^8.2.0"
@@ -12418,10 +12418,10 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
-ws@8.5.0:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
-  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==
+ws@8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.0.tgz#8e71c75e2f6348dbf8d78005107297056cb77769"
+  integrity sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==
 
 "ws@^5.2.0 || ^6.0.0 || ^7.0.0":
   version "7.5.6"