diff --git a/generator-eui/documentation/index.js b/generator-eui/documentation/index.js
index b991c9a448f..6882e06e82c 100644
--- a/generator-eui/documentation/index.js
+++ b/generator-eui/documentation/index.js
@@ -128,6 +128,7 @@ module.exports = class extends Generator {
       const {
         componentExampleName,
         componentExamplePrefix,
+        componentName,
         fileName,
       } = this.config.documentationVars;
 
@@ -140,30 +141,23 @@ module.exports = class extends Generator {
             'const'
           )} ${componentExamplePrefix}Source = require(${chalk.cyan(
             `'!!raw-loader!./${fileName}'`
-          )});\n` +
-          `${chalk.magenta(
-            'const'
-          )} ${componentExamplePrefix}Html = renderToHtml(${componentExampleName});`
+          )});`
       );
 
-      this.log(chalk.white('\n// Render demo.'));
+      this.log(chalk.white('\n// Append to existing example sections.'));
       this.log(
-        '<GuideSection\n' +
-          `  title="${componentExampleName}"\n` +
-          '  source={[{\n' +
+        '{\n' +
+          `  title: '${componentExampleName}',\n` +
+          '  text: (\n' +
+          `    <><p>Description needed: how to use the <strong>${componentExampleName}</strong> component.</p></>\n` +
+          '  ),\n' +
+          '  source: [{\n' +
           '    type: GuideSectionTypes.JS,\n' +
           `    code: ${componentExamplePrefix}Source,\n` +
-          '  }, {\n' +
-          '    type: GuideSectionTypes.HTML,\n' +
-          `    code: ${componentExamplePrefix}Html,\n` +
-          '  }]}\n' +
-          '  text={\n' +
-          `    <p>Description needed: how to use the ${componentExampleName} component.</p>\n` +
-          ' }\n' +
-          '  demo={\n' +
-          `    <${componentExampleName} />\n` +
-          ' }\n' +
-          '/>\n'
+          '  }],\n' +
+          `  demo: <${componentExampleName} />,\n` +
+          `  props: { ${componentName} },\n` +
+        ' }\n'
       );
     };
 
diff --git a/generator-eui/documentation/templates/documentation_page.js b/generator-eui/documentation/templates/documentation_page.js
index 776599070a6..8d10a3cbc11 100644
--- a/generator-eui/documentation/templates/documentation_page.js
+++ b/generator-eui/documentation/templates/documentation_page.js
@@ -1,36 +1,36 @@
 import React from 'react';
 
-import { renderToHtml } from '../../services';
-
 import {
   GuideSectionTypes,
 } from '../../components';
 
 import {
+  EuiText,
   <%= componentName %>,
-} from '../../../../src/components';
+} from '../../../../src';
 
 import <%= componentExampleName %> from './<%= fileName %>';
 const <%= componentExamplePrefix %>Source = require('!!raw-loader!./<%= fileName %>');
-const <%= componentExamplePrefix %>Html = renderToHtml(<%= componentExampleName %>);
 
 export const <%= componentExampleName %>Example = {
   title: '<%= componentExampleName %>',
+  intro: (
+    <><EuiText></EuiText></>
+  ),
   sections: [{
     title: '<%= componentExampleName %>',
+    text: (
+      <>
+        <p>
+          Description needed: how to use the <strong>Eui<%= componentExampleName %></strong> component.
+        </p>
+      </>
+    ),
     source: [{
       type: GuideSectionTypes.JS,
       code: <%= componentExamplePrefix %>Source,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: <%= componentExamplePrefix %>Html,
     }],
-    text: (
-      <p>
-        Description needed: how to use the <strong>Eui<%= componentExampleName %></strong> component.
-      </p>
-    ),
-    props: { <%= componentName %> },
     demo: <<%= componentExampleName %> />,
+    props: { <%= componentName %> },
   }],
 };
diff --git a/generator-eui/documentation/templates/documentation_page_demo.tsx b/generator-eui/documentation/templates/documentation_page_demo.tsx
index 0d28a268e73..d21b504e884 100644
--- a/generator-eui/documentation/templates/documentation_page_demo.tsx
+++ b/generator-eui/documentation/templates/documentation_page_demo.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   <%= componentName %>,
-} from '../../../../src/components/<%= folderName %>';
+} from '../../../../src';
 
 export default () => (
   <<%= componentName %>>