It works

examples/using-react-docgen-transformer/src/templates/components/ComponentPreview/ComponentPreview.js

@@ -1,10 +1,23 @@
 import React from "react"
+import PropTypes from "prop-types"
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"
 
+import Button from "../../../components/Button"
+
 class ComponentPreview extends React.Component {
   render() {
-    return
+    return (
+      <LiveProvider scope={{ Button }} code={this.props.code}>
+        <LiveEditor />
+        <LiveError />
+        <LivePreview />
+      </LiveProvider>
+    )
   }
 }
 
+ComponentPreview.propTypes = {
+  code: PropTypes.string.isRequired,
+}
+
 export default ComponentPreview

examples/using-react-docgen-transformer/src/templates/components/Example/Example.js

@@ -1,20 +1,22 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { Parser, ProcessNodeDefinitions } from "html-to-react"
+import ComponentPreview from "../ComponentPreview"
 
 const isValidNode = () => true
 const isCodeExample = ({ name = `` } = {}) => name === `pre`
 
 const parser = new Parser()
 const processNodeDefinitions = new ProcessNodeDefinitions(React)
+const getHtmlCode = children => children[0].children[0].data
+
+const ExampleNodeProcessor = ({ children }) =>
+  React.createElement(ComponentPreview, { code: getHtmlCode(children) })
 
 const processingInstructions = [
   {
     shouldProcessNode: isCodeExample,
-    processNode: (node, children) => {
-      console.log(node)
-      return processNodeDefinitions.processDefaultNode(node, children)
-    },
+    processNode: ExampleNodeProcessor,
   },
   {
     shouldProcessNode: isValidNode,
@@ -29,8 +31,7 @@ class Example extends React.Component {
       isValidNode,
       processingInstructions
     )
-    console.log(html)
-    return <div>{html}</div>
+    return <div>{React.Children.toArray(html)}</div>
   }
 }