diff --git a/src-docs/src/services/playground/index.js b/src-docs/src/services/playground/index.js
index a426fce24f6..72420fda6b0 100644
--- a/src-docs/src/services/playground/index.js
+++ b/src-docs/src/services/playground/index.js
@@ -6,3 +6,4 @@ export { iconValidator } from './iconValidator';
 export { createOptionalEnum } from './createOptionalEnum';
 export { dummyFunction } from './dummyFunction';
 export { simulateFunction } from './simulateFunction';
+export { generateAst, generateCustomProps } from './utils';
diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
index 6221cfdd0c4..ea4d695a015 100644
--- a/src-docs/src/services/playground/knobs.js
+++ b/src-docs/src/services/playground/knobs.js
@@ -241,11 +241,11 @@ const Knob = ({
                 <EuiSwitch
                   id={name}
                   label={custom.label || ''}
-                  checked={typeof val !== 'undefined' && val}
+                  checked={typeof val !== 'undefined' && Boolean(val)}
                   onChange={(e) => {
                     const value = e.target.checked;
 
-                    set(value ? value : undefined);
+                    set(value ? custom.value ?? e.target.checked : undefined);
                   }}
                   compressed
                 />
diff --git a/src-docs/src/services/playground/utils.js b/src-docs/src/services/playground/utils.js
new file mode 100644
index 00000000000..a0fe26d599e
--- /dev/null
+++ b/src-docs/src/services/playground/utils.js
@@ -0,0 +1,16 @@
+import template from '@babel/template';
+
+export const generateAst = (value) => {
+  return template.ast(String(value), { plugins: ['jsx'] }).expression;
+};
+
+export const generateCustomProps = (props) => {
+  return props.reduce((obj, item) => {
+    return {
+      ...obj,
+      [item]: {
+        generate: generateAst,
+      },
+    };
+  }, {});
+};
diff --git a/src-docs/src/views/page/playground.js b/src-docs/src/views/page/playground.js
index 3931f9a5ed2..04d34c93648 100644
--- a/src-docs/src/views/page/playground.js
+++ b/src-docs/src/views/page/playground.js
@@ -2,14 +2,15 @@
 
 import React from 'react';
 import { PropTypes } from 'react-view';
-import { EuiPageHeader, EuiButton, EuiText } from '../../../../src/components/';
+import { EuiPageHeader, EuiButton } from '../../../../src/components/';
 import {
   propUtilityForPlayground,
   iconValidator,
+  simulateFunction,
+  generateCustomProps,
 } from '../../services/playground';
 
-// HELP: Can we get a "simulate" toggle and pass ReactNodes?
-const tabs = [
+const tabs = `[
   {
     label: 'Tab 1',
     isSelected: true,
@@ -17,12 +18,12 @@ const tabs = [
   {
     label: 'Tab 2',
   },
-];
+]`;
 
-const rightSideContent = [
+const rightSideContent = `[
   <EuiButton fill>Button 1</EuiButton>,
   <EuiButton>Button 2</EuiButton>,
-];
+]`;
 
 export default () => {
   const docgenInfo = Array.isArray(EuiPageHeader.__docgenInfo)
@@ -38,16 +39,30 @@ export default () => {
     value: 'Page title',
   };
 
+  propsToUse.leftSideContent = {
+    ...propsToUse.leftSideContent,
+    type: PropTypes.String,
+  };
+
   propsToUse.description = {
     ...propsToUse.description,
     value: 'Example of a description.',
     type: PropTypes.String,
   };
 
-  propsToUse.rightSideContent = {
+  propsToUse.rightSideContent = simulateFunction({
     ...propsToUse.rightSideContent,
-    type: PropTypes.Array,
-  };
+    custom: {
+      value: rightSideContent,
+    },
+  });
+
+  propsToUse.tabs = simulateFunction({
+    ...propsToUse.tabs,
+    custom: {
+      value: tabs,
+    },
+  });
 
   propsToUse.children = {
     type: PropTypes.ReactNode,
@@ -60,13 +75,14 @@ export default () => {
       props: propsToUse,
       scope: {
         EuiPageHeader,
-        EuiText,
+        EuiButton,
       },
       imports: {
         '@elastic/eui': {
-          named: ['EuiPageHeader', 'EuiText'],
+          named: ['EuiPageHeader', 'EuiButton'],
         },
       },
+      customProps: generateCustomProps(['rightSideContent', 'tabs']),
     },
   };
 };