diff --git a/blocks/footer/footer.js b/blocks/footer/footer.js
index fa0093819..462941411 100644
--- a/blocks/footer/footer.js
+++ b/blocks/footer/footer.js
@@ -1,11 +1,11 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
 
 /**
  * loads and decorates the footer
  * @param {Element} block The header block element
  */
 
-export default async function decorate(block) {
+export default async function decorate(block, plugins) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
 
@@ -14,6 +14,6 @@ export default async function decorate(block) {
   const html = await resp.text();
   const footer = document.createElement('div');
   footer.innerHTML = html;
-  await decorateIcons(footer);
+  await plugins.decorator.decorateIcons(footer);
   block.append(footer);
 }
diff --git a/blocks/header/header.js b/blocks/header/header.js
index bce97e9c6..738b81ec9 100644
--- a/blocks/header/header.js
+++ b/blocks/header/header.js
@@ -1,4 +1,4 @@
-import { readBlockConfig, decorateIcons } from '../../scripts/lib-franklin.js';
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
 
 /**
  * collapses all open nav sections
@@ -16,7 +16,7 @@ function collapseAllNavSections(sections) {
  * @param {Element} block The header block element
  */
 
-export default async function decorate(block) {
+export default async function decorate(block, plugins) {
   const cfg = readBlockConfig(block);
   block.textContent = '';
 
@@ -29,7 +29,7 @@ export default async function decorate(block) {
     // decorate nav DOM
     const nav = document.createElement('nav');
     nav.innerHTML = html;
-    decorateIcons(nav);
+    plugins.decorator.decorateIcons(nav);
 
     const classes = ['brand', 'sections', 'tools'];
     classes.forEach((e, j) => {
@@ -60,7 +60,7 @@ export default async function decorate(block) {
     });
     nav.prepend(hamburger);
     nav.setAttribute('aria-expanded', 'false');
-    decorateIcons(nav);
+    plugins.decorator.decorateIcons(nav);
     block.append(nav);
   }
 }
diff --git a/head.html b/head.html
index e34c617b5..ff8390ffa 100644
--- a/head.html
+++ b/head.html
@@ -1,4 +1,5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
+<link rel="modulepreload" href="/scripts/plugins/decorator.js"/>
 <script src="/scripts/lib-franklin.js" type="module"></script>
 <script src="/scripts/scripts.js" type="module"></script>
 <link rel="stylesheet" href="/styles/styles.css"/>
diff --git a/scripts/delayed.js b/scripts/delayed.js
index 920b4ad83..06c1c4122 100644
--- a/scripts/delayed.js
+++ b/scripts/delayed.js
@@ -1,7 +1 @@
-// eslint-disable-next-line import/no-cycle
-import { sampleRUM } from './lib-franklin.js';
-
-// Core Web Vitals RUM collection
-sampleRUM('cwv');
-
-// add more delayed functionality here
+// Execute anything that can be postponed to the latest here
diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js
index bd0635779..33de7da16 100644
--- a/scripts/lib-franklin.js
+++ b/scripts/lib-franklin.js
@@ -10,68 +10,102 @@
  * governing permissions and limitations under the License.
  */
 
-/**
- * log RUM if part of the sample.
- * @param {string} checkpoint identifies the checkpoint in funnel
- * @param {Object} data additional data for RUM sample
- */
-export function sampleRUM(checkpoint, data = {}) {
-  sampleRUM.defer = sampleRUM.defer || [];
-  const defer = (fnname) => {
-    sampleRUM[fnname] = sampleRUM[fnname]
-      || ((...args) => sampleRUM.defer.push({ fnname, args }));
-  };
-  sampleRUM.drain = sampleRUM.drain
-    || ((dfnname, fn) => {
-      sampleRUM[dfnname] = fn;
-      sampleRUM.defer
-        .filter(({ fnname }) => dfnname === fnname)
-        .forEach(({ fnname, args }) => sampleRUM[fnname](...args));
-    });
-  sampleRUM.on = (chkpnt, fn) => { sampleRUM.cases[chkpnt] = fn; };
-  defer('observe');
-  defer('cwv');
-  try {
-    window.hlx = window.hlx || {};
-    if (!window.hlx.rum) {
-      const usp = new URLSearchParams(window.location.search);
-      const weight = (usp.get('rum') === 'on') ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
-      // eslint-disable-next-line no-bitwise
-      const hashCode = (s) => s.split('').reduce((a, b) => (((a << 5) - a) + b.charCodeAt(0)) | 0, 0);
-      const id = `${hashCode(window.location.href)}-${new Date().getTime()}-${Math.random().toString(16).substr(2, 14)}`;
-      const random = Math.random();
-      const isSelected = (random * weight < 1);
-      // eslint-disable-next-line object-curly-newline
-      window.hlx.rum = { weight, id, random, isSelected, sampleRUM };
-    }
-    const { weight, id } = window.hlx.rum;
-    if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) {
-      const sendPing = (pdata = data) => {
-        // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define
-        const body = JSON.stringify({ weight, id, referer: window.location.href, generation: window.hlx.RUM_GENERATION, checkpoint, ...data });
-        const url = `https://rum.hlx.page/.rum/${weight}`;
-        // eslint-disable-next-line no-unused-expressions
-        navigator.sendBeacon(url, body);
-        // eslint-disable-next-line no-console
-        console.debug(`ping:${checkpoint}`, pdata);
-      };
-      sampleRUM.cases = sampleRUM.cases || {
-        cwv: () => sampleRUM.cwv(data) || true,
-        lazy: () => {
-          // use classic script to avoid CORS issues
-          const script = document.createElement('script');
-          script.src = 'https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js';
-          document.head.appendChild(script);
-          return true;
-        },
-      };
-      sendPing(data);
-      if (sampleRUM.cases[checkpoint]) { sampleRUM.cases[checkpoint](); }
+export const RumPlugin = () => {
+  /**
+   * log RUM if part of the sample.
+   * @param {string} checkpoint identifies the checkpoint in funnel
+   * @param {Object} data additional data for RUM sample
+   */
+  function sampleRUM(checkpoint, data = {}) {
+    sampleRUM.defer = sampleRUM.defer || [];
+    const defer = (fnname) => {
+      sampleRUM[fnname] = sampleRUM[fnname]
+        || ((...args) => sampleRUM.defer.push({ fnname, args }));
+    };
+    sampleRUM.drain = sampleRUM.drain
+      || ((dfnname, fn) => {
+        sampleRUM[dfnname] = fn;
+        sampleRUM.defer
+          .filter(({ fnname }) => dfnname === fnname)
+          .forEach(({ fnname, args }) => sampleRUM[fnname](...args));
+      });
+    sampleRUM.on = (chkpnt, fn) => { sampleRUM.cases[chkpnt] = fn; };
+    defer('observe');
+    defer('cwv');
+    try {
+      window.hlx = window.hlx || {};
+      if (!window.hlx.rum) {
+        const usp = new URLSearchParams(window.location.search);
+        const weight = (usp.get('rum') === 'on') ? 1 : 100; // with parameter, weight is 1. Defaults to 100.
+        // eslint-disable-next-line no-bitwise
+        const hashCode = (s) => s.split('').reduce((a, b) => (((a << 5) - a) + b.charCodeAt(0)) | 0, 0);
+        const id = `${hashCode(window.location.href)}-${new Date().getTime()}-${Math.random().toString(16).substr(2, 14)}`;
+        const random = Math.random();
+        const isSelected = (random * weight < 1);
+        // eslint-disable-next-line object-curly-newline
+        window.hlx.rum = { weight, id, random, isSelected, sampleRUM };
+      }
+      const { weight, id } = window.hlx.rum;
+      if (window.hlx && window.hlx.rum && window.hlx.rum.isSelected) {
+        const sendPing = (pdata = data) => {
+          // eslint-disable-next-line object-curly-newline, max-len, no-use-before-define
+          const body = JSON.stringify({ weight, id, referer: window.location.href, generation: window.hlx.RUM_GENERATION, checkpoint, ...data });
+          const url = `https://rum.hlx.page/.rum/${weight}`;
+          // eslint-disable-next-line no-unused-expressions
+          navigator.sendBeacon(url, body);
+          // eslint-disable-next-line no-console
+          console.debug(`ping:${checkpoint}`, pdata);
+        };
+        sampleRUM.cases = sampleRUM.cases || {
+          cwv: () => sampleRUM.cwv(data) || true,
+          lazy: () => {
+            // use classic script to avoid CORS issues
+            const script = document.createElement('script');
+            script.src = 'https://rum.hlx.page/.rum/@adobe/helix-rum-enhancer@^1/src/index.js';
+            document.head.appendChild(script);
+            return true;
+          },
+        };
+        sendPing(data);
+        if (sampleRUM.cases[checkpoint]) { sampleRUM.cases[checkpoint](); }
+      }
+    } catch (error) {
+      // something went wrong
     }
-  } catch (error) {
-    // something went wrong
   }
-}
+
+  sampleRUM('top');
+
+  window.addEventListener('load', () => sampleRUM('load'));
+
+  return {
+    name: 'rum',
+
+    api: {
+      sampleRUM,
+    },
+
+    preEager: async () => {
+      window.addEventListener('unhandledrejection', (event) => {
+        sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line });
+      });
+      window.addEventListener('error', (event) => {
+        sampleRUM('error', { source: event.filename, target: event.lineno });
+      });
+    },
+
+    postLazy: async () => {
+      const main = document.querySelector('main');
+      sampleRUM('lazy');
+      sampleRUM.observe(main.querySelectorAll('div[data-block-name]'));
+      sampleRUM.observe(main.querySelectorAll('picture > img'));
+    },
+
+    preDelayed: async () => {
+      sampleRUM('cwv');
+    },
+  };
+};
 
 /**
  * Loads a CSS file.
@@ -123,77 +157,56 @@ export function toCamelCase(name) {
   return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 }
 
-/**
- * Replace icons with inline SVG and prefix with codeBasePath.
- * @param {Element} element
- */
-export function decorateIcons(element = document) {
-  element.querySelectorAll('span.icon').forEach(async (span) => {
-    if (span.classList.length < 2 || !span.classList[1].startsWith('icon-')) {
-      return;
-    }
-    const icon = span.classList[1].substring(5);
-    // eslint-disable-next-line no-use-before-define
-    const resp = await fetch(`${window.hlx.codeBasePath}/icons/${icon}.svg`);
-    if (resp.ok) {
-      const iconHTML = await resp.text();
-      if (iconHTML.match(/<style/i)) {
-        const img = document.createElement('img');
-        img.src = `data:image/svg+xml,${encodeURIComponent(iconHTML)}`;
-        span.appendChild(img);
-      } else {
-        span.innerHTML = iconHTML;
-      }
-    }
-  });
-}
-
-/**
- * Gets placeholders object
- * @param {string} prefix
- */
-export async function fetchPlaceholders(prefix = 'default') {
-  window.placeholders = window.placeholders || {};
-  const loaded = window.placeholders[`${prefix}-loaded`];
-  if (!loaded) {
-    window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => {
-      try {
-        fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`)
-          .then((resp) => resp.json())
-          .then((json) => {
-            const placeholders = {};
-            json.data.forEach((placeholder) => {
-              placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
-            });
-            window.placeholders[prefix] = placeholders;
-            resolve();
-          });
-      } catch (error) {
-        // error loading placeholders
-        window.placeholders[prefix] = {};
-        reject();
-      }
-    });
+const plugins = {};
+const pluginsApis = {};
+export async function withPlugin(pathOrFunction, options = {}) {
+  let plugin;
+  let pluginName;
+  if (typeof pathOrFunction === 'string') {
+    pluginName = toCamelCase(pathOrFunction.split('/').pop().replace('.js', ''));
+    plugin = await import(pathOrFunction);
+  } else if (typeof pathOrFunction === 'function') {
+    plugin = pathOrFunction(options);
+    pluginName = plugin.name || pathOrFunction.name;
+  } else {
+    throw new Error('Invalid plugin reference', pathOrFunction);
   }
-  await window.placeholders[`${prefix}-loaded`];
-  return window.placeholders[prefix];
+  plugins[pluginName] = { ...plugin, options };
+  if (plugin.api) {
+    pluginsApis[pluginName] = plugin.api;
+  }
+  return plugin.api || null;
 }
 
 /**
- * Decorates a block.
- * @param {Element} block The block element
+ * Builds a block DOM Element from a two dimensional array
+ * @param {string} blockName name of the block
+ * @param {any} content two dimensional array or string or object of content
  */
-export function decorateBlock(block) {
-  const shortBlockName = block.classList[0];
-  if (shortBlockName) {
-    block.classList.add('block');
-    block.setAttribute('data-block-name', shortBlockName);
-    block.setAttribute('data-block-status', 'initialized');
-    const blockWrapper = block.parentElement;
-    blockWrapper.classList.add(`${shortBlockName}-wrapper`);
-    const section = block.closest('.section');
-    if (section) section.classList.add(`${shortBlockName}-container`);
-  }
+export function buildBlock(blockName, content) {
+  const table = Array.isArray(content) ? content : [[content]];
+  const blockEl = document.createElement('div');
+  // build image block nested div structure
+  blockEl.classList.add(blockName);
+  table.forEach((row) => {
+    const rowEl = document.createElement('div');
+    row.forEach((col) => {
+      const colEl = document.createElement('div');
+      const vals = col.elems ? col.elems : [col];
+      vals.forEach((val) => {
+        if (val) {
+          if (typeof val === 'string') {
+            colEl.innerHTML += val;
+          } else {
+            colEl.appendChild(val);
+          }
+        }
+      });
+      rowEl.appendChild(colEl);
+    });
+    blockEl.appendChild(rowEl);
+  });
+  return (blockEl);
 }
 
 /**
@@ -239,156 +252,6 @@ export function readBlockConfig(block) {
   return config;
 }
 
-/**
- * Decorates all sections in a container element.
- * @param {Element} $main The container element
- */
-export function decorateSections(main) {
-  main.querySelectorAll(':scope > div').forEach((section) => {
-    const wrappers = [];
-    let defaultContent = false;
-    [...section.children].forEach((e) => {
-      if (e.tagName === 'DIV' || !defaultContent) {
-        const wrapper = document.createElement('div');
-        wrappers.push(wrapper);
-        defaultContent = e.tagName !== 'DIV';
-        if (defaultContent) wrapper.classList.add('default-content-wrapper');
-      }
-      wrappers[wrappers.length - 1].append(e);
-    });
-    wrappers.forEach((wrapper) => section.append(wrapper));
-    section.classList.add('section');
-    section.setAttribute('data-section-status', 'initialized');
-
-    /* process section metadata */
-    const sectionMeta = section.querySelector('div.section-metadata');
-    if (sectionMeta) {
-      const meta = readBlockConfig(sectionMeta);
-      Object.keys(meta).forEach((key) => {
-        if (key === 'style') {
-          const styles = meta.style.split(',').map((style) => toClassName(style.trim()));
-          styles.forEach((style) => section.classList.add(style));
-        } else {
-          section.dataset[toCamelCase(key)] = meta[key];
-        }
-      });
-      sectionMeta.parentNode.remove();
-    }
-  });
-}
-
-/**
- * Updates all section status in a container element.
- * @param {Element} main The container element
- */
-export function updateSectionsStatus(main) {
-  const sections = [...main.querySelectorAll(':scope > div.section')];
-  for (let i = 0; i < sections.length; i += 1) {
-    const section = sections[i];
-    const status = section.getAttribute('data-section-status');
-    if (status !== 'loaded') {
-      const loadingBlock = section.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]');
-      if (loadingBlock) {
-        section.setAttribute('data-section-status', 'loading');
-        break;
-      } else {
-        section.setAttribute('data-section-status', 'loaded');
-      }
-    }
-  }
-}
-
-/**
- * Decorates all blocks in a container element.
- * @param {Element} main The container element
- */
-export function decorateBlocks(main) {
-  main
-    .querySelectorAll('div.section > div > div')
-    .forEach(decorateBlock);
-}
-
-/**
- * Builds a block DOM Element from a two dimensional array
- * @param {string} blockName name of the block
- * @param {any} content two dimensional array or string or object of content
- */
-export function buildBlock(blockName, content) {
-  const table = Array.isArray(content) ? content : [[content]];
-  const blockEl = document.createElement('div');
-  // build image block nested div structure
-  blockEl.classList.add(blockName);
-  table.forEach((row) => {
-    const rowEl = document.createElement('div');
-    row.forEach((col) => {
-      const colEl = document.createElement('div');
-      const vals = col.elems ? col.elems : [col];
-      vals.forEach((val) => {
-        if (val) {
-          if (typeof val === 'string') {
-            colEl.innerHTML += val;
-          } else {
-            colEl.appendChild(val);
-          }
-        }
-      });
-      rowEl.appendChild(colEl);
-    });
-    blockEl.appendChild(rowEl);
-  });
-  return (blockEl);
-}
-
-/**
- * Loads JS and CSS for a block.
- * @param {Element} block The block element
- */
-export async function loadBlock(block) {
-  const status = block.getAttribute('data-block-status');
-  if (status !== 'loading' && status !== 'loaded') {
-    block.setAttribute('data-block-status', 'loading');
-    const blockName = block.getAttribute('data-block-name');
-    try {
-      const cssLoaded = new Promise((resolve) => {
-        loadCSS(`${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`, resolve);
-      });
-      const decorationComplete = new Promise((resolve) => {
-        (async () => {
-          try {
-            const mod = await import(`../blocks/${blockName}/${blockName}.js`);
-            if (mod.default) {
-              await mod.default(block);
-            }
-          } catch (error) {
-            // eslint-disable-next-line no-console
-            console.log(`failed to load module for ${blockName}`, error);
-          }
-          resolve();
-        })();
-      });
-      await Promise.all([cssLoaded, decorationComplete]);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(`failed to load block ${blockName}`, error);
-    }
-    block.setAttribute('data-block-status', 'loaded');
-  }
-}
-
-/**
- * Loads JS and CSS for all blocks in a container element.
- * @param {Element} main The container element
- */
-export async function loadBlocks(main) {
-  updateSectionsStatus(main);
-  const blocks = [...main.querySelectorAll('div.block')];
-  for (let i = 0; i < blocks.length; i += 1) {
-    // eslint-disable-next-line no-await-in-loop
-    await loadBlock(blocks[i]);
-    updateSectionsStatus(main);
-  }
-}
-
 /**
  * Returns a picture element with webp and fallbacks
  * @param {string} src The image URL
@@ -458,49 +321,98 @@ export function normalizeHeadings(el, allowedHeadings) {
 }
 
 /**
- * Set template (page structure) and theme (page styles).
+ * Updates all section status in a container element.
+ * @param {Element} main The container element
  */
-export function decorateTemplateAndTheme() {
-  const addClasses = (elem, classes) => {
-    classes.split(',').forEach((v) => {
-      elem.classList.add(toClassName(v.trim()));
-    });
-  };
-  const template = getMetadata('template');
-  if (template) addClasses(document.body, template);
-  const theme = getMetadata('theme');
-  if (theme) addClasses(document.body, theme);
+export function updateSectionsStatus(main) {
+  const sections = [...main.querySelectorAll(':scope>div')];
+  for (let i = 0; i < sections.length; i += 1) {
+    const section = sections[i];
+    const status = section.getAttribute('data-section-status');
+    if (status !== 'loaded') {
+      const loadingBlock = section.querySelector('.block[data-block-status="initialized"], .block[data-block-status="loading"]');
+      if (loadingBlock) {
+        section.setAttribute('data-section-status', 'loading');
+        break;
+      } else {
+        section.setAttribute('data-section-status', 'loaded');
+      }
+    }
+  }
 }
 
 /**
- * decorates paragraphs containing a single link as buttons.
- * @param {Element} element container element
+ * Gets the configuration for the given glock, and also passes
+ * the config to the `patchBlockConfig` methods in the plugins.
+ *
+ * @param {Element} block The block element
+ * @returns {object} The block config (blockName, cssPath and jsPath)
  */
+function getBlockConfig(block) {
+  const blockName = block.getAttribute('data-block-name');
+  const cssPath = `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.css`;
+  const jsPath = `${window.hlx.codeBasePath}/blocks/${blockName}/${blockName}.js`;
+
+  return Object.values(plugins).reduce((config, plugin) => (
+    plugin.patchBlockConfig
+      ? plugin.patchBlockConfig(config)
+      : config
+  ), {
+    blockName,
+    cssPath,
+    jsPath,
+  });
+}
 
-export function decorateButtons(element) {
-  element.querySelectorAll('a').forEach((a) => {
-    a.title = a.title || a.textContent;
-    if (a.href !== a.textContent) {
-      const up = a.parentElement;
-      const twoup = a.parentElement.parentElement;
-      if (!a.querySelector('img')) {
-        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
-          a.className = 'button primary'; // default
-          up.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'STRONG'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button primary';
-          twoup.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'EM'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button secondary';
-          twoup.classList.add('button-container');
+/**
+ * Loads JS and CSS for a block.
+ * @param {Element} block The block element
+ */
+export async function loadBlock(block) {
+  const status = block.getAttribute('data-block-status');
+  if (status === 'loading' || status === 'loaded') {
+    return;
+  }
+  block.setAttribute('data-block-status', 'loading');
+  const { blockName, cssPath, jsPath } = getBlockConfig(block);
+  try {
+    const cssLoaded = new Promise((resolve) => {
+      loadCSS(cssPath, resolve);
+    });
+    const decorationComplete = new Promise((resolve) => {
+      (async () => {
+        try {
+          const mod = await import(jsPath);
+          if (mod.default) {
+            await mod.default(block, pluginsApis);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(`failed to load module for ${blockName}`, error);
         }
-      }
-    }
-  });
+        resolve();
+      })();
+    });
+    await Promise.all([cssLoaded, decorationComplete]);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(`failed to load block ${blockName}`, error);
+  }
+  block.setAttribute('data-block-status', 'loaded');
+}
+
+/**
+ * Loads JS and CSS for all blocks in a container element.
+ * @param {Element} main The container element
+ */
+export async function loadBlocks(main) {
+  updateSectionsStatus(main);
+  const blocks = [...main.querySelectorAll('div.block')];
+  for (let i = 0; i < blocks.length; i += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await loadBlock(blocks[i]);
+    updateSectionsStatus(main);
+  }
 }
 
 /**
@@ -525,33 +437,57 @@ export async function waitForLCP(lcpBlocks) {
 }
 
 /**
- * loads a block named 'header' into header
+ * The main loading logic for the page.
+ * It defines the 3 phases (eager, lazy, delayed), and registers both
+ * plugins and project hooks.
+ *
+ * @param {object} options
+ * @returns
  */
+export async function loadPage(options = {}) {
+  const pluginsList = Object.values(plugins);
 
-export function loadHeader(header) {
-  const headerBlock = buildBlock('header', '');
-  header.append(headerBlock);
-  decorateBlock(headerBlock);
-  return loadBlock(headerBlock);
-}
+  await Promise.all(pluginsList.map((p) => p.preEager
+    && p.preEager.call(null, p.options, pluginsApis)));
+  if (options.loadEager) {
+    await options.loadEager(document, options);
+  }
+  await Promise.all(pluginsList.map((p) => p.postEager
+    && p.postEager.call(null, p.options, pluginsApis)));
 
-/**
- * loads a block named 'footer' into footer
- */
+  await waitForLCP(options.lcpBlocks || []);
 
-export function loadFooter(footer) {
-  const footerBlock = buildBlock('footer', '');
-  footer.append(footerBlock);
-  decorateBlock(footerBlock);
-  return loadBlock(footerBlock);
+  const main = document.querySelector('main');
+  await loadBlocks(main);
+
+  await Promise.all(pluginsList.map((p) => p.preLazy
+    && p.preLazy.call(null, p.options, pluginsApis)));
+  if (options.loadLazy) {
+    await options.loadLazy(document, options);
+  }
+  await Promise.all(pluginsList.map((p) => p.postLazy
+    && p.postLazy.call(null, p.options, pluginsApis)));
+
+  return new Promise((resolve) => {
+    window.setTimeout(async () => {
+      await Promise.all(pluginsList.map((p) => p.preDelayed
+        && p.preDelayed.call(null, p.options, pluginsApis)));
+      if (options.loadDelayed) {
+        await options.loadDelayed(document, options);
+      }
+      await Promise.all(pluginsList.map((p) => p.postDelayed
+        && p.postDelayed.call(null, p.options, pluginsApis)));
+      resolve();
+    }, options.delayedDuration || 3000);
+  });
 }
 
 /**
  * init block utils
  */
-
-function init() {
-  window.hlx = window.hlx || {};
+window.hlx = window.hlx || {};
+withPlugin(RumPlugin);
+export async function init(options) {
   window.hlx.codeBasePath = '';
 
   const scriptEl = document.querySelector('script[src$="/scripts/scripts.js"]');
@@ -564,17 +500,5 @@ function init() {
     }
   }
 
-  sampleRUM('top');
-
-  window.addEventListener('load', () => sampleRUM('load'));
-
-  window.addEventListener('unhandledrejection', (event) => {
-    sampleRUM('error', { source: event.reason.sourceURL, target: event.reason.line });
-  });
-
-  window.addEventListener('error', (event) => {
-    sampleRUM('error', { source: event.filename, target: event.lineno });
-  });
+  return loadPage(options);
 }
-
-init();
diff --git a/scripts/plugins/decorator.js b/scripts/plugins/decorator.js
new file mode 100644
index 000000000..d1a783dc2
--- /dev/null
+++ b/scripts/plugins/decorator.js
@@ -0,0 +1,166 @@
+import {
+  getMetadata,
+  readBlockConfig,
+  toCamelCase,
+  toClassName,
+} from '../lib-franklin.js';
+
+/**
+ * Replace icons with inline SVG and prefix with codeBasePath.
+ * @param {Element} element
+ */
+export function decorateIcons(element = document) {
+  element.querySelectorAll('span.icon').forEach(async (span) => {
+    if (span.classList.length < 2 || !span.classList[1].startsWith('icon-')) {
+      return;
+    }
+    const icon = span.classList[1].substring(5);
+    // eslint-disable-next-line no-use-before-define
+    const resp = await fetch(`${window.hlx.codeBasePath}/icons/${icon}.svg`);
+    if (resp.ok) {
+      const iconHTML = await resp.text();
+      if (iconHTML.match(/<style/i)) {
+        const img = document.createElement('img');
+        img.src = `data:image/svg+xml,${encodeURIComponent(iconHTML)}`;
+        span.appendChild(img);
+      } else {
+        span.innerHTML = iconHTML;
+      }
+    }
+  });
+}
+
+/**
+ * Decorates a block.
+ * @param {Element} block The block element
+ */
+export function decorateBlock(block) {
+  const shortBlockName = block.classList[0];
+  if (shortBlockName) {
+    block.classList.add('block');
+    block.setAttribute('data-block-name', shortBlockName);
+    block.setAttribute('data-block-status', 'initialized');
+    const blockWrapper = block.parentElement;
+    blockWrapper.classList.add(`${shortBlockName}-wrapper`);
+    const section = block.closest('.section');
+    if (section) section.classList.add(`${shortBlockName}-container`);
+  }
+}
+
+/**
+ * Decorates all sections in a container element.
+ * @param {Element} $main The container element
+ */
+export function decorateSections(main) {
+  main.querySelectorAll(':scope > div').forEach((section) => {
+    const wrappers = [];
+    let defaultContent = false;
+    [...section.children].forEach((e) => {
+      if (e.tagName === 'DIV' || !defaultContent) {
+        const wrapper = document.createElement('div');
+        wrappers.push(wrapper);
+        defaultContent = e.tagName !== 'DIV';
+        if (defaultContent) wrapper.classList.add('default-content-wrapper');
+      }
+      wrappers[wrappers.length - 1].append(e);
+    });
+    wrappers.forEach((wrapper) => section.append(wrapper));
+    section.classList.add('section');
+    section.setAttribute('data-section-status', 'initialized');
+
+    /* process section metadata */
+    const sectionMeta = section.querySelector('div.section-metadata');
+    if (sectionMeta) {
+      const meta = readBlockConfig(sectionMeta);
+      Object.keys(meta).forEach((key) => {
+        if (key === 'style') {
+          const styles = meta.style.split(',').map((style) => toClassName(style.trim()));
+          styles.forEach((style) => section.classList.add(style));
+        } else {
+          section.dataset[toCamelCase(key)] = meta[key];
+        }
+      });
+      sectionMeta.parentNode.remove();
+    }
+  });
+}
+
+/**
+ * Decorates all blocks in a container element.
+ * @param {Element} main The container element
+ */
+export function decorateBlocks(main) {
+  main
+    .querySelectorAll('div.section > div > div')
+    .forEach(decorateBlock);
+}
+
+/**
+ * Set template (page structure) and theme (page styles).
+ */
+export function decorateTemplateAndTheme() {
+  const addClasses = (elem, classes) => {
+    classes.split(',').forEach((v) => {
+      elem.classList.add(toClassName(v.trim()));
+    });
+  };
+  const template = getMetadata('template');
+  if (template) addClasses(document.body, template);
+  const theme = getMetadata('theme');
+  if (theme) addClasses(document.body, theme);
+}
+
+/**
+ * decorates paragraphs containing a single link as buttons.
+ * @param {Element} element container element
+ */
+export function decorateButtons(element) {
+  element.querySelectorAll('a').forEach((a) => {
+    a.title = a.title || a.textContent;
+    if (a.href !== a.textContent) {
+      const up = a.parentElement;
+      const twoup = a.parentElement.parentElement;
+      if (!a.querySelector('img')) {
+        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
+          a.className = 'button primary'; // default
+          up.classList.add('button-container');
+        }
+        if (up.childNodes.length === 1 && up.tagName === 'STRONG'
+          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
+          a.className = 'button primary';
+          twoup.classList.add('button-container');
+        }
+        if (up.childNodes.length === 1 && up.tagName === 'EM'
+          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
+          a.className = 'button secondary';
+          twoup.classList.add('button-container');
+        }
+      }
+    }
+  });
+}
+
+/**
+ * The plugin API
+ */
+export const api = {
+  decorateBlock,
+  decorateButtons,
+  decorateIcons,
+};
+
+/**
+ * Logic to execute in the post eager phase
+ */
+export function preEager() {
+  decorateTemplateAndTheme();
+}
+
+/**
+ * Logic to execute in the post eager phase
+ */
+export function postEager() {
+  const main = document.querySelector('main');
+  decorateSections(main);
+  decorateBlocks(main);
+}
diff --git a/scripts/plugins/placeholders.js b/scripts/plugins/placeholders.js
new file mode 100644
index 000000000..2262a2537
--- /dev/null
+++ b/scripts/plugins/placeholders.js
@@ -0,0 +1,62 @@
+import {
+  toCamelCase,
+} from '../lib-franklin.js';
+
+let placeholders = {};
+
+/**
+ * Gets placeholders object
+ * @param {string} prefix
+ */
+async function fetchPlaceholders(prefix = 'default') {
+  const loaded = placeholders[`${prefix}-loaded`];
+  if (!loaded) {
+    placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => {
+      try {
+        fetch(`${prefix === 'default' ? '' : prefix}/placeholders.json`)
+          .then((resp) => resp.json())
+          .then((json) => {
+            placeholders = json.data.reduce((results, placeholder) => {
+              results[toCamelCase(placeholder.Key)] = placeholder.Text;
+              return results;
+            }, {});
+            resolve(placeholders);
+          })
+          .catch((err) => {
+            reject(err);
+          });
+      } catch (error) {
+        // error loading placeholders
+        placeholders[prefix] = {};
+        reject();
+      }
+    });
+  }
+  await placeholders[`${prefix}-loaded`];
+  return placeholders[prefix];
+}
+
+/**
+ * Gets the list of placeholders.
+ */
+function getPlaceholders() {
+  return placeholders;
+}
+
+/**
+ * The plugin API
+ */
+export const api = {
+  getPlaceholders,
+};
+
+/**
+ * Logic to execute in the pre lazy phase
+ */
+export async function preLazy(options) {
+  try {
+    placeholders = await fetchPlaceholders(options.prefix);
+  } catch (err) {
+    placeholders = {};
+  }
+}
diff --git a/scripts/scripts.js b/scripts/scripts.js
index c7fadb471..e481a6092 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -1,21 +1,20 @@
 import {
-  sampleRUM,
   buildBlock,
-  loadHeader,
-  loadFooter,
-  decorateButtons,
-  decorateIcons,
-  decorateSections,
-  decorateBlocks,
-  decorateTemplateAndTheme,
-  waitForLCP,
-  loadBlocks,
+  init,
+  loadBlock,
   loadCSS,
+  withPlugin,
 } from './lib-franklin.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 window.hlx.RUM_GENERATION = 'project-1'; // add your RUM generation information here
 
+const {
+  decorateBlock,
+  decorateButtons,
+  decorateIcons,
+} = await withPlugin('./plugins/decorator.js');
+
 function buildHeroBlock(main) {
   const h1 = main.querySelector('h1');
   const picture = main.querySelector('picture');
@@ -44,14 +43,11 @@ function buildAutoBlocks(main) {
  * Decorates the main element.
  * @param {Element} main The main element
  */
-// eslint-disable-next-line import/prefer-default-export
 export function decorateMain(main) {
   // hopefully forward compatible button decoration
   decorateButtons(main);
   decorateIcons(main);
   buildAutoBlocks(main);
-  decorateSections(main);
-  decorateBlocks(main);
 }
 
 /**
@@ -59,11 +55,9 @@ export function decorateMain(main) {
  */
 async function loadEager(doc) {
   document.documentElement.lang = 'en';
-  decorateTemplateAndTheme();
   const main = doc.querySelector('main');
   if (main) {
     decorateMain(main);
-    await waitForLCP(LCP_BLOCKS);
   }
 }
 
@@ -84,12 +78,33 @@ export function addFavIcon(href) {
   }
 }
 
+/**
+ * loads a block named 'header' into header
+ */
+
+export function loadHeader(header) {
+  const headerBlock = buildBlock('header', '');
+  header.append(headerBlock);
+  decorateBlock(headerBlock);
+  return loadBlock(headerBlock);
+}
+
+/**
+ * loads a block named 'footer' into footer
+ */
+
+export function loadFooter(footer) {
+  const footerBlock = buildBlock('footer', '');
+  footer.append(footerBlock);
+  decorateBlock(footerBlock);
+  return loadBlock(footerBlock);
+}
+
 /**
  * loads everything that doesn't need to be delayed.
  */
 async function loadLazy(doc) {
   const main = doc.querySelector('main');
-  await loadBlocks(main);
 
   const { hash } = window.location;
   const element = hash ? main.querySelector(hash) : false;
@@ -100,9 +115,6 @@ async function loadLazy(doc) {
 
   loadCSS(`${window.hlx.codeBasePath}/styles/lazy-styles.css`);
   addFavIcon(`${window.hlx.codeBasePath}/styles/favicon.svg`);
-  sampleRUM('lazy');
-  sampleRUM.observe(main.querySelectorAll('div[data-block-name]'));
-  sampleRUM.observe(main.querySelectorAll('picture > img'));
 }
 
 /**
@@ -110,15 +122,13 @@ async function loadLazy(doc) {
  * the user experience.
  */
 function loadDelayed() {
-  // eslint-disable-next-line import/no-cycle
-  window.setTimeout(() => import('./delayed.js'), 3000);
   // load anything that can be postponed to the latest here
+  import('./delayed.js');
 }
 
-async function loadPage() {
-  await loadEager(document);
-  await loadLazy(document);
-  loadDelayed();
-}
-
-loadPage();
+init({
+  loadEager,
+  loadLazy,
+  loadDelayed,
+  lcpblocks: LCP_BLOCKS,
+});
diff --git a/test/blocks/footer/footer.test.js b/test/blocks/footer/footer.test.js
index 2c183ad8e..b8af28822 100644
--- a/test/blocks/footer/footer.test.js
+++ b/test/blocks/footer/footer.test.js
@@ -6,7 +6,11 @@ import { expect } from '@esm-bundle/chai';
 
 document.body.innerHTML = await readFile({ path: '../../scripts/dummy.html' });
 
-const { buildBlock, decorateBlock, loadBlock } = await import('../../../scripts/lib-franklin.js');
+const {
+  buildBlock, init, loadBlock, withPlugin,
+} = await import('../../../scripts/lib-franklin.js');
+const { decorateBlock } = await withPlugin('../../../scripts/plugins/decorator.js');
+init();
 
 document.body.innerHTML = await readFile({ path: '../../scripts/body.html' });
 
diff --git a/test/blocks/header/header.test.js b/test/blocks/header/header.test.js
index 833224e7a..f6091b605 100644
--- a/test/blocks/header/header.test.js
+++ b/test/blocks/header/header.test.js
@@ -6,7 +6,11 @@ import { expect } from '@esm-bundle/chai';
 
 document.body.innerHTML = await readFile({ path: '../../scripts/dummy.html' });
 
-const { buildBlock, decorateBlock, loadBlock } = await import('../../../scripts/lib-franklin.js');
+const {
+  buildBlock, init, loadBlock, withPlugin,
+} = await import('../../../scripts/lib-franklin.js');
+const { decorateBlock } = await withPlugin('../../../scripts/plugins/decorator.js');
+init();
 
 document.body.innerHTML = await readFile({ path: '../../scripts/body.html' });
 
diff --git a/test/scripts/block-utils.test.js b/test/scripts/block-utils.test.js
index b18a04107..8dfbe1638 100644
--- a/test/scripts/block-utils.test.js
+++ b/test/scripts/block-utils.test.js
@@ -1,9 +1,8 @@
 /* eslint-disable no-unused-expressions */
-/* global describe before it */
+/* global describe before beforeEach it */
 
 import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
-import sinon from 'sinon';
 
 let blockUtils;
 
@@ -16,6 +15,10 @@ describe('Utils methods', () => {
     document.body.innerHTML = await readFile({ path: './body.html' });
   });
 
+  beforeEach(async () => {
+    await blockUtils.init({ delayedDuration: 10 });
+  });
+
   it('Sanitizes class name', async () => {
     expect(blockUtils.toClassName('Hello world')).to.equal('hello-world');
     expect(blockUtils.toClassName(null)).to.equal('');
@@ -47,28 +50,6 @@ describe('Utils methods', () => {
     expect(error).to.equal('error');
   });
 
-  it('Collects RUM data', async () => {
-    const sendBeacon = sinon.stub(navigator, 'sendBeacon');
-    // turn on RUM
-    window.history.pushState({}, '', `${window.location.href}&rum=on`);
-    delete window.hlx;
-
-    // sends checkpoint beacon
-    await blockUtils.sampleRUM('test', { foo: 'bar' });
-    expect(sendBeacon.called).to.be.true;
-    sendBeacon.resetHistory();
-
-    // sends cwv beacon
-    await blockUtils.sampleRUM('cwv', { foo: 'bar' });
-    expect(sendBeacon.called).to.be.true;
-
-    // test error handling
-    sendBeacon.throws();
-    await blockUtils.sampleRUM('error', { foo: 'bar' });
-
-    sendBeacon.restore();
-  });
-
   it('Creates optimized picture', async () => {
     const $picture = blockUtils.createOptimizedPicture('/test/scripts/mock.png');
     expect($picture.querySelector(':scope source[type="image/webp"]')).to.exist; // webp
@@ -85,14 +66,14 @@ describe('Utils methods', () => {
 });
 
 describe('Sections and blocks', () => {
-  it('Decorates sections', async () => {
-    blockUtils.decorateSections(document.querySelector('main'));
-    expect(document.querySelectorAll('main .section').length).to.equal(2);
+  before(async () => {
+    blockUtils = await import('../../scripts/lib-franklin.js');
+    await blockUtils.withPlugin('../../scripts/plugins/decorator.js');
+    document.body.innerHTML = await readFile({ path: './body.html' });
   });
 
-  it('Decorates blocks', async () => {
-    blockUtils.decorateBlocks(document.querySelector('main'));
-    expect(document.querySelectorAll('main .block').length).to.equal(1);
+  beforeEach(async () => {
+    await blockUtils.init({ delayedDuration: 10 });
   });
 
   it('Loads blocks', async () => {
diff --git a/test/scripts/plugins/decorator.test.js b/test/scripts/plugins/decorator.test.js
new file mode 100644
index 000000000..d6987430e
--- /dev/null
+++ b/test/scripts/plugins/decorator.test.js
@@ -0,0 +1,27 @@
+/* eslint-disable no-unused-expressions */
+/* global describe before it */
+
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+
+let decorator;
+
+document.body.innerHTML = await readFile({ path: '../dummy.html' });
+document.head.innerHTML = await readFile({ path: '../head.html' });
+
+describe('Decorator plugin', () => {
+  before(async () => {
+    decorator = await import('../../../scripts/plugins/decorator.js');
+    document.body.innerHTML = await readFile({ path: '../body.html' });
+  });
+
+  it('Decorates sections', async () => {
+    decorator.decorateSections(document.querySelector('main'));
+    expect(document.querySelectorAll('main .section').length).to.equal(2);
+  });
+
+  it('Decorates blocks', async () => {
+    decorator.decorateBlocks(document.querySelector('main'));
+    expect(document.querySelectorAll('main .block').length).to.equal(1);
+  });
+});
diff --git a/test/scripts/plugins/rum.test.js b/test/scripts/plugins/rum.test.js
new file mode 100644
index 000000000..bf794dbdf
--- /dev/null
+++ b/test/scripts/plugins/rum.test.js
@@ -0,0 +1,52 @@
+/* eslint-disable no-unused-expressions */
+/* global describe before beforeEach it */
+
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+
+let blockUtils;
+let rum;
+
+document.body.innerHTML = await readFile({ path: '../dummy.html' });
+document.head.innerHTML = await readFile({ path: '../head.html' });
+
+describe('Utils methods', () => {
+  before(async () => {
+    blockUtils = await import('../../../scripts/lib-franklin.js');
+    rum = blockUtils.RumPlugin().api;
+    document.body.innerHTML = await readFile({ path: '../body.html' });
+  });
+
+  beforeEach(async () => {
+    await blockUtils.init({ delayedDuration: 10 });
+  });
+
+  it('Collects RUM data', async () => {
+    const sendBeacon = sinon.stub(navigator, 'sendBeacon');
+    // turn on RUM
+    window.history.pushState({}, '', `${window.location.href}&rum=on`);
+    delete window.hlx;
+
+    // sends checkpoint beacon
+    await rum.sampleRUM('test', { foo: 'bar' });
+    expect(sendBeacon.called).to.be.true;
+    sendBeacon.resetHistory();
+
+    // sends cwv beacon
+    await rum.sampleRUM('cwv', { foo: 'bar' });
+    expect(sendBeacon.called).to.be.true;
+
+    // test error handling
+    sendBeacon.throws();
+    await rum.sampleRUM('error', { foo: 'bar' });
+
+    sendBeacon.restore();
+  });
+
+  // it('Reports errors as RUM metrics', async () => {
+  //   const sendBeacon = sinon.stub(navigator, 'sendBeacon');
+  //   window.history.pushState({}, '', `${window.location.href}&rum=on`);
+  //   window.dispatchEvent('error', );
+  // });
+});