diff --git a/package.json b/package.json
index 5be2c623ab4..1048a8859bf 100644
--- a/package.json
+++ b/package.json
@@ -181,7 +181,6 @@
     "fork-ts-checker-webpack-plugin": "^5.1.0",
     "get-port": "^5.1.1",
     "glob": "^7.1.6",
-    "html": "^1.0.0",
     "html-format": "^1.0.1",
     "html-webpack-plugin": "^4.4.1",
     "jest": "^24.1.0",
diff --git a/src-docs/src/components/guide_section/guide_section.tsx b/src-docs/src/components/guide_section/guide_section.tsx
index c91c73c57b9..ba056e7b8e0 100644
--- a/src-docs/src/components/guide_section/guide_section.tsx
+++ b/src-docs/src/components/guide_section/guide_section.tsx
@@ -20,7 +20,6 @@ import {
   GuideSectionExampleTabs,
   GuideSectionExampleTabsProps,
 } from './guide_section_parts/guide_section_tabs';
-import { GuideSectionTypes } from './guide_section_types';
 
 export interface GuideSection {
   id?: string;
@@ -110,8 +109,6 @@ export const GuideSection: FunctionComponent<GuideSection> = ({
 
     if (source) {
       source.map((source) => {
-        // Forever skipping the HTML tab
-        if (source.type === GuideSectionTypes.HTML) return;
         tabs.push({
           // @ts-ignore Complicated
           ...GuideSectionCodeTypesMap[source.type],
diff --git a/src-docs/src/components/guide_section/guide_section_types.tsx b/src-docs/src/components/guide_section/guide_section_types.tsx
index 77131a14f84..0597b72af2a 100644
--- a/src-docs/src/components/guide_section/guide_section_types.tsx
+++ b/src-docs/src/components/guide_section/guide_section_types.tsx
@@ -1,7 +1,6 @@
 export const GuideSectionTypes = {
   JS: 'JS',
   TSX: 'TSX',
-  HTML: 'HTML',
   SNIPPET: 'SNIPPET',
   SASS: 'SASS',
 };
diff --git a/src-docs/src/services/index.js b/src-docs/src/services/index.js
index 28fff8a3652..6749442516d 100644
--- a/src-docs/src/services/index.js
+++ b/src-docs/src/services/index.js
@@ -1,5 +1,3 @@
-export { renderToHtml } from './string/render_to_html';
-
 export { translateUsingPseudoLocale } from './string/pseudo_locale_translator';
 
 export {
diff --git a/src-docs/src/services/string/render_to_html.js b/src-docs/src/services/string/render_to_html.js
deleted file mode 100644
index 02906892e58..00000000000
--- a/src-docs/src/services/string/render_to_html.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import html from 'html';
-
-const renderTarget = document.createElement('div');
-export function renderToHtml(ComponentReference, props = {}) {
-  // If there's a failure, just return an empty string. The actual component itself should
-  // trip an error boundary in the UI when it fails.
-  try {
-    // Create the React element, render it and get its HTML, then format it prettily.
-    // the .html() call below renders the contents of the first node, so wrap everything in a div
-    const element = <ComponentReference {...props} />;
-
-    return {
-      render() {
-        ReactDOM.render(element, renderTarget);
-        const htmlString = renderTarget.innerHTML;
-        const result = htmlString;
-        ReactDOM.unmountComponentAtNode(renderTarget);
-
-        return html.prettyPrint(result, {
-          indent_size: 2,
-          unformatted: [], // Expand all tags, including spans
-        });
-      },
-    };
-  } catch (e) {
-    return '';
-  }
-}
diff --git a/src-docs/src/views/aspect_ratio/aspect_ratio_example.js b/src-docs/src/views/aspect_ratio/aspect_ratio_example.js
index 195d4e0e519..270bb24fb46 100644
--- a/src-docs/src/views/aspect_ratio/aspect_ratio_example.js
+++ b/src-docs/src/views/aspect_ratio/aspect_ratio_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import {
   EuiLink,
@@ -13,7 +11,6 @@ import aspectRatioConfig from './playground';
 
 import AspectRatio from './aspect_ratio';
 const aspectRatioSource = require('!!raw-loader!./aspect_ratio');
-const aspectRatioHtml = renderToHtml(AspectRatio);
 
 const aspectRatioSnippet = `<EuiAspectRatio width={16} height={9}>
   <!-- Embed goes here -->
@@ -28,10 +25,6 @@ export const AspectRatioExample = {
           type: GuideSectionTypes.JS,
           code: aspectRatioSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: aspectRatioHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/avatar/avatar_example.js b/src-docs/src/views/avatar/avatar_example.js
index 7fd15dbb9ee..06c1b920d56 100644
--- a/src-docs/src/views/avatar/avatar_example.js
+++ b/src-docs/src/views/avatar/avatar_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiAvatar, EuiCode } from '../../../../src/components';
@@ -9,7 +7,6 @@ import avatarConfig from './playground';
 
 import Avatar from './avatar';
 const avatarSource = require('!!raw-loader!./avatar');
-const avatarHtml = renderToHtml(Avatar);
 const avatarSnippet = [
   `<EuiAvatar name="Raphael" />
 `,
@@ -20,7 +17,6 @@ const avatarSnippet = [
 
 import AvatarInitials from './avatar_initials';
 const avatarInitialsSource = require('!!raw-loader!./avatar_initials');
-const avatarInitialsHtml = renderToHtml(AvatarInitials);
 const avatarInitialsSnippet = [
   `<EuiAvatar name="Kibana" initialsLength={2}/>
 `,
@@ -32,7 +28,6 @@ const avatarInitialsSnippet = [
 
 import AvatarTypes from './avatar_type';
 const avatarTypesSource = require('!!raw-loader!./avatar_type');
-const avatarTypesHtml = renderToHtml(AvatarTypes);
 const avatarTypesSnippet = [
   `<EuiAvatar type="space" name="Engineering Space" />
 `,
@@ -40,7 +35,6 @@ const avatarTypesSnippet = [
 
 import AvatarIcons from './avatar_icon';
 const avatarIconsSource = require('!!raw-loader!./avatar_icon');
-const avatarIconsHtml = renderToHtml(AvatarIcons);
 const avatarIconsSnippet = [
   `<EuiAvatar name="Management" iconType="managementApp" />
 `,
@@ -52,7 +46,6 @@ const avatarIconsSnippet = [
 
 import AvatarDisabled from './avatar_disabled';
 const avatarDisabledSource = require('!!raw-loader!./avatar_disabled');
-const avatarDisabledHtml = renderToHtml(AvatarDisabled);
 const avatarDisabledSnippet = [
   `<EuiAvatar isDisabled={true} name="Avatar" />
 `,
@@ -67,10 +60,6 @@ export const AvatarExample = {
           type: GuideSectionTypes.JS,
           code: avatarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: avatarHtml,
-        },
       ],
       text: (
         <div>
@@ -96,10 +85,6 @@ export const AvatarExample = {
           type: GuideSectionTypes.JS,
           code: avatarInitialsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: avatarInitialsHtml,
-        },
       ],
       text: (
         <div>
@@ -126,10 +111,6 @@ export const AvatarExample = {
           type: GuideSectionTypes.JS,
           code: avatarTypesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: avatarTypesHtml,
-        },
       ],
       text: (
         <div>
@@ -152,10 +133,6 @@ export const AvatarExample = {
           type: GuideSectionTypes.JS,
           code: avatarIconsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: avatarIconsHtml,
-        },
       ],
       text: (
         <div>
@@ -187,10 +164,6 @@ export const AvatarExample = {
           type: GuideSectionTypes.JS,
           code: avatarDisabledSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: avatarDisabledHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
index 6d8d1f2bdb2..3a1e3bed3fe 100644
--- a/src-docs/src/views/badge/badge_example.js
+++ b/src-docs/src/views/badge/badge_example.js
@@ -2,8 +2,6 @@ import React, { Fragment } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -23,7 +21,6 @@ import {
 import Badge from './badge';
 
 const badgeSource = require('!!raw-loader!./badge');
-const badgeHtml = renderToHtml(Badge);
 const badgeSnippet = [
   `<EuiBadge>Default</EuiBadge>
 `,
@@ -39,13 +36,11 @@ const badgeSnippet = [
 
 import BadgeWithIcon from './badge_with_icon';
 const badgeWithIconSource = require('!!raw-loader!./badge_with_icon');
-const badgeWithIconHtml = renderToHtml(BadgeWithIcon);
 const badgeWithIconSnippet = `<EuiBadge color="hollow" iconType="cross" iconSide="right">Label</EuiBadge>
 `;
 
 import BadgeButton from './badge_button';
 const badgeButtonSource = require('!!raw-loader!./badge_button');
-const badgeButtonHtml = renderToHtml(BadgeButton);
 const badgeButtonSnippet = [
   `<EuiBadge
   color="primary"
@@ -78,7 +73,6 @@ const badgeButtonSnippet = [
 
 import BadgeHealth from './badge_health';
 const badgeHealthSource = require('!!raw-loader!./badge_health');
-const badgeHealthHtml = renderToHtml(BadgeHealth);
 const badgeHealthSnippet = [
   `<EuiBadge color="success">Healthy</EuiBadge>
 `,
@@ -90,12 +84,10 @@ const badgeHealthSnippet = [
 
 import BadgeHref from './badge_href';
 const badgeHrefSource = require('!!raw-loader!./badge_href');
-const badgeHrefHtml = renderToHtml(BadgeHref);
 const badgeHrefSnippet = ['<EuiBadge href="#" />'];
 
 import BadgeTruncate from './badge_truncate';
 const badgeTruncateSource = require('!!raw-loader!./badge_truncate');
-const badgeTruncateHtml = renderToHtml(BadgeTruncate);
 const badgeTruncateSnippet = [
   `<EuiBadgeGroup gutterSize="s">
   <EuiBadge />
@@ -105,7 +97,6 @@ const badgeTruncateSnippet = [
 
 import BetaBadge from './beta_badge';
 const betaBadgeSource = require('!!raw-loader!./beta_badge');
-const betaBadgeHtml = renderToHtml(BetaBadge);
 const betaBadgeSnippet = [
   `<EuiBetaBadge label="Beta" />
 `,
@@ -117,7 +108,6 @@ const betaBadgeSnippet = [
 
 import NotificationBadge from './notification_badge';
 const notificationBadgeSource = require('!!raw-loader!./notification_badge');
-const notificationBadgeHtml = renderToHtml(NotificationBadge);
 const notificationBadgeSnippet = `<EuiNotificationBadge>3</EuiNotificationBadge>
 `;
 
@@ -130,10 +120,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: badgeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: badgeHtml,
-        },
       ],
       text: (
         <p>
@@ -156,10 +142,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: badgeWithIconSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: badgeWithIconHtml,
-        },
       ],
       text: <p>Badges can use icons on the left and right (default) sides.</p>,
       snippet: badgeWithIconSnippet,
@@ -172,10 +154,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: badgeButtonSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: badgeButtonHtml,
-        },
       ],
       text: (
         <div>
@@ -208,10 +186,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: badgeHealthSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: badgeHealthHtml,
-        },
       ],
       text: (
         <div>
@@ -231,10 +205,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: badgeHrefSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: badgeHrefHtml,
-        },
       ],
       text: (
         <div>
@@ -254,10 +224,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: badgeTruncateSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: badgeTruncateHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -289,10 +255,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: betaBadgeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: betaBadgeHtml,
-        },
       ],
       text: (
         <div>
@@ -337,10 +299,6 @@ export const BadgeExample = {
           type: GuideSectionTypes.JS,
           code: notificationBadgeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: notificationBadgeHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/beacon/beacon_example.js b/src-docs/src/views/beacon/beacon_example.js
index 67ae2b04598..fd7e906a21a 100644
--- a/src-docs/src/views/beacon/beacon_example.js
+++ b/src-docs/src/views/beacon/beacon_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiBeacon, EuiText } from '../../../../src/components';
@@ -10,7 +8,6 @@ import { beaconConfig } from './playground';
 
 import Beacon from './beacon';
 const beaconSource = require('!!raw-loader!./beacon');
-const beaconHtml = renderToHtml(Beacon);
 const beaconSnippet = '<EuiBeacon />';
 
 export const BeaconExample = {
@@ -22,10 +19,6 @@ export const BeaconExample = {
           type: GuideSectionTypes.JS,
           code: beaconSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: beaconHtml,
-        },
       ],
       text: (
         <EuiText>
diff --git a/src-docs/src/views/call_out/call_out_example.js b/src-docs/src/views/call_out/call_out_example.js
index 365e43133d2..0e65d607702 100644
--- a/src-docs/src/views/call_out/call_out_example.js
+++ b/src-docs/src/views/call_out/call_out_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCallOut, EuiText, EuiCode } from '../../../../src/components';
@@ -9,7 +7,6 @@ import callOutConfig from './playground';
 
 import Info from './info';
 const infoSource = require('!!raw-loader!./info');
-const infoHtml = renderToHtml(Info);
 const infoSnippet = [
   `<EuiCallOut size="m" title="Just a title. No content." iconType="gear" />
 `,
@@ -24,7 +21,6 @@ const infoSnippet = [
 
 import Success from './success';
 const successSource = require('!!raw-loader!./success');
-const successHtml = renderToHtml(Success);
 const successSnippet = [
   `<EuiCallOut title="Good news, everyone!" color="success" iconType="user">
   <p><!-- Content --></p>
@@ -34,7 +30,6 @@ const successSnippet = [
 
 import Warning from './warning';
 const warningSource = require('!!raw-loader!./warning');
-const warningHtml = renderToHtml(Warning);
 const warningSnippet = [
   `<EuiCallOut title="Proceed with caution!" color="warning" iconType="help">
   <p><!-- Content --></p>
@@ -44,7 +39,6 @@ const warningSnippet = [
 
 import Danger from './danger';
 const dangerSource = require('!!raw-loader!./danger');
-const dangerHtml = renderToHtml(Danger);
 const dangerSnippet = [
   `<EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
   <p><!-- Content --></p>
@@ -95,10 +89,6 @@ export const CallOutExample = {
           type: GuideSectionTypes.JS,
           code: infoSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: infoHtml,
-        },
       ],
       text: (
         <div>
@@ -120,10 +110,6 @@ export const CallOutExample = {
           type: GuideSectionTypes.JS,
           code: successSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: successHtml,
-        },
       ],
       text: (
         <p>
@@ -142,10 +128,6 @@ export const CallOutExample = {
           type: GuideSectionTypes.JS,
           code: warningSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: warningHtml,
-        },
       ],
       text: (
         <p>
@@ -162,10 +144,6 @@ export const CallOutExample = {
           type: GuideSectionTypes.JS,
           code: dangerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dangerHtml,
-        },
       ],
       text: (
         <p>Use this callout to let the user know that something went wrong.</p>
diff --git a/src-docs/src/views/color_palette/color_palette_example.js b/src-docs/src/views/color_palette/color_palette_example.js
index 4bd1033b4eb..41b6e3247d3 100644
--- a/src-docs/src/views/color_palette/color_palette_example.js
+++ b/src-docs/src/views/color_palette/color_palette_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import { qualitativePropsInfo, palettePropsInfo } from './props_info';
 
@@ -17,15 +15,12 @@ import {
 
 import ColorPalette from './color_palette';
 const colorPaletteSource = require('!!raw-loader!./color_palette');
-const colorPaletteHtml = renderToHtml(ColorPalette);
 
 import ColorPaletteQuant from './color_palette_quantitative';
 const colorPaletteQuantSource = require('!!raw-loader!./color_palette_quantitative');
-const colorPaletteQuantHtml = renderToHtml(ColorPaletteQuant);
 
 import ColorPaletteCustom from './color_palette_custom';
 const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom');
-const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom);
 
 import { VisPalette } from './vis_palette.js';
 
@@ -49,10 +44,6 @@ export const ColorPaletteExample = {
           type: GuideSectionTypes.JS,
           code: colorPaletteSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPaletteHtml,
-        },
       ],
       text: (
         <div>
@@ -91,10 +82,6 @@ export const ColorPaletteExample = {
           type: GuideSectionTypes.JS,
           code: colorPaletteQuantSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPaletteQuantHtml,
-        },
       ],
       text: (
         <div>
@@ -125,10 +112,6 @@ export const ColorPaletteExample = {
           type: GuideSectionTypes.JS,
           code: colorPaletteCustomSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPaletteCustomHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
index cb9a73a828a..4b05bce1a44 100644
--- a/src-docs/src/views/color_picker/color_picker_example.js
+++ b/src-docs/src/views/color_picker/color_picker_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -25,7 +23,6 @@ import { colorPickerConfig } from './playground';
 
 import ColorPicker from './color_picker';
 const colorPickerSource = require('!!raw-loader!./color_picker');
-const colorPickerHtml = renderToHtml(ColorPicker);
 const colorPickerSnippet = `<EuiColorPicker
   id={colorPickerId}
   onChange={handleChange}
@@ -36,7 +33,6 @@ const colorPickerSnippet = `<EuiColorPicker
 
 import ColorPaletteDisplay from './color_palette_display';
 const colorPaletteDisplaySource = require('!!raw-loader!./color_palette_display');
-const colorPaletteDisplayHtml = renderToHtml(ColorPaletteDisplay);
 const colorPaletteDisplaySnippet = [
   `<EuiColorPaletteDisplay
   palette={euiPaletteColorBlind()}
@@ -63,7 +59,6 @@ const colorPaletteDisplaySnippet = [
 
 import ColorPalettePicker from './color_palette_picker';
 const colorPalettePickerSource = require('!!raw-loader!./color_palette_picker');
-const colorPalettePickerHtml = renderToHtml(ColorPalettePicker);
 const colorPalettePickerSnippet = `<EuiColorPalettePicker
   palettes={[
     {
@@ -80,7 +75,6 @@ const colorPalettePickerSnippet = `<EuiColorPalettePicker
 
 import ColorStops from './color_stops';
 const colorStopsSource = require('!!raw-loader!./color_stops');
-const colorStopsHtml = renderToHtml(ColorStops);
 const colorStopsSnippetStandard = `<EuiColorStops
   label="Standard"
   onChange={handleChange}
@@ -121,7 +115,6 @@ const colorStopsSnippetStepped = `<EuiColorStops
 
 import ColorStopsRange from './color_stops_range';
 const colorStopsRangeSource = require('!!raw-loader!./color_stops_range');
-const colorStopsRangeHtml = renderToHtml(ColorStopsRange);
 const colorPickerRangeSnippet = `<EuiColorStops
   label="Free-range color stops"
   onChange={handleChange}
@@ -131,7 +124,6 @@ const colorPickerRangeSnippet = `<EuiColorStops
 
 import Alpha from './alpha';
 const alphaSource = require('!!raw-loader!./alpha');
-const alphaHtml = renderToHtml(Alpha);
 const alphaSnippet = `<EuiColorPicker
   id={colorPickerId}
   onChange={handleChange}
@@ -142,7 +134,6 @@ const alphaSnippet = `<EuiColorPicker
 
 import Formats from './formats';
 const formatsSource = require('!!raw-loader!./formats');
-const formatsHtml = renderToHtml(Formats);
 const formatsSnippet = `<EuiColorPicker
   format="hex"
   id={colorPickerId}
@@ -153,7 +144,6 @@ const formatsSnippet = `<EuiColorPicker
 
 import CustomSwatches from './custom_swatches';
 const customSwatchesSource = require('!!raw-loader!./custom_swatches');
-const customSwatchesHtml = renderToHtml(CustomSwatches);
 const customSwatchesSnippet = `<EuiColorPicker
   id={colorPickerId}
   onChange={handleChange}
@@ -184,7 +174,6 @@ const stopCustomSwatchesSnippet = `<EuiColorStops
 
 import CustomButton from './custom_button';
 const customButtonSource = require('!!raw-loader!./custom_button');
-const customButtonHtml = renderToHtml(CustomButton);
 const customButtonSnippet = `<EuiColorPicker
   onChange={handleChange}
   color={chosenColor}
@@ -216,7 +205,6 @@ const customBadgeSnippet = `// Be sure to provide relevant accessibility to unma
 
 import Empty from './empty_state';
 const emptySource = require('!!raw-loader!./empty_state');
-const emptyHtml = renderToHtml(CustomButton);
 const emptySnippet = `<EuiColorPicker
   onChange={handleChange}
   color={chosenColor}
@@ -227,7 +215,6 @@ const emptySnippet = `<EuiColorPicker
 
 import Modes from './modes';
 const modesSource = require('!!raw-loader!./modes');
-const modesHtml = renderToHtml(Modes);
 const modesSwatchSnippet = `// Swatches only
 <EuiColorPicker
   onChange={handleChange}
@@ -267,7 +254,6 @@ const stopModesPickerSnippet = `// Gradient map only
 
 import Inline from './inline';
 const inlineSource = require('!!raw-loader!./inline');
-const inlineHtml = renderToHtml(Inline);
 const inlineSnippet = `<EuiColorPicker
   onChange={handleChange}
   color={chosenColor}
@@ -278,11 +264,9 @@ const inlineSnippet = `<EuiColorPicker
 
 import Containers from './containers';
 const containersSource = require('!!raw-loader!./containers');
-const containersHtml = renderToHtml(Containers);
 
 import KitchenSink from './kitchen_sink';
 const kitchenSinkSource = require('!!raw-loader!./kitchen_sink');
-const kitchenSinkHtml = renderToHtml(KitchenSink);
 const kitchenSinkSnippet = `<EuiColorPicker
   onChange={handleChange}
   color={chosenColor}
@@ -360,10 +344,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: colorPickerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPickerHtml,
-        },
       ],
       props: { EuiColorPicker },
       snippet: colorPickerSnippet,
@@ -397,10 +377,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: colorPalettePickerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPalettePickerHtml,
-        },
       ],
       props: {
         EuiColorPalettePicker,
@@ -445,10 +421,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: colorPaletteDisplaySource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPaletteDisplayHtml,
-        },
       ],
       props: {
         EuiColorPaletteDisplay,
@@ -476,10 +448,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: colorStopsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorStopsHtml,
-        },
       ],
       props: {
         EuiColorStops,
@@ -515,10 +483,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: colorStopsRangeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorStopsRangeHtml,
-        },
       ],
       snippet: colorPickerRangeSnippet,
       demo: <ColorStopsRange />,
@@ -530,10 +494,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: formatsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formatsHtml,
-        },
       ],
       text: (
         <>
@@ -560,10 +520,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: alphaSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: alphaHtml,
-        },
       ],
       text: (
         <p>
@@ -582,10 +538,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: customSwatchesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: customSwatchesHtml,
-        },
       ],
       text: (
         <p>
@@ -604,10 +556,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: modesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: modesHtml,
-        },
       ],
       text: (
         <p>
@@ -633,10 +581,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: customButtonSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: customButtonHtml,
-        },
       ],
       text: (
         <>
@@ -665,10 +609,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: emptySource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: emptyHtml,
-        },
       ],
       text: (
         <>
@@ -691,10 +631,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: inlineSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inlineHtml,
-        },
       ],
       text: (
         <p>
@@ -714,10 +650,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: containersSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: containersHtml,
-        },
       ],
       text: (
         <p>
@@ -735,10 +667,6 @@ export const ColorPickerExample = {
           type: GuideSectionTypes.JS,
           code: kitchenSinkSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: kitchenSinkHtml,
-        },
       ],
       snippet: [kitchenSinkSnippet, stopKitchenSinkSnippet],
       demo: <KitchenSink />,
diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js
index f5e2570828a..9bf03d5f9ff 100644
--- a/src-docs/src/views/combo_box/combo_box_example.js
+++ b/src-docs/src/views/combo_box/combo_box_example.js
@@ -2,8 +2,6 @@ import React, { Fragment } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import { EuiCallOut } from '../../../../src';
 
@@ -18,7 +16,6 @@ import { EuiComboBoxOptionOption } from '!!prop-loader!../../../../src/component
 
 import ComboBox from './combo_box';
 const comboBoxSource = require('!!raw-loader!./combo_box');
-const comboBoxHtml = renderToHtml(ComboBox);
 const comboBoxSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select or create options"
@@ -34,11 +31,9 @@ const comboBoxSnippet = `<EuiComboBox
 
 import Containers from './containers';
 const containersSource = require('!!raw-loader!./containers');
-const containersHtml = renderToHtml(Containers);
 
 import Colors from './colors';
 const colorsSource = require('!!raw-loader!./colors');
-const colorsHtml = renderToHtml(Colors);
 const colorsSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select or create options"
@@ -56,7 +51,6 @@ const colorsSnippet = `<EuiComboBox
 
 import RenderOption from './render_option';
 const renderOptionSource = require('!!raw-loader!./render_option');
-const renderOptionHtml = renderToHtml(RenderOption);
 const renderOptionSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select or create options"
@@ -69,7 +63,6 @@ const renderOptionSnippet = `<EuiComboBox
 
 import Groups from './groups';
 const groupsSource = require('!!raw-loader!./groups');
-const groupsHtml = renderToHtml(Groups);
 const groupsSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="These options are grouped"
@@ -82,7 +75,6 @@ const groupsSnippet = `<EuiComboBox
 import SingleSelection from './single_selection';
 import SingleSelectionPrepend from './single_selection_prepend';
 const singleSelectionSource = require('!!raw-loader!./single_selection');
-const singleSelectionHtml = renderToHtml(SingleSelection);
 const singleSelectionPrependSource = require('!!raw-loader!./single_selection_prepend');
 const singleSelectionSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
@@ -102,9 +94,6 @@ const singleSelectionPrependSnippet = `<EuiComboBox
 
 import SingleSelectionCustomOptions from './single_selection_custom_options';
 const singleSelectionCustomOptionsSource = require('!!raw-loader!./single_selection_custom_options');
-const singleSelectionCustomOptionsHtml = renderToHtml(
-  SingleSelectionCustomOptions
-);
 const singleSelectionCustomOptionsSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select a single option"
@@ -117,7 +106,6 @@ const singleSelectionCustomOptionsSnippet = `<EuiComboBox
 
 import DisallowCustomOptions from './disallow_custom_options';
 const disallowCustomOptionsSource = require('!!raw-loader!./disallow_custom_options');
-const disallowCustomOptionsHtml = renderToHtml(DisallowCustomOptions);
 const disallowCustomOptionsSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select one or more options"
@@ -128,7 +116,6 @@ const disallowCustomOptionsSnippet = `<EuiComboBox
 
 import CustomOptionsOnly from './custom_options_only';
 const customOptionsOnlySource = require('!!raw-loader!./custom_options_only');
-const customOptionsOnlyHtml = renderToHtml(CustomOptionsOnly);
 const customOptionsOnlySnippet = `<EuiComboBox
   noSuggestions
   placeholder="Create some tags (letters only)"
@@ -141,7 +128,6 @@ const customOptionsOnlySnippet = `<EuiComboBox
 
 import Async from './async';
 const asyncSource = require('!!raw-loader!./async');
-const asyncHtml = renderToHtml(Async);
 const asyncSnippet = `<EuiComboBox
   placeholder="Search asynchronously"
   async
@@ -156,7 +142,6 @@ const asyncSnippet = `<EuiComboBox
 
 import Virtualized from './virtualized';
 const virtualizedSource = require('!!raw-loader!./virtualized');
-const virtualizedHtml = renderToHtml(Virtualized);
 const virtualizedSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select one or more options"
@@ -167,7 +152,6 @@ const virtualizedSnippet = `<EuiComboBox
 
 import Disabled from './disabled';
 const disabledSource = require('!!raw-loader!./disabled');
-const disabledHtml = renderToHtml(Disabled);
 const disabledSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select or create options"
@@ -179,7 +163,6 @@ const disabledSnippet = `<EuiComboBox
 
 import Delimiter from './combo_box_delimiter';
 const delimiterSource = require('!!raw-loader!./combo_box_delimiter');
-const delimiterHtml = renderToHtml(Delimiter);
 const delimiterSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select or create options"
@@ -193,7 +176,6 @@ const delimiterSnippet = `<EuiComboBox
 
 import StartingWith from './startingWith';
 const startingWithSource = require('!!raw-loader!./startingWith');
-const startingWithHtml = renderToHtml(StartingWith);
 const startingWithSnippet = `<EuiComboBox
   aria-label="Accessible screen reader label"
   placeholder="Select or create options"
@@ -207,7 +189,6 @@ const startingWithSnippet = `<EuiComboBox
 
 import DuplicateOptions from './combo_box_duplicates';
 const duplicateOptionsSource = require('!!raw-loader!./combo_box_duplicates');
-const duplicateOptionsHtml = renderToHtml(DuplicateOptions);
 const duplicateOptionsSnippet = `const options = [{
   label: 'Label',
   key: 'label1',
@@ -265,10 +246,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: comboBoxSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: comboBoxHtml,
-        },
       ],
       props: { EuiComboBox, EuiComboBoxOptionOption },
       snippet: comboBoxSnippet,
@@ -281,10 +258,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: disabledSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: disabledHtml,
-        },
       ],
       text: (
         <p>
@@ -303,10 +276,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: virtualizedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: virtualizedHtml,
-        },
       ],
       text: (
         <p>
@@ -329,10 +298,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: containersSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: containersHtml,
-        },
       ],
       text: (
         <p>
@@ -351,10 +316,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: colorsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorsHtml,
-        },
       ],
       text: (
         <p>
@@ -379,10 +340,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: renderOptionSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: renderOptionHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -413,10 +370,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: groupsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: groupsHtml,
-        },
       ],
       text: (
         <p>
@@ -435,10 +388,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: singleSelectionSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: singleSelectionHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -463,10 +412,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: singleSelectionPrependSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: singleSelectionHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -491,10 +436,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: singleSelectionCustomOptionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: singleSelectionCustomOptionsHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -523,10 +464,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: disallowCustomOptionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: disallowCustomOptionsHtml,
-        },
       ],
       text: (
         <p>
@@ -545,10 +482,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: customOptionsOnlySource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: customOptionsOnlyHtml,
-        },
       ],
       text: (
         <p>
@@ -568,10 +501,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: asyncSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: asyncHtml,
-        },
       ],
       text: (
         <p>
@@ -592,10 +521,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: delimiterSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: delimiterHtml,
-        },
       ],
       text: (
         <p>
@@ -615,10 +540,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: startingWithSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: startingWithHtml,
-        },
       ],
       text: (
         <p>
@@ -640,10 +561,6 @@ export const ComboBoxExample = {
           type: GuideSectionTypes.JS,
           code: duplicateOptionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: duplicateOptionsHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js
index b29ab3da472..2d4020bfb4e 100644
--- a/src-docs/src/views/comment/comment_example.js
+++ b/src-docs/src/views/comment/comment_example.js
@@ -2,8 +2,6 @@ import React from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -15,23 +13,18 @@ import commentConfig from './playground';
 
 import Comment from './comment';
 const commentSource = require('!!raw-loader!./comment');
-const commentHtml = renderToHtml(Comment);
 
 import CommentTypes from './comment_types';
 const commentTypesSource = require('!!raw-loader!./comment_types');
-const commentTypesHtml = renderToHtml(CommentTypes);
 
 import CommentTimelineIcons from './comment_timelineIcons';
 const commentTimelineIconsSource = require('!!raw-loader!./comment_timelineIcons');
-const commentTimelineIconsHtml = renderToHtml(CommentTimelineIcons);
 
 import CommentActions from './comment_actions';
 const commentActionsSource = require('!!raw-loader!./comment_actions');
-const commentActionsHtml = renderToHtml(CommentActions);
 
 import CommentList from './comment_list';
 const commentListSource = require('!!raw-loader!./comment_list');
-const commentListHtml = renderToHtml(CommentList);
 
 const commentSnippet = `<EuiComment username="janed">
   {body}
@@ -87,10 +80,6 @@ export const CommentListExample = {
           type: GuideSectionTypes.JS,
           code: commentListSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: commentListHtml,
-        },
       ],
       text: (
         <div>
@@ -111,10 +100,6 @@ export const CommentListExample = {
           type: GuideSectionTypes.JS,
           code: commentSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: commentHtml,
-        },
       ],
       text: (
         <div>
@@ -142,10 +127,6 @@ export const CommentListExample = {
           type: GuideSectionTypes.JS,
           code: commentTypesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: commentTypesHtml,
-        },
       ],
       text: (
         <div>
@@ -174,10 +155,6 @@ export const CommentListExample = {
           type: GuideSectionTypes.JS,
           code: commentTimelineIconsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: commentTimelineIconsHtml,
-        },
       ],
       text: (
         <div>
@@ -216,10 +193,6 @@ export const CommentListExample = {
           type: GuideSectionTypes.JS,
           code: commentActionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: commentActionsHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
index 6954855a3be..4aa0d2ec81b 100644
--- a/src-docs/src/views/context_menu/context_menu_example.js
+++ b/src-docs/src/views/context_menu/context_menu_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -14,7 +12,6 @@ import {
 
 import ContextMenu from './context_menu';
 const contextMenuSource = require('!!raw-loader!./context_menu');
-const contextMenuHtml = renderToHtml(ContextMenu);
 const contextMenuSnippet = `<EuiContextMenu
   initialPanelId={0}
   panels={[
@@ -36,7 +33,6 @@ const contextMenuSnippet = `<EuiContextMenu
 
 import SinglePanel from './single_panel';
 const singlePanelSource = require('!!raw-loader!./single_panel');
-const singlePanelHtml = renderToHtml(SinglePanel);
 const singlePanelSnippet = `<EuiContextMenuPanel
   items={[
     <EuiContextMenuItem
@@ -49,7 +45,6 @@ const singlePanelSnippet = `<EuiContextMenuPanel
 
 import Small from './small';
 const smallSizeSource = require('!!raw-loader!./small');
-const smallSizeHtml = renderToHtml(SinglePanel);
 const smallSnippet = `<EuiContextMenuPanel
   size="s"
   items={items}
@@ -57,7 +52,6 @@ const smallSnippet = `<EuiContextMenuPanel
 
 import ContentPanel from './content_panel';
 const contentPanelSource = require('!!raw-loader!./content_panel');
-const contentPanelHtml = renderToHtml(ContentPanel);
 const contentPanelSnippet = `<EuiContextMenuPanel>
   <!-- React element as child -->
 </EuiContextMenuPanel>
@@ -65,7 +59,6 @@ const contentPanelSnippet = `<EuiContextMenuPanel>
 
 import ContextMenuWithContent from './context_menu_with_content';
 const contextMenuWithContentSource = require('!!raw-loader!./context_menu_with_content');
-const contextMenuWithContentHtml = renderToHtml(ContextMenuWithContent);
 
 export const ContextMenuExample = {
   title: 'Context menu',
@@ -76,10 +69,6 @@ export const ContextMenuExample = {
           type: GuideSectionTypes.JS,
           code: contextMenuSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: contextMenuHtml,
-        },
       ],
       text: (
         <p>
@@ -103,10 +92,6 @@ export const ContextMenuExample = {
           type: GuideSectionTypes.JS,
           code: smallSizeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: smallSizeHtml,
-        },
       ],
       text: (
         <p>
@@ -129,10 +114,6 @@ export const ContextMenuExample = {
           type: GuideSectionTypes.JS,
           code: singlePanelSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: singlePanelHtml,
-        },
       ],
       text: (
         <p>
@@ -151,10 +132,6 @@ export const ContextMenuExample = {
           type: GuideSectionTypes.JS,
           code: contentPanelSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: contentPanelHtml,
-        },
       ],
       text: (
         <p>
@@ -173,10 +150,6 @@ export const ContextMenuExample = {
           type: GuideSectionTypes.JS,
           code: contextMenuWithContentSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: contextMenuWithContentHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/control_bar/control_bar_example.js b/src-docs/src/views/control_bar/control_bar_example.js
index 6797300294d..6b295c1e5b7 100644
--- a/src-docs/src/views/control_bar/control_bar_example.js
+++ b/src-docs/src/views/control_bar/control_bar_example.js
@@ -14,8 +14,6 @@ import {
   TextControlProps,
 } from './props';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import ControlBar from './control_bar';
@@ -24,10 +22,8 @@ import ControlBarWithTabs from './tabs';
 import ControlBarMobile from './mobile';
 
 const controlsSource = require('!!raw-loader!./controls');
-const controlsHtml = renderToHtml(Controls);
 
 const controlBarSource = require('!!raw-loader!./control_bar');
-const controlBarHtml = renderToHtml(ControlBar);
 const controlBarSnippet = `<EuiControlBar
   showContent={false}
   controls={
@@ -74,11 +70,9 @@ const controlBarSnippet = `<EuiControlBar
 />`;
 
 const tabsBarSource = require('!!raw-loader!./tabs');
-const tabsBarHtml = renderToHtml(ControlBarWithTabs);
 const tabsBarSnippet = '<EuiControlBar controls={items} size="m"/>';
 
 const mobileBarSource = require('!!raw-loader!./mobile');
-const mobileBarHtml = renderToHtml(ControlBarMobile);
 const mobileBarSnippet = `<EuiControlBar
   showOnMobile
   controls={[
@@ -127,10 +121,6 @@ export const ControlBarExample = {
           type: GuideSectionTypes.JS,
           code: controlBarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: controlBarHtml,
-        },
       ],
       text: (
         <div>
@@ -162,10 +152,6 @@ export const ControlBarExample = {
           type: GuideSectionTypes.JS,
           code: tabsBarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: tabsBarHtml,
-        },
       ],
       text: (
         <div>
@@ -193,10 +179,6 @@ export const ControlBarExample = {
           type: GuideSectionTypes.JS,
           code: mobileBarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: mobileBarHtml,
-        },
       ],
       text: (
         <div>
@@ -229,10 +211,6 @@ export const ControlBarExample = {
           type: GuideSectionTypes.JS,
           code: controlsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: controlsHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/copy/copy_example.js b/src-docs/src/views/copy/copy_example.js
index e196cf60bd7..de84a0d5260 100644
--- a/src-docs/src/views/copy/copy_example.js
+++ b/src-docs/src/views/copy/copy_example.js
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCopy, EuiCode } from '../../../../src/components';
 
 import Copy from './copy';
 const copySource = require('!!raw-loader!./copy');
-const copyHtml = renderToHtml(Copy);
 
 export const CopyExample = {
   title: 'Copy',
@@ -19,10 +16,6 @@ export const CopyExample = {
           type: GuideSectionTypes.JS,
           code: copySource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: copyHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js b/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js
index 1ec706a74c3..d4eefb0f823 100644
--- a/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js
+++ b/src-docs/src/views/datagrid/datagrid_controlcolumns_example.js
@@ -1,13 +1,10 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import { EuiDataGrid, EuiCodeBlock, EuiCode } from '../../../../src/components';
 
 import DataGridControlColumns from './control_columns';
 const dataGridControlColumnsSource = require('!!raw-loader!./control_columns');
-const dataGridControlColumnsHtml = renderToHtml(DataGridControlColumns);
 
 import { EuiDataGridControlColumn } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
 
@@ -41,10 +38,6 @@ export const DataGridControlColumnsExample = {
           type: GuideSectionTypes.JS,
           code: dataGridControlColumnsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridControlColumnsHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
index ec42cef60bc..dcdc98f1472 100644
--- a/src-docs/src/views/datagrid/datagrid_example.js
+++ b/src-docs/src/views/datagrid/datagrid_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import {
   EuiDataGrid,
@@ -17,7 +15,6 @@ import { Link } from 'react-router-dom';
 
 import DataGrid from './datagrid';
 const dataGridSource = require('!!raw-loader!./datagrid');
-const dataGridHtml = renderToHtml(DataGrid);
 
 import {
   EuiDataGridColumn,
@@ -333,10 +330,6 @@ export const DataGridExample = {
           type: GuideSectionTypes.JS,
           code: dataGridSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/datagrid/datagrid_focus_example.js b/src-docs/src/views/datagrid/datagrid_focus_example.js
index dda1d9dcab4..d4718725ddd 100644
--- a/src-docs/src/views/datagrid/datagrid_focus_example.js
+++ b/src-docs/src/views/datagrid/datagrid_focus_example.js
@@ -1,13 +1,10 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import { EuiCallOut, EuiCode } from '../../../../src/components';
 
 import DataGridFocus from './focus';
 const dataGridFocusSource = require('!!raw-loader!./focus');
-const dataGridFocusHtml = renderToHtml(DataGridFocus);
 
 export const DataGridFocusExample = {
   title: 'Data grid focus',
@@ -18,10 +15,6 @@ export const DataGridFocusExample = {
           type: GuideSectionTypes.JS,
           code: dataGridFocusSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridFocusHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/datagrid/datagrid_footer_row_example.js b/src-docs/src/views/datagrid/datagrid_footer_row_example.js
index 4414e92b012..306efc8d106 100644
--- a/src-docs/src/views/datagrid/datagrid_footer_row_example.js
+++ b/src-docs/src/views/datagrid/datagrid_footer_row_example.js
@@ -1,13 +1,10 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import { EuiDataGrid, EuiCodeBlock, EuiCode } from '../../../../src/components';
 
 import DataGridFooterRow from './footer_row';
 const dataGridControlColumnsSource = require('!!raw-loader!./footer_row');
-const dataGridControlColumnsHtml = renderToHtml(DataGridFooterRow);
 
 import { EuiDataGridControlColumn } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
 import { EuiDataGridCellValueElementProps } from '!!prop-loader!../../../../src/components/datagrid/body/data_grid_cell';
@@ -33,10 +30,6 @@ export const DataGridFooterRowExample = {
           type: GuideSectionTypes.JS,
           code: dataGridControlColumnsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridControlColumnsHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/datagrid/datagrid_memory_example.js b/src-docs/src/views/datagrid/datagrid_memory_example.js
index f64da65624f..f4b8f6d77b7 100644
--- a/src-docs/src/views/datagrid/datagrid_memory_example.js
+++ b/src-docs/src/views/datagrid/datagrid_memory_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import {
   EuiDataGrid,
@@ -13,21 +11,15 @@ import {
 
 import InMemoryDataGrid from './in_memory';
 const inMemoryDataGridSource = require('!!raw-loader!./in_memory');
-const inMemoryDataGridHtml = renderToHtml(InMemoryDataGrid);
 
 import InMemoryEnhancementsDataGrid from './in_memory_enhancements';
 const inMemoryEnhancementsDataGridSource = require('!!raw-loader!./in_memory_enhancements');
-const inMemoryEnhancementsDataGridHtml = renderToHtml(
-  InMemoryEnhancementsDataGrid
-);
 
 import InMemoryPaginationDataGrid from './in_memory_pagination';
 const inMemoryPaginationDataGridSource = require('!!raw-loader!./in_memory_pagination');
-const inMemoryPaginationDataGridHtml = renderToHtml(InMemoryPaginationDataGrid);
 
 import InMemorySortingDataGrid from './in_memory_sorting';
 const inMemorySortingDataGridSource = require('!!raw-loader!./in_memory_sorting');
-const inMemorySortingDataGridHtml = renderToHtml(InMemorySortingDataGrid);
 
 import {
   EuiDataGridColumn,
@@ -105,10 +97,6 @@ export const DataGridMemoryExample = {
           type: GuideSectionTypes.JS,
           code: inMemoryDataGridSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inMemoryDataGridHtml,
-        },
       ],
       title: 'When in-memory is not used',
       text: (
@@ -147,10 +135,6 @@ export const DataGridMemoryExample = {
           type: GuideSectionTypes.JS,
           code: inMemoryEnhancementsDataGridSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inMemoryEnhancementsDataGridHtml,
-        },
       ],
       title: 'Enhancements only in-memory',
       text: (
@@ -185,10 +169,6 @@ export const DataGridMemoryExample = {
           type: GuideSectionTypes.JS,
           code: inMemoryPaginationDataGridSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inMemoryPaginationDataGridHtml,
-        },
       ],
       title: 'Pagination only in-memory',
       text: (
@@ -222,10 +202,6 @@ export const DataGridMemoryExample = {
           type: GuideSectionTypes.JS,
           code: inMemorySortingDataGridSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inMemorySortingDataGridHtml,
-        },
       ],
       title: 'Sorting and pagination in-memory',
       text: (
diff --git a/src-docs/src/views/datagrid/datagrid_schema_example.js b/src-docs/src/views/datagrid/datagrid_schema_example.js
index 8f103f466c1..246d6ac3ac1 100644
--- a/src-docs/src/views/datagrid/datagrid_schema_example.js
+++ b/src-docs/src/views/datagrid/datagrid_schema_example.js
@@ -1,13 +1,10 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import { EuiDataGrid, EuiCode } from '../../../../src/components';
 
 import DataGridSchema from './schema';
 const dataGridSchemaSource = require('!!raw-loader!./schema');
-const dataGridSchemaHtml = renderToHtml(DataGridSchema);
 
 import {
   EuiDataGridColumn,
@@ -32,10 +29,6 @@ export const DataGridSchemaExample = {
           type: GuideSectionTypes.JS,
           code: dataGridSchemaSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridSchemaHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
index 73e8bed5bb3..6afb7be3a2a 100644
--- a/src-docs/src/views/datagrid/datagrid_styling_example.js
+++ b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 import {
   EuiDataGrid,
@@ -13,27 +11,22 @@ import {
 
 import DataGridContainer from './container';
 const dataGridContainerSource = require('!!raw-loader!./container');
-const dataGridContainerHtml = renderToHtml(DataGridContainer);
+
 import DataGridFlex from './flex';
 const dataGridFlexSource = require('!!raw-loader!./flex');
 
 import DataGridStyling from './styling';
 const dataGridStylingSource = require('!!raw-loader!./styling');
-const dataGridStylingHtml = renderToHtml(DataGridStyling);
 
 import DataGridControls from './additional_controls';
 const dataGridControlsSource = require('!!raw-loader!./additional_controls');
-const dataGridControlsHtml = renderToHtml(DataGridControls);
 
 import DataGridColumnWidths from './column_widths';
 import DataGridColumnActions from './column_actions';
 import DataGridColumnCellActions from './column_cell_actions';
 const dataGridColumnWidthsSource = require('!!raw-loader!./column_widths');
-const dataGridColumnWidthsHtml = renderToHtml(DataGridColumnWidths);
 const dataGridColumnActionsSource = require('!!raw-loader!./column_actions');
-const dataGridColumnActionsHtml = renderToHtml(DataGridColumnActions);
 const dataGridColumnCellActionsSource = require('!!raw-loader!./column_cell_actions');
-const dataGridColumnCellActionsHtml = renderToHtml(DataGridColumnActions);
 
 import {
   EuiDataGridColumn,
@@ -148,10 +141,6 @@ export const DataGridStylingExample = {
           type: GuideSectionTypes.JS,
           code: dataGridStylingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridStylingHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -195,10 +184,6 @@ export const DataGridStylingExample = {
           type: GuideSectionTypes.JS,
           code: dataGridContainerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridContainerHtml,
-        },
       ],
       title: 'Data grid adapts to its container',
       text: (
@@ -238,10 +223,6 @@ export const DataGridStylingExample = {
           type: GuideSectionTypes.JS,
           code: dataGridControlsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridControlsHtml,
-        },
       ],
       title: 'Additional controls in the toolbar',
       text: (
@@ -265,10 +246,6 @@ export const DataGridStylingExample = {
           type: GuideSectionTypes.JS,
           code: dataGridColumnWidthsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridColumnWidthsHtml,
-        },
       ],
       title: 'Column width constraints',
       text: (
@@ -305,10 +282,6 @@ export const DataGridStylingExample = {
           type: GuideSectionTypes.JS,
           code: dataGridColumnActionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridColumnActionsHtml,
-        },
       ],
       title: 'Column actions',
       text: (
@@ -346,10 +319,6 @@ export const DataGridStylingExample = {
           type: GuideSectionTypes.JS,
           code: dataGridColumnCellActionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridColumnCellActionsHtml,
-        },
       ],
       title: 'Column cell actions',
       text: (
diff --git a/src-docs/src/views/datagrid/datagrid_virtualization_example.js b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
index e223681cb04..c14ab10d8fd 100644
--- a/src-docs/src/views/datagrid/datagrid_virtualization_example.js
+++ b/src-docs/src/views/datagrid/datagrid_virtualization_example.js
@@ -1,18 +1,12 @@
 import React, { Fragment } from 'react';
-
-import { renderToHtml } from '../../services';
 import { EuiCallOut, EuiCode } from '../../../../src/components';
 import { GuideSectionTypes } from '../../components';
 
 import DataGridVirtualization from './virtualization';
 const dataGridVirtualizationSource = require('!!raw-loader!./virtualization');
-const dataGridVirtualizationHtml = renderToHtml(DataGridVirtualization);
 
 import DataGridVirtualizationConstrained from './virtualization_constrained';
 const dataGridVirtualizationConstrainedSource = require('!!raw-loader!./virtualization_constrained');
-const dataGridVirtualizationConstrainedHtml = renderToHtml(
-  DataGridVirtualizationConstrained
-);
 
 export const DataGridVirtualizationExample = {
   title: 'Data grid virtualization',
@@ -23,10 +17,6 @@ export const DataGridVirtualizationExample = {
           type: GuideSectionTypes.JS,
           code: dataGridVirtualizationSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridVirtualizationHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -76,10 +66,6 @@ export const DataGridVirtualizationExample = {
           type: GuideSectionTypes.JS,
           code: dataGridVirtualizationConstrainedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dataGridVirtualizationConstrainedHtml,
-        },
       ],
       demo: <DataGridVirtualizationConstrained />,
     },
diff --git a/src-docs/src/views/date_picker/date_picker_example.js b/src-docs/src/views/date_picker/date_picker_example.js
index 55dd3987b8c..be612616f35 100644
--- a/src-docs/src/views/date_picker/date_picker_example.js
+++ b/src-docs/src/views/date_picker/date_picker_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -13,50 +11,39 @@ import {
 
 import DatePicker from './date_picker';
 const datePickerSource = require('!!raw-loader!./date_picker');
-const datePickerHtml = renderToHtml(DatePicker);
 
 import States from './states';
 const statesSource = require('!!raw-loader!./states');
-const statesHtml = renderToHtml(States);
 
 import Locale from './locale';
 const localeSource = require('!!raw-loader!./locale');
-const localeHtml = renderToHtml(Locale);
 
 import Time from './time_select';
 const timeSource = require('!!raw-loader!./time_select');
-const timeHtml = renderToHtml(Time);
 
 import Inline from './inline';
 const inlineSource = require('!!raw-loader!./inline');
-const inlineHtml = renderToHtml(Inline);
 
 import Range from './range';
 const rangeSource = require('!!raw-loader!./range');
-const rangeHtml = renderToHtml(Range);
 
 import RangeRestricted from './range_restricted';
 const rangeRestrictedSource = require('!!raw-loader!./range_restricted');
 
 import MinMax from './min_max';
 const minMaxSource = require('!!raw-loader!./min_max');
-const minMaxHtml = renderToHtml(MinMax);
 
 import Classes from './classes';
 const classesSource = require('!!raw-loader!./classes');
-const classesHtml = renderToHtml(Classes);
 
 import OpenToDate from './open_to_date';
 const openToDateSource = require('!!raw-loader!./open_to_date');
-const openToDateHtml = renderToHtml(OpenToDate);
 
 import CustomInput from './custom_input';
 const customInputSource = require('!!raw-loader!./custom_input');
-const customInputHtml = renderToHtml(CustomInput);
 
 import Utc from './utc';
 const utcSource = require('!!raw-loader!./utc');
-const utcHtml = renderToHtml(Utc);
 
 const datePickerSnippet =
   '<EuiDatePicker selected={startDate} onChange={handleChange} />';
@@ -205,10 +192,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: datePickerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: datePickerHtml,
-        },
       ],
       text: (
         <p>
@@ -231,10 +214,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: statesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statesHtml,
-        },
       ],
       text: (
         <p>
@@ -252,10 +231,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: timeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: timeHtml,
-        },
       ],
       text: (
         <p>
@@ -277,10 +252,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: localeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: localeHtml,
-        },
       ],
       text: (
         <p>
@@ -304,10 +275,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: rangeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: rangeHtml,
-        },
       ],
       text: (
         <p>
@@ -353,10 +320,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: minMaxSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: minMaxHtml,
-        },
       ],
       text: (
         <p>
@@ -379,10 +342,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: openToDateSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: openToDateHtml,
-        },
       ],
       text: (
         <p>
@@ -400,10 +359,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: customInputSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: customInputHtml,
-        },
       ],
       text: (
         <p>
@@ -421,10 +376,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: utcSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: utcHtml,
-        },
       ],
       text: (
         <p>
@@ -441,10 +392,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: inlineSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inlineHtml,
-        },
       ],
       text: (
         <p>
@@ -465,10 +412,6 @@ export const DatePickerExample = {
           type: GuideSectionTypes.JS,
           code: classesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: classesHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/delay_render/delay_render_example.js b/src-docs/src/views/delay_render/delay_render_example.js
index 2ad26c401bb..772a45451cb 100644
--- a/src-docs/src/views/delay_render/delay_render_example.js
+++ b/src-docs/src/views/delay_render/delay_render_example.js
@@ -2,14 +2,11 @@ import React from 'react';
 import DelayRender from './delay_render';
 import { GuideSectionTypes } from '../../components';
 import { EuiDelayRender, EuiDelayHide } from '../../../../src/components';
-import { renderToHtml } from '../../services';
 import DelayHide from './delay_hide';
 
 const delayHideSource = require('!!raw-loader!./delay_hide');
-const delayHideHtml = renderToHtml(DelayHide);
 
 const delayRenderSource = require('!!raw-loader!./delay_render');
-const delayRenderHtml = renderToHtml(DelayRender);
 
 export const DelayRenderExample = {
   title: 'Delay',
@@ -21,10 +18,6 @@ export const DelayRenderExample = {
           type: GuideSectionTypes.JS,
           code: delayRenderSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: delayRenderHtml,
-        },
       ],
       text: (
         <p>
@@ -45,10 +38,6 @@ export const DelayRenderExample = {
           type: GuideSectionTypes.JS,
           code: delayHideSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: delayHideHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/description_list/description_list_example.js b/src-docs/src/views/description_list/description_list_example.js
index 18285b99a18..31085eb7601 100644
--- a/src-docs/src/views/description_list/description_list_example.js
+++ b/src-docs/src/views/description_list/description_list_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -13,7 +11,6 @@ import {
 
 import DescriptionList from './description_list';
 const descriptionListSource = require('!!raw-loader!./description_list');
-const descriptionListHtml = renderToHtml(DescriptionList);
 const descriptionListSnippet = [
   `<EuiDescriptionList
   listItems={[
@@ -33,7 +30,6 @@ const descriptionListSnippet = [
 
 import DescriptionListColumn from './description_list_column';
 const descriptionListColumnSource = require('!!raw-loader!./description_list_column');
-const descriptionListColumnHtml = renderToHtml(DescriptionListColumn);
 const descriptionListColumnSnippet = [
   `<EuiDescriptionList
   type="column"
@@ -47,7 +43,6 @@ const descriptionListColumnSnippet = [
 
 import DescriptionListStyling from './description_list_styling';
 const descriptionListStylingSource = require('!!raw-loader!./description_list_styling');
-const descriptionListStylingHtml = renderToHtml(DescriptionListStyling);
 const descriptionListStylingSnippet = [
   `<EuiDescriptionList
   listItems={favoriteVideoGames}
@@ -58,7 +53,6 @@ const descriptionListStylingSnippet = [
 
 import DescriptionListInline from './description_list_inline';
 const descriptionListInlineSource = require('!!raw-loader!./description_list_inline');
-const descriptionListInlineHtml = renderToHtml(DescriptionListInline);
 const descriptionListInlineSnippet = [
   `<EuiDescriptionList
   type="inline"
@@ -68,7 +62,6 @@ const descriptionListInlineSnippet = [
 
 import DescriptionListReverse from './description_list_reverse';
 const descriptionListReverseSource = require('!!raw-loader!./description_list_reverse');
-const descriptionListReverseHtml = renderToHtml(DescriptionListReverse);
 const descriptionListReverseSnippet = [
   `<EuiDescriptionList
   textStyle="reverse"
@@ -78,7 +71,6 @@ const descriptionListReverseSnippet = [
 
 import DescriptionListClasses from './description_list_classes';
 const descriptionListClassesSource = require('!!raw-loader!./description_list_classes');
-const descriptionListClassesHtml = renderToHtml(DescriptionListClasses);
 const descriptionListClassesSnippet = [
   `<EuiDescriptionList
   titleProps={{ className: 'eui-textTruncate' }}
@@ -96,10 +88,6 @@ export const DescriptionListExample = {
           type: GuideSectionTypes.JS,
           code: descriptionListSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: descriptionListHtml,
-        },
       ],
       text: (
         <p>
@@ -126,10 +114,6 @@ export const DescriptionListExample = {
           type: GuideSectionTypes.JS,
           code: descriptionListReverseSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: descriptionListReverseHtml,
-        },
       ],
       text: (
         <div>
@@ -156,10 +140,6 @@ export const DescriptionListExample = {
           type: GuideSectionTypes.JS,
           code: descriptionListColumnSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: descriptionListColumnHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -184,10 +164,6 @@ export const DescriptionListExample = {
           type: GuideSectionTypes.JS,
           code: descriptionListInlineSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: descriptionListInlineHtml,
-        },
       ],
       text: (
         <p>
@@ -207,10 +183,6 @@ export const DescriptionListExample = {
           type: GuideSectionTypes.JS,
           code: descriptionListStylingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: descriptionListStylingHtml,
-        },
       ],
       text: (
         <p>
@@ -229,10 +201,6 @@ export const DescriptionListExample = {
           type: GuideSectionTypes.JS,
           code: descriptionListClassesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: descriptionListClassesHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
index 8d7022d2c68..9b6f2598690 100644
--- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
+++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
@@ -10,39 +10,30 @@ import {
   EuiSpacer,
   EuiText,
 } from '../../../../src/components';
-import { renderToHtml } from '../../services';
 
 import DragAndDropBare from './drag_and_drop_bare';
 const dragAndDropBareSource = require('!!raw-loader!./drag_and_drop_bare');
-const dragAndDropBareHtml = renderToHtml(DragAndDropBare);
 
 import DragAndDrop from './drag_and_drop';
 const dragAndDropSource = require('!!raw-loader!./drag_and_drop');
-const dragAndDropHtml = renderToHtml(DragAndDrop);
 
 import DragAndDropCustomHandle from './drag_and_drop_custom_handle';
 const dragAndDropCustomHandleSource = require('!!raw-loader!./drag_and_drop_custom_handle');
-const dragAndDropCustomHandleHtml = renderToHtml(DragAndDropCustomHandle);
 
 import DragAndDropDisableBlocking from './drag_and_drop_disable_blocking';
 const dragAndDropDisableBlockingSource = require('!!raw-loader!./drag_and_drop_disable_blocking');
-const dragAndDropDisableBlockingHtml = renderToHtml(DragAndDropDisableBlocking);
 
 import DragAndDropMoveLists from './drag_and_drop_move_lists';
 const dragAndDropMoveListsSource = require('!!raw-loader!./drag_and_drop_move_lists');
-const dragAndDropMoveListsHtml = renderToHtml(DragAndDropMoveLists);
 
 import DragAndDropTypes from './drag_and_drop_types';
 const dragAndDropTypesSource = require('!!raw-loader!./drag_and_drop_types');
-const dragAndDropTypesHtml = renderToHtml(DragAndDropTypes);
 
 import DragAndDropClone from './drag_and_drop_clone';
 const dragAndDropCloneSource = require('!!raw-loader!./drag_and_drop_clone');
-const dragAndDropCloneHtml = renderToHtml(DragAndDropClone);
 
 import DragAndDropComplex from './drag_and_drop_complex';
 const dragAndDropComplexSource = require('!!raw-loader!./drag_and_drop_complex');
-const dragAndDropComplexHtml = renderToHtml(DragAndDropComplex);
 
 export const DragAndDropExample = {
   title: 'Drag and drop',
@@ -102,10 +93,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropBareSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropBareHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -179,10 +166,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -211,10 +194,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropCustomHandleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropCustomHandleHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -243,10 +222,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropDisableBlockingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropDisableBlockingHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -268,10 +243,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropMoveListsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropMoveListsHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -295,10 +266,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropTypesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropTypesHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -324,10 +291,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropCloneSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropCloneHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -361,10 +324,6 @@ export const DragAndDropExample = {
           type: GuideSectionTypes.JS,
           code: dragAndDropComplexSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dragAndDropComplexHtml,
-        },
       ],
       text: (
         <React.Fragment>
diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
index 15a4980a125..2e785cf0424 100644
--- a/src-docs/src/views/elastic_charts/pie_example.js
+++ b/src-docs/src/views/elastic_charts/pie_example.js
@@ -1,5 +1,4 @@
 import React, { Fragment } from 'react';
-import { renderToHtml } from '../../services';
 import { GuideSectionTypes } from '../../components';
 
 import { ExternalBadge } from './shared';
@@ -21,13 +20,11 @@ import {
 
 import PieChart from './pie';
 const pieSource = require('!!raw-loader!./pie');
-const pieHtml = renderToHtml(PieChart);
 
 import PieSlices from './pie_slices';
 
 import Treemaps from './treemap';
 const treemapsSource = require('!!raw-loader!./treemap');
-const treemapsHtml = renderToHtml(Treemaps);
 
 import PieAlts from './pie_alts';
 
@@ -154,10 +151,6 @@ export const ElasticChartsPieExample = {
           type: GuideSectionTypes.JS,
           code: pieSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: pieHtml,
-        },
       ],
       text: (
         <>
@@ -310,10 +303,6 @@ const euiPartitionConfig = euiChartTheme.partition;
           type: GuideSectionTypes.JS,
           code: treemapsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: treemapsHtml,
-        },
       ],
       text: (
         <>
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
index 8ecfeae2a80..db83e46fb56 100644
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ b/src-docs/src/views/elastic_charts/sparklines_example.js
@@ -1,12 +1,10 @@
 import React, { Fragment } from 'react';
-import { renderToHtml } from '../../services';
 import { GuideSectionTypes } from '../../components';
 
 import { ExternalBadge } from './shared';
 import { Sizes } from './sizes';
 import { Sparklines } from './sparklines';
 const sparklinesSource = require('!!raw-loader!./sparklines');
-const sparklinesHtml = renderToHtml(Sparklines);
 
 import { EuiCode, EuiCodeBlock } from '../../../../src/components';
 
@@ -39,10 +37,6 @@ export const ElasticChartsSparklinesExample = {
           type: GuideSectionTypes.JS,
           code: sparklinesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: sparklinesHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js
index 393369b4dd4..8c9c31a0fc5 100644
--- a/src-docs/src/views/elastic_charts/theming_example.js
+++ b/src-docs/src/views/elastic_charts/theming_example.js
@@ -1,14 +1,12 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
-import { renderToHtml } from '../../services';
 import { GuideSectionTypes } from '../../components';
 
 import { ExternalBadge } from './shared';
 
 import { Theming } from './theming';
 const themingSource = require('!!raw-loader!./theming');
-const themingHtml = renderToHtml(Theming);
 
 import { Categorical } from './theming_categorical';
 
@@ -49,10 +47,6 @@ export const ElasticChartsThemingExample = {
           type: GuideSectionTypes.JS,
           code: themingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: themingHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/error_boundary/error_boundary_example.js b/src-docs/src/views/error_boundary/error_boundary_example.js
index 9012e2546a9..43a806c2c17 100644
--- a/src-docs/src/views/error_boundary/error_boundary_example.js
+++ b/src-docs/src/views/error_boundary/error_boundary_example.js
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiErrorBoundary } from '../../../../src/components';
 
 import ErrorBoundary from './error_boundary';
 const errorBoundarySource = require('!!raw-loader!./error_boundary');
-const errorBoundaryHtml = renderToHtml(ErrorBoundary);
 
 export const ErrorBoundaryExample = {
   title: 'Error boundary',
@@ -19,10 +16,6 @@ export const ErrorBoundaryExample = {
           type: GuideSectionTypes.JS,
           code: errorBoundarySource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: errorBoundaryHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/expression/expression_example.js b/src-docs/src/views/expression/expression_example.js
index 632398fb83a..ff16f0db5d2 100644
--- a/src-docs/src/views/expression/expression_example.js
+++ b/src-docs/src/views/expression/expression_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode } from '../../../../src/components';
@@ -12,7 +10,6 @@ import { expressionConfig } from './playground';
 
 import Expression from './expression';
 const expressionSource = require('!!raw-loader!./expression');
-const expressionHtml = renderToHtml(Expression);
 const expressionSnippet = `<EuiExpression
   description={description}
   value={value}
@@ -22,7 +19,6 @@ const expressionSnippet = `<EuiExpression
 
 import Colors from './colors';
 const colorSource = require('!!raw-loader!./colors');
-const colorHtml = renderToHtml(Colors);
 const colorSnippet = `<EuiExpression
   description={description}
   value={value}
@@ -31,7 +27,6 @@ const colorSnippet = `<EuiExpression
 
 import Stringing from './stringing';
 const stringingSource = require('!!raw-loader!./stringing');
-const stringingHtml = renderToHtml(Stringing);
 const stringingSnippet = `<div>
   <EuiExpression
     description={description1}
@@ -47,7 +42,6 @@ const stringingSnippet = `<div>
 
 import Columns from './columns';
 const columnsSource = require('!!raw-loader!./columns');
-const columnsHtml = renderToHtml(Columns);
 const columnsSnippet = `<EuiExpression
   description={description}
   display="columns"
@@ -56,7 +50,6 @@ const columnsSnippet = `<EuiExpression
 
 import Invalid from './invalid';
 const invalidSource = require('!!raw-loader!./invalid');
-const invalidHtml = renderToHtml(Invalid);
 const invalidSnippet = `<EuiExpression
   description={description}
   isInvalid
@@ -65,7 +58,6 @@ const invalidSnippet = `<EuiExpression
 
 import Truncate from './truncate';
 const truncateSource = require('!!raw-loader!./truncate');
-const truncateHtml = renderToHtml(Truncate);
 const truncateSnippet = `<EuiExpression
   description={description}
   value={value}
@@ -81,10 +73,6 @@ export const ExpressionExample = {
           type: GuideSectionTypes.JS,
           code: expressionSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: expressionHtml,
-        },
       ],
       text: (
         <p>
@@ -108,10 +96,6 @@ export const ExpressionExample = {
           type: GuideSectionTypes.JS,
           code: colorSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorHtml,
-        },
       ],
       text: (
         <p>
@@ -129,10 +113,6 @@ export const ExpressionExample = {
           type: GuideSectionTypes.JS,
           code: stringingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: stringingHtml,
-        },
       ],
       text: (
         <p>
@@ -151,10 +131,6 @@ export const ExpressionExample = {
           type: GuideSectionTypes.JS,
           code: columnsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: columnsHtml,
-        },
       ],
       text: (
         <div>
@@ -187,10 +163,6 @@ export const ExpressionExample = {
           type: GuideSectionTypes.JS,
           code: invalidSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: invalidHtml,
-        },
       ],
       text: (
         <p>
@@ -209,10 +181,6 @@ export const ExpressionExample = {
           type: GuideSectionTypes.JS,
           code: truncateSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: truncateHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/filter_group/filter_group_example.js b/src-docs/src/views/filter_group/filter_group_example.js
index ba659390ce0..292fae7d095 100644
--- a/src-docs/src/views/filter_group/filter_group_example.js
+++ b/src-docs/src/views/filter_group/filter_group_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -13,15 +11,12 @@ import {
 
 import FilterGroup from './filter_group';
 const filterGroupSource = require('!!raw-loader!./filter_group');
-const filterGroupHtml = renderToHtml(FilterGroup);
 
 import FilterGroupSimple from './filter_group_simple';
 const filterGroupSimpleSource = require('!!raw-loader!./filter_group_simple');
-const filterGroupSimpleHtml = renderToHtml(FilterGroup);
 
 import FilterGroupMulti from './filter_group_multi';
 const filterGroupMultiSource = require('!!raw-loader!./filter_group_multi');
-const filterGroupMultiHtml = renderToHtml(FilterGroup);
 
 export const FilterGroupExample = {
   title: 'Filter group',
@@ -33,10 +28,6 @@ export const FilterGroupExample = {
           type: GuideSectionTypes.JS,
           code: filterGroupSimpleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: filterGroupSimpleHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -79,10 +70,6 @@ export const FilterGroupExample = {
           type: GuideSectionTypes.JS,
           code: filterGroupMultiSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: filterGroupMultiHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -134,10 +121,6 @@ export const FilterGroupExample = {
           type: GuideSectionTypes.JS,
           code: filterGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: filterGroupHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/focus_trap/focus_trap_example.js b/src-docs/src/views/focus_trap/focus_trap_example.js
index 844ec9b175a..064eab86238 100644
--- a/src-docs/src/views/focus_trap/focus_trap_example.js
+++ b/src-docs/src/views/focus_trap/focus_trap_example.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { renderToHtml } from '../../services';
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiFocusTrap } from '../../../../src/components';
 
 import FocusTrap from './focus_trap';
 const focusTrapSource = require('!!raw-loader!./focus_trap');
-const focusTrapHtml = renderToHtml(FocusTrap);
 
 export const FocusTrapExample = {
   title: 'Focus trap',
@@ -18,10 +16,6 @@ export const FocusTrapExample = {
           type: GuideSectionTypes.JS,
           code: focusTrapSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: focusTrapHtml,
-        },
       ],
       text: (
         <React.Fragment>
diff --git a/src-docs/src/views/form_compressed/form_compressed_example.js b/src-docs/src/views/form_compressed/form_compressed_example.js
index f3b7bc7c7aa..752bb951032 100644
--- a/src-docs/src/views/form_compressed/form_compressed_example.js
+++ b/src-docs/src/views/form_compressed/form_compressed_example.js
@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -16,23 +14,18 @@ import {
 
 import FormCompressed from './form_compressed';
 const formCompressedSource = require('!!raw-loader!./form_compressed');
-const formCompressedHtml = renderToHtml(FormCompressed);
 
 import FormHorizontal from './form_horizontal';
 const formHorizontalSource = require('!!raw-loader!./form_horizontal');
-const formHorizontalHtml = renderToHtml(FormHorizontal);
 
 import FormHelp from './form_horizontal_help';
 const formHelpSource = require('!!raw-loader!./form_horizontal_help');
-const formHelpHtml = renderToHtml(FormHelp);
 
 import FormPopover from './form_compressed_popover';
 const formPopoverSource = require('!!raw-loader!./form_compressed_popover');
-const formPopoverHtml = renderToHtml(FormPopover);
 
 import ComplexExample from './complex_example';
 const ComplexExampleSource = require('!!raw-loader!./complex_example');
-const ComplexExampleHtml = renderToHtml(ComplexExample);
 
 export const FormCompressedExample = {
   title: 'Compressed forms',
@@ -62,10 +55,6 @@ export const FormCompressedExample = {
           type: GuideSectionTypes.JS,
           code: formCompressedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formCompressedHtml,
-        },
       ],
       text: (
         <p>
@@ -95,10 +84,6 @@ export const FormCompressedExample = {
           type: GuideSectionTypes.JS,
           code: formHorizontalSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formHorizontalHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -143,10 +128,6 @@ export const FormCompressedExample = {
           type: GuideSectionTypes.JS,
           code: formHelpSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formHelpHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -195,10 +176,6 @@ export const FormCompressedExample = {
           type: GuideSectionTypes.JS,
           code: formPopoverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formPopoverHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -217,10 +194,6 @@ export const FormCompressedExample = {
           type: GuideSectionTypes.JS,
           code: ComplexExampleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ComplexExampleHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js
index c917f04cda6..403e926359f 100644
--- a/src-docs/src/views/form_controls/form_controls_example.js
+++ b/src-docs/src/views/form_controls/form_controls_example.js
@@ -2,8 +2,6 @@ import React, { Fragment } from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -43,7 +41,6 @@ import {
 
 import FieldSearch from './field_search';
 const fieldSearchSource = require('!!raw-loader!./field_search');
-const fieldSearchHtml = renderToHtml(FieldSearch);
 const fieldSearchSnippet = [
   `<EuiFieldSearch
   placeholder="Search this"
@@ -55,7 +52,6 @@ const fieldSearchSnippet = [
 
 import FieldText from './field_text';
 const fieldTextSource = require('!!raw-loader!./field_text');
-const fieldTextHtml = renderToHtml(FieldText);
 const fieldTextSnippet = [
   `<EuiFieldText
   placeholder="Placeholder text"
@@ -66,7 +62,6 @@ const fieldTextSnippet = [
 
 import FieldNumber from './field_number';
 const fieldNumberSource = require('!!raw-loader!./field_number');
-const fieldNumberHtml = renderToHtml(FieldNumber);
 const fieldNumberSnippet = [
   `<EuiFieldNumber
   placeholder="Placeholder text"
@@ -77,7 +72,6 @@ const fieldNumberSnippet = [
 
 import FieldPassword from './field_password';
 const fieldPasswordSource = require('!!raw-loader!./field_password');
-const fieldPasswordHtml = renderToHtml(FieldPassword);
 const fieldPasswordSnippet = [
   `<EuiFieldPassword
   placeholder="Placeholder text"
@@ -89,7 +83,6 @@ const fieldPasswordSnippet = [
 
 import TextArea from './text_area';
 const textAreaSource = require('!!raw-loader!./text_area');
-const textAreaHtml = renderToHtml(TextArea);
 const textAreaSnippet = [
   `<EuiTextArea
   placeholder="Placeholder text"
@@ -100,7 +93,6 @@ const textAreaSnippet = [
 
 import FilePicker from './file_picker';
 const filePickerSource = require('!!raw-loader!./file_picker');
-const filePickerHtml = renderToHtml(FilePicker);
 const filePickerSnippet = [
   `<EuiFilePicker
   id={filePickerId}
@@ -124,7 +116,6 @@ const filePickerRemoveSnippet = [
 
 import Select from './select';
 const selectSource = require('!!raw-loader!./select');
-const selectHtml = renderToHtml(Select);
 const selectSnippet = [
   `<EuiSelect
   options={[
@@ -140,7 +131,6 @@ const selectSnippet = [
 
 import Checkbox from './checkbox';
 const checkboxSource = require('!!raw-loader!./checkbox');
-const checkboxHtml = renderToHtml(Checkbox);
 const checkboxSnippet = [
   `<EuiCheckbox
   id={checkboxId__1}
@@ -158,11 +148,9 @@ const checkboxSnippet = [
 
 import CheckboxGroup from './checkbox_group';
 const checkboxGroupSource = require('!!raw-loader!./checkbox_group');
-const checkboxGroupHtml = renderToHtml(CheckboxGroup);
 
 import Radio from './radio';
 const radioSource = require('!!raw-loader!./radio');
-const radioHtml = renderToHtml(Radio);
 const radioSnippet = [
   `<EuiRadio
   label="I am a radio"
@@ -173,7 +161,6 @@ const radioSnippet = [
 
 import RadioGroup from './radio_group';
 const radioGroupSource = require('!!raw-loader!./radio_group');
-const radioGroupHtml = renderToHtml(RadioGroup);
 
 import Switch from './switch';
 const switchSource = require('!!raw-loader!./switch');
@@ -203,19 +190,15 @@ const switchLabelSnippet = [
 
 import PrependAppend from './prepend_append';
 const PrependAppendSource = require('!!raw-loader!./prepend_append');
-const PrependAppendHtml = renderToHtml(PrependAppend);
 
 import Fieldset from './fieldset';
 const fieldsetSource = require('!!raw-loader!./fieldset');
-const fieldsetHtml = renderToHtml(Fieldset);
 
 import FormControlLayout from './form_control_layout';
 const formControlLayoutSource = require('!!raw-loader!./form_control_layout');
-const formControlLayoutHtml = renderToHtml(FormControlLayout);
 
 import FormControlLayoutRange from './form_control_layout_range';
 const formControlLayoutRangeSource = require('!!raw-loader!./form_control_layout_range');
-const formControlLayoutRangeHtml = renderToHtml(FormControlLayoutRange);
 
 export const FormControlsExample = {
   title: 'Form controls',
@@ -227,10 +210,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: fieldTextSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fieldTextHtml,
-        },
       ],
       snippet: fieldTextSnippet,
       props: {
@@ -246,10 +225,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: fieldSearchSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fieldSearchHtml,
-        },
       ],
       snippet: fieldSearchSnippet,
       props: {
@@ -265,10 +240,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: fieldNumberSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fieldNumberHtml,
-        },
       ],
       snippet: fieldNumberSnippet,
       props: {
@@ -284,10 +255,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: fieldPasswordSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fieldPasswordHtml,
-        },
       ],
       snippet: fieldPasswordSnippet,
       props: {
@@ -303,10 +270,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: selectSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectHtml,
-        },
       ],
       text: (
         <p>
@@ -338,10 +301,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: textAreaSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: textAreaHtml,
-        },
       ],
       snippet: textAreaSnippet,
       props: {
@@ -357,10 +316,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: filePickerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: filePickerHtml,
-        },
       ],
       text: (
         <p>
@@ -412,10 +367,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: checkboxSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: checkboxHtml,
-        },
       ],
       snippet: checkboxSnippet,
       props: {
@@ -431,10 +382,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: checkboxGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: checkboxGroupHtml,
-        },
       ],
       props: {
         EuiCheckboxGroup,
@@ -458,10 +405,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: radioSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: radioHtml,
-        },
       ],
       snippet: radioSnippet,
       props: {
@@ -477,10 +420,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: radioGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: radioGroupHtml,
-        },
       ],
       props: {
         EuiRadioGroup,
@@ -569,10 +508,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: fieldsetSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fieldsetHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -644,10 +579,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: PrependAppendSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: PrependAppendHtml,
-        },
       ],
       demo: <PrependAppend />,
       snippet: [
@@ -668,10 +599,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: formControlLayoutSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formControlLayoutHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -709,10 +636,6 @@ export const FormControlsExample = {
           type: GuideSectionTypes.JS,
           code: formControlLayoutRangeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formControlLayoutRangeHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/form_layouts/form_layouts_example.js b/src-docs/src/views/form_layouts/form_layouts_example.js
index 93b28e86eb5..5a2a255f27f 100644
--- a/src-docs/src/views/form_layouts/form_layouts_example.js
+++ b/src-docs/src/views/form_layouts/form_layouts_example.js
@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -16,27 +14,21 @@ import {
 import Guidelines from './guidelines';
 import FormRows from './form_rows';
 const formRowsSource = require('!!raw-loader!./form_rows');
-const formRowsHtml = renderToHtml(FormRows);
 
 import DescribedFormGroup from './described_form_group';
 const describedFormGroupSource = require('!!raw-loader!./described_form_group');
-const describedFormGroupHtml = renderToHtml(DescribedFormGroup);
 
 import FullWidth from './full_width';
 const fullWidthSource = require('!!raw-loader!./full_width');
-const fullWidthHtml = renderToHtml(FullWidth);
 
 import Inline from './inline';
 const inlineSource = require('!!raw-loader!./inline');
-const inlineHtml = renderToHtml(Inline);
 
 import InlineSizing from './inline_sizing';
 const inlineSizingSource = require('!!raw-loader!./inline_sizing');
-const inlineSizingHtml = renderToHtml(InlineSizing);
 
 import InlinePopover from './inline_popover';
 const inlinePopoverSource = require('!!raw-loader!./inline_popover');
-const inlinePopoverHtml = renderToHtml(InlinePopover);
 
 import AccessibleLabels from './accessible_labels';
 const AccessibleLabelsSource = require('!!raw-loader!./accessible_labels');
@@ -83,10 +75,6 @@ export const FormLayoutsExample = {
           type: GuideSectionTypes.JS,
           code: formRowsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: formRowsHtml,
-        },
       ],
       text: (
         <p>
@@ -117,10 +105,6 @@ export const FormLayoutsExample = {
           type: GuideSectionTypes.JS,
           code: describedFormGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: describedFormGroupHtml,
-        },
       ],
       text: (
         <p>
@@ -241,10 +225,6 @@ export const FormLayoutsExample = {
           type: GuideSectionTypes.JS,
           code: fullWidthSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fullWidthHtml,
-        },
       ],
       text: (
         <p>
@@ -287,10 +267,6 @@ export const FormLayoutsExample = {
           type: GuideSectionTypes.JS,
           code: inlineSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inlineHtml,
-        },
       ],
       demo: <Inline />,
     },
@@ -301,10 +277,6 @@ export const FormLayoutsExample = {
           type: GuideSectionTypes.JS,
           code: inlineSizingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inlineSizingHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -334,10 +306,6 @@ export const FormLayoutsExample = {
           type: GuideSectionTypes.JS,
           code: inlinePopoverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inlinePopoverHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/form_validation/form_validation_example.js b/src-docs/src/views/form_validation/form_validation_example.js
index 9a8944d61be..d4154e9a049 100644
--- a/src-docs/src/views/form_validation/form_validation_example.js
+++ b/src-docs/src/views/form_validation/form_validation_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -15,7 +13,6 @@ import {
 
 import Validation from './validation';
 const validationSource = require('!!raw-loader!./validation');
-const validationHtml = renderToHtml(Validation);
 
 export const FormValidationExample = {
   title: 'Form validation',
@@ -36,10 +33,6 @@ export const FormValidationExample = {
           type: GuideSectionTypes.JS,
           code: validationSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: validationHtml,
-        },
       ],
       props: {
         EuiForm,
diff --git a/src-docs/src/views/health/health_example.js b/src-docs/src/views/health/health_example.js
index 5a29f615582..1dcd7ae14a9 100644
--- a/src-docs/src/views/health/health_example.js
+++ b/src-docs/src/views/health/health_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiHealth, EuiCode } from '../../../../src/components';
@@ -9,7 +7,6 @@ import healthConfig from './playground';
 
 import Health from './health';
 const healthSource = require('!!raw-loader!./health');
-const healthHtml = renderToHtml(Health);
 const healthSnippet = [
   '<EuiHealth color="success">Healthy</EuiHealth>',
   '<EuiHealth color="#33CC33">Custom color as hex</EuiHealth>',
@@ -17,7 +14,6 @@ const healthSnippet = [
 
 import HealthSize from './health_size';
 const healthTextSizeSource = require('!!raw-loader!./health_size');
-const healthTextSizeHtml = renderToHtml(HealthSize);
 const healthTextSizeSnippet = [
   '<EuiHealth textSize="inherit">Text inherited from the parent element</EuiHealth>',
   '<EuiHealth textSize="xs">Text extra small</EuiHealth>',
@@ -32,10 +28,6 @@ export const HealthExample = {
           type: GuideSectionTypes.JS,
           code: healthSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: healthHtml,
-        },
       ],
       text: (
         <p>
@@ -58,10 +50,6 @@ export const HealthExample = {
           type: GuideSectionTypes.JS,
           code: healthTextSizeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: healthTextSizeHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js b/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js
index 6baedfe656a..4a32d38f62e 100644
--- a/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js
+++ b/src-docs/src/views/highlight_and_mark/highlight_and_mark_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiHighlight, EuiMark } from '../../../../src/components';
@@ -12,14 +10,12 @@ import { Highlight } from './highlight';
 import { Mark } from './mark';
 
 const highlightSource = require('!!raw-loader!./highlight');
-const highlightHtml = renderToHtml(Highlight);
 const highlightSnippet = `<EuiHighlight search={searchValue} highlightAll={isHighlightAll}>
   <!-- A text where all your search matches will be highlighted -->
 </EuiHighlight>
 `;
 
 const markSource = require('!!raw-loader!./mark');
-const markHtml = renderToHtml(Mark);
 const markSnippet = '<EuiMark><!-- Mark text --></EuiMark>';
 
 export const HighlightAndMarkExample = {
@@ -32,10 +28,6 @@ export const HighlightAndMarkExample = {
           type: GuideSectionTypes.JS,
           code: highlightSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: highlightHtml,
-        },
       ],
       text: (
         <p>
@@ -55,10 +47,6 @@ export const HighlightAndMarkExample = {
           type: GuideSectionTypes.JS,
           code: markSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/i18n/i18n_example.js b/src-docs/src/views/i18n/i18n_example.js
index d1ebe439f5b..2ae79a0aeb7 100644
--- a/src-docs/src/views/i18n/i18n_example.js
+++ b/src-docs/src/views/i18n/i18n_example.js
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiI18n, EuiContext } from '../../../../src/components';
 
 import I18nBasic from './i18n_basic';
 const i18nBasicSource = require('!!raw-loader!./i18n_basic');
-const i18nBasicHtml = renderToHtml(I18nBasic);
 const basicSnippet = [
   `useEuiI18n('filename.token', 'default value')
 `,
@@ -18,7 +15,6 @@ const basicSnippet = [
 
 import I18nInterpolation from './i18n_interpolation';
 const i18nInterpolationSource = require('!!raw-loader!./i18n_interpolation');
-const i18nInterpolationHtml = renderToHtml(I18nInterpolation);
 const interpolationSnippet = [
   `useEuiI18n('filename.greeting', 'Hello, {planet}', { planet: 'world' })
 `,
@@ -34,7 +30,6 @@ const interpolationSnippet = [
 
 import I18nAttribute from './i18n_attribute';
 const i18nAttributeSource = require('!!raw-loader!./i18n_attribute');
-const i18nAttributeHtml = renderToHtml(I18nAttribute);
 const attributeSnippet = [
   `<p aria-label={useEuiI18n('filename.token', 'default value')}><!-- Text here--></p>
 `,
@@ -46,7 +41,6 @@ const attributeSnippet = [
 
 import I18nMulti from './i18n_multi';
 const I18nMultiSource = require('!!raw-loader!./i18n_multi');
-const I18nMultiHtml = renderToHtml(I18nMulti);
 const multiValueSnippet = [
   `const [label, text] = useEuiI18n(
   ['filename.label', 'filename.text'],
@@ -65,7 +59,6 @@ return <p aria-label={label}>{text}</p>;
 
 import I18nNumber from './i18n_number';
 const I18nNumberSource = require('!!raw-loader!./i18n_number');
-const I18nNumberHtml = renderToHtml(I18nNumber);
 const numberSnippet = [
   `Formatted count of users: <EuiI18nNumber value={5000000} />
 `,
@@ -73,7 +66,6 @@ const numberSnippet = [
 
 import Context from './context';
 const contextSource = require('!!raw-loader!./context');
-const contextHtml = renderToHtml(Context);
 
 import { I18nShapeProps } from './props';
 export const I18nExample = {
@@ -86,10 +78,6 @@ export const I18nExample = {
           type: GuideSectionTypes.JS,
           code: i18nBasicSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: i18nBasicHtml,
-        },
       ],
       text: (
         <p>
@@ -113,10 +101,6 @@ export const I18nExample = {
           type: GuideSectionTypes.JS,
           code: i18nInterpolationSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: i18nInterpolationHtml,
-        },
       ],
       text: (
         <p>
@@ -141,10 +125,6 @@ export const I18nExample = {
           type: GuideSectionTypes.JS,
           code: i18nAttributeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: i18nAttributeHtml,
-        },
       ],
       text: (
         <p>
@@ -164,10 +144,6 @@ export const I18nExample = {
           type: GuideSectionTypes.JS,
           code: I18nMultiSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: I18nMultiHtml,
-        },
       ],
       text: (
         <p>
@@ -189,10 +165,6 @@ export const I18nExample = {
           type: GuideSectionTypes.JS,
           code: I18nNumberSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: I18nNumberHtml,
-        },
       ],
       text: (
         <p>
@@ -213,10 +185,6 @@ export const I18nExample = {
           type: GuideSectionTypes.JS,
           code: contextSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: contextHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/image/image_example.js b/src-docs/src/views/image/image_example.js
index a7ebf8e82f6..b0d9774e6e5 100644
--- a/src-docs/src/views/image/image_example.js
+++ b/src-docs/src/views/image/image_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiImage } from '../../../../src/components';
@@ -11,7 +9,6 @@ import imageConfig from './playground';
 
 import Image from './image';
 const imageSource = require('!!raw-loader!./image');
-const imageHtml = renderToHtml(Image);
 const imageSnippet = `<EuiImage
   alt={description}
   src={someSrc}
@@ -20,7 +17,6 @@ const imageSnippet = `<EuiImage
 
 import ImageSizes from './image_size';
 const imageSizesSource = require('!!raw-loader!./image_size');
-const imageSizesHtml = renderToHtml(ImageSizes);
 const imageSizesSnippet = `<EuiImage
   size="l"
   alt={description}
@@ -30,7 +26,6 @@ const imageSizesSnippet = `<EuiImage
 
 import ImageZoom from './image_zoom';
 const imageZoomSource = require('!!raw-loader!./image_zoom');
-const imageZoomHtml = renderToHtml(ImageZoom);
 const imageZoomSnippet = `<EuiImage
   allowFullScreen
   alt={description}
@@ -42,7 +37,6 @@ import ImageFloat from './float';
 import { EuiCallOut } from '../../../../src/components/call_out';
 import { Fragment } from 'react-is';
 const imageFloatSource = require('!!raw-loader!./float');
-const imageFloatHtml = renderToHtml(ImageFloat);
 const imageFloatSnippet = `<EuiImage
   alt={description}
   src={someSrc}
@@ -60,10 +54,6 @@ export const ImageExample = {
           type: GuideSectionTypes.JS,
           code: imageSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: imageHtml,
-        },
       ],
       text: (
         <div>
@@ -85,10 +75,6 @@ export const ImageExample = {
           type: GuideSectionTypes.JS,
           code: imageZoomSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: imageZoomHtml,
-        },
       ],
       text: (
         <p>
@@ -110,10 +96,6 @@ export const ImageExample = {
           type: GuideSectionTypes.JS,
           code: imageSizesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: imageSizesHtml,
-        },
       ],
       text: (
         <p>
@@ -138,10 +120,6 @@ export const ImageExample = {
           type: GuideSectionTypes.JS,
           code: imageFloatSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: imageFloatHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/inner_text/inner_text_example.js b/src-docs/src/views/inner_text/inner_text_example.js
index 53bb36bfd9c..d501d37b119 100644
--- a/src-docs/src/views/inner_text/inner_text_example.js
+++ b/src-docs/src/views/inner_text/inner_text_example.js
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiText } from '../../../../src/components';
 
 import InnerText from './inner_text';
 const innerTextSource = require('!!raw-loader!./inner_text');
-const innerTextHtml = renderToHtml(InnerText);
 const useInnerTextSnippet = `const [ref, innerText] = useInnerText();
 <span ref={ref} title={innerText}>
   Content
@@ -58,10 +55,6 @@ export const InnerTextExample = {
           type: GuideSectionTypes.JS,
           code: innerTextSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: innerTextHtml,
-        },
       ],
       demo: <InnerText />,
       snippet: [useInnerTextSnippet, euiInnerTextSnippet],
diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js
index 4e56cf12373..15420936580 100644
--- a/src-docs/src/views/list_group/list_group_example.js
+++ b/src-docs/src/views/list_group/list_group_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -15,27 +13,21 @@ import { EuiPinnableListGroupItem } from './props';
 
 import ListGroup from './list_group';
 const listGroupSource = require('!!raw-loader!./list_group');
-const listGroupHtml = renderToHtml(ListGroup);
 
 import ListGroupLinks from './list_group_links';
 const listGroupLinksSource = require('!!raw-loader!./list_group_links');
-const listGroupLinksHtml = renderToHtml(ListGroupLinks);
 
 import ListGroupLinkActions from './list_group_link_actions';
 const listGroupLinkActionsSource = require('!!raw-loader!./list_group_link_actions');
-const listGroupLinkActionsHtml = renderToHtml(ListGroupLinkActions);
 
 import ListGroupExtra from './list_group_extra';
 const listGroupExtraSource = require('!!raw-loader!./list_group_extra');
-const listGroupExtraHtml = renderToHtml(ListGroupExtra);
 
 import ListGroupItemColor from './list_group_item_color';
 const listGroupItemColorSource = require('!!raw-loader!./list_group_item_color');
-const listGroupItemColorHtml = renderToHtml(ListGroupItemColor);
 
 import PinnableListGroup from './pinnable_list_group';
 const pinnableListGroupSource = require('!!raw-loader!./pinnable_list_group');
-const pinnableListGroupHtml = renderToHtml(PinnableListGroup);
 
 export const ListGroupExample = {
   title: 'List group',
@@ -46,10 +38,6 @@ export const ListGroupExample = {
           type: GuideSectionTypes.JS,
           code: listGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: listGroupHtml,
-        },
       ],
       text: (
         <>
@@ -78,10 +66,6 @@ export const ListGroupExample = {
           type: GuideSectionTypes.JS,
           code: listGroupLinksSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: listGroupLinksHtml,
-        },
       ],
       text: (
         <>
@@ -122,10 +106,6 @@ export const ListGroupExample = {
           type: GuideSectionTypes.JS,
           code: listGroupLinkActionsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: listGroupLinkActionsHtml,
-        },
       ],
       text: (
         <p>
@@ -157,10 +137,6 @@ export const ListGroupExample = {
           type: GuideSectionTypes.JS,
           code: listGroupExtraSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: listGroupExtraHtml,
-        },
       ],
       text: (
         <p>
@@ -185,10 +161,6 @@ export const ListGroupExample = {
           type: GuideSectionTypes.JS,
           code: listGroupItemColorSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: listGroupItemColorHtml,
-        },
       ],
       text: (
         <>
@@ -221,10 +193,6 @@ export const ListGroupExample = {
           type: GuideSectionTypes.JS,
           code: pinnableListGroupSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: pinnableListGroupHtml,
-        },
       ],
       text: (
         <>
diff --git a/src-docs/src/views/markdown_editor/markdown_plugin_example.js b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
index 3c972e82eb9..dd8f26f7675 100644
--- a/src-docs/src/views/markdown_editor/markdown_plugin_example.js
+++ b/src-docs/src/views/markdown_editor/markdown_plugin_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -20,7 +18,6 @@ import { Link } from 'react-router-dom';
 
 import MarkdownEditorWithPlugins from './markdown_editor_with_plugins';
 const markdownEditorWithPluginsSource = require('!!raw-loader!./markdown_editor_with_plugins');
-const markdownEditorWithPluginsHtml = renderToHtml(MarkdownEditorWithPlugins);
 
 const pluginSnippet = `<EuiMarkdownEditor
   uiPlugin={myPluginUI}
@@ -361,10 +358,6 @@ processingList[1][1].components.emojiPlugin = EmojiMarkdownRenderer;`}</EuiCodeB
           type: GuideSectionTypes.JS,
           code: markdownEditorWithPluginsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownEditorWithPluginsHtml,
-        },
       ],
       title: 'Putting it all together: a simple chart plugin',
       text: (
diff --git a/src-docs/src/views/mutation_observer/mutation_observer_example.js b/src-docs/src/views/mutation_observer/mutation_observer_example.js
index 00238c4f3e9..2c26a19b4ef 100644
--- a/src-docs/src/views/mutation_observer/mutation_observer_example.js
+++ b/src-docs/src/views/mutation_observer/mutation_observer_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -12,7 +10,6 @@ import {
 
 import { MutationObserver } from './mutation_observer';
 const mutationObserverSource = require('!!raw-loader!./mutation_observer');
-const mutationObserverHtml = renderToHtml(MutationObserver);
 
 export const MutationObserverExample = {
   title: 'Mutation observer',
@@ -23,10 +20,6 @@ export const MutationObserverExample = {
           type: GuideSectionTypes.JS,
           code: mutationObserverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: mutationObserverHtml,
-        },
       ],
       text: (
         <React.Fragment>
diff --git a/src-docs/src/views/notification_event/notification_event_example.js b/src-docs/src/views/notification_event/notification_event_example.js
index 6d000561e44..596d519b728 100644
--- a/src-docs/src/views/notification_event/notification_event_example.js
+++ b/src-docs/src/views/notification_event/notification_event_example.js
@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react';
-import { renderToHtml } from '../../services';
+import React from 'react';
 import { GuideSectionTypes } from '../../components';
 import { Link } from 'react-router-dom';
 import { EuiNotificationEventMeta } from '../../../../src/components/notification/notification_event_meta';
@@ -17,15 +16,12 @@ import NotificationEventPropsMethods from './notification_event_props_methods';
 
 import NotificationEvent from './notification_event';
 const notificationEventSource = require('!!raw-loader!./notification_event');
-const notificationEventHtml = renderToHtml(NotificationEvent);
 
 import NotificationEventFlexible from './notification_event_flexible';
 const notificationEventFlexibleSource = require('!!raw-loader!./notification_event_flexible');
-const notificationEventFlexibleHtml = renderToHtml(NotificationEventFlexible);
 
 import NotificationsFeed from './notifications_feed';
 const notificationsFeedSource = require('!!raw-loader!./notifications_feed');
-const notificationsFeedHtml = renderToHtml(NotificationsFeed);
 
 const notificationEventSnippet = `<EuiNotificationEvent
   id={id}
@@ -93,10 +89,6 @@ export const NotificationEventExample = {
           type: GuideSectionTypes.JS,
           code: notificationEventSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: notificationEventHtml,
-        },
       ],
       props: {
         EuiNotificationEvent,
@@ -113,10 +105,6 @@ export const NotificationEventExample = {
           type: GuideSectionTypes.JS,
           code: notificationEventFlexibleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: notificationEventFlexibleHtml,
-        },
       ],
       title: 'A flexible component',
       text: (
@@ -218,10 +206,6 @@ export const NotificationEventExample = {
           type: GuideSectionTypes.JS,
           code: notificationsFeedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: notificationsFeedHtml,
-        },
       ],
       title: 'Notifications feed',
       text: (
diff --git a/src-docs/src/views/outside_click_detector/outside_click_detector_example.js b/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
index 7502b5a3d0c..2954f5de48d 100644
--- a/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
+++ b/src-docs/src/views/outside_click_detector/outside_click_detector_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -12,7 +10,6 @@ import {
 
 import OutsideClickDetector from './outside_click_detector';
 const outsideClickDetectorSource = require('!!raw-loader!./outside_click_detector');
-const outsideClickDetectorHtml = renderToHtml(OutsideClickDetector);
 
 export const OutsideClickDetectorExample = {
   title: 'Outside click detector',
@@ -23,10 +20,6 @@ export const OutsideClickDetectorExample = {
           type: GuideSectionTypes.JS,
           code: outsideClickDetectorSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: outsideClickDetectorHtml,
-        },
       ],
       text: (
         <React.Fragment>
diff --git a/src-docs/src/views/overlay_mask/overlay_mask_example.js b/src-docs/src/views/overlay_mask/overlay_mask_example.js
index 999c70414d4..6d5cc4cfde3 100644
--- a/src-docs/src/views/overlay_mask/overlay_mask_example.js
+++ b/src-docs/src/views/overlay_mask/overlay_mask_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode } from '../../../../src/components';
@@ -11,11 +9,9 @@ import { EuiOverlayMaskProps } from './props';
 
 import OverlayMask from './overlay_mask';
 const overlayMaskSource = require('!!raw-loader!./overlay_mask');
-const overlayMaskHtml = renderToHtml(OverlayMask);
 
 import OverlayMaskHeader from './overlay_mask_header';
 const overlayMaskHeaderSource = require('!!raw-loader!./overlay_mask_header');
-const overlayMaskHeaderHtml = renderToHtml(OverlayMaskHeader);
 
 export const OverlayMaskExample = {
   title: 'Overlay mask',
@@ -26,10 +22,6 @@ export const OverlayMaskExample = {
           type: GuideSectionTypes.JS,
           code: overlayMaskSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: overlayMaskHtml,
-        },
       ],
       text: (
         <div>
@@ -65,10 +57,6 @@ export const OverlayMaskExample = {
           type: GuideSectionTypes.JS,
           code: overlayMaskHeaderSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: overlayMaskHeaderHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
index f7443a4a35a..44a0b4be20a 100644
--- a/src-docs/src/views/panel/panel_example.js
+++ b/src-docs/src/views/panel/panel_example.js
@@ -2,8 +2,6 @@ import React from 'react';
 
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -22,23 +20,18 @@ import Guidelines from './guidelines';
 
 import Panel from './panel';
 const panelSource = require('!!raw-loader!./panel');
-const panelHtml = renderToHtml(Panel);
 
 import PanelShadow from './panel_shadow';
 const panelShadowSource = require('!!raw-loader!./panel_shadow');
-const panelShadowHtml = renderToHtml(PanelShadow);
 
 import PanelColor from './panel_color';
 const panelColorSource = require('!!raw-loader!./panel_color');
-const panelColorHtml = renderToHtml(PanelColor);
 
 import PanelGrow from './panel_grow';
 const panelGrowSource = require('!!raw-loader!./panel_grow');
-const panelGrowHtml = renderToHtml(PanelGrow);
 
 import SplitPanel from './split_panel';
 const splitPanelSource = require('!!raw-loader!./split_panel');
-const splitPanelHtml = renderToHtml(SplitPanel);
 
 const panelSnippet = `<EuiPanel paddingSize="none">
   <!-- Panel with no padding -->
@@ -119,10 +112,6 @@ export const PanelExample = {
           type: GuideSectionTypes.JS,
           code: panelSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: panelHtml,
-        },
       ],
       text: (
         <p>The most basic use is to simply add padding around your content.</p>
@@ -139,10 +128,6 @@ export const PanelExample = {
           type: GuideSectionTypes.JS,
           code: panelShadowSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: panelShadowHtml,
-        },
       ],
       text: (
         <>
@@ -178,10 +163,6 @@ export const PanelExample = {
           type: GuideSectionTypes.JS,
           code: panelColorSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: panelColorHtml,
-        },
       ],
       text: (
         <>
@@ -209,10 +190,6 @@ export const PanelExample = {
           type: GuideSectionTypes.JS,
           code: panelGrowSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: panelGrowHtml,
-        },
       ],
       text: (
         <p>
@@ -236,10 +213,6 @@ export const PanelExample = {
           type: GuideSectionTypes.JS,
           code: splitPanelSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: splitPanelHtml,
-        },
       ],
       text: (
         <>
diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
index f5418e77ff9..d8b6ed3e533 100644
--- a/src-docs/src/views/popover/popover_example.js
+++ b/src-docs/src/views/popover/popover_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -16,47 +14,36 @@ import {
 
 import Popover from './popover';
 const popoverSource = require('!!raw-loader!./popover');
-const popoverHtml = renderToHtml(Popover);
 
 import TrapFocus from './trap_focus';
 const trapFocusSource = require('!!raw-loader!./trap_focus');
-const trapFocusHtml = renderToHtml(TrapFocus);
 
 import PopoverAnchorPosition from './popover_anchor_position';
 const popoverAnchorPositionSource = require('!!raw-loader!./popover_anchor_position');
-const popoverAnchorPositionHtml = renderToHtml(PopoverAnchorPosition);
 
 import PopoverPanelClassName from './popover_panel_class_name';
 const popoverPanelClassNameSource = require('!!raw-loader!./popover_panel_class_name');
-const popoverPanelClassNameHtml = renderToHtml(PopoverPanelClassName);
 
 import PopoverWithTitle from './popover_with_title';
 const popoverWithTitleSource = require('!!raw-loader!./popover_with_title');
-const popoverWithTitleHtml = renderToHtml(PopoverWithTitle);
 
 import PopoverWithTitlePadding from './popover_with_title_padding';
 const popoverWithTitlePaddingSource = require('!!raw-loader!./popover_with_title_padding');
-const popoverWithTitlePaddingHtml = renderToHtml(PopoverWithTitlePadding);
 
 import PopoverHTMLElementAnchor from './popover_htmlelement_anchor';
 const popoverHTMLElementAnchorSource = require('!!raw-loader!./popover_htmlelement_anchor');
-const popoverHTMLElementAnchorHtml = renderToHtml(PopoverHTMLElementAnchor);
 
 import PopoverContainer from './popover_container';
 const popoverContainerSource = require('!!raw-loader!./popover_container');
-const popoverContainerHtml = renderToHtml(PopoverContainer);
 
 import PopoverFixed from './popover_fixed';
 const popoverFixedSource = require('!!raw-loader!./popover_fixed');
-const popoverFixedHtml = renderToHtml(PopoverFixed);
 
 import PopoverBlock from './popover_block';
 const popoverBlockSource = require('!!raw-loader!./popover_block');
-const popoverBlockHtml = renderToHtml(PopoverBlock);
 
 import InputPopover from './input_popover';
 const inputPopoverSource = require('!!raw-loader!./input_popover');
-const inputPopoverHtml = renderToHtml(PopoverBlock);
 
 const popOverSnippet = `<EuiPopover
   button={button}
@@ -149,10 +136,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverHtml,
-        },
       ],
       text: (
         <>
@@ -188,10 +171,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverAnchorPositionSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverAnchorPositionHtml,
-        },
       ],
       text: (
         <>
@@ -227,10 +206,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverWithTitleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverWithTitleHtml,
-        },
       ],
       text: (
         <>
@@ -257,10 +232,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverWithTitlePaddingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverWithTitlePaddingHtml,
-        },
       ],
       text: (
         <p>
@@ -282,10 +253,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverPanelClassNameSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverPanelClassNameHtml,
-        },
       ],
       text: (
         <p>
@@ -304,10 +271,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverBlockSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverBlockHtml,
-        },
       ],
       text: (
         <p>
@@ -328,10 +291,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverFixedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverFixedHtml,
-        },
       ],
       text: (
         <p>
@@ -352,10 +311,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverContainerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverContainerHtml,
-        },
       ],
       text: (
         <p>
@@ -375,10 +330,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: inputPopoverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inputPopoverHtml,
-        },
       ],
       text: (
         <>
@@ -412,10 +363,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: trapFocusSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: trapFocusHtml,
-        },
       ],
       text: (
         <>
@@ -448,10 +395,6 @@ export const PopoverExample = {
           type: GuideSectionTypes.JS,
           code: popoverHTMLElementAnchorSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: popoverHTMLElementAnchorHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/portal/portal_example.js b/src-docs/src/views/portal/portal_example.js
index 429db512b6b..42c08c25674 100644
--- a/src-docs/src/views/portal/portal_example.js
+++ b/src-docs/src/views/portal/portal_example.js
@@ -1,18 +1,14 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiPortal } from '../../../../src/components';
 
 import { Portal } from './portal';
 const portalSource = require('!!raw-loader!./portal');
-const portalHtml = renderToHtml(Portal);
 
 import { PortalInsert } from './portal_insert';
 const portalInsertSource = require('!!raw-loader!./portal_insert');
-const portalInsertHtml = renderToHtml(PortalInsert);
 
 export const PortalExample = {
   title: 'Portal',
@@ -23,10 +19,6 @@ export const PortalExample = {
           type: GuideSectionTypes.JS,
           code: portalSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: portalHtml,
-        },
       ],
       text: (
         <p>
@@ -46,10 +38,6 @@ export const PortalExample = {
           type: GuideSectionTypes.JS,
           code: portalInsertSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: portalInsertHtml,
-        },
       ],
       text: (
         <React.Fragment>
diff --git a/src-docs/src/views/pretty_duration/pretty_duration_example.js b/src-docs/src/views/pretty_duration/pretty_duration_example.js
index 20714b57586..d97a32b4a91 100644
--- a/src-docs/src/views/pretty_duration/pretty_duration_example.js
+++ b/src-docs/src/views/pretty_duration/pretty_duration_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -14,7 +12,6 @@ import {
 
 import PrettyDuration from './pretty_duration';
 const prettyDurationSource = require('!!raw-loader!./pretty_duration');
-const prettyDurationHtml = renderToHtml(PrettyDuration);
 
 export const PrettyDurationExample = {
   title: 'Pretty duration',
@@ -25,10 +22,6 @@ export const PrettyDurationExample = {
           type: GuideSectionTypes.JS,
           code: prettyDurationSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: prettyDurationHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/progress/progress_example.js b/src-docs/src/views/progress/progress_example.js
index 18567aa97b2..97cef1150b6 100644
--- a/src-docs/src/views/progress/progress_example.js
+++ b/src-docs/src/views/progress/progress_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCallOut, EuiCode, EuiProgress } from '../../../../src/components';
@@ -10,17 +8,14 @@ import progressConfig from './playground';
 
 import Progress from './progress';
 const progressSource = require('!!raw-loader!./progress');
-const progressHtml = renderToHtml(Progress);
 const progressSnippet = '<EuiProgress size="xs" color="accent" />';
 
 import ProgressValue from './progress_value';
 const progressValueSource = require('!!raw-loader!./progress_value');
-const progressValueHtml = renderToHtml(ProgressValue);
 const progressValueSnippet = '<EuiProgress value={22} max={100} size="xs" />';
 
 import ProgressFixed from './progress_fixed';
 const progressFixedSource = require('!!raw-loader!./progress_fixed');
-const progressFixedHtml = renderToHtml(ProgressFixed);
 const progressFixedSnippet = `<!-- Position at top of parent container -->
 <EuiProgress size="xs" color="accent" position="absolute" />
 
@@ -31,7 +26,6 @@ const progressFixedSnippet = `<!-- Position at top of parent container -->
 
 import ProgressSizes from './progress_sizes';
 const progressSizesSource = require('!!raw-loader!./progress_sizes');
-const progressSizesHtml = renderToHtml(ProgressSizes);
 const progressSizesSnippet = `<EuiProgress
   value={20}
   max={100}
@@ -40,7 +34,6 @@ const progressSizesSnippet = `<EuiProgress
 
 import ProgressColors from './progress_colors';
 const progressColorsSource = require('!!raw-loader!./progress_colors');
-const progressColorsHtml = renderToHtml(ProgressColors);
 const progressColorsSnippet = `<EuiProgress
   value={20}
   max={100}
@@ -49,7 +42,6 @@ const progressColorsSnippet = `<EuiProgress
 
 import ProgressChart from './progress_chart';
 const progressChartSource = require('!!raw-loader!./progress_chart');
-const progressChartHtml = renderToHtml(ProgressChart);
 const progressChartSnippet = `<EuiProgress
   value={20}
   valueText={true}
@@ -66,10 +58,6 @@ export const ProgressExample = {
           type: GuideSectionTypes.JS,
           code: progressSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: progressHtml,
-        },
       ],
       text: (
         <p>
@@ -92,10 +80,6 @@ export const ProgressExample = {
           type: GuideSectionTypes.JS,
           code: progressValueSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: progressValueHtml,
-        },
       ],
       text: (
         <p>
@@ -114,10 +98,6 @@ export const ProgressExample = {
           type: GuideSectionTypes.JS,
           code: progressFixedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: progressFixedHtml,
-        },
       ],
       text: (
         <div>
@@ -154,10 +134,6 @@ export const ProgressExample = {
           type: GuideSectionTypes.JS,
           code: progressSizesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: progressSizesHtml,
-        },
       ],
       text: (
         <p>
@@ -175,10 +151,6 @@ export const ProgressExample = {
           type: GuideSectionTypes.JS,
           code: progressColorsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: progressColorsHtml,
-        },
       ],
       text: (
         <div>
@@ -218,10 +190,6 @@ export const ProgressExample = {
           type: GuideSectionTypes.JS,
           code: progressChartSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: progressChartHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js
index 6f39705f6eb..58cae53d5e5 100644
--- a/src-docs/src/views/range/range_example.js
+++ b/src-docs/src/views/range/range_example.js
@@ -1,7 +1,5 @@
 import React, { Fragment } from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -27,31 +25,24 @@ import { EuiRangeInput } from '../../../../src/components/form/range/range_input
 
 import DualRangeExample from './dual_range';
 const dualRangeSource = require('!!raw-loader!./dual_range');
-const dualRangeHtml = renderToHtml(DualRangeExample);
 
 import RangeExample from './range';
 const rangeSource = require('!!raw-loader!./range');
-const rangeHtml = renderToHtml(RangeExample);
 
 import InputExample from './input';
 const inputSource = require('!!raw-loader!./input');
-const inputHtml = renderToHtml(InputExample);
 
 import TicksExample from './ticks';
 const ticksSource = require('!!raw-loader!./ticks');
-const ticksHtml = renderToHtml(TicksExample);
 
 import LevelsExample from './levels';
 const levelsSource = require('!!raw-loader!./levels');
-const levelsHtml = renderToHtml(LevelsExample);
 
 import StatesExample from './states';
 const statesSource = require('!!raw-loader!./states');
-const statesHtml = renderToHtml(StatesExample);
 
 import InputOnlyExample from './input_only';
 const inputOnlySource = require('!!raw-loader!./input_only');
-const inputOnlyHtml = renderToHtml(InputOnlyExample);
 
 export const RangeControlExample = {
   title: 'Range sliders',
@@ -110,10 +101,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: rangeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: rangeHtml,
-        },
       ],
       props: {
         EuiRange,
@@ -188,10 +175,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: dualRangeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dualRangeHtml,
-        },
       ],
       props: {
         EuiDualRange,
@@ -238,10 +221,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: inputSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inputHtml,
-        },
       ],
       demo: <InputExample />,
       props: { EuiRangeInput },
@@ -277,10 +256,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: ticksSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ticksHtml,
-        },
       ],
       demo: <TicksExample />,
       props: { EuiRangeTicks },
@@ -323,10 +298,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: levelsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: levelsHtml,
-        },
       ],
       demo: <LevelsExample />,
       props: { EuiRangeLevels, EuiRangeLevel },
@@ -367,10 +338,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: inputOnlySource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: inputOnlyHtml,
-        },
       ],
       demo: <InputOnlyExample />,
       snippet: [
@@ -403,10 +370,6 @@ export const RangeControlExample = {
           type: GuideSectionTypes.JS,
           code: statesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statesHtml,
-        },
       ],
       demo: <StatesExample />,
       snippet: [
diff --git a/src-docs/src/views/resizable_container/resizable_container_example.js b/src-docs/src/views/resizable_container/resizable_container_example.js
index 72468ee1134..77f270b6af0 100644
--- a/src-docs/src/views/resizable_container/resizable_container_example.js
+++ b/src-docs/src/views/resizable_container/resizable_container_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -40,7 +38,6 @@ const ResizablePanelCollapsibleResponsiveSource = require('!!raw-loader!./resiza
 const ResizablePanelCollapsibleOptsSource = require('!!raw-loader!./resizable_panel_collapsible_options');
 const ResizablePanelCollapsibleExtSource = require('!!raw-loader!./resizable_panel_collapsible_external');
 
-const ResizableContainerHtml = renderToHtml(ResizableContainerBasic);
 const basicSnippet = `<EuiResizableContainer>
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
@@ -57,14 +54,12 @@ const basicSnippet = `<EuiResizableContainer>
   )}
 </EuiResizableContainer>`;
 
-const ResizablePanelsHtml = renderToHtml(ResizablePanels);
 const panelsSnippet = `<EuiResizablePanel color="subdued" paddingSize="none" wrapperPadding="m">
   <EuiText>
     <p>{text}</p>
   </EuiText>
 </EuiResizablePanel>`;
 
-const ResizableContainerVerticalHtml = renderToHtml(ResizableContainerVertical);
 const verticalSnippet = `<EuiResizableContainer direction="vertical">
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
@@ -84,10 +79,7 @@ const verticalSnippet = `<EuiResizableContainer direction="vertical">
     </>
   )}
 </EuiResizableContainer>`;
-const ResizableContainerResetValuesHtml = renderToHtml(
-  ResizableContainerResetValues
-);
-const ResizablePanelCollapsibleHtml = renderToHtml(ResizablePanelCollapsible);
+
 const collapsibleSnippet = `<EuiResizableContainer>
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
@@ -107,9 +99,7 @@ const collapsibleSnippet = `<EuiResizableContainer>
     </>
   )}
 </EuiResizableContainer>`;
-const ResizablePanelCollapsibleResponsiveHtml = renderToHtml(
-  ResizablePanelCollapsibleResponsive
-);
+
 const responsiveSnippet = `<EuiResizableContainer direction={isMobile ? 'vertical' : 'horizontal'}>
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
@@ -129,9 +119,7 @@ const responsiveSnippet = `<EuiResizableContainer direction={isMobile ? 'vertica
     </>
   )}
 </EuiResizableContainer>`;
-const ResizablePanelCollapsibleOptsHtml = renderToHtml(
-  ResizablePanelCollapsibleOpts
-);
+
 const collapsibleOptsSnippet = `<EuiResizableContainer style={{ height: '400px' }}>
   {(EuiResizablePanel, EuiResizableButton) => (
     <>
@@ -158,9 +146,7 @@ const collapsibleOptsSnippet = `<EuiResizableContainer style={{ height: '400px'
     </>
   )}
 </EuiResizableContainer>`;
-const ResizablePanelCollapsibleExtHtml = renderToHtml(
-  ResizablePanelCollapsibleExt
-);
+
 const collapsibleExtSnippet = `<EuiResizableContainer style={{ height: '400px' }}>
   {(EuiResizablePanel, EuiResizableButton, {togglePanel}) => (
     <>
@@ -210,10 +196,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizableContainerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizableContainerHtml,
-        },
       ],
       title: 'Horizontal resizing',
       text: (
@@ -253,10 +235,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizablePanelsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizablePanelsHtml,
-        },
       ],
       title: 'Resizable panel options',
       text: (
@@ -288,10 +266,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizableContainerResetValuesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizableContainerResetValuesHtml,
-        },
       ],
       title: 'Horizontal resizing with controlled widths',
       text: (
@@ -326,10 +300,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizableContainerVerticalSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizableContainerVerticalHtml,
-        },
       ],
       title: 'Vertical resizing',
       text: (
@@ -349,10 +319,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizablePanelCollapsibleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizablePanelCollapsibleHtml,
-        },
       ],
       title: 'Collapsible resizable panels',
       text: (
@@ -394,10 +360,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizablePanelCollapsibleResponsiveSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizablePanelCollapsibleResponsiveHtml,
-        },
       ],
       title: 'Responsive layout',
       text: (
@@ -418,10 +380,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizablePanelCollapsibleOptsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizablePanelCollapsibleOptsHtml,
-        },
       ],
       title: 'Collapsible panel options',
       text: (
@@ -450,10 +408,6 @@ export const ResizableContainerExample = {
           type: GuideSectionTypes.JS,
           code: ResizablePanelCollapsibleExtSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: ResizablePanelCollapsibleExtHtml,
-        },
       ],
       title: 'Collapsible panels with external control',
       text: (
diff --git a/src-docs/src/views/resize_observer/resize_observer_example.js b/src-docs/src/views/resize_observer/resize_observer_example.js
index 4bc8a56f4cf..1b118ff43d9 100644
--- a/src-docs/src/views/resize_observer/resize_observer_example.js
+++ b/src-docs/src/views/resize_observer/resize_observer_example.js
@@ -1,19 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiLink } from '../../../../src/components';
 
 import { ResizeObserverExample as ResizeObserver } from './resize_observer';
 const resizeObserverSource = require('!!raw-loader!./resize_observer');
-const resizeObserverHtml = renderToHtml(ResizeObserver);
 
 import { ResizeObserverHookExample as ResizeObserverHook } from './resize_observer_hook';
 const resizeObserverHookSource = require('!!raw-loader!./resize_observer_hook');
-const resizeObserverHookHtml = renderToHtml(ResizeObserverHook);
 
 export const ResizeObserverExample = {
   title: 'Resize observer',
@@ -24,10 +20,6 @@ export const ResizeObserverExample = {
           type: GuideSectionTypes.JS,
           code: resizeObserverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: resizeObserverHtml,
-        },
       ],
       text: (
         <React.Fragment>
@@ -62,10 +54,6 @@ export const ResizeObserverExample = {
           type: GuideSectionTypes.JS,
           code: resizeObserverHookSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: resizeObserverHookHtml,
-        },
       ],
       text: (
         <React.Fragment>
diff --git a/src-docs/src/views/responsive/responsive_example.js b/src-docs/src/views/responsive/responsive_example.js
index 5b0885404b7..8f3b1e80322 100644
--- a/src-docs/src/views/responsive/responsive_example.js
+++ b/src-docs/src/views/responsive/responsive_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -16,7 +14,6 @@ import { EuiBreakpointSize } from '!!prop-loader!../../../../src/services/breakp
 
 import Responsive from './responsive';
 const responsiveSource = require('!!raw-loader!./responsive');
-const responsiveHtml = renderToHtml(Responsive);
 const responsiveSnippet = [
   `<EuiHideFor sizes={['xs', 's']}>
   <!-- Content to hide from xs and s screens -->
@@ -48,10 +45,6 @@ export const ResponsiveExample = {
           type: GuideSectionTypes.JS,
           code: responsiveSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: responsiveHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/search_bar/search_bar_example.js b/src-docs/src/views/search_bar/search_bar_example.js
index 35bb3e1cd74..e39a96daa0a 100644
--- a/src-docs/src/views/search_bar/search_bar_example.js
+++ b/src-docs/src/views/search_bar/search_bar_example.js
@@ -1,6 +1,4 @@
 import React from 'react';
-
-import { renderToHtml } from '../../services';
 import { propsInfo } from './props_info';
 
 import { GuideRuleTitle, GuideSectionTypes } from '../../components';
@@ -12,13 +10,10 @@ import { ControlledSearchBar } from './controlled_search_bar';
 import { SearchBarFilters } from './search_bar_filters';
 
 const searchBarSource = require('!!raw-loader!./search_bar');
-const searchBarHtml = renderToHtml(SearchBar);
 
 const controlledSearchBarSource = require('!!raw-loader!./controlled_search_bar');
-const controlledSearchBarHtml = renderToHtml(ControlledSearchBar);
 
 const searchBarFiltersSource = require('!!raw-loader!./search_bar_filters');
-const searchBarFiltersHtml = renderToHtml(SearchBarFilters);
 
 export const SearchBarExample = {
   title: 'Search bar',
@@ -29,10 +24,6 @@ export const SearchBarExample = {
           type: GuideSectionTypes.JS,
           code: searchBarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: searchBarHtml,
-        },
       ],
       text: (
         <div>
@@ -224,10 +215,6 @@ export const SearchBarExample = {
           type: GuideSectionTypes.JS,
           code: controlledSearchBarSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: controlledSearchBarHtml,
-        },
       ],
       text: (
         <div>
@@ -249,10 +236,6 @@ export const SearchBarExample = {
           type: GuideSectionTypes.JS,
           code: searchBarFiltersSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: searchBarFiltersHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js
index 5eb74e9f75b..9f36c676b1f 100644
--- a/src-docs/src/views/selectable/selectable_example.js
+++ b/src-docs/src/views/selectable/selectable_example.js
@@ -1,8 +1,6 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -26,37 +24,29 @@ import {
 
 import Selectable from './selectable';
 const selectableSource = require('!!raw-loader!./selectable');
-const selectableHtml = renderToHtml(Selectable);
 
 import SelectablePopover from './selectable_popover';
 const selectablePopoverSource = require('!!raw-loader!./selectable_popover');
-const selectablePopoverHtml = renderToHtml(SelectablePopover);
 
 import SelectableSearch from './selectable_search';
 const selectableSearchSource = require('!!raw-loader!./selectable_search');
-const selectableSearchHtml = renderToHtml(SelectableSearch);
 
 import SelectableSingle from './selectable_single';
 const selectableSingleSource = require('!!raw-loader!./selectable_single');
-const selectableSingleHtml = renderToHtml(SelectableSingle);
 
 import SelectableExclusion from './selectable_exclusion';
 const selectableExclusionSource = require('!!raw-loader!./selectable_exclusion');
-const selectableExclusionHtml = renderToHtml(SelectableExclusion);
 
 import SelectableMessages from './selectable_messages';
 const selectableMessagesSource = require('!!raw-loader!./selectable_messages');
-const selectableMessagesHtml = renderToHtml(SelectableMessages);
 
 import SelectableCustomRender from './selectable_custom_render';
 const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render');
-const selectableCustomRenderHtml = renderToHtml(SelectableCustomRender);
 
 import SearchOption from './sitewide_option';
 import Search from './search';
 import { EuiCallOut } from '../../../../src/components/call_out';
 const searchSource = require('!!raw-loader!./search');
-const searchHtml = renderToHtml(Search);
 
 export const SelectableExample = {
   title: 'Selectable',
@@ -92,10 +82,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectableSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectableHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -143,10 +129,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectableSearchSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectableSearchHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -200,10 +182,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectableSingleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectableSingleHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -236,10 +214,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectablePopoverSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectablePopoverHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -276,10 +250,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectableExclusionSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectableExclusionHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -307,10 +277,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectableMessagesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectableMessagesHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -355,10 +321,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: selectableCustomRenderSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: selectableCustomRenderHtml,
-        },
       ],
       text: (
         <Fragment>
@@ -434,10 +396,6 @@ export const SelectableExample = {
           type: GuideSectionTypes.JS,
           code: searchSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: searchHtml,
-        },
       ],
       text: (
         <Fragment>
diff --git a/src-docs/src/views/stat/stat_example.js b/src-docs/src/views/stat/stat_example.js
index 35ea2e071be..c3073073c95 100644
--- a/src-docs/src/views/stat/stat_example.js
+++ b/src-docs/src/views/stat/stat_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiStat } from '../../../../src/components';
@@ -9,7 +7,6 @@ import statConfig from './playground';
 
 import Stat from './stat';
 const statSource = require('!!raw-loader!./stat');
-const statHtml = renderToHtml(Stat);
 const statSnippet = `<EuiStat
   title="22,123"
   description="Total people"
@@ -18,7 +15,6 @@ const statSnippet = `<EuiStat
 
 import StatColors from './stat_colors';
 const statColorsSource = require('!!raw-loader!./stat_colors');
-const statColorsHtml = renderToHtml(StatColors);
 const statColorSnippet = `<EuiStat
   title="22,123"
   description="Total people"
@@ -28,7 +24,6 @@ const statColorSnippet = `<EuiStat
 
 import StatAlign from './stat_align';
 const statAlignSource = require('!!raw-loader!./stat_align');
-const statAlignHtml = renderToHtml(StatAlign);
 const statAlignSnippet = `<EuiStat
   title="22,123"
   description="Total people"
@@ -38,7 +33,6 @@ const statAlignSnippet = `<EuiStat
 
 import StatSize from './stat_size';
 const statSizeSource = require('!!raw-loader!./stat_size');
-const statSizeHtml = renderToHtml(StatSize);
 const statSizeSnippet = `<EuiStat
   title="22,123"
   description="Total people"
@@ -48,7 +42,6 @@ const statSizeSnippet = `<EuiStat
 
 import StatOrder from './stat_order';
 const statOrderSource = require('!!raw-loader!./stat_order');
-const statOrderHtml = renderToHtml(StatOrder);
 const statOrderSnippet = `<EuiStat
   title="22,123"
   description="Total people"
@@ -58,11 +51,9 @@ const statOrderSnippet = `<EuiStat
 
 import StatCombos from './stat_combos';
 const statCombosSource = require('!!raw-loader!./stat_combos');
-const statCombosHtml = renderToHtml(StatCombos);
 
 import StatLoading from './stat_loading';
 const statLoadingSource = require('!!raw-loader!./stat_loading');
-const statLoadingHtml = renderToHtml(StatLoading);
 const statLoadingSnippet = `<EuiStat
   title={someNumber}
   description="Total people"
@@ -79,10 +70,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statHtml,
-        },
       ],
       text: (
         <p>
@@ -104,10 +91,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statColorsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statColorsHtml,
-        },
       ],
       text: (
         <p>
@@ -127,10 +110,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statAlignSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statAlignHtml,
-        },
       ],
       text: (
         <p>
@@ -148,10 +127,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statSizeSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statSizeHtml,
-        },
       ],
       text: (
         <p>
@@ -178,10 +153,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statOrderSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statOrderHtml,
-        },
       ],
       text: (
         <p>
@@ -201,10 +172,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statLoadingSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statLoadingHtml,
-        },
       ],
       text: (
         <p>
@@ -223,10 +190,6 @@ export const StatExample = {
           type: GuideSectionTypes.JS,
           code: statCombosSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: statCombosHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js
index 55f1d3d3ef5..2b11ce4047d 100644
--- a/src-docs/src/views/suggest/suggest_example.js
+++ b/src-docs/src/views/suggest/suggest_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -14,15 +12,12 @@ import {
 
 import Suggest from './suggest';
 const suggestSource = require('!!raw-loader!./suggest');
-const suggestHtml = renderToHtml(Suggest);
 
 import SavedQueries from './saved_queries';
 const savedQueriesSource = require('!!raw-loader!./saved_queries');
-const savedQueriesHtml = renderToHtml(SavedQueries);
 
 import SuggestItem from './suggest_item';
 const suggestItemSource = require('!!raw-loader!./suggest_item');
-const suggestItemHtml = renderToHtml(SuggestItem);
 const suggestItemSnippet = [
   `<EuiSuggestItem
   type={sampleItem.type}
@@ -80,10 +75,6 @@ export const SuggestExample = {
           type: GuideSectionTypes.JS,
           code: suggestSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: suggestHtml,
-        },
       ],
       text: (
         <div>
@@ -107,10 +98,6 @@ export const SuggestExample = {
           type: GuideSectionTypes.JS,
           code: suggestItemSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: suggestItemHtml,
-        },
       ],
       text: (
         <div>
@@ -137,10 +124,6 @@ export const SuggestExample = {
           type: GuideSectionTypes.JS,
           code: savedQueriesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: savedQueriesHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js
index 42753cadf53..6f86a907e02 100644
--- a/src-docs/src/views/super_date_picker/super_date_picker_example.js
+++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -14,15 +12,12 @@ import {
 
 import SuperDatePicker from './super_date_picker';
 const superDatePickerSource = require('!!raw-loader!./super_date_picker');
-const superDatePickerHtml = renderToHtml(SuperDatePicker);
 
 import SuperDatePickerConfig from './super_date_picker_config';
 const superDatePickerConfigSource = require('!!raw-loader!./super_date_picker_config');
-const superDatePickerConfigHtml = renderToHtml(SuperDatePicker);
 
 import SuperDatePickerCustomQuickSelect from './super_date_picker_custom_quick_select';
 const superDatePickerCustomQuickSelectSource = require('!!raw-loader!./super_date_picker_custom_quick_select');
-const superDatePickerCustomQuickSelectHtml = renderToHtml(SuperDatePicker);
 
 const superDatePickerSnippet = `<EuiSuperDatePicker
   onTimeChange={this.onTimeChange}
@@ -51,10 +46,6 @@ export const SuperDatePickerExample = {
           type: GuideSectionTypes.JS,
           code: superDatePickerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superDatePickerHtml,
-        },
       ],
       text: (
         <div>
@@ -107,10 +98,6 @@ if (!endMoment || !endMoment.isValid()) {
           type: GuideSectionTypes.JS,
           code: superDatePickerConfigSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superDatePickerConfigHtml,
-        },
       ],
       text: (
         <div>
@@ -154,10 +141,6 @@ if (!endMoment || !endMoment.isValid()) {
           type: GuideSectionTypes.JS,
           code: superDatePickerCustomQuickSelectSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superDatePickerCustomQuickSelectHtml,
-        },
       ],
       text: (
         <div>
diff --git a/src-docs/src/views/super_select/super_select_example.js b/src-docs/src/views/super_select/super_select_example.js
index 19c696de0fb..3165e520036 100644
--- a/src-docs/src/views/super_select/super_select_example.js
+++ b/src-docs/src/views/super_select/super_select_example.js
@@ -1,14 +1,11 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode, EuiSuperSelect } from '../../../../src/components';
 
 import SuperSelectBasic from './super_select_basic';
 const superSelectBasicSource = require('!!raw-loader!./super_select_basic');
-const superSelectBasicHtml = renderToHtml(SuperSelectBasic);
 const superSelectBasicSnippet = `<EuiSuperSelect
   options={[
     {
@@ -23,7 +20,6 @@ const superSelectBasicSnippet = `<EuiSuperSelect
 
 import SuperSelectComplex from './super_select_complex';
 const superSelectComplexSource = require('!!raw-loader!./super_select_complex');
-const superSelectComplexHtml = renderToHtml(SuperSelectComplex);
 const superSelectComplexSnippet = `<EuiSuperSelect
   options={[
     {
@@ -40,7 +36,6 @@ const superSelectComplexSnippet = `<EuiSuperSelect
 
 import SuperSelectStates from './super_select_states';
 const superSelectStatesSource = require('!!raw-loader!./super_select_states');
-const superSelectStatesHtml = renderToHtml(SuperSelectStates);
 const superSelectStatesSnippet = `<EuiSuperSelect
   options={[
     {
@@ -66,10 +61,6 @@ export const SuperSelectExample = {
           type: GuideSectionTypes.JS,
           code: superSelectBasicSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superSelectBasicHtml,
-        },
       ],
       text: (
         <div>
@@ -109,10 +100,6 @@ export const SuperSelectExample = {
           type: GuideSectionTypes.JS,
           code: superSelectComplexSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superSelectComplexHtml,
-        },
       ],
       text: (
         <p>
@@ -134,10 +121,6 @@ export const SuperSelectExample = {
           type: GuideSectionTypes.JS,
           code: superSelectStatesSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: superSelectStatesHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/tables/actions/actions_section.js b/src-docs/src/views/tables/actions/actions_section.js
index c95352a3ba6..441a4ebede8 100644
--- a/src-docs/src/views/tables/actions/actions_section.js
+++ b/src-docs/src/views/tables/actions/actions_section.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { EuiBasicTable } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './actions';
 import { EuiCode } from '../../../../../src/components/code';
 const source = require('!!raw-loader!./actions');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'Adding actions to table',
@@ -15,10 +13,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/auto/auto_section.js b/src-docs/src/views/tables/auto/auto_section.js
index 2c764693c87..5730f2e03ff 100644
--- a/src-docs/src/views/tables/auto/auto_section.js
+++ b/src-docs/src/views/tables/auto/auto_section.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 import { EuiCode } from '../../../../../src/components';
 
 import { Table } from './auto';
 
 const source = require('!!raw-loader!./auto');
-const html = renderToHtml(Table);
 const layoutSnippet = [
   `<EuiBasicTable
   columns={[
@@ -37,10 +35,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <>
diff --git a/src-docs/src/views/tables/basic/basic_section.js b/src-docs/src/views/tables/basic/basic_section.js
index 56f090354f4..0c0c719f630 100644
--- a/src-docs/src/views/tables/basic/basic_section.js
+++ b/src-docs/src/views/tables/basic/basic_section.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 import { EuiCode } from '../../../../../src/components';
 import { Table } from './basic';
 import { EuiBasicTable } from '../../../../../src/components/basic_table';
@@ -20,7 +19,6 @@ import { CustomItemAction } from '!!prop-loader!../../../../../src/components/ba
 import { DefaultItemActionProps as DefaultItemAction } from '../props/props';
 
 const source = require('!!raw-loader!./basic');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'A basic table',
@@ -29,10 +27,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/custom/custom_section.js b/src-docs/src/views/tables/custom/custom_section.js
index cc05f285d90..fc11373de32 100644
--- a/src-docs/src/views/tables/custom/custom_section.js
+++ b/src-docs/src/views/tables/custom/custom_section.js
@@ -15,11 +15,9 @@ import {
   EuiTableSortMobileItem,
 } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import Custom from './custom';
 const source = require('!!raw-loader!./custom');
-const html = renderToHtml(Custom);
 import { EuiTableRowCellMobileOptionsShape } from '../props/props';
 
 export const section = {
@@ -29,10 +27,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/expanding_rows/expanding_rows_section.js b/src-docs/src/views/tables/expanding_rows/expanding_rows_section.js
index a0588a4518c..7129bf2fe6b 100644
--- a/src-docs/src/views/tables/expanding_rows/expanding_rows_section.js
+++ b/src-docs/src/views/tables/expanding_rows/expanding_rows_section.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { EuiBasicTable, EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './expanding_rows';
 const source = require('!!raw-loader!./expanding_rows');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'Expanding rows',
@@ -14,10 +12,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <p>
diff --git a/src-docs/src/views/tables/footer/footer_section.js b/src-docs/src/views/tables/footer/footer_section.js
index 21dea53b499..d8a09c222a7 100644
--- a/src-docs/src/views/tables/footer/footer_section.js
+++ b/src-docs/src/views/tables/footer/footer_section.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { EuiBasicTable, EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './footer';
 const source = require('!!raw-loader!./footer');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'Adding a footer to a table',
@@ -14,10 +12,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <p>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js
index 954fb8762d9..57374a6ad9c 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_controlled_pagination_section.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './in_memory_controlled_pagination';
 
@@ -28,7 +27,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory_controlled_pagination');
-const html = renderToHtml(Table);
 
 export const controlledPaginationSection = {
   title: 'In-memory table with controlled pagination',
@@ -37,10 +35,6 @@ export const controlledPaginationSection = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js
index b0e51e7d836..8f707a26f6b 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_custom_sorting_section.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './in_memory_custom_sorting';
 
@@ -28,7 +27,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory_custom_sorting');
-const html = renderToHtml(Table);
 
 export const customSortingSection = {
   title: 'In-memory table with custom sort values',
@@ -37,10 +35,6 @@ export const customSortingSection = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
index 8df7fd1a2ca..548a1cc981b 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_search_callback_section.js
@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './in_memory_search_callback';
 
@@ -27,7 +26,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory_search_callback');
-const html = renderToHtml(Table);
 
 export const searchCallbackSection = {
   title: 'In-memory table with search callback',
@@ -36,10 +34,6 @@ export const searchCallbackSection = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <Fragment>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js
index 92ce523e10e..70e60717809 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_search_external_section.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './in_memory_search_external';
 
@@ -27,7 +26,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory_search_external');
-const html = renderToHtml(Table);
 
 export const searchExternalSection = {
   title: 'In-memory table with search and external state',
@@ -36,10 +34,6 @@ export const searchExternalSection = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_search_section.js b/src-docs/src/views/tables/in_memory/in_memory_search_section.js
index d8bc017a5ee..eb9fd949047 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_search_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_search_section.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './in_memory_search';
 import { Link } from 'react-router-dom';
@@ -28,7 +27,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory_search');
-const html = renderToHtml(Table);
 
 export const searchSection = {
   title: 'In-memory table with search',
@@ -37,10 +35,6 @@ export const searchSection = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_section.js b/src-docs/src/views/tables/in_memory/in_memory_section.js
index b086dfd37b0..d51a324019f 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_section.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { EuiCode, EuiCallOut } from '../../../../../src/components';
 import { Table } from './in_memory';
@@ -28,7 +27,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory');
-const html = renderToHtml(Table);
 
 export const section = {
   source: [
@@ -36,10 +34,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/in_memory/in_memory_selection_section.js b/src-docs/src/views/tables/in_memory/in_memory_selection_section.js
index f3ffcf76d60..a53abe878a7 100644
--- a/src-docs/src/views/tables/in_memory/in_memory_selection_section.js
+++ b/src-docs/src/views/tables/in_memory/in_memory_selection_section.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './in_memory_selection';
 import { EuiInMemoryTable } from '../../../../../src/components/basic_table/in_memory_table';
@@ -27,7 +26,6 @@ import { FieldValueOptionType } from '!!prop-loader!../../../../../src/component
 import { FieldValueToggleGroupFilterItemType } from '!prop-loader!../../../../../src/components/search_bar/filters/field_value_toggle_group_filter.tsx';
 
 const source = require('!!raw-loader!./in_memory_selection');
-const html = renderToHtml(Table);
 
 export const selectionSection = {
   title: 'In-memory table selection',
@@ -36,10 +34,6 @@ export const selectionSection = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <p>
diff --git a/src-docs/src/views/tables/mobile/mobile_section.js b/src-docs/src/views/tables/mobile/mobile_section.js
index 8b0f192b67e..d1c266acdbe 100644
--- a/src-docs/src/views/tables/mobile/mobile_section.js
+++ b/src-docs/src/views/tables/mobile/mobile_section.js
@@ -1,12 +1,10 @@
 import React from 'react';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './mobile';
 import { EuiTextColor } from '../../../../../src/components/text';
 import { EuiCode, EuiCodeBlock } from '../../../../../src/components/code';
 const source = require('!!raw-loader!./mobile');
-const html = renderToHtml(Table);
 import { EuiTableRowCellMobileOptionsShape } from '../props/props';
 
 const exampleItem = `{
@@ -29,10 +27,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <div>
diff --git a/src-docs/src/views/tables/paginated/paginated_section.js b/src-docs/src/views/tables/paginated/paginated_section.js
index 9c5deadd428..db5808d45c2 100644
--- a/src-docs/src/views/tables/paginated/paginated_section.js
+++ b/src-docs/src/views/tables/paginated/paginated_section.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { EuiBasicTable, EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './paginated';
 const source = require('!!raw-loader!./paginated');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'Adding pagination to a table',
@@ -14,10 +12,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <p>
diff --git a/src-docs/src/views/tables/selection/selection_section.js b/src-docs/src/views/tables/selection/selection_section.js
index 1f465b1a87b..29601377d73 100644
--- a/src-docs/src/views/tables/selection/selection_section.js
+++ b/src-docs/src/views/tables/selection/selection_section.js
@@ -1,11 +1,9 @@
 import React from 'react';
 import { EuiBasicTable, EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { Table } from './selection';
 const source = require('!!raw-loader!./selection');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'Adding selection to a table',
@@ -14,10 +12,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <p>
diff --git a/src-docs/src/views/tables/sorting/sorting_section.js b/src-docs/src/views/tables/sorting/sorting_section.js
index 37c4d895a18..e4b8203451a 100644
--- a/src-docs/src/views/tables/sorting/sorting_section.js
+++ b/src-docs/src/views/tables/sorting/sorting_section.js
@@ -1,13 +1,11 @@
 import React from 'react';
 import { EuiCode } from '../../../../../src/components';
 import { GuideSectionTypes } from '../../../components';
-import { renderToHtml } from '../../../services';
 
 import { EuiTableSortingType } from '!!prop-loader!../../../../../src/components/basic_table/table_types';
 
 import { Table } from './sorting';
 const source = require('!!raw-loader!./sorting');
-const html = renderToHtml(Table);
 
 export const section = {
   title: 'Adding sorting to a table',
@@ -16,10 +14,6 @@ export const section = {
       type: GuideSectionTypes.JS,
       code: source,
     },
-    {
-      type: GuideSectionTypes.HTML,
-      code: html,
-    },
   ],
   text: (
     <p>
diff --git a/src-docs/src/views/text_diff/text_diff_example.js b/src-docs/src/views/text_diff/text_diff_example.js
index 059a3c765a1..62df7c070f8 100644
--- a/src-docs/src/views/text_diff/text_diff_example.js
+++ b/src-docs/src/views/text_diff/text_diff_example.js
@@ -1,19 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiCode } from '../../../../src/components';
 import { useEuiTextDiffProp } from './props';
 import TextDiff from './text_diff';
 const textDiffSource = require('!!raw-loader!./text_diff');
-const textDiffHtml = renderToHtml(TextDiff);
 
 import TextDiffCustomComponents from './text_diff_custom_components';
 const customComponentsSource = require('!!raw-loader!./text_diff_custom_components');
-const customComponentsHtml = renderToHtml(TextDiffCustomComponents);
 
 export const TextDiffExample = {
   title: 'Text diff',
@@ -24,10 +20,6 @@ export const TextDiffExample = {
           type: GuideSectionTypes.JS,
           code: textDiffSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: textDiffHtml,
-        },
       ],
       text: (
         <>
@@ -63,10 +55,6 @@ export const TextDiffExample = {
           type: GuideSectionTypes.JS,
           code: customComponentsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: customComponentsHtml,
-        },
       ],
       text: (
         <>
diff --git a/src-docs/src/views/title/title_example.js b/src-docs/src/views/title/title_example.js
index 3b7a2fba53c..322998339b9 100644
--- a/src-docs/src/views/title/title_example.js
+++ b/src-docs/src/views/title/title_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiTitle } from '../../../../src/components';
@@ -9,7 +7,6 @@ import { titleConfig } from './playground';
 
 import Title from './title';
 const titleSource = require('!!raw-loader!./title');
-const titleHtml = renderToHtml(Title);
 const titleSnippet = [
   `<EuiTitle>
   <h2><!-- Defaults to medium size. Change the heading level based on your context. --></h2>
@@ -28,10 +25,6 @@ export const TitleExample = {
           type: GuideSectionTypes.JS,
           code: titleSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: titleHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/toast/toast_example.js b/src-docs/src/views/toast/toast_example.js
index f4a199f1217..5b007cc9287 100644
--- a/src-docs/src/views/toast/toast_example.js
+++ b/src-docs/src/views/toast/toast_example.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -17,7 +15,6 @@ import toastConfig from './playground';
 
 import ToastList from './toast_list';
 const toastListSource = require('!!raw-loader!./toast_list');
-const toastListHtml = renderToHtml(ToastList);
 const toastListSnippet = [
   `<EuiGlobalToastList
   toasts={[
@@ -33,7 +30,6 @@ const toastListSnippet = [
 
 import Default from './default';
 const defaultSource = require('!!raw-loader!./default');
-const defaultHtml = renderToHtml(Default);
 const defaultToastSnippet = [
   `<EuiToast
   title="Default toast"
@@ -44,7 +40,6 @@ const defaultToastSnippet = [
 
 import Info from './info';
 const infoSource = require('!!raw-loader!./info');
-const infoHtml = renderToHtml(Info);
 const infoToastSnippet = [
   `<EuiToast
   title="Info toast"
@@ -56,7 +51,6 @@ const infoToastSnippet = [
 
 import Success from './success';
 const successSource = require('!!raw-loader!./success');
-const successHtml = renderToHtml(Success);
 const successToastSnippet = [
   `<EuiToast
   title="Success toast"
@@ -69,7 +63,6 @@ const successToastSnippet = [
 
 import Warning from './warning';
 const warningSource = require('!!raw-loader!./warning');
-const warningHtml = renderToHtml(Warning);
 const warningToastSnippet = [
   `<EuiToast
   title="Warning toast"
@@ -82,7 +75,6 @@ const warningToastSnippet = [
 
 import Danger from './danger';
 const dangerSource = require('!!raw-loader!./danger');
-const dangerHtml = renderToHtml(Danger);
 const dangerToastSnippet = [
   `<EuiToast
   title="Danger toast"
@@ -112,10 +104,6 @@ export const ToastExample = {
           type: GuideSectionTypes.JS,
           code: toastListSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: toastListHtml,
-        },
       ],
       props: {
         EuiToast,
@@ -136,10 +124,6 @@ export const ToastExample = {
           type: GuideSectionTypes.JS,
           code: defaultSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: defaultHtml,
-        },
       ],
       text: (
         <div>
@@ -172,10 +156,6 @@ export const ToastExample = {
           type: GuideSectionTypes.JS,
           code: infoSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: infoHtml,
-        },
       ],
       text: (
         <p>
@@ -196,10 +176,6 @@ export const ToastExample = {
           type: GuideSectionTypes.JS,
           code: successSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: successHtml,
-        },
       ],
       text: (
         <p>
@@ -220,10 +196,6 @@ export const ToastExample = {
           type: GuideSectionTypes.JS,
           code: warningSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: warningHtml,
-        },
       ],
       text: (
         <p>
@@ -244,10 +216,6 @@ export const ToastExample = {
           type: GuideSectionTypes.JS,
           code: dangerSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: dangerHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/tour/tour_example.js b/src-docs/src/views/tour/tour_example.js
index eeb64a88efe..b7b8ea33af8 100644
--- a/src-docs/src/views/tour/tour_example.js
+++ b/src-docs/src/views/tour/tour_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -20,7 +18,6 @@ import FullScreen from './fullscreen';
 import Guidelines from './guidelines';
 
 const stepSource = require('!!raw-loader!./step');
-const stepHtml = renderToHtml(Step);
 const stepSnippet = `
 <EuiTourStep
   content={
@@ -43,14 +40,10 @@ const stepSnippet = `
 </EuiTourStep>
 `;
 const tourSource = require('!!raw-loader!./tour');
-const tourHtml = renderToHtml(Tour);
 const managedSource = require('!!raw-loader!./managed');
-const managedHtml = renderToHtml(Managed);
 const managedHookSource = require('!!raw-loader!./managed_hook');
-const managedHookHtml = renderToHtml(ManagedHook);
 
 const fullSource = require('!!raw-loader!./fullscreen');
-const fullHtml = renderToHtml(FullScreen);
 
 export const TourExample = {
   title: 'Tour',
@@ -80,10 +73,6 @@ export const TourExample = {
           type: GuideSectionTypes.JS,
           code: stepSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: stepHtml,
-        },
       ],
       text: (
         <>
@@ -108,10 +97,6 @@ export const TourExample = {
           type: GuideSectionTypes.JS,
           code: tourSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: tourHtml,
-        },
       ],
       text: (
         <p>
@@ -131,10 +116,6 @@ export const TourExample = {
           type: GuideSectionTypes.JS,
           code: managedHookSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: managedHookHtml,
-        },
       ],
       text: (
         <p>
@@ -155,10 +136,6 @@ export const TourExample = {
           type: GuideSectionTypes.JS,
           code: managedSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: managedHtml,
-        },
       ],
       text: (
         <p>
@@ -177,10 +154,6 @@ export const TourExample = {
           type: GuideSectionTypes.JS,
           code: fullSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: fullHtml,
-        },
       ],
       text: (
         <p>
diff --git a/src-docs/src/views/window_event/window_event_example.js b/src-docs/src/views/window_event/window_event_example.js
index a48c05b4d22..50021253fe8 100644
--- a/src-docs/src/views/window_event/window_event_example.js
+++ b/src-docs/src/views/window_event/window_event_example.js
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import { EuiWindowEvent } from '../../../../src/services';
@@ -10,15 +8,12 @@ import { EuiCode, EuiCallOut, EuiSpacer } from '../../../../src/components';
 
 import { BasicWindowEvent } from './basic_window_event';
 const basicSource = require('!!raw-loader!./basic_window_event');
-const basicHtml = renderToHtml(BasicWindowEvent);
 
 import { WindowEventConflict } from './window_event_conflict';
 const conflictSource = require('!!raw-loader!./window_event_conflict');
-const conflictHtml = renderToHtml(WindowEventConflict);
 
 import { MousePosition } from './mouse_position';
 const mousePositionSource = require('!!raw-loader!./mouse_position');
-const mousePositionHtml = renderToHtml(MousePosition);
 
 export const WindowEventExample = {
   title: 'Window events',
@@ -30,10 +25,6 @@ export const WindowEventExample = {
           type: GuideSectionTypes.JS,
           code: basicSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: basicHtml,
-        },
       ],
       text: (
         <div>
@@ -63,10 +54,6 @@ export const WindowEventExample = {
           type: GuideSectionTypes.JS,
           code: conflictSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: conflictHtml,
-        },
       ],
       text: (
         <div>
@@ -101,10 +88,6 @@ export const WindowEventExample = {
           type: GuideSectionTypes.JS,
           code: mousePositionSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: mousePositionHtml,
-        },
       ],
       text: (
         <div>
diff --git a/yarn.lock b/yarn.lock
index aa3871a7532..47399df6670 100755
--- a/yarn.lock
+++ b/yarn.lock
@@ -9698,13 +9698,6 @@ html-webpack-plugin@^4.4.1:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
-html@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/html/-/html-1.0.0.tgz#a544fa9ea5492bfb3a2cca8210a10be7b5af1f61"
-  integrity sha1-pUT6nqVJK/s6LMqCEKEL57WvH2E=
-  dependencies:
-    concat-stream "^1.4.7"
-
 htmlescape@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351"