diff --git a/src/app/components/internal/CodePage/CodePage.js b/src/app/components/internal/CodePage/CodePage.js
index 1350798d..ee4f451c 100644
--- a/src/app/components/internal/CodePage/CodePage.js
+++ b/src/app/components/internal/CodePage/CodePage.js
@@ -11,72 +11,6 @@ class CodePage extends Component {
     hideViewFullRender: PropTypes.bool,
   };
 
-  componentDidMount() {
-    let currentComponent = this.props.component;
-    currentComponent = currentComponent.replace(/-([a-z])/g, g => g[1].toUpperCase());
-    currentComponent = currentComponent.charAt(0).toUpperCase() + currentComponent.substring(1);
-    if (currentComponent === 'Tabs') {
-      currentComponent = 'Tab';
-    } else if (currentComponent === 'Card') {
-      currentComponent = 'OverflowMenu';
-    } else if (currentComponent === 'CodeSnippet') {
-      currentComponent = 'CopyButton';
-    } else if (currentComponent === 'OrderSummary') {
-      currentComponent = 'Dropdown';
-    }
-    if (window.CDS['carbon-components'][currentComponent]) {
-      if (currentComponent === 'Tab') {
-        window.CDS['carbon-components'].Tab.init();
-        window.CDS['carbon-components'].ContentSwitcher.init();
-      } else if (currentComponent === 'DataTable') {
-        window.CDS['carbon-components'].OverflowMenu.init();
-        window.CDS['carbon-components'].DataTable.init();
-        window.CDS['carbon-components'].Toolbar.init();
-        window.CDS['carbon-components'].DataTableV2.init();
-      } else if (currentComponent === 'DatePicker') {
-        window.CDS['carbon-components'].DatePicker.init();
-      } else if (currentComponent === 'DetailPageHeader') {
-        window.CDS['carbon-components'].OverflowMenu.init();
-        window.CDS['carbon-components'].Tab.init();
-      } else {
-        window.CDS['carbon-components'][currentComponent].init();
-      }
-    }
-  }
-
-  componentDidUpdate() {
-    let currentComponent = this.props.component;
-    currentComponent = currentComponent.replace(/-([a-z])/g, g => g[1].toUpperCase());
-    currentComponent = currentComponent.charAt(0).toUpperCase() + currentComponent.substring(1);
-    if (currentComponent === 'Tabs') {
-      currentComponent = 'Tab';
-    } else if (currentComponent === 'Card') {
-      currentComponent = 'OverflowMenu';
-    } else if (currentComponent === 'CodeSnippet') {
-      currentComponent = 'CopyButton';
-    } else if (currentComponent === 'OrderSummary') {
-      currentComponent = 'Dropdown';
-    }
-    if (window.CDS['carbon-components'][currentComponent]) {
-      if (currentComponent === 'Tab') {
-        window.CDS['carbon-components'].Tab.init();
-        window.CDS['carbon-components'].ContentSwitcher.init();
-      } else if (currentComponent === 'DataTable') {
-        window.CDS['carbon-components'].OverflowMenu.init();
-        window.CDS['carbon-components'].DataTable.init();
-        window.CDS['carbon-components'].Toolbar.init();
-        window.CDS['carbon-components'].DataTableV2.init();
-      } else if (currentComponent === 'DatePicker') {
-        window.CDS['carbon-components'].DatePicker.init();
-      } else if (currentComponent === 'DetailPageHeader') {
-        window.CDS['carbon-components'].OverflowMenu.init();
-        window.CDS['carbon-components'].Tab.init();
-      } else {
-        window.CDS['carbon-components'][currentComponent].init();
-      }
-    }
-  }
-
   renderVariation = (parent, variation, variations, title, codepenSlug) => {
     let currentCodepenSlug = '';
     if (!(codepenSlug === undefined)) {
diff --git a/src/app/components/internal/ComponentExample/ComponentExample.js b/src/app/components/internal/ComponentExample/ComponentExample.js
index a4bae41c..77491540 100644
--- a/src/app/components/internal/ComponentExample/ComponentExample.js
+++ b/src/app/components/internal/ComponentExample/ComponentExample.js
@@ -6,6 +6,15 @@ import CodeExample from '../CodeExample/CodeExample';
 
 import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
 
+const componentNamesMap = {
+  Card: ['OverflowMenu'],
+  CodeSnippet: ['CodeSnippet', 'CopyButton'],
+  DataTable: ['DataTable', 'DataTableV2', 'OverflowMenu', 'Toolbar'],
+  DetailPageHeader: ['OverflowMenu', 'Tab'],
+  OrderSummary: ['Dropdown'],
+  Tabs: ['Tab', 'ContentSwitcher'],
+};
+
 class ComponentExample extends Component {
   static propTypes = {
     htmlFile: PropTypes.string,
@@ -15,42 +24,15 @@ class ComponentExample extends Component {
     codepenSlug: PropTypes.string,
   };
 
+  static _initHandles = new WeakMap();
+
   state = {
     currentFieldColor: 'field-01',
     currentHTMLfile: this.props.htmlFile,
   };
 
   componentDidUpdate = () => {
-    let currentComponent = this.props.component;
-    currentComponent = currentComponent.replace(/-([a-z])/g, g => g[1].toUpperCase());
-    currentComponent = currentComponent.charAt(0).toUpperCase() + currentComponent.substring(1);
-    if (currentComponent === 'Tabs') {
-      currentComponent = 'Tab';
-    } else if (currentComponent === 'Card') {
-      currentComponent = 'OverflowMenu';
-    } else if (currentComponent === 'CodeSnippet') {
-      currentComponent = 'CopyButton';
-    } else if (currentComponent === 'OrderSummary') {
-      currentComponent = 'Dropdown';
-    }
-    if (window.CDS['carbon-components'][currentComponent]) {
-      if (currentComponent === 'Tab') {
-        window.CDS['carbon-components'].Tab.init();
-        window.CDS['carbon-components'].ContentSwitcher.init();
-      } else if (currentComponent === 'DataTable') {
-        window.CDS['carbon-components'].OverflowMenu.init();
-        window.CDS['carbon-components'].DataTable.init();
-        window.CDS['carbon-components'].Toolbar.init();
-        window.CDS['carbon-components'].DataTableV2.init();
-      } else if (currentComponent === 'DatePicker') {
-        window.CDS['carbon-components'].DatePicker.init();
-      } else if (currentComponent === 'DetailPageHeader') {
-        window.CDS['carbon-components'].OverflowMenu.init();
-        window.CDS['carbon-components'].Tab.init();
-      } else {
-        window.CDS['carbon-components'][currentComponent].init();
-      }
-    }
+    this._releaseAndInstantiateComponents();
   };
 
   onSwitchFieldColors = value => {
@@ -77,6 +59,43 @@ class ComponentExample extends Component {
     });
   };
 
+  _ref = null;
+
+  _instances = [];
+
+  _liveDemoRef = ref => {
+    this._ref = ref;
+    this._releaseAndInstantiateComponents();
+  };
+
+  _releaseAndInstantiateComponents() {
+    const instances = this._instances;
+    for (let instance = instances.pop(); instance; instance = instances.pop()) {
+      instance.release();
+    }
+    const ref = this._ref;
+    if (ref) {
+      const componentsList = window.CDS['carbon-components'];
+      const currentComponent = this.props.component
+        .replace(/-([a-z])/g, (match, token) => token.toUpperCase())
+        .replace(/^([a-z])/, (match, token) => token.toUpperCase());
+      (componentNamesMap[currentComponent] || [currentComponent]).forEach((name) => {
+        const TheComponent = componentsList[name];
+        if (TheComponent) {
+          if (TheComponent.prototype.createdByLauncher) {
+            const initHandles = this.constructor._initHandles;
+            if (!initHandles.has(TheComponent)) {
+              initHandles.set(TheComponent, TheComponent.init());
+            }
+          } else {
+            const selectorInit = TheComponent.options.selectorInit;
+            instances.push(...[...ref.querySelectorAll(selectorInit)].map(elem => TheComponent.create(elem)));
+          }
+        }
+      });
+    }
+  }
+
   render() {
     const { component, codepenSlug, variation } = this.props;
     const classNames = classnames({
@@ -151,7 +170,7 @@ class ComponentExample extends Component {
         <div className="svg--sprite" aria-hidden="true" />
         <div className={liveBackgroundClasses}>
           <div className={classNames}>
-            <div dangerouslySetInnerHTML={{ __html: this.state.currentHTMLfile }} />
+            <div ref={this._liveDemoRef} dangerouslySetInnerHTML={{ __html: this.state.currentHTMLfile }} />
           </div>
         </div>
         <div className="component-toolbar">