diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
index fbd0a1d7c..394e22b3c 100644
--- a/examples/storybook-5/.storybook/preview.js
+++ b/examples/storybook-5/.storybook/preview.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
 import { ThemeProvider, BlockContextProvider } from '@component-controls/storybook';
-import { ControlsTable, Title, Subtitle, Story, Stories, Description, StorySource, ComponentSource, PropsTable } from '@component-controls/blocks';
+import { ControlsTable, Title, Subtitle, Story, Playground, Stories, Description, StorySource, ComponentSource, PropsTable } from '@component-controls/blocks';
 
 addDecorator((story, ctx ) => {
   return (
@@ -20,8 +20,9 @@ export const DocsPage = () => {
         <Subtitle />
         <Description />
         <ComponentSource id="." title='Component source' />
-        <Story id="." />
-        <StorySource id="." title='Story source'/>
+        <Playground openTab="source">
+          <Story id="." />
+        </Playground>  
         <ControlsTable id="." />
         <PropsTable of="." />
         <Stories />
diff --git a/ui/blocks/src/Playground/Playground.stories.tsx b/ui/blocks/src/Playground/Playground.stories.tsx
index 9281a7d0a..d8e67ed3d 100644
--- a/ui/blocks/src/Playground/Playground.stories.tsx
+++ b/ui/blocks/src/Playground/Playground.stories.tsx
@@ -16,6 +16,14 @@ export const overview = () => (
   </MockContext>
 );
 
+export const defaultOpenSource = () => (
+  <MockContext storyId="blocks-core-story-plain--controls">
+    <Playground openTab="source">
+      <Story id="." />
+    </Playground>
+  </MockContext>
+);
+
 export const disableZoomPan = () => (
   <MockContext storyId="blocks-core-story-plain--controls">
     <Playground
diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
index e464a5c26..52311577a 100644
--- a/ui/blocks/src/Playground/Playground.tsx
+++ b/ui/blocks/src/Playground/Playground.tsx
@@ -66,6 +66,10 @@ export interface PlaygroundTransformOptions {
 }
 export interface PlaygroundOwnProps {
   transform?: PlaygroundTransformOptions;
+  /**
+   * by default, which tab to have open.
+   */
+  openTab?: React.ReactNode;
 }
 export type PlaygroundProps = PlaygroundOwnProps &
   Omit<ActionContainerProps, 'paddingTop'>;
@@ -74,10 +78,12 @@ export const Playground: FC<PlaygroundProps> = ({
   transform,
   actions: userActions = [],
   children,
+  openTab,
 }) => {
   const [tabsIndex, setTabsIndex] = React.useState<number | undefined>(
     undefined,
   );
+
   const childStories = <>{children}</>;
   const zoomEnabled = !transform?.options?.disabled;
 
@@ -94,6 +100,11 @@ export const Playground: FC<PlaygroundProps> = ({
     });
   }
   const panels: ActionItems = getSortedPanels(userActions);
+
+  React.useEffect(() => {
+    const index = panels.findIndex((p: ActionItem) => p.title === openTab);
+    setTabsIndex(index > -1 ? index : undefined);
+  }, [openTab]);
   const panelActions = userActions.map((panel: ActionItem) => {
     return panel.panel
       ? {