From 4c8a63b17b564633e8133f266a5f462362a43f53 Mon Sep 17 00:00:00 2001
From: Mithul Nayagam <113115383+Potatomonsta@users.noreply.github.com>
Date: Fri, 17 Apr 2026 19:00:06 +0530
Subject: [PATCH 1/6] docs: enhance widget documentation with playground
 examples and JSON structures

- Added playground examples and JSON structures for various widgets including AlertDialog, Align, AppBar, AspectRatio, AutoComplete, BackdropFilter, Badge, BottomNavigationBar, Card, CarouselView, Center, CheckBox, Chip, CircleAvatar, CircularProgressIndicator, ClipOval, ClipRRect, and ColoredBox.
- Updated documentation format to include tabs for Dart code, JSON representation, and live preview.
---
 docs/widgets/alert_dialog.mdx                | 100 ++++++++-
 docs/widgets/align.mdx                       |  71 +++++-
 docs/widgets/app_bar.mdx                     |  73 +++++-
 docs/widgets/aspect_ratio.mdx                |  57 ++++-
 docs/widgets/auto_complete.mdx               |  69 +++++-
 docs/widgets/backdrop_filter.mdx             |  91 +++++++-
 docs/widgets/badge.mdx                       |  61 ++++-
 docs/widgets/bottom_navigation_bar.mdx       | 131 ++++++++++-
 docs/widgets/card.mdx                        |  76 ++++++-
 docs/widgets/carousel_view.mdx               | 101 ++++++++-
 docs/widgets/center.mdx                      |  55 ++++-
 docs/widgets/check_box.mdx                   |  69 +++++-
 docs/widgets/chip.mdx                        | 137 ++++++++++--
 docs/widgets/circle_avatar.mdx               |  59 ++++-
 docs/widgets/circular_progress_indicator.mdx |  55 ++++-
 docs/widgets/clip_oval.mdx                   |  60 ++++-
 docs/widgets/clip_rrect.mdx                  |  60 ++++-
 docs/widgets/colored_box.mdx                 |  56 ++++-
 docs/widgets/column.mdx                      |  69 +++++-
 docs/widgets/conditional.mdx                 |  59 ++++-
 docs/widgets/container.mdx                   |  99 +++++++--
 docs/widgets/custom_scroll_view.mdx          |  70 +++++-
 docs/widgets/divider.mdx                     |  60 ++++-
 docs/widgets/drawer.mdx                      |  83 ++++++-
 docs/widgets/dropdown_menu.mdx               |  83 ++++++-
 docs/widgets/dynamic_view.mdx                |  58 ++++-
 docs/widgets/elevated_button.mdx             |  65 +++++-
 docs/widgets/expanded.mdx                    |  56 ++++-
 docs/widgets/filled_button.mdx               |  65 +++++-
 docs/widgets/fitted_box.mdx                  |  60 ++++-
 docs/widgets/flexible.mdx                    |  57 ++++-
 docs/widgets/floating_action_button.mdx      |  96 +++++++-
 docs/widgets/form.mdx                        |  97 +++++++-
 docs/widgets/fractionally_sized_box.mdx      |  62 +++++-
 docs/widgets/gesture_detector.mdx            |  72 +++++-
 docs/widgets/grid_view.mdx                   |  99 ++++++++-
 docs/widgets/hero.mdx                        |  55 ++++-
 docs/widgets/icon.mdx                        |  58 ++++-
 docs/widgets/icon_button.mdx                 | 103 ++++++++-
 docs/widgets/image.mdx                       |  55 ++++-
 docs/widgets/ink_well.mdx                    |  77 ++++++-
 docs/widgets/limited_box.mdx                 |  56 ++++-
 docs/widgets/linear_progress_indicator.mdx   |  60 ++++-
 docs/widgets/list_tile.mdx                   | 140 +++++++++++-
 docs/widgets/listview.mdx                    | 222 ++++++++++++++++++-
 docs/widgets/network_widget.mdx              |  58 ++++-
 docs/widgets/opacity.mdx                     |  72 +++++-
 docs/widgets/outlined_button.mdx             |  64 +++++-
 docs/widgets/padding.mdx                     |  61 ++++-
 docs/widgets/page_view.mdx                   |  98 +++++++-
 docs/widgets/placeholder.mdx                 |  60 ++++-
 docs/widgets/positioned.mdx                  |  58 ++++-
 docs/widgets/radio_group.mdx                 | 107 ++++++++-
 docs/widgets/refresh_indicator.mdx           |  57 ++++-
 docs/widgets/row.mdx                         |  71 +++++-
 docs/widgets/safe_area.mdx                   |  60 ++++-
 docs/widgets/scaffold.mdx                    |  93 +++++++-
 docs/widgets/selectable_text.mdx             |  58 ++++-
 docs/widgets/set_value.mdx                   |  74 ++++++-
 docs/widgets/single_child_scroll_view.mdx    |  72 +++++-
 docs/widgets/sized_box.mdx                   |  51 ++++-
 docs/widgets/slider.mdx                      |  72 +++++-
 docs/widgets/sliver_app_bar.mdx              |  76 ++++++-
 docs/widgets/sliver_fill_remaining.mdx       |  59 ++++-
 docs/widgets/sliver_grid.mdx                 | 118 +++++++++-
 docs/widgets/sliver_list.mdx                 |  97 +++++++-
 docs/widgets/sliver_opacity.mdx              |  67 +++++-
 docs/widgets/sliver_padding.mdx              |  73 +++++-
 docs/widgets/sliver_safe_area.mdx            |  59 ++++-
 docs/widgets/sliver_to_box_adapter.mdx       |  71 +++++-
 docs/widgets/sliver_visibility.mdx           |  67 +++++-
 docs/widgets/spacer.mdx                      |  52 ++++-
 docs/widgets/stack.mdx                       |  67 +++++-
 docs/widgets/switch.mdx                      |  52 ++++-
 docs/widgets/tab_bar.mdx                     |  96 +++++++-
 docs/widgets/table.mdx                       | 195 ++++++++++++++--
 docs/widgets/table_cell.mdx                  |  66 +++++-
 docs/widgets/table_row.mdx                   | 104 ++++++++-
 docs/widgets/text.mdx                        |  57 ++++-
 docs/widgets/text_button.mdx                 |  65 +++++-
 docs/widgets/text_field.mdx                  |  64 +++++-
 docs/widgets/text_form_field.mdx             |  74 ++++++-
 docs/widgets/tool_tip.mdx                    |  57 ++++-
 docs/widgets/vertical_divider.mdx            |  55 ++++-
 docs/widgets/visibility.mdx                  |  55 ++++-
 docs/widgets/webview.mdx                     |  52 ++++-
 docs/widgets/wrap.mdx                        | 121 +++++++++-
 87 files changed, 6181 insertions(+), 441 deletions(-)

diff --git a/docs/widgets/alert_dialog.mdx b/docs/widgets/alert_dialog.mdx
index 0c668bcc5..57e34f216 100644
--- a/docs/widgets/alert_dialog.mdx
+++ b/docs/widgets/alert_dialog.mdx
@@ -3,6 +3,61 @@ title: "AlertDialog"
 description: "Documentation for AlertDialog"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const alertDialogPreviewJson = {
+  "type": "alertDialog",
+  "content": {
+    "type": "padding",
+    "padding": {
+      "top": 0,
+      "left": 12,
+      "right": 12,
+      "bottom": 8
+    },
+    "child": {
+      "type": "text",
+      "data": "Discard draft?",
+      "align": "center",
+      "style": {
+        "fontSize": 14
+      }
+    }
+  },
+  "actions": [
+    {
+      "type": "textButton",
+      "child": {
+        "type": "text",
+        "data": "CANCEL"
+      },
+      "onPressed": {
+        "actionType": "navigate",
+        "navigationStyle": "pop"
+      }
+    },
+    {
+      "type": "sizedBox",
+      "width": 8
+    },
+    {
+      "type": "textButton",
+      "child": {
+        "type": "text",
+        "data": "DISCARD"
+      },
+      "onPressed": {
+        "actionType": "navigate",
+        "navigationStyle": "pop"
+      }
+    },
+    {
+      "type": "sizedBox",
+      "width": 12
+    }
+  ]
+};
+export const alertDialogPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac AlertDialog allows you to build a Flutter alert dialog widget using JSON.
 To know more about the alert dialog widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/AlertDialog-class.html).
 
@@ -39,8 +94,10 @@ To know more about the alert dialog widget in Flutter, refer to the [official do
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacAlertDialog(
   content: StacPadding(
     padding: StacEdgeInsets(
@@ -70,7 +127,10 @@ StacAlertDialog(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "alertDialog",
   "content": {
@@ -124,4 +184,36 @@ StacAlertDialog(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={alertDialogPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: alertDialogPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/align.mdx b/docs/widgets/align.mdx
index 5ada47f3a..417d186bb 100644
--- a/docs/widgets/align.mdx
+++ b/docs/widgets/align.mdx
@@ -3,6 +3,32 @@ title: "Align"
 description: "Documentation for Align"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const alignPreviewJson = {
+  "type": "align",
+  "alignment": "topEnd",
+  "child": {
+    "type": "container",
+    "color": "#FC5632",
+    "clipBehavior": "hardEdge",
+    "height": 250,
+    "width": 200,
+    "child": {
+      "type": "align",
+      "alignment": "bottomCenter",
+      "child": {
+        "type": "text",
+        "data": "Flutter",
+        "style": {
+          "fontSize": 23,
+          "fontWeight": "w600"
+        }
+      }
+    }
+  }
+};
+export const alignPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Align allows you to build a Flutter Align widget using JSON.
 To know more about the align widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Align-class.html).
 
@@ -17,8 +43,10 @@ To know more about the align widget in Flutter, refer to the [official documenta
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacAlign(
   alignment: StacAlignment.topEnd,
   child: StacContainer(
@@ -40,7 +68,10 @@ StacAlign(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "align",
   "alignment": "topEnd",
@@ -65,4 +96,36 @@ StacAlign(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={alignPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: alignPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/app_bar.mdx b/docs/widgets/app_bar.mdx
index 57d030eff..cccb0299f 100644
--- a/docs/widgets/app_bar.mdx
+++ b/docs/widgets/app_bar.mdx
@@ -3,6 +3,34 @@ title: "AppBar"
 description: "Documentation for AppBar"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const appBarPreviewJson = {
+  "type": "appBar",
+  "title": {
+    "type": "text",
+    "data": "App Bar Title"
+  },
+  "backgroundColor": "#FFFFFF",
+  "foregroundColor": "#000000",
+  "actions": [
+    {
+      "type": "iconButton",
+      "icon": {
+        "type": "icon",
+        "icon": "search"
+      }
+    },
+    {
+      "type": "iconButton",
+      "icon": {
+        "type": "icon",
+        "icon": "settings"
+      }
+    }
+  ]
+};
+export const appBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac AppBar allows you to build a Flutter app bar widget using JSON.
 To know more about the app bar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/AppBar-class.html).
 
@@ -32,8 +60,10 @@ To know more about the app bar widget in Flutter, refer to the [official documen
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacAppBar(
   title: StacText(data: 'App Bar Title'),
   backgroundColor: StacColors.white,
@@ -49,7 +79,10 @@ StacAppBar(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "appBar",
   "title": {
@@ -76,4 +109,36 @@ StacAppBar(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={appBarPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: appBarPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/aspect_ratio.mdx b/docs/widgets/aspect_ratio.mdx
index ee50b0533..0133cbbf9 100644
--- a/docs/widgets/aspect_ratio.mdx
+++ b/docs/widgets/aspect_ratio.mdx
@@ -3,6 +3,19 @@ title: "AspectRatio"
 description: "Documentation for AspectRatio"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const aspectRatioPreviewJson = {
+  "type": "aspectRatio",
+  "aspectRatio": 1.33,
+  "child": {
+    "type": "container",
+    "color": "#FF5733",
+    "width": 100,
+    "height": 100
+  }
+};
+export const aspectRatioPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac AspectRatio allows you to build a Flutter AspectRatio widget using JSON.
 To know more about the aspectRatio widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html).
 
@@ -17,8 +30,10 @@ To know more about the aspectRatio widget in Flutter, refer to the [official doc
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacAspectRatio(
   aspectRatio: 1.33,
   child: StacContainer(
@@ -29,7 +44,10 @@ StacAspectRatio(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "aspectRatio",
   "aspectRatio": 1.33,
@@ -41,5 +59,36 @@ StacAspectRatio(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={aspectRatioPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: aspectRatioPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/auto_complete.mdx b/docs/widgets/auto_complete.mdx
index 39ea78de0..15c7ff070 100644
--- a/docs/widgets/auto_complete.mdx
+++ b/docs/widgets/auto_complete.mdx
@@ -3,6 +3,24 @@ title: "AutoComplete"
 description: "Documentation for AutoComplete"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const autoCompletePreviewJson = {
+  "type": "autoComplete",
+  "options": [
+    "Option 1",
+    "Option 2",
+    "Option 3"
+  ],
+  "onSelected": {
+    "type": "callback",
+    "name": "onOptionSelected"
+  },
+  "optionsMaxHeight": 250,
+  "optionsViewOpenDirection": "up",
+  "initialValue": "Option 1"
+};
+export const autoCompletePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac AutoComplete allows you to build a Flutter AutoComplete widget using JSON.
 To know more about the AutoComplete widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Autocomplete-class.html).
 
@@ -18,8 +36,10 @@ To know more about the AutoComplete widget in Flutter, refer to the [official do
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacAutoComplete(
   options: ['Option 1', 'Option 2', 'Option 3'],
   onSelected: {'type': 'callback', 'name': 'onOptionSelected'},
@@ -29,10 +49,17 @@ StacAutoComplete(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "autoComplete",
-  "options": ["Option 1", "Option 2", "Option 3"],
+  "options": [
+    "Option 1",
+    "Option 2",
+    "Option 3"
+  ],
   "onSelected": {
     "type": "callback",
     "name": "onOptionSelected"
@@ -42,4 +69,36 @@ StacAutoComplete(
   "initialValue": "Option 1"
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={autoCompletePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: autoCompletePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/backdrop_filter.mdx b/docs/widgets/backdrop_filter.mdx
index 167e2ab26..0e52b7f83 100644
--- a/docs/widgets/backdrop_filter.mdx
+++ b/docs/widgets/backdrop_filter.mdx
@@ -3,6 +3,49 @@ title: "BackdropFilter"
 description: "Documentation for BackdropFilter"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const backdropFilterPreviewJson = {
+  "type": "clipRRect",
+  "borderRadius": {
+    "all": 16
+  },
+  "child": {
+    "type": "sizedBox",
+    "height": 200,
+    "width": 300,
+    "child": {
+      "type": "stack",
+      "fit": "expand",
+      "children": [
+        {
+          "type": "container",
+          "decoration": {
+            "image": {
+              "src": "https://images.pexels.com/photos/1323550/pexels-photo-1323550.jpeg",
+              "fit": "cover"
+            }
+          }
+        },
+        {
+          "type": "backdropFilter",
+          "filter": {
+            "type": "blur",
+            "sigmaX": 15,
+            "sigmaY": 15
+          },
+          "child": {
+            "type": "container",
+            "decoration": {
+              "color": "#80FFFFFF"
+            }
+          }
+        }
+      ]
+    }
+  }
+};
+export const backdropFilterPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac BackdropFilter allows you to build the Flutter BackdropFilter widget using JSON. This widget applies a filter to the existing painted content and then paints its child. It's commonly used to create frosted glass effects, blurs, and other visual effects.
 To know more about the BackdropFilter widget in Flutter, refer to the official documentation for [Backdrop Filter](https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html) and [Image Filter](https://api.flutter.dev/flutter/dart-ui/ImageFilter-class.html).
 
@@ -64,8 +107,10 @@ For best results with BackdropFilter:
 
 ### Example 1: Frosted Glass Effect
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacClipRRect(
   borderRadius: StacBorderRadius.all(16),
   child: StacSizedBox(
@@ -94,7 +139,10 @@ StacClipRRect(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "clipRRect",
   "borderRadius": {
@@ -121,8 +169,8 @@ StacClipRRect(
           "type": "backdropFilter",
           "filter": {
             "type": "blur",
-            "sigmaX": 15.0,
-            "sigmaY": 15.0
+            "sigmaX": 15,
+            "sigmaY": 15
           },
           "child": {
             "type": "container",
@@ -136,8 +184,39 @@ StacClipRRect(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={backdropFilterPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: backdropFilterPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ### Example 2: Dilate Filter Effect
 
 <CodeGroup>
diff --git a/docs/widgets/badge.mdx b/docs/widgets/badge.mdx
index 226f83372..14ced5396 100644
--- a/docs/widgets/badge.mdx
+++ b/docs/widgets/badge.mdx
@@ -3,6 +3,23 @@ title: "Badge"
 description: "Documentation for Badge"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const badgePreviewJson = {
+  "type": "badge",
+  "label": {
+    "type": "text",
+    "data": "5"
+  },
+  "child": {
+    "type": "icon",
+    "icon": "notifications",
+    "size": 32
+  },
+  "backgroundColor": "#F44336",
+  "textColor": "#FFFFFF"
+};
+export const badgePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Badge allows you to build a Flutter Badge widget using JSON.
 To know more about the Badge widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Badge-class.html).
 
@@ -28,8 +45,10 @@ To know more about the Badge widget in Flutter, refer to the [official documenta
 
 ### Basic Badge with Label
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacBadge(
   label: StacText(data: '5'),
   child: StacIcon(icon: 'notifications', size: 32),
@@ -38,7 +57,10 @@ StacBadge(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "badge",
   "label": {
@@ -54,8 +76,39 @@ StacBadge(
   "textColor": "#FFFFFF"
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={badgePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: badgePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ### Badge with Count
 
 <CodeGroup>
diff --git a/docs/widgets/bottom_navigation_bar.mdx b/docs/widgets/bottom_navigation_bar.mdx
index 216783d53..e753f5a9c 100644
--- a/docs/widgets/bottom_navigation_bar.mdx
+++ b/docs/widgets/bottom_navigation_bar.mdx
@@ -3,6 +3,90 @@ title: "BottomNavigationBar"
 description: "Documentation for BottomNavigationBar"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const bottomNavigationBarPreviewJson = {
+  "type": "defaultBottomNavigationController",
+  "length": 3,
+  "child": {
+    "type": "scaffold",
+    "appBar": {
+      "type": "appBar",
+      "title": {
+        "type": "text",
+        "data": "Bottom Navigation Screen"
+      }
+    },
+    "body": {
+      "type": "bottomNavigationView",
+      "children": [
+        {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "Home",
+            "style": {
+              "fontSize": 24
+            }
+          }
+        },
+        {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "Search",
+            "style": {
+              "fontSize": 24
+            }
+          }
+        },
+        {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "Profile",
+            "style": {
+              "fontSize": 24
+            }
+          }
+        }
+      ]
+    },
+    "bottomNavigationBar": {
+      "type": "bottomNavigationBar",
+      "items": [
+        {
+          "type": "navigationBarItem",
+          "label": "Home",
+          "icon": {
+            "type": "icon",
+            "iconType": "material",
+            "icon": "home"
+          }
+        },
+        {
+          "type": "navigationBarItem",
+          "label": "Search",
+          "icon": {
+            "type": "icon",
+            "iconType": "material",
+            "icon": "search"
+          }
+        },
+        {
+          "type": "navigationBarItem",
+          "label": "Profile",
+          "icon": {
+            "type": "icon",
+            "iconType": "material",
+            "icon": "account_circle"
+          }
+        }
+      ]
+    }
+  }
+};
+export const bottomNavigationBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac BottomNavigationBar allows you to build a Flutter BottomNavigationBar widget using JSON.
 To know more about the BottomNavigationBar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html).
 
@@ -39,7 +123,6 @@ DefaultBottomNavigationController is an inherited widget that is used to share a
 | initialIndex  | `int`                   | The initial index of the selected item.                                     |
 | child         | `StacWidget`            | The widget below this widget in the tree.                                   |
 
-
 ## BottomNavigationBarItem
 
 The Stac BottomNavigationBarItem allows you to build a Flutter BottomNavigationBarItem using JSON.
@@ -65,11 +148,12 @@ A page view that displays the widget which corresponds to the currently selected
 |----------|-------------------------------|--------------------------------------------------|
 | children | `List<StacWidget>`            | The widgets below this widget in the tree.       |
 
-
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacDefaultBottomNavigationController(
   length: 3,
   child: StacScaffold(
@@ -118,7 +202,10 @@ StacDefaultBottomNavigationController(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "defaultBottomNavigationController",
   "length": 3,
@@ -201,4 +288,36 @@ StacDefaultBottomNavigationController(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={bottomNavigationBarPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: bottomNavigationBarPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/card.mdx b/docs/widgets/card.mdx
index 55d47c53f..1dcdc64c9 100644
--- a/docs/widgets/card.mdx
+++ b/docs/widgets/card.mdx
@@ -3,6 +3,33 @@ title: "Card"
 description: "Documentation for Card"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const cardPreviewJson = {
+  "type": "card",
+  "color": "#FFFFFF",
+  "shadowColor": "#000000",
+  "surfaceTintColor": "#FF0000",
+  "elevation": 5,
+  "shape": {
+    "type": "roundedRectangle",
+    "borderRadius": 10
+  },
+  "borderOnForeground": true,
+  "margin": {
+    "left": 10,
+    "top": 20,
+    "right": 10,
+    "bottom": 20
+  },
+  "clipBehavior": "antiAlias",
+  "child": {
+    "type": "text",
+    "data": "This is a card."
+  },
+  "semanticContainer": true
+};
+export const cardPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Card allows you to build a Flutter Card widget using JSON.
 To know more about the Card widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Card-class.html).
 
@@ -23,8 +50,10 @@ To know more about the Card widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCard(
   color: StacColors.white,
   shadowColor: StacColors.black,
@@ -39,16 +68,19 @@ StacCard(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "card",
   "color": "#FFFFFF",
   "shadowColor": "#000000",
   "surfaceTintColor": "#FF0000",
-  "elevation": 5.0,
+  "elevation": 5,
   "shape": {
     "type": "roundedRectangle",
-    "borderRadius": 10.0
+    "borderRadius": 10
   },
   "borderOnForeground": true,
   "margin": {
@@ -65,4 +97,36 @@ StacCard(
   "semanticContainer": true
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={cardPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: cardPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/carousel_view.mdx b/docs/widgets/carousel_view.mdx
index 16bfaa3d3..0d0dafe1e 100644
--- a/docs/widgets/carousel_view.mdx
+++ b/docs/widgets/carousel_view.mdx
@@ -3,6 +3,52 @@ title: "CarouselView"
 description: "Documentation for CarouselView"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const carouselViewPreviewJson = {
+  "type": "carouselView",
+  "carouselType": "weighted",
+  "padding": 12,
+  "backgroundColor": "#FFFFFF",
+  "elevation": 5,
+  "overlayColor": "#FF0000",
+  "itemSnapping": true,
+  "shrinkExtent": 0,
+  "scrollDirection": "horizontal",
+  "reverse": false,
+  "onTap": {
+    "type": "callback",
+    "name": "onItemTap"
+  },
+  "enableSplash": true,
+  "itemExtent": 300,
+  "flexWeights": [
+    1,
+    7,
+    1
+  ],
+  "children": [
+    {
+      "type": "image",
+      "height": 400,
+      "fit": "cover",
+      "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_1.png"
+    },
+    {
+      "type": "image",
+      "height": 400,
+      "fit": "cover",
+      "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_2.png"
+    },
+    {
+      "type": "image",
+      "height": 400,
+      "fit": "cover",
+      "src": "https://flutter.github.io/assets-for-api-docs/assets/material/content_based_color_scheme_3.png"
+    }
+  ]
+};
+export const carouselViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac CarouselView allows you to build a Flutter CarouselView widget using JSON.
 To know more about the CarouselView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Carousel-class.html).
 
@@ -27,8 +73,10 @@ To know more about the CarouselView widget in Flutter, refer to the [official do
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCarouselView(
   carouselType: StacCarouselViewType.weighted,
   padding: StacEdgeInsets.all(12),
@@ -63,16 +111,19 @@ StacCarouselView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "carouselView",
   "carouselType": "weighted",
   "padding": 12,
   "backgroundColor": "#FFFFFF",
-  "elevation": 5.0,
+  "elevation": 5,
   "overlayColor": "#FF0000",
   "itemSnapping": true,
-  "shrinkExtent": 0.0,
+  "shrinkExtent": 0,
   "scrollDirection": "horizontal",
   "reverse": false,
   "onTap": {
@@ -81,7 +132,11 @@ StacCarouselView(
   },
   "enableSplash": true,
   "itemExtent": 300,
-  "flexWeights": [1, 7, 1],
+  "flexWeights": [
+    1,
+    7,
+    1
+  ],
   "children": [
     {
       "type": "image",
@@ -104,4 +159,36 @@ StacCarouselView(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={carouselViewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: carouselViewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/center.mdx b/docs/widgets/center.mdx
index c04973589..e2fceed68 100644
--- a/docs/widgets/center.mdx
+++ b/docs/widgets/center.mdx
@@ -3,6 +3,16 @@ title: "Center"
 description: "Documentation for Center"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const centerPreviewJson = {
+  "type": "center",
+  "child": {
+    "type": "text",
+    "data": "Hello, World!"
+  }
+};
+export const centerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Center allows you to build a Flutter center widget using JSON.
 To know more about the center widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Center-class.html).
 
@@ -16,14 +26,19 @@ To know more about the center widget in Flutter, refer to the [official document
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCenter(
   child: StacText(data: 'Hello, World!'),
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "center",
   "child": {
@@ -32,4 +47,36 @@ StacCenter(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={centerPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: centerPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/check_box.mdx b/docs/widgets/check_box.mdx
index 288e5b7cc..22a2079af 100644
--- a/docs/widgets/check_box.mdx
+++ b/docs/widgets/check_box.mdx
@@ -3,6 +3,28 @@ title: "CheckBox"
 description: "Documentation for CheckBox"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const checkBoxPreviewJson = {
+  "type": "checkBox",
+  "id": "checkbox_1",
+  "value": true,
+  "tristate": false,
+  "mouseCursor": "click",
+  "activeColor": "#FF0000",
+  "fillColor": {
+    "type": "materialColor",
+    "color": "#00FF00"
+  },
+  "checkColor": "#0000FF",
+  "focusColor": "#FFFF00",
+  "hoverColor": "#FF00FF",
+  "splashRadius": 20,
+  "materialTapTargetSize": "padded",
+  "autofocus": true,
+  "isError": false
+};
+export const checkBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac CheckBox allows you to build a Flutter CheckBox widget using JSON.
 To know more about the CheckBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Checkbox-class.html).
 
@@ -28,8 +50,10 @@ To know more about the CheckBox widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCheckBox(
   id: 'checkbox_1',
   value: true,
@@ -47,7 +71,10 @@ StacCheckBox(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "checkBox",
   "id": "checkbox_1",
@@ -62,10 +89,42 @@ StacCheckBox(
   "checkColor": "#0000FF",
   "focusColor": "#FFFF00",
   "hoverColor": "#FF00FF",
-  "splashRadius": 20.0,
+  "splashRadius": 20,
   "materialTapTargetSize": "padded",
   "autofocus": true,
   "isError": false
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={checkBoxPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: checkBoxPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/chip.mdx b/docs/widgets/chip.mdx
index d11a4157c..d95241831 100644
--- a/docs/widgets/chip.mdx
+++ b/docs/widgets/chip.mdx
@@ -3,6 +3,78 @@ title: "Chip"
 description: "Documentation for Chip"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const chipPreviewJson = {
+  "type": "chip",
+  "avatar": {
+    "type": "circleAvatar",
+    "backgroundColor": "#FF0000",
+    "child": {
+      "type": "text",
+      "data": "A"
+    }
+  },
+  "label": {
+    "type": "text",
+    "data": "Chip Label"
+  },
+  "labelStyle": {
+    "color": "#000000",
+    "fontSize": 14
+  },
+  "labelPadding": {
+    "left": 8,
+    "top": 4,
+    "right": 8,
+    "bottom": 4
+  },
+  "deleteIcon": {
+    "type": "icon",
+    "icon": "delete"
+  },
+  "deleteIconColor": "#FF0000",
+  "deleteButtonTooltipMessage": "Delete",
+  "side": {
+    "color": "#000000",
+    "width": 1
+  },
+  "shape": {
+    "type": "roundedRectangle",
+    "borderRadius": 8
+  },
+  "clipBehavior": "antiAlias",
+  "autofocus": false,
+  "color": "#FFFFFF",
+  "backgroundColor": "#EEEEEE",
+  "padding": {
+    "left": 8,
+    "top": 4,
+    "right": 8,
+    "bottom": 4
+  },
+  "visualDensity": {
+    "horizontal": 0,
+    "vertical": 0
+  },
+  "materialTapTargetSize": "padded",
+  "elevation": 2,
+  "shadowColor": "#000000",
+  "surfaceTintColor": "#FFFFFF",
+  "iconTheme": {
+    "color": "#000000",
+    "size": 24
+  },
+  "avatarBoxConstraints": {
+    "minWidth": 24,
+    "minHeight": 24
+  },
+  "deleteIconBoxConstraints": {
+    "minWidth": 24,
+    "minHeight": 24
+  }
+};
+export const chipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Chip allows you to build a Flutter Chip widget using JSON.
 To know more about the Chip widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Chip-class.html).
 
@@ -36,8 +108,10 @@ To know more about the Chip widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacChip(
   avatar: StacCircleAvatar(
     backgroundColor: StacColors.red,
@@ -67,7 +141,10 @@ StacChip(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "chip",
   "avatar": {
@@ -100,11 +177,11 @@ StacChip(
   "deleteButtonTooltipMessage": "Delete",
   "side": {
     "color": "#000000",
-    "width": 1.0
+    "width": 1
   },
   "shape": {
     "type": "roundedRectangle",
-    "borderRadius": 8.0
+    "borderRadius": 8
   },
   "clipBehavior": "antiAlias",
   "autofocus": false,
@@ -117,25 +194,57 @@ StacChip(
     "bottom": 4
   },
   "visualDensity": {
-    "horizontal": 0.0,
-    "vertical": 0.0
+    "horizontal": 0,
+    "vertical": 0
   },
   "materialTapTargetSize": "padded",
-  "elevation": 2.0,
+  "elevation": 2,
   "shadowColor": "#000000",
   "surfaceTintColor": "#FFFFFF",
   "iconTheme": {
     "color": "#000000",
-    "size": 24.0
+    "size": 24
   },
   "avatarBoxConstraints": {
-    "minWidth": 24.0,
-    "minHeight": 24.0
+    "minWidth": 24,
+    "minHeight": 24
   },
   "deleteIconBoxConstraints": {
-    "minWidth": 24.0,
-    "minHeight": 24.0
+    "minWidth": 24,
+    "minHeight": 24
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={chipPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: chipPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/circle_avatar.mdx b/docs/widgets/circle_avatar.mdx
index 78f7f6ad8..80c29b8b7 100644
--- a/docs/widgets/circle_avatar.mdx
+++ b/docs/widgets/circle_avatar.mdx
@@ -3,6 +3,20 @@ title: "CircleAvatar"
 description: "Documentation for CircleAvatar"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const circleAvatarPreviewJson = {
+  "type": "circleAvatar",
+  "backgroundColor": "#FF0000",
+  "foregroundColor": "#FFFFFF",
+  "backgroundImage": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg",
+  "radius": 50,
+  "child": {
+    "type": "text",
+    "data": "A"
+  }
+};
+export const circleAvatarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac CircleAvatar allows you to build a Flutter circle avatar widget using JSON.
 To know more about the circle avatar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/CircleAvatar-class.html).
 
@@ -23,8 +37,10 @@ To know more about the circle avatar widget in Flutter, refer to the [official d
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCircleAvatar(
   backgroundColor: StacColors.red,
   foregroundColor: StacColors.white,
@@ -34,7 +50,10 @@ StacCircleAvatar(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "circleAvatar",
   "backgroundColor": "#FF0000",
@@ -47,4 +66,36 @@ StacCircleAvatar(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={circleAvatarPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: circleAvatarPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/circular_progress_indicator.mdx b/docs/widgets/circular_progress_indicator.mdx
index 709310621..7c1a68ad5 100644
--- a/docs/widgets/circular_progress_indicator.mdx
+++ b/docs/widgets/circular_progress_indicator.mdx
@@ -3,6 +3,16 @@ title: "CircularProgressIndicator"
 description: "Documentation for CircularProgressIndicator"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const circularProgressIndicatorPreviewJson = {
+  "type": "circularProgressIndicator",
+  "color": "#541204",
+  "strokeWidth": 6,
+  "backgroundColor": "#FFD700",
+  "strokeCap": "round"
+};
+export const circularProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac CircularProgressIndicator allows you to build a Flutter CircularProgressIndicator widget using JSON. 
 To know more about the CircularProgressIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html).
 
@@ -19,11 +29,12 @@ To know more about the CircularProgressIndicator widget in Flutter, refer to the
 | semanticsValue  | `String`        | Provides a textual description of the widget.                      |
 | strokeCap       | `StacStrokeCap` | The progress indicator's line ending.                              |
 
-
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCircularProgressIndicator(
   color: '#541204',
   strokeWidth: 6,
@@ -32,7 +43,10 @@ StacCircularProgressIndicator(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "circularProgressIndicator",
   "color": "#541204",
@@ -41,6 +55,37 @@ StacCircularProgressIndicator(
   "strokeCap": "round"
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={circularProgressIndicatorPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: circularProgressIndicatorPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 
diff --git a/docs/widgets/clip_oval.mdx b/docs/widgets/clip_oval.mdx
index 569e3c520..f7c3b8988 100644
--- a/docs/widgets/clip_oval.mdx
+++ b/docs/widgets/clip_oval.mdx
@@ -3,6 +3,20 @@ title: "ClipOval"
 description: "Documentation for ClipOval"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const clipOvalPreviewJson = {
+  "type": "clipOval",
+  "clipBehavior": "antiAlias",
+  "child": {
+    "type": "image",
+    "src": "https://placehold.co/600x400",
+    "width": 200,
+    "height": 200,
+    "fit": "cover"
+  }
+};
+export const clipOvalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac ClipOval allows you to build the Flutter ClipOval widget using JSON. It clips its child using an oval shape, which is useful for creating circular or oval UI elements.
 To know more about the ClipOval widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ClipOval-class.html).
 
@@ -13,11 +27,12 @@ To know more about the ClipOval widget in Flutter, refer to the [official docume
 | clipBehavior | `StacClip`             | `antiAlias` | The clipping behavior when content extends beyond the oval. |
 | child        | `StacWidget`           | Required    | The widget to clip with an oval shape.                      |
 
-
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacClipOval(
   clipBehavior: StacClip.antiAlias,
   child: StacImage(
@@ -29,7 +44,10 @@ StacClipOval(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "clipOval",
   "clipBehavior": "antiAlias",
@@ -42,4 +60,36 @@ StacClipOval(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={clipOvalPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: clipOvalPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/clip_rrect.mdx b/docs/widgets/clip_rrect.mdx
index 2905e9463..f9562ceeb 100644
--- a/docs/widgets/clip_rrect.mdx
+++ b/docs/widgets/clip_rrect.mdx
@@ -3,12 +3,28 @@ title: "ClipRRect"
 description: "Documentation for ClipRRect"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const clipRrectPreviewJson = {
+  "type": "clipRRect",
+  "borderRadius": 8,
+  "clipBehavior": "antiAlias",
+  "child": {
+    "type": "container",
+    "color": "#FF0000",
+    "height": 100,
+    "width": 100
+  }
+};
+export const clipRrectPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The `ClipRRect` widget in Stac allows you to clip its child using rounded rectangles. This is useful when you want to create UI elements with rounded corners.
 
 ## Usage
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacClipRRect(
   borderRadius: StacBorderRadius.all(8.0),
   clipBehavior: StacClip.antiAlias,
@@ -20,10 +36,13 @@ StacClipRRect(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "clipRRect",
-  "borderRadius": 8.0,
+  "borderRadius": 8,
   "clipBehavior": "antiAlias",
   "child": {
     "type": "container",
@@ -33,8 +52,39 @@ StacClipRRect(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={clipRrectPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: clipRrectPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Properties
 
 | Property | Type | Default | Description |
diff --git a/docs/widgets/colored_box.mdx b/docs/widgets/colored_box.mdx
index 95e950dbb..edd8c3b3b 100644
--- a/docs/widgets/colored_box.mdx
+++ b/docs/widgets/colored_box.mdx
@@ -3,6 +3,17 @@ title: "ColoredBox"
 description: "Documentation for ColoredBox"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const coloredBoxPreviewJson = {
+  "type": "coloredBox",
+  "color": "#FF0000",
+  "child": {
+    "type": "text",
+    "data": "Hello, World!"
+  }
+};
+export const coloredBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Colored Box allows you to build a Flutter colored box widget using JSON.
 To know more about the colored box widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ColoredBox-class.html).
 
@@ -15,15 +26,20 @@ To know more about the colored box widget in Flutter, refer to the [official doc
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacColoredBox(
   color: StacColors.red,
   child: StacText(data: 'Hello, World!'),
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "coloredBox",
   "color": "#FF0000",
@@ -33,4 +49,36 @@ StacColoredBox(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={coloredBoxPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: coloredBoxPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/column.mdx b/docs/widgets/column.mdx
index bcd2cd2e9..bb3b49b0e 100644
--- a/docs/widgets/column.mdx
+++ b/docs/widgets/column.mdx
@@ -3,6 +3,30 @@ title: "Column"
 description: "Documentation for Column"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const columnPreviewJson = {
+  "type": "column",
+  "mainAxisAlignment": "center",
+  "crossAxisAlignment": "start",
+  "mainAxisSize": "min",
+  "textDirection": "ltr",
+  "verticalDirection": "up",
+  "spacing": 10,
+  "children": [
+    {
+      "type": "text",
+      "data": "Hello, World!"
+    },
+    {
+      "type": "container",
+      "width": 100,
+      "height": 100,
+      "color": "#FF0000"
+    }
+  ]
+};
+export const columnPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Column allows you to build a Flutter column widget using JSON.
 To know more about the column widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Column-class.html).
 
@@ -21,8 +45,10 @@ To know more about the column widget in Flutter, refer to the [official document
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacColumn(
   mainAxisAlignment: StacMainAxisAlignment.center,
   crossAxisAlignment: StacCrossAxisAlignment.start,
@@ -41,7 +67,10 @@ StacColumn(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "column",
   "mainAxisAlignment": "center",
@@ -64,4 +93,36 @@ StacColumn(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={columnPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: columnPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/conditional.mdx b/docs/widgets/conditional.mdx
index 9377a1d08..335de8553 100644
--- a/docs/widgets/conditional.mdx
+++ b/docs/widgets/conditional.mdx
@@ -3,6 +3,21 @@ title: "Conditional"
 description: "Documentation for Conditional"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const conditionalPreviewJson = {
+  "type": "conditional",
+  "condition": "user.isLoggedIn == true",
+  "ifTrue": {
+    "type": "text",
+    "data": "Welcome back!"
+  },
+  "ifFalse": {
+    "type": "text",
+    "data": "Please sign in"
+  }
+};
+export const conditionalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Conditional allows you to conditionally render widgets based on a boolean expression. It evaluates the condition at runtime and renders either the `ifTrue` or `ifFalse` widget.
 
 ## Properties
@@ -15,8 +30,10 @@ The Stac Conditional allows you to conditionally render widgets based on a boole
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacConditional(
   condition: 'user.isLoggedIn == true',
   ifTrue: StacText(data: 'Welcome back!'),
@@ -24,7 +41,10 @@ StacConditional(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "conditional",
   "condition": "user.isLoggedIn == true",
@@ -38,8 +58,39 @@ StacConditional(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={conditionalPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: conditionalPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Conditional with Complex Widgets
 
 <CodeGroup>
diff --git a/docs/widgets/container.mdx b/docs/widgets/container.mdx
index d45084e0d..61f99bdb6 100644
--- a/docs/widgets/container.mdx
+++ b/docs/widgets/container.mdx
@@ -3,6 +3,38 @@ title: "Container"
 description: "Documentation for Container"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const containerPreviewJson = {
+  "type": "container",
+  "alignment": "center",
+  "padding": {
+    "top": 16,
+    "bottom": 16,
+    "left": 16,
+    "right": 16
+  },
+  "decoration": {
+    "color": "#FF5733",
+    "borderRadius": {
+      "topLeft": 16,
+      "topRight": 16,
+      "bottomLeft": 16,
+      "bottomRight": 16
+    }
+  },
+  "width": 200,
+  "height": 200,
+  "child": {
+    "type": "text",
+    "data": "Hello, World!",
+    "style": {
+      "color": "#FFFFFF",
+      "fontSize": 24
+    }
+  }
+};
+export const containerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Container allows you to build a Flutter Container widget using JSON. 
 To know more about the container widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Container-class.html).
 
@@ -23,11 +55,12 @@ To know more about the container widget in Flutter, refer to the [official docum
 | child                | `StacWidget`           | The child widget of the container.                |
 | clipBehavior         | `StacClip`             | The clip behavior of the container.               |
 
-
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacContainer(
   alignment: StacAlignment.center,
   padding: StacEdgeInsets(
@@ -57,37 +90,71 @@ StacContainer(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "container",
   "alignment": "center",
   "padding": {
-    "top": 16.0,
-    "bottom": 16.0,
-    "left": 16.0,
-    "right": 16.0
+    "top": 16,
+    "bottom": 16,
+    "left": 16,
+    "right": 16
   },
   "decoration": {
     "color": "#FF5733",
     "borderRadius": {
-      "topLeft": 16.0,
-      "topRight": 16.0,
-      "bottomLeft": 16.0,
-      "bottomRight": 16.0
+      "topLeft": 16,
+      "topRight": 16,
+      "bottomLeft": 16,
+      "bottomRight": 16
     }
   },
-  "width": 200.0,
-  "height": 200.0,
+  "width": 200,
+  "height": 200,
   "child": {
     "type": "text",
     "data": "Hello, World!",
     "style": {
       "color": "#FFFFFF",
-      "fontSize": 24.0
+      "fontSize": 24
     }
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={containerPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: containerPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 
diff --git a/docs/widgets/custom_scroll_view.mdx b/docs/widgets/custom_scroll_view.mdx
index 5405971e2..06150e247 100644
--- a/docs/widgets/custom_scroll_view.mdx
+++ b/docs/widgets/custom_scroll_view.mdx
@@ -3,6 +3,31 @@ title: "CustomScrollView"
 description: "Documentation for CustomScrollView"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const customScrollViewPreviewJson = {
+  "type": "customScrollView",
+  "slivers": [
+    {
+      "type": "sliverAppBar",
+      "title": {
+        "type": "text",
+        "data": "SliverAppBar"
+      },
+      "leading": {
+        "type": "iconButton",
+        "icon": {
+          "type": "icon",
+          "iconType": "material",
+          "icon": "menu"
+        },
+        "onPressed": {}
+      },
+      "backgroundColor": "primary"
+    }
+  ]
+};
+export const customScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac CustomScrollView allows you to build a Flutter CustomScrollView widget using JSON.
 To know more about the CustomScrollView widget in Flutter, refer to
 the [official documentation](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html).
@@ -24,8 +49,10 @@ the [official documentation](https://api.flutter.dev/flutter/widgets/CustomScrol
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacCustomScrollView(
   slivers: [
     StacSliverAppBar(
@@ -40,7 +67,10 @@ StacCustomScrollView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "customScrollView",
   "slivers": [
@@ -64,4 +94,36 @@ StacCustomScrollView(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={customScrollViewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: customScrollViewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/divider.mdx b/docs/widgets/divider.mdx
index 945d5293b..2a05f448f 100644
--- a/docs/widgets/divider.mdx
+++ b/docs/widgets/divider.mdx
@@ -3,6 +3,16 @@ title: "Divider"
 description: "Documentation for Divider"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const dividerPreviewJson = {
+  "type": "divider",
+  "thickness": 2,
+  "color": "#FF0000",
+  "indent": 16,
+  "endIndent": 16
+};
+export const dividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Divider allows you to build a Flutter Divider widget using JSON. It creates a thin horizontal line with padding on either side.
 To know more about the Divider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Divider-class.html).
 
@@ -18,8 +28,10 @@ To know more about the Divider widget in Flutter, refer to the [official documen
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacDivider(
   thickness: 2.0,
   color: StacColors.red,
@@ -28,17 +40,51 @@ StacDivider(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "divider",
-  "thickness": 2.0,
+  "thickness": 2,
   "color": "#FF0000",
-  "indent": 16.0,
-  "endIndent": 16.0
+  "indent": 16,
+  "endIndent": 16
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={dividerPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: dividerPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Divider in a List
 
 <CodeGroup>
diff --git a/docs/widgets/drawer.mdx b/docs/widgets/drawer.mdx
index fe6a85c2b..ef3254056 100644
--- a/docs/widgets/drawer.mdx
+++ b/docs/widgets/drawer.mdx
@@ -3,6 +3,40 @@ title: "Drawer"
 description: "Documentation for Drawer"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const drawerPreviewJson = {
+  "type": "drawer",
+  "backgroundColor": "#FFFFFF",
+  "elevation": 16,
+  "shadowColor": "#000000",
+  "surfaceTintColor": "#F2F2F2",
+  "shape": {
+    "type": "roundedRectangleBorder",
+    "borderRadius": 16
+  },
+  "width": 304,
+  "semanticLabel": "Navigation Drawer",
+  "clipBehavior": "antiAlias",
+  "child": {
+    "type": "column",
+    "children": [
+      {
+        "type": "text",
+        "data": "Drawer Header"
+      },
+      {
+        "type": "text",
+        "data": "Item 1"
+      },
+      {
+        "type": "text",
+        "data": "Item 2"
+      }
+    ]
+  }
+};
+export const drawerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Drawer allows you to build a Flutter Drawer widget using JSON.
 To know more about the Drawer widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Drawer-class.html).
 
@@ -22,8 +56,10 @@ To know more about the Drawer widget in Flutter, refer to the [official document
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacDrawer(
   backgroundColor: StacColors.white,
   elevation: 16.0,
@@ -43,18 +79,21 @@ StacDrawer(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "drawer",
   "backgroundColor": "#FFFFFF",
-  "elevation": 16.0,
+  "elevation": 16,
   "shadowColor": "#000000",
   "surfaceTintColor": "#F2F2F2",
   "shape": {
     "type": "roundedRectangleBorder",
     "borderRadius": 16
   },
-  "width": 304.0,
+  "width": 304,
   "semanticLabel": "Navigation Drawer",
   "clipBehavior": "antiAlias",
   "child": {
@@ -76,4 +115,36 @@ StacDrawer(
   }
 }
 ```
-</CodeGroup> 
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={drawerPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: drawerPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/dropdown_menu.mdx b/docs/widgets/dropdown_menu.mdx
index b8c1f2fb2..7fec9dac5 100644
--- a/docs/widgets/dropdown_menu.mdx
+++ b/docs/widgets/dropdown_menu.mdx
@@ -3,6 +3,44 @@ title: "DropdownMenu"
 description: "Documentation for DropdownMenu"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const dropdownMenuPreviewJson = {
+  "type": "dropdownMenu",
+  "label": {
+    "type": "text",
+    "data": "Select an option"
+  },
+  "hintText": "Please select",
+  "width": 200,
+  "dropdownMenuEntries": [
+    {
+      "value": "option1",
+      "label": "Option 1",
+      "leadingIcon": {
+        "type": "icon",
+        "iconData": "home"
+      }
+    },
+    {
+      "value": "option2",
+      "label": "Option 2",
+      "leadingIcon": {
+        "type": "icon",
+        "iconData": "settings"
+      }
+    },
+    {
+      "value": "option3",
+      "label": "Option 3",
+      "leadingIcon": {
+        "type": "icon",
+        "iconData": "favorite"
+      }
+    }
+  ]
+};
+export const dropdownMenuPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac DropdownMenu allows you to build a Flutter DropdownMenu widget using JSON.
 To know more about the DropdownMenu widget in Flutter, refer to
 the [official documentation](https://api.flutter.dev/flutter/material/DropdownMenu-class.html).
@@ -46,8 +84,10 @@ the [official documentation](https://api.flutter.dev/flutter/material/DropdownMe
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacDropdownMenu(
   label: StacText(data: 'Select an option'),
   hintText: 'Please select',
@@ -72,7 +112,10 @@ StacDropdownMenu(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "dropdownMenu",
   "label": {
@@ -109,4 +152,36 @@ StacDropdownMenu(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={dropdownMenuPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: dropdownMenuPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/dynamic_view.mdx b/docs/widgets/dynamic_view.mdx
index f6be50ba1..ee9cd0751 100644
--- a/docs/widgets/dynamic_view.mdx
+++ b/docs/widgets/dynamic_view.mdx
@@ -3,6 +3,20 @@ title: "Dynamic View"
 description: "Documentation for Dynamic View"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const dynamicViewPreviewJson = {
+  "type": "dynamicView",
+  "request": {
+    "url": "https://api.example.com/user/1",
+    "method": "get"
+  },
+  "template": {
+    "type": "text",
+    "data": "Hello, {{name}}!"
+  }
+};
+export const dynamicViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 ## Overview
 
 The `dynamicView` widget allows you to fetch data from an API and render it using a template. This powerful feature enables dynamic content rendering based on remote data sources, making it perfect for creating data-driven UIs without writing custom code.
@@ -32,8 +46,10 @@ The `dynamicView` widget allows you to fetch data from an API and render it usin
 
 ## Basic Usage
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacDynamicView(
   request: StacNetworkRequest(
     url: 'https://api.example.com/user/1',
@@ -43,7 +59,10 @@ StacDynamicView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "dynamicView",
   "request": {
@@ -56,8 +75,39 @@ StacDynamicView(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={dynamicViewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: dynamicViewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Data Placeholders
 
 Use double curly braces `{{placeholder}}` to insert data from the API response into your template:
diff --git a/docs/widgets/elevated_button.mdx b/docs/widgets/elevated_button.mdx
index a045713bf..b91041b52 100644
--- a/docs/widgets/elevated_button.mdx
+++ b/docs/widgets/elevated_button.mdx
@@ -3,6 +3,26 @@ title: "ElevatedButton"
 description: "Documentation for ElevatedButton"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const elevatedButtonPreviewJson = {
+  "type": "elevatedButton",
+  "onPressed": {},
+  "onLongPress": {},
+  "onHover": {},
+  "onFocusChange": {},
+  "style": {
+    "backgroundColor": "primary",
+    "foregroundColor": "#FFFFFF"
+  },
+  "autofocus": false,
+  "clipBehavior": "none",
+  "child": {
+    "type": "text",
+    "data": "Click Me!"
+  }
+};
+export const elevatedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Elevated Button allows you to build a Flutter elevated button widget using JSON.
 To know more about the elevated button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/ElevatedButton-class.html).
 
@@ -21,8 +41,10 @@ To know more about the elevated button widget in Flutter, refer to the [official
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacElevatedButton(
   onPressed: StacNoneAction(),
   onLongPress: StacNoneAction(),
@@ -36,7 +58,10 @@ StacElevatedButton(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "elevatedButton",
   "onPressed": {},
@@ -55,4 +80,36 @@ StacElevatedButton(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={elevatedButtonPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: elevatedButtonPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/expanded.mdx b/docs/widgets/expanded.mdx
index e8f5aa2b4..9af600e7c 100644
--- a/docs/widgets/expanded.mdx
+++ b/docs/widgets/expanded.mdx
@@ -3,6 +3,17 @@ title: "Expanded"
 description: "Documentation for Expanded"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const expandedPreviewJson = {
+  "type": "expanded",
+  "flex": 2,
+  "child": {
+    "type": "text",
+    "data": "Hello, World!"
+  }
+};
+export const expandedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Expanded allows you to build a Flutter expanded widget using JSON.
 To know more about the expanded widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Expanded-class.html).
 
@@ -15,15 +26,20 @@ To know more about the expanded widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacExpanded(
   flex: 2,
   child: StacText(data: 'Hello, World!'),
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "expanded",
   "flex": 2,
@@ -33,4 +49,36 @@ StacExpanded(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={expandedPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: expandedPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/filled_button.mdx b/docs/widgets/filled_button.mdx
index 34a210594..034fe747b 100644
--- a/docs/widgets/filled_button.mdx
+++ b/docs/widgets/filled_button.mdx
@@ -3,6 +3,26 @@ title: "FilledButton"
 description: "Documentation for FilledButton"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const filledButtonPreviewJson = {
+  "type": "filledButton",
+  "onPressed": {},
+  "onLongPress": {},
+  "onHover": {},
+  "onFocusChange": {},
+  "style": {
+    "backgroundColor": "#FFC107",
+    "foregroundColor": "#000000"
+  },
+  "autofocus": false,
+  "clipBehavior": "none",
+  "child": {
+    "type": "text",
+    "data": "Click Me!"
+  }
+};
+export const filledButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Filled Button allows you to build a Flutter filled button widget using JSON.
 To know more about the filled button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/FilledButton-class.html).
 
@@ -21,8 +41,10 @@ To know more about the filled button widget in Flutter, refer to the [official d
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacFilledButton(
   onPressed: StacNoneAction(),
   style: StacButtonStyle(
@@ -35,7 +57,10 @@ StacFilledButton(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "filledButton",
   "onPressed": {},
@@ -54,4 +79,36 @@ StacFilledButton(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={filledButtonPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: filledButtonPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/fitted_box.mdx b/docs/widgets/fitted_box.mdx
index a57ea5e0b..d31e87230 100644
--- a/docs/widgets/fitted_box.mdx
+++ b/docs/widgets/fitted_box.mdx
@@ -3,6 +3,22 @@ title: "FittedBox"
 description: "Documentation for FittedBox"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const fittedBoxPreviewJson = {
+  "type": "fittedBox",
+  "fit": "contain",
+  "alignment": "center",
+  "child": {
+    "type": "text",
+    "data": "Hello, World!",
+    "style": {
+      "fontSize": 20,
+      "color": "#000000"
+    }
+  }
+};
+export const fittedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac FittedBox allows you to build the Flutter FittedBox widget using JSON.
 To know more about the FittedBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/FittedBox-class.html).
 
@@ -21,8 +37,10 @@ To know more about the FittedBox widget in Flutter, refer to the [official docum
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacFittedBox(
   fit: StacBoxFit.contain,
   alignment: StacAlignment.center,
@@ -36,7 +54,10 @@ StacFittedBox(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "fittedBox",
   "fit": "contain",
@@ -51,5 +72,36 @@ StacFittedBox(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={fittedBoxPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: fittedBoxPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/flexible.mdx b/docs/widgets/flexible.mdx
index 83d88cd6e..f322868b5 100644
--- a/docs/widgets/flexible.mdx
+++ b/docs/widgets/flexible.mdx
@@ -3,6 +3,18 @@ title: "Flexible"
 description: "Documentation for Flexible"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const flexiblePreviewJson = {
+  "type": "flexible",
+  "flex": 2,
+  "fit": "tight",
+  "child": {
+    "type": "text",
+    "data": "Hello, World!"
+  }
+};
+export const flexiblePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Flexible allows you to build a Flutter flexible widget using JSON.
 To know more about the flexible widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Flexible-class.html).
 
@@ -16,8 +28,10 @@ To know more about the flexible widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacFlexible(
   flex: 2,
   fit: StacFlexFit.tight,
@@ -25,7 +39,10 @@ StacFlexible(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "flexible",
   "flex": 2,
@@ -36,4 +53,36 @@ StacFlexible(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={flexiblePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: flexiblePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/floating_action_button.mdx b/docs/widgets/floating_action_button.mdx
index d6c12e37b..68b2998b2 100644
--- a/docs/widgets/floating_action_button.mdx
+++ b/docs/widgets/floating_action_button.mdx
@@ -3,6 +3,45 @@ title: "FloatingActionButton"
 description: "Documentation for FloatingActionButton"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const floatingActionButtonPreviewJson = {
+  "type": "floatingActionButton",
+  "onPressed": {},
+  "textStyle": {
+    "fontSize": 16,
+    "color": "#FFFFFF"
+  },
+  "buttonType": "small",
+  "autofocus": false,
+  "icon": {
+    "type": "icon",
+    "icon": "add"
+  },
+  "backgroundColor": "#FFC107",
+  "foregroundColor": "#000000",
+  "focusColor": "#FF5722",
+  "hoverColor": "#FF9800",
+  "splashColor": "#FFEB3B",
+  "extendedTextStyle": {
+    "fontSize": 14,
+    "color": "#FFFFFF"
+  },
+  "elevation": 6,
+  "focusElevation": 8,
+  "hoverElevation": 10,
+  "disabledElevation": 2,
+  "highlightElevation": 12,
+  "extendedIconLabelSpacing": 8,
+  "enableFeedback": true,
+  "tooltip": "Add Item",
+  "heroTag": "fab1",
+  "child": {
+    "type": "text",
+    "data": "Add"
+  }
+};
+export const floatingActionButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Floating Action Button allows you to build a Flutter floating action button widget using JSON.
 To know more about the floating action button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html).
 
@@ -34,8 +73,10 @@ To know more about the floating action button widget in Flutter, refer to the [o
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacFloatingActionButton(
   onPressed: StacNoneAction(),
   textStyle: StacTextStyle(fontSize: 16, color: StacColors.white),
@@ -61,7 +102,10 @@ StacFloatingActionButton(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "floatingActionButton",
   "onPressed": {},
@@ -84,12 +128,12 @@ StacFloatingActionButton(
     "fontSize": 14,
     "color": "#FFFFFF"
   },
-  "elevation": 6.0,
-  "focusElevation": 8.0,
-  "hoverElevation": 10.0,
-  "disabledElevation": 2.0,
-  "highlightElevation": 12.0,
-  "extendedIconLabelSpacing": 8.0,
+  "elevation": 6,
+  "focusElevation": 8,
+  "hoverElevation": 10,
+  "disabledElevation": 2,
+  "highlightElevation": 12,
+  "extendedIconLabelSpacing": 8,
   "enableFeedback": true,
   "tooltip": "Add Item",
   "heroTag": "fab1",
@@ -99,4 +143,36 @@ StacFloatingActionButton(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={floatingActionButtonPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: floatingActionButtonPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/form.mdx b/docs/widgets/form.mdx
index 683fbe5d0..03caed785 100644
--- a/docs/widgets/form.mdx
+++ b/docs/widgets/form.mdx
@@ -3,6 +3,58 @@ title: "Form"
 description: "Documentation for Form"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const formPreviewJson = {
+  "type": "form",
+  "autovalidateMode": "always",
+  "child": {
+    "type": "column",
+    "children": [
+      {
+        "type": "textFormField",
+        "id": "username",
+        "decoration": {
+          "labelText": "Username"
+        }
+      },
+      {
+        "type": "textFormField",
+        "id": "password",
+        "decoration": {
+          "labelText": "Password"
+        }
+      },
+      {
+        "type": "filledButton",
+        "child": {
+          "type": "text",
+          "data": "Submit"
+        },
+        "onPressed": {
+          "actionType": "validateForm",
+          "isValid": {
+            "actionType": "networkRequest",
+            "url": "https://dummyjson.com/auth/login",
+            "method": "post",
+            "contentType": "application/json",
+            "body": {
+              "username": {
+                "actionType": "getFormValue",
+                "id": "username"
+              },
+              "password": {
+                "actionType": "getFormValue",
+                "id": "password"
+              }
+            }
+          }
+        }
+      }
+    ]
+  }
+};
+export const formPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Form allows you to build a Flutter form widget using JSON.
 To know more about the form widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Form-class.html).
 
@@ -15,8 +67,10 @@ To know more about the form widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacForm(
   autovalidateMode: StacAutovalidateMode.always,
   child: StacColumn(
@@ -48,7 +102,10 @@ StacForm(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "form",
   "autovalidateMode": "always",
@@ -99,4 +156,36 @@ StacForm(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={formPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: formPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/fractionally_sized_box.mdx b/docs/widgets/fractionally_sized_box.mdx
index 0e6c2beab..cc05863f5 100644
--- a/docs/widgets/fractionally_sized_box.mdx
+++ b/docs/widgets/fractionally_sized_box.mdx
@@ -3,6 +3,23 @@ title: "FractionallySizedBox"
 description: "Documentation for FractionallySizedBox"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const fractionallySizedBoxPreviewJson = {
+  "type": "fractionallySizedBox",
+  "alignment": "center",
+  "widthFactor": 0.5,
+  "heightFactor": 0.5,
+  "child": {
+    "type": "container",
+    "color": "#FF5733",
+    "child": {
+      "type": "text",
+      "data": "Hello, World!"
+    }
+  }
+};
+export const fractionallySizedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac FractionallySizedBox allows you to build a Flutter fractionally sized box widget using JSON.
 To know more about the fractionally sized box widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html).
 
@@ -17,8 +34,10 @@ To know more about the fractionally sized box widget in Flutter, refer to the [o
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacFractionallySizedBox(
   alignment: StacAlignment.center,
   widthFactor: 0.5,
@@ -30,7 +49,10 @@ StacFractionallySizedBox(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "fractionallySizedBox",
   "alignment": "center",
@@ -46,4 +68,36 @@ StacFractionallySizedBox(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={fractionallySizedBoxPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: fractionallySizedBoxPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/gesture_detector.mdx b/docs/widgets/gesture_detector.mdx
index 5dc57df70..bed3fb2b7 100644
--- a/docs/widgets/gesture_detector.mdx
+++ b/docs/widgets/gesture_detector.mdx
@@ -3,14 +3,44 @@ title: "GestureDetector"
 description: "Documentation for GestureDetector"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const gestureDetectorPreviewJson = {
+  "type": "gestureDetector",
+  "child": {
+    "type": "container",
+    "color": "#2196F3",
+    "width": 200,
+    "height": 200,
+    "alignment": "center",
+    "child": {
+      "type": "text",
+      "data": "Tap me!",
+      "style": {
+        "color": "#FFFFFF",
+        "fontSize": 20
+      }
+    }
+  },
+  "onTap": {
+    "actionType": "showSnackBar",
+    "content": {
+      "type": "text",
+      "data": "This is a Snackbar"
+    }
+  }
+};
+export const gestureDetectorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The `GestureDetector` widget in Stac allows you to detect various gestures and user interactions within your application. It wraps Flutter's native GestureDetector widget, providing a JSON-based interface to handle touch events, taps, drags, and more.
 
 ## Usage
 
 To use a GestureDetector in your Stac, specify the widget type as "gestureDetector" and provide a child widget along with any gesture callbacks you want to handle.
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacGestureDetector(
   child: StacContainer(
     color: StacColors.blue,
@@ -28,7 +58,10 @@ StacGestureDetector(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "gestureDetector",
   "child": {
@@ -55,8 +88,39 @@ StacGestureDetector(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={gestureDetectorPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: gestureDetectorPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Properties
 
 ### Child Widget
diff --git a/docs/widgets/grid_view.mdx b/docs/widgets/grid_view.mdx
index f937d92ee..05497ded7 100644
--- a/docs/widgets/grid_view.mdx
+++ b/docs/widgets/grid_view.mdx
@@ -3,6 +3,50 @@ title: "GridView"
 description: "Documentation for GridView"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const gridViewPreviewJson = {
+  "type": "gridView",
+  "scrollDirection": "vertical",
+  "reverse": false,
+  "primary": false,
+  "physics": {
+    "type": "scrollPhysics",
+    "name": "bouncing"
+  },
+  "shrinkWrap": false,
+  "padding": {
+    "left": 10,
+    "top": 10,
+    "right": 10,
+    "bottom": 10
+  },
+  "crossAxisCount": 2,
+  "mainAxisSpacing": 10,
+  "crossAxisSpacing": 10,
+  "childAspectRatio": 1,
+  "mainAxisExtent": 100,
+  "addAutomaticKeepAlives": true,
+  "addRepaintBoundaries": true,
+  "addSemanticIndexes": true,
+  "cacheExtent": 100,
+  "children": [
+    {
+      "type": "text",
+      "data": "Item 1"
+    },
+    {
+      "type": "text",
+      "data": "Item 2"
+    }
+  ],
+  "semanticChildCount": 2,
+  "dragStartBehavior": "start",
+  "keyboardDismissBehavior": "manual",
+  "restorationId": "grid_view_1",
+  "clipBehavior": "hardEdge"
+};
+export const gridViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac GridView allows you to build a Flutter GridView widget using JSON.
 To know more about the GridView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/GridView-class.html).
 
@@ -34,8 +78,10 @@ To know more about the GridView widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacGridView(
   scrollDirection: StacAxis.vertical,
   reverse: false,
@@ -64,7 +110,10 @@ StacGridView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "gridView",
   "scrollDirection": "vertical",
@@ -82,14 +131,14 @@ StacGridView(
     "bottom": 10
   },
   "crossAxisCount": 2,
-  "mainAxisSpacing": 10.0,
-  "crossAxisSpacing": 10.0,
-  "childAspectRatio": 1.0,
-  "mainAxisExtent": 100.0,
+  "mainAxisSpacing": 10,
+  "crossAxisSpacing": 10,
+  "childAspectRatio": 1,
+  "mainAxisExtent": 100,
   "addAutomaticKeepAlives": true,
   "addRepaintBoundaries": true,
   "addSemanticIndexes": true,
-  "cacheExtent": 100.0,
+  "cacheExtent": 100,
   "children": [
     {
       "type": "text",
@@ -107,4 +156,36 @@ StacGridView(
   "clipBehavior": "hardEdge"
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={gridViewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: gridViewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/hero.mdx b/docs/widgets/hero.mdx
index b353146e3..d2d018f8c 100644
--- a/docs/widgets/hero.mdx
+++ b/docs/widgets/hero.mdx
@@ -3,6 +3,17 @@ title: "Hero"
 description: "Documentation for Hero"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const heroPreviewJson = {
+  "type": "hero",
+  "tag": "userAvatar",
+  "child": {
+    "type": "image",
+    "network": "https://example.com/avatar.png"
+  }
+};
+export const heroPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Hero allows you to build a Flutter Hero widget using JSON. It enables hero animations between routes by tagging widgets with the same tag.
 To know more about the Hero widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Hero-class.html).
 
@@ -19,15 +30,20 @@ To know more about the Hero widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacHero(
   tag: 'userAvatar',
   child: StacImage(network: 'https://example.com/avatar.png'),
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "hero",
   "tag": "userAvatar",
@@ -37,8 +53,39 @@ StacHero(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={heroPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: heroPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Hero Animation Example
 
 Here's an example showing a hero animation from a list to a detail page:
diff --git a/docs/widgets/icon.mdx b/docs/widgets/icon.mdx
index 725e0a846..b44008377 100644
--- a/docs/widgets/icon.mdx
+++ b/docs/widgets/icon.mdx
@@ -3,6 +3,17 @@ title: "Icon"
 description: "Documentation for Icon"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const iconPreviewJson = {
+  "type": "icon",
+  "icon": "home",
+  "size": 24,
+  "color": "#000000",
+  "semanticLabel": "Home Icon",
+  "textDirection": "ltr"
+};
+export const iconPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Icon allows you to build a Flutter icon widget using JSON.
 To know more about the icon widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Icon-class.html).
 
@@ -21,8 +32,10 @@ To know more about the icon widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacIcon(
   icon: 'home',
   size: 24.0,
@@ -32,14 +45,49 @@ StacIcon(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "icon",
   "icon": "home",
-  "size": 24.0,
+  "size": 24,
   "color": "#000000",
   "semanticLabel": "Home Icon",
   "textDirection": "ltr"
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={iconPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: iconPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/icon_button.mdx b/docs/widgets/icon_button.mdx
index 1c1253908..74674caf6 100644
--- a/docs/widgets/icon_button.mdx
+++ b/docs/widgets/icon_button.mdx
@@ -3,6 +3,48 @@ title: "IconButton"
 description: "Documentation for IconButton"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const iconButtonPreviewJson = {
+  "type": "iconButton",
+  "iconSize": 24,
+  "padding": {
+    "left": 8,
+    "top": 8,
+    "right": 8,
+    "bottom": 8
+  },
+  "alignment": "center",
+  "splashRadius": 20,
+  "color": "#000000",
+  "focusColor": "#FFC107",
+  "hoverColor": "#FF9800",
+  "highlightColor": "#FF5722",
+  "splashColor": "#FFEB3B",
+  "disabledColor": "#BDBDBD",
+  "onPressed": {},
+  "autofocus": false,
+  "tooltip": "Add Item",
+  "enableFeedback": true,
+  "constraints": {
+    "minWidth": 48,
+    "minHeight": 48
+  },
+  "style": {
+    "backgroundColor": "#FFC107",
+    "foregroundColor": "#000000"
+  },
+  "isSelected": false,
+  "selectedIcon": {
+    "type": "icon",
+    "icon": "check"
+  },
+  "icon": {
+    "type": "icon",
+    "icon": "add"
+  }
+};
+export const iconButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Icon Button allows you to build a Flutter icon button widget using JSON.
 To know more about the icon button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/IconButton-class.html).
 
@@ -32,8 +74,10 @@ To know more about the icon button widget in Flutter, refer to the [official doc
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacIconButton(
   iconSize: 24.0,
   padding: StacEdgeInsets(left: 8.0, top: 8.0, right: 8.0, bottom: 8.0),
@@ -57,18 +101,21 @@ StacIconButton(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "iconButton",
-  "iconSize": 24.0,
+  "iconSize": 24,
   "padding": {
-    "left": 8.0,
-    "top": 8.0,
-    "right": 8.0,
-    "bottom": 8.0
+    "left": 8,
+    "top": 8,
+    "right": 8,
+    "bottom": 8
   },
   "alignment": "center",
-  "splashRadius": 20.0,
+  "splashRadius": 20,
   "color": "#000000",
   "focusColor": "#FFC107",
   "hoverColor": "#FF9800",
@@ -80,8 +127,8 @@ StacIconButton(
   "tooltip": "Add Item",
   "enableFeedback": true,
   "constraints": {
-    "minWidth": 48.0,
-    "minHeight": 48.0
+    "minWidth": 48,
+    "minHeight": 48
   },
   "style": {
     "backgroundColor": "#FFC107",
@@ -98,4 +145,36 @@ StacIconButton(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={iconButtonPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: iconButtonPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/image.mdx b/docs/widgets/image.mdx
index dc3996f48..f986bcb86 100644
--- a/docs/widgets/image.mdx
+++ b/docs/widgets/image.mdx
@@ -3,6 +3,17 @@ title: "Image"
 description: "Documentation for Image"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const imagePreviewJson = {
+  "type": "image",
+  "src": "assets/logo.png",
+  "imageType": "asset",
+  "width": 200,
+  "height": 100,
+  "fit": "cover"
+};
+export const imagePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The `Image` widget allows you to display an image in your Flutter app using JSON. It supports images from multiple sources, including assets, files, and network URLs, and provides customization options such as alignment, color, width, height, and fit.
 
 To learn more about the equivalent Flutter widgets and their properties, refer to the [official Flutter documentation for Image](https://api.flutter.dev/flutter/widgets/Image-class.html).
@@ -29,8 +40,10 @@ To learn more about the equivalent Flutter widgets and their properties, refer t
 
 Creates an image widget that loads from Flutter's asset bundle.
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 const StacImage.asset(
   'assets/logo.png',
   width: 200,
@@ -39,7 +52,10 @@ const StacImage.asset(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "image",
   "src": "assets/logo.png",
@@ -49,8 +65,39 @@ const StacImage.asset(
   "fit": "cover"
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={imagePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: imagePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ---
 
 ### StacImage.network
diff --git a/docs/widgets/ink_well.mdx b/docs/widgets/ink_well.mdx
index 6a6612f4b..ff41de2d4 100644
--- a/docs/widgets/ink_well.mdx
+++ b/docs/widgets/ink_well.mdx
@@ -3,10 +3,41 @@ title: "InkWell"
 description: "Documentation for InkWell"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const inkWellPreviewJson = {
+  "type": "inkWell",
+  "child": {
+    "type": "padding",
+    "padding": {
+      "top": 20,
+      "bottom": 20,
+      "right": 20,
+      "left": 20
+    },
+    "child": {
+      "type": "text",
+      "data": "Hello, World! from Inkwell",
+      "textAlign": "center"
+    }
+  },
+  "splashColor": "#E1BEE7",
+  "borderRadius": {
+    "topLeft": 20,
+    "topRight": 20,
+    "bottomLeft": 20,
+    "bottomRight": 20
+  },
+  "radius": 20,
+  "hoverDuration": {
+    "seconds": 10
+  },
+  "onTap": {}
+};
+export const inkWellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 **Stac InkWell** allows you to build the Flutter `InkWell` widget using JSON.  
 To learn more about the `InkWell` widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/InkWell-class.html).
 
-
 ## Properties
 | Property                | Type                         | Description                                                                 |
 |-------------------------|------------------------------|-----------------------------------------------------------------------------|
@@ -41,8 +72,10 @@ To learn more about the `InkWell` widget in Flutter, refer to the [official docu
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacInkWell(
   child: StacPadding(
     padding: StacEdgeInsets(top: 20, bottom: 20, right: 20, left: 20),
@@ -64,7 +97,10 @@ StacInkWell(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "inkWell",
   "child": {
@@ -95,5 +131,36 @@ StacInkWell(
   "onTap": {}
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={inkWellPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: inkWellPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/limited_box.mdx b/docs/widgets/limited_box.mdx
index e3f05ee2b..774e1b7d4 100644
--- a/docs/widgets/limited_box.mdx
+++ b/docs/widgets/limited_box.mdx
@@ -3,6 +3,18 @@ title: "Limited Box"
 description: "Documentation for Limited Box"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const limitedBoxPreviewJson = {
+  "type": "limitedBox",
+  "child": {
+    "type": "container",
+    "width": 100,
+    "height": 100,
+    "color": "#FF0000"
+  }
+};
+export const limitedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac LimitedBox allows you to build the Flutter LimitedBox widget using JSON.
 To know more about the LimitedBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/LimitedBox-class.html).
 
@@ -20,8 +32,10 @@ To know more about the LimitedBox widget in Flutter, refer to the [official docu
 
 ### Example 1: Limited Box with Default Constraints
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacLimitedBox(
   child: StacContainer(
     width: 100,
@@ -31,7 +45,10 @@ StacLimitedBox(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "limitedBox",
   "child": {
@@ -42,8 +59,39 @@ StacLimitedBox(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={limitedBoxPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: limitedBoxPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ### Example 2: Limited Box with Custom Constraints
 
 <CodeGroup>
diff --git a/docs/widgets/linear_progress_indicator.mdx b/docs/widgets/linear_progress_indicator.mdx
index 9067f604c..356bedcbf 100644
--- a/docs/widgets/linear_progress_indicator.mdx
+++ b/docs/widgets/linear_progress_indicator.mdx
@@ -3,6 +3,21 @@ title: "LinearProgressIndicator"
 description: "Documentation for LinearProgressIndicator"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const linearProgressIndicatorPreviewJson = {
+  "type": "linearProgressIndicator",
+  "color": "#541204",
+  "minHeight": 6,
+  "backgroundColor": "#FFD700",
+  "borderRadius": {
+    "topLeft": 10,
+    "topRight": 10,
+    "bottomLeft": 10,
+    "bottomRight": 10
+  }
+};
+export const linearProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac LinearProgressIndicator allows you to build a Flutter LinearProgressIndicator widget using JSON. 
 To know more about the LinearProgressIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html).
 
@@ -18,11 +33,12 @@ To know more about the LinearProgressIndicator widget in Flutter, refer to the [
 | semanticsValue  | `String`            | Provides a textual description of the widget.                      |
 | borderRadius    | `StacBorderRadius`  | The border radius for progress indicator.                          |
 
-
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacLinearProgressIndicator(
   color: '#541204',
   minHeight: 6,
@@ -36,7 +52,10 @@ StacLinearProgressIndicator(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "linearProgressIndicator",
   "color": "#541204",
@@ -50,6 +69,37 @@ StacLinearProgressIndicator(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={linearProgressIndicatorPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: linearProgressIndicatorPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 
diff --git a/docs/widgets/list_tile.mdx b/docs/widgets/list_tile.mdx
index 781cc74a8..aad0647a5 100644
--- a/docs/widgets/list_tile.mdx
+++ b/docs/widgets/list_tile.mdx
@@ -3,6 +3,102 @@ title: "ListTile"
 description: "Documentation for ListTile"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const listTilePreviewJson = {
+  "type": "column",
+  "mainAxisAlignment": "start",
+  "crossAxisAlignment": "center",
+  "children": [
+    {
+      "type": "sizedBox",
+      "height": 12
+    },
+    {
+      "type": "listTile",
+      "leading": {
+        "type": "image",
+        "src": "https://cdn-icons-png.flaticon.com/512/3135/3135715.png"
+      },
+      "title": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Andrew Symonds",
+          "style": {
+            "fontSize": 18
+          }
+        }
+      },
+      "subtitle": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Andrew Symonds was an Australian international cricketer, who played all three formats as a batting all-rounder. Commonly nicknamed \"Roy\", he was a key member of two World Cup winning squads. Symonds played as a right-handed, middle order batsman and alternated between medium pace and off-spin",
+          "style": {
+            "fontSize": 14
+          }
+        }
+      },
+      "trailing": {
+        "type": "icon",
+        "iconType": "material",
+        "icon": "more_vert",
+        "size": 24
+      }
+    },
+    {
+      "type": "sizedBox",
+      "height": 12
+    },
+    {
+      "type": "listTile",
+      "leading": {
+        "type": "image",
+        "src": "https://cdn-icons-png.flaticon.com/512/3135/3135715.png"
+      },
+      "title": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Adam Gilchrist",
+          "style": {
+            "fontSize": 18
+          }
+        }
+      },
+      "subtitle": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Adam Craig Gilchrist is an Australian cricket commentator and former international cricketer and captain of the Australia national cricket team. He was an attacking left-handed batsman and record-breaking wicket-keeper",
+          "style": {
+            "fontSize": 14
+          }
+        }
+      },
+      "trailing": {
+        "type": "icon",
+        "iconType": "material",
+        "icon": "more_vert",
+        "size": 24
+      }
+    }
+  ]
+};
+export const listTilePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac ListTile allows you to build a Flutter ListTile widget using JSON.
 To know more about the list tile widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/ListTile-class.html).
 
@@ -37,8 +133,10 @@ To know more about the list tile widget in Flutter, refer to the [official docum
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacColumn(
   mainAxisAlignment: StacMainAxisAlignment.start,
   crossAxisAlignment: StacCrossAxisAlignment.center,
@@ -85,7 +183,10 @@ StacColumn(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "column",
   "mainAxisAlignment": "start",
@@ -180,5 +281,36 @@ StacColumn(
   ]
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={listTilePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: listTilePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/listview.mdx b/docs/widgets/listview.mdx
index 277c2fbcb..1cfc00168 100644
--- a/docs/widgets/listview.mdx
+++ b/docs/widgets/listview.mdx
@@ -3,6 +3,184 @@ title: "List View"
 description: "Documentation for List View"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const listviewPreviewJson = {
+  "type": "listView",
+  "shrinkWrap": true,
+  "separator": {
+    "type": "container",
+    "height": 10
+  },
+  "children": [
+    {
+      "type": "listTile",
+      "leading": {
+        "type": "container",
+        "height": 50,
+        "width": 50,
+        "color": "#165FC7",
+        "child": {
+          "type": "column",
+          "mainAxisAlignment": "center",
+          "crossAxisAlignment": "center",
+          "children": [
+            {
+              "type": "text",
+              "data": "1",
+              "style": {
+                "fontSize": 21
+              }
+            }
+          ]
+        }
+      },
+      "title": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Item 1",
+          "style": {
+            "fontSize": 18
+          }
+        }
+      },
+      "subtitle": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Item description",
+          "style": {
+            "fontSize": 14
+          }
+        }
+      },
+      "trailing": {
+        "type": "icon",
+        "iconType": "material",
+        "icon": "more_vert",
+        "size": 24
+      }
+    },
+    {
+      "type": "listTile",
+      "leading": {
+        "type": "container",
+        "height": 50,
+        "width": 50,
+        "color": "#165FC7",
+        "child": {
+          "type": "column",
+          "mainAxisAlignment": "center",
+          "crossAxisAlignment": "center",
+          "children": [
+            {
+              "type": "text",
+              "data": "2",
+              "style": {
+                "fontSize": 21
+              }
+            }
+          ]
+        }
+      },
+      "title": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Item 2",
+          "style": {
+            "fontSize": 18
+          }
+        }
+      },
+      "subtitle": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Item description",
+          "style": {
+            "fontSize": 14
+          }
+        }
+      },
+      "trailing": {
+        "type": "icon",
+        "iconType": "material",
+        "icon": "more_vert",
+        "size": 24
+      }
+    },
+    {
+      "type": "listTile",
+      "leading": {
+        "type": "container",
+        "height": 50,
+        "width": 50,
+        "color": "#165FC7",
+        "child": {
+          "type": "column",
+          "mainAxisAlignment": "center",
+          "crossAxisAlignment": "center",
+          "children": [
+            {
+              "type": "text",
+              "data": "3",
+              "style": {
+                "fontSize": 21
+              }
+            }
+          ]
+        }
+      },
+      "title": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Item 3",
+          "style": {
+            "fontSize": 18
+          }
+        }
+      },
+      "subtitle": {
+        "type": "padding",
+        "padding": {
+          "top": 10
+        },
+        "child": {
+          "type": "text",
+          "data": "Item description",
+          "style": {
+            "fontSize": 14
+          }
+        }
+      },
+      "trailing": {
+        "type": "icon",
+        "iconType": "material",
+        "icon": "more_vert",
+        "size": 24
+      }
+    }
+  ]
+};
+export const listviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac ListView allows you to build a Flutter ListView widget using JSON.
 To know more about the listview widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ListView-class.html).
 
@@ -30,8 +208,10 @@ To know more about the listview widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacListView(
   shrinkWrap: true,
   separator: StacContainer(height: 10),
@@ -87,7 +267,10 @@ StacListView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "listView",
   "shrinkWrap": true,
@@ -264,6 +447,37 @@ StacListView(
   ]
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={listviewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: listviewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 
diff --git a/docs/widgets/network_widget.mdx b/docs/widgets/network_widget.mdx
index e81a55ac6..fd5f9183f 100644
--- a/docs/widgets/network_widget.mdx
+++ b/docs/widgets/network_widget.mdx
@@ -3,6 +3,19 @@ title: "NetworkWidget"
 description: "Documentation for NetworkWidget"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const networkWidgetPreviewJson = {
+  "type": "networkWidget",
+  "request": {
+    "url": "https://api.example.com/data",
+    "method": "get",
+    "headers": {
+      "Authorization": "Bearer token"
+    }
+  }
+};
+export const networkWidgetPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac NetworkWidget allows you to build a widget that makes a network request and renders a widget based on the response using JSON.
 
 ## Properties
@@ -13,8 +26,10 @@ The Stac NetworkWidget allows you to build a widget that makes a network request
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacNetworkWidget(
   request: StacNetworkRequest(
     url: 'https://api.example.com/data',
@@ -24,7 +39,10 @@ StacNetworkWidget(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "networkWidget",
   "request": {
@@ -36,4 +54,36 @@ StacNetworkWidget(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={networkWidgetPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: networkWidgetPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/opacity.mdx b/docs/widgets/opacity.mdx
index b43987d82..62334afe2 100644
--- a/docs/widgets/opacity.mdx
+++ b/docs/widgets/opacity.mdx
@@ -3,6 +3,34 @@ title: "Opacity"
 description: "Documentation for Opacity"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const opacityPreviewJson = {
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "Opacity"
+    }
+  },
+  "body": {
+    "type": "center",
+    "child": {
+      "type": "opacity",
+      "opacity": 0.5,
+      "child": {
+        "type": "text",
+        "data": "Opacity Widget",
+        "style": {
+          "fontSize": 23,
+          "fontWeight": "w600"
+        }
+      }
+    }
+  }
+};
+export const opacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Opacity allows you to build a Flutter Opacity widget using JSON.
 To know more about the Slider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Opacity-class.html).
 
@@ -15,8 +43,10 @@ To know more about the Slider widget in Flutter, refer to the [official document
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacScaffold(
   appBar: StacAppBar(
     title: StacText(data: 'Opacity'),
@@ -33,7 +63,10 @@ StacScaffold(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "scaffold",
   "appBar": {
@@ -60,5 +93,36 @@ StacScaffold(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={opacityPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: opacityPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/outlined_button.mdx b/docs/widgets/outlined_button.mdx
index 0d5f16ff5..8622b9348 100644
--- a/docs/widgets/outlined_button.mdx
+++ b/docs/widgets/outlined_button.mdx
@@ -3,6 +3,26 @@ title: "OutlinedButton"
 description: "Documentation for OutlinedButton"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const outlinedButtonPreviewJson = {
+  "type": "outlinedButton",
+  "onPressed": {},
+  "onLongPress": {},
+  "onHover": {},
+  "onFocusChange": {},
+  "style": {
+    "backgroundColor": "#FFFFFF",
+    "foregroundColor": "#000000"
+  },
+  "autofocus": false,
+  "clipBehavior": "none",
+  "child": {
+    "type": "text",
+    "data": "Click Me!"
+  }
+};
+export const outlinedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Outlined Button allows you to build a Flutter outlined button widget using JSON.
 To know more about the outlined button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/OutlinedButton-class.html).
 
@@ -21,8 +41,10 @@ To know more about the outlined button widget in Flutter, refer to the [official
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacOutlinedButton(
   onPressed: StacNoneAction(),
   style: StacButtonStyle(
@@ -35,7 +57,10 @@ StacOutlinedButton(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "outlinedButton",
   "onPressed": {},
@@ -54,5 +79,36 @@ StacOutlinedButton(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={outlinedButtonPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: outlinedButtonPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/padding.mdx b/docs/widgets/padding.mdx
index 22ae3b771..1b8ad062e 100644
--- a/docs/widgets/padding.mdx
+++ b/docs/widgets/padding.mdx
@@ -3,6 +3,23 @@ title: "Padding"
 description: "Documentation for Padding"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const paddingPreviewJson = {
+  "type": "padding",
+  "padding": {
+    "left": 0,
+    "right": 0
+  },
+  "child": {
+    "type": "container",
+    "color": "#672BFF",
+    "clipBehavior": "hardEdge",
+    "height": 75,
+    "width": 700
+  }
+};
+export const paddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Padding allows you to build a Flutter Padding widget using JSON. 
 To know more about the padding widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Padding-class.html).
 
@@ -15,8 +32,10 @@ To know more about the padding widget in Flutter, refer to the [official documen
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacPadding(
   padding: StacEdgeInsets(left: 0, right: 0),
   child: StacContainer(
@@ -28,7 +47,10 @@ StacPadding(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "padding",
   "padding": {
@@ -44,5 +66,36 @@ StacPadding(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={paddingPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: paddingPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/page_view.mdx b/docs/widgets/page_view.mdx
index c5c153ce3..e21f8606f 100644
--- a/docs/widgets/page_view.mdx
+++ b/docs/widgets/page_view.mdx
@@ -3,6 +3,59 @@ title: "PageView"
 description: "Documentation for PageView"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const pageViewPreviewJson = {
+  "type": "pageView",
+  "children": [
+    {
+      "type": "container",
+      "color": "#D9D9D9",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Page 1",
+          "style": {
+            "fontSize": 23,
+            "fontWeight": "w400"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#FC3F1B",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Page 2",
+          "style": {
+            "fontSize": 23,
+            "fontWeight": "w400"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#D9D9D9",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Page 3",
+          "style": {
+            "fontSize": 23,
+            "fontWeight": "w400"
+          }
+        }
+      }
+    }
+  ]
+};
+export const pageViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac PageView allows you to build a Flutter PageView widget using JSON.
 To know more about the PageView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/PageView-class.html).
 
@@ -27,8 +80,10 @@ To know more about the PageView widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacPageView(
   children: [
     StacContainer(
@@ -62,7 +117,10 @@ StacPageView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "pageView",
   "children": [
@@ -114,4 +172,36 @@ StacPageView(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={pageViewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: pageViewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/placeholder.mdx b/docs/widgets/placeholder.mdx
index 6dcc8cd0f..217715adc 100644
--- a/docs/widgets/placeholder.mdx
+++ b/docs/widgets/placeholder.mdx
@@ -3,6 +3,16 @@ title: "Placeholder"
 description: "Documentation for Placeholder"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const placeholderPreviewJson = {
+  "type": "placeholder",
+  "color": "#455A64",
+  "strokeWidth": 2,
+  "fallbackWidth": 400,
+  "fallbackHeight": 400
+};
+export const placeholderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac `Placeholder` widget allows you to build the Flutter Placeholder widget using JSON.
 is used to draw a box that serves as a placeholder in your Flutter UI. It is typically used to represent areas where widgets are yet to be added or for debugging layout constraints.
 
@@ -24,8 +34,10 @@ To learn more about the `Placeholder` widget, refer to the [official Flutter doc
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacPlaceholder(
   color: '#455A64',
   strokeWidth: 2.0,
@@ -34,14 +46,48 @@ StacPlaceholder(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "placeholder",
   "color": "#455A64",
-  "strokeWidth": 2.0,
-  "fallbackWidth": 400.0,
-  "fallbackHeight": 400.0
+  "strokeWidth": 2,
+  "fallbackWidth": 400,
+  "fallbackHeight": 400
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={placeholderPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: placeholderPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/positioned.mdx b/docs/widgets/positioned.mdx
index c9814c487..368307c72 100644
--- a/docs/widgets/positioned.mdx
+++ b/docs/widgets/positioned.mdx
@@ -3,6 +3,20 @@ title: "Positioned"
 description: "Documentation for Positioned"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const positionedPreviewJson = {
+  "type": "positioned",
+  "left": 10,
+  "top": 20,
+  "right": 30,
+  "bottom": 40,
+  "child": {
+    "type": "text",
+    "data": "Hello, World!"
+  }
+};
+export const positionedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Positioned widget controls where a child of a [Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html) is positioned. It corresponds to Flutter's Positioned widget and allows precise positioning using coordinates and optional sizing constraints. Use it with JSON to declare positioned children inside a Stack.
 
 To learn more about the Positioned widget in Flutter, see the [official documentation](https://api.flutter.dev/flutter/widgets/Positioned-class.html).
@@ -29,8 +43,10 @@ The Dart API also supports named constructors: `StacPositioned.fill()`, `StacPos
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacPositioned(
   left: 10,
   top: 20,
@@ -40,7 +56,10 @@ StacPositioned(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "positioned",
   "left": 10,
@@ -53,8 +72,39 @@ StacPositioned(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={positionedPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: positionedPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Dart-Only Constructors
 
 The following named constructors are available in Dart but not in JSON:
diff --git a/docs/widgets/radio_group.mdx b/docs/widgets/radio_group.mdx
index 57aeede35..0a16c78d3 100644
--- a/docs/widgets/radio_group.mdx
+++ b/docs/widgets/radio_group.mdx
@@ -3,6 +3,68 @@ title: "RadioGroup"
 description: "Documentation for RadioGroup"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const radioGroupPreviewJson = {
+  "type": "radioGroup",
+  "child": {
+    "type": "column",
+    "children": [
+      {
+        "type": "listTile",
+        "leading": {
+          "type": "radio",
+          "radioType": "adaptive",
+          "value": "1",
+          "groupValue": "1"
+        },
+        "title": {
+          "type": "text",
+          "data": "Male",
+          "align": "center",
+          "style": {
+            "fontSize": 21
+          }
+        }
+      },
+      {
+        "type": "listTile",
+        "leading": {
+          "type": "radio",
+          "radioType": "adaptive",
+          "value": "2",
+          "groupValue": "1"
+        },
+        "title": {
+          "type": "text",
+          "data": "Female",
+          "align": "center",
+          "style": {
+            "fontSize": 21
+          }
+        }
+      },
+      {
+        "type": "listTile",
+        "leading": {
+          "type": "radio",
+          "radioType": "adaptive",
+          "value": "3",
+          "groupValue": "1"
+        },
+        "title": {
+          "type": "text",
+          "data": "Other",
+          "align": "center",
+          "style": {
+            "fontSize": 21
+          }
+        }
+      }
+    ]
+  }
+};
+export const radioGroupPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac RadioGroup allows you to build Flutter Radio widgets using JSON. 
 To know more about the Radio widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Radio-class.html).
 
@@ -39,11 +101,12 @@ To know more about the Radio widget in Flutter, refer to the [official documenta
 | side                       | `StacBorderSide`            | The border side of the radio.                                                                                    |
 | innerRadius                | `double`                    | The inner radius of the radio in logical pixels.                                                                |
 
-
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacRadioGroup(
   child: StacColumn(
     children: [
@@ -88,7 +151,10 @@ StacRadioGroup(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "radioGroup",
   "child": {
@@ -149,6 +215,37 @@ StacRadioGroup(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={radioGroupPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: radioGroupPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 
diff --git a/docs/widgets/refresh_indicator.mdx b/docs/widgets/refresh_indicator.mdx
index d7c852714..9ca2dfec3 100644
--- a/docs/widgets/refresh_indicator.mdx
+++ b/docs/widgets/refresh_indicator.mdx
@@ -3,6 +3,18 @@ title: "RefreshIndicator"
 description: "Documentation for RefreshIndicator"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const refreshIndicatorPreviewJson = {
+  "type": "refreshIndicator",
+  "onRefresh": {
+    "actionType": "request",
+    "url": "https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json",
+    "method": "get",
+    "contentType": "application/json"
+  }
+};
+export const refreshIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac RefreshIndicator allows you to build a Flutter RefreshIndicator widget using JSON.
 To know more about the RefreshIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/RefreshIndicator-class.html).
 
@@ -23,8 +35,10 @@ To know more about the RefreshIndicator widget in Flutter, refer to the [officia
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacRefreshIndicator(
   onRefresh: StacNetworkRequestAction(
     url: 'https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json',
@@ -34,7 +48,10 @@ StacRefreshIndicator(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "refreshIndicator",
   "onRefresh": {
@@ -45,4 +62,36 @@ StacRefreshIndicator(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={refreshIndicatorPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: refreshIndicatorPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/row.mdx b/docs/widgets/row.mdx
index 5438507e5..96bdbc9b0 100644
--- a/docs/widgets/row.mdx
+++ b/docs/widgets/row.mdx
@@ -3,6 +3,32 @@ title: "Row"
 description: "Documentation for Row"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const rowPreviewJson = {
+  "type": "row",
+  "mainAxisAlignment": "center",
+  "crossAxisAlignment": "center",
+  "spacing": 12,
+  "children": [
+    {
+      "type": "image",
+      "src": "https://images.pexels.com/photos/2718416/pexels-photo-2718416.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+      "width": 100
+    },
+    {
+      "type": "image",
+      "src": "https://images.pexels.com/photos/121629/pexels-photo-121629.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+      "width": 100
+    },
+    {
+      "type": "image",
+      "src": "https://images.pexels.com/photos/1414642/pexels-photo-1414642.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
+      "width": 100
+    }
+  ]
+};
+export const rowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Row allows you to build a Flutter Row widget using JSON.
 To know more about the row widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Row-class.html).
 
@@ -21,8 +47,10 @@ To know more about the row widget in Flutter, refer to the [official documentati
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacRow(
   mainAxisAlignment: StacMainAxisAlignment.center,
   crossAxisAlignment: StacCrossAxisAlignment.center,
@@ -44,7 +72,10 @@ StacRow(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "row",
   "mainAxisAlignment": "center",
@@ -69,4 +100,36 @@ StacRow(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={rowPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: rowPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/safe_area.mdx b/docs/widgets/safe_area.mdx
index 4f84d340e..704421f7b 100644
--- a/docs/widgets/safe_area.mdx
+++ b/docs/widgets/safe_area.mdx
@@ -3,6 +3,20 @@ title: "SafeArea"
 description: "Documentation for SafeArea"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const safeAreaPreviewJson = {
+  "type": "safeArea",
+  "child": {
+    "type": "text",
+    "data": "Hello, World!",
+    "style": {
+      "color": "#FFFFFF",
+      "fontSize": 24
+    }
+  }
+};
+export const safeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac `SafeArea` allows you to build the Flutter SafeArea widget using JSON. 
 To know more about the SafeArea widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/SafeArea-class.html).
 
@@ -20,8 +34,10 @@ To know more about the SafeArea widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSafeArea(
   child: StacText(
     data: 'Hello, World!',
@@ -30,7 +46,10 @@ StacSafeArea(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "safeArea",
   "child": {
@@ -38,10 +57,41 @@ StacSafeArea(
     "data": "Hello, World!",
     "style": {
       "color": "#FFFFFF",
-      "fontSize": 24.0
+      "fontSize": 24
     }
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={safeAreaPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: safeAreaPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/scaffold.mdx b/docs/widgets/scaffold.mdx
index a6c304269..e876e6f0f 100644
--- a/docs/widgets/scaffold.mdx
+++ b/docs/widgets/scaffold.mdx
@@ -3,6 +3,54 @@ title: "Scaffold"
 description: "Documentation for Scaffold"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const scaffoldPreviewJson = {
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "App Bar Title"
+    }
+  },
+  "body": {
+    "type": "center",
+    "child": {
+      "type": "text",
+      "data": "Hello, World!"
+    }
+  },
+  "floatingActionButton": {
+    "type": "floatingActionButton",
+    "child": {
+      "type": "icon",
+      "icon": "add"
+    },
+    "onPressed": {
+      "type": "function",
+      "name": "onFabPressed"
+    }
+  },
+  "backgroundColor": "#FFFFFF",
+  "drawer": {
+    "type": "drawer",
+    "child": {
+      "type": "column",
+      "children": [
+        {
+          "type": "text",
+          "data": "Drawer Item 1"
+        },
+        {
+          "type": "text",
+          "data": "Drawer Item 2"
+        }
+      ]
+    }
+  }
+};
+export const scaffoldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Scaffold allows you to build a Flutter scaffold widget using JSON.
 To know more about the scaffold widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Scaffold-class.html).
 
@@ -36,8 +84,10 @@ To know more about the scaffold widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacScaffold(
   appBar: StacAppBar(
     title: StacText(data: 'App Bar Title'),
@@ -61,7 +111,10 @@ StacScaffold(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "scaffold",
   "appBar": {
@@ -108,4 +161,36 @@ StacScaffold(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={scaffoldPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: scaffoldPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/selectable_text.mdx b/docs/widgets/selectable_text.mdx
index f43061eb9..9ac73baaf 100644
--- a/docs/widgets/selectable_text.mdx
+++ b/docs/widgets/selectable_text.mdx
@@ -3,6 +3,19 @@ title: "SelectableText"
 description: "Documentation for SelectableText"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const selectableTextPreviewJson = {
+  "type": "selectableText",
+  "data": "This is a selectable text",
+  "style": {
+    "fontSize": 18,
+    "fontWeight": "w600"
+  },
+  "showCursor": true,
+  "cursorColor": "#FF0000"
+};
+export const selectableTextPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac SelectableText allows you to build the Flutter SelectableText widget using JSON.
 To know more about the SelectableText widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/SelectableText-class.html).
 
@@ -37,8 +50,10 @@ To know more about the SelectableText widget in Flutter, refer to the [official
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSelectableText(
   data: 'This is a selectable text',
   style: StacTextStyle(fontSize: 18, fontWeight: StacFontWeight.w600),
@@ -47,7 +62,10 @@ StacSelectableText(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "selectableText",
   "data": "This is a selectable text",
@@ -59,4 +77,36 @@ StacSelectableText(
   "cursorColor": "#FF0000"
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={selectableTextPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: selectableTextPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/set_value.mdx b/docs/widgets/set_value.mdx
index 56eeb87b1..7939f32f8 100644
--- a/docs/widgets/set_value.mdx
+++ b/docs/widgets/set_value.mdx
@@ -3,6 +3,26 @@ title: "Set Value"
 description: "Documentation for Set Value"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const setValuePreviewJson = {
+  "type": "setValue",
+  "values": [
+    {
+      "key": "userName",
+      "value": "John Doe"
+    },
+    {
+      "key": "isLoggedIn",
+      "value": true
+    }
+  ],
+  "child": {
+    "type": "text",
+    "data": "Welcome!"
+  }
+};
+export const setValuePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SetValue widget allows you to set multiple key-value pairs in the application's state and optionally render a child widget. It's useful for managing application state through JSON configuration.
 
 ## Properties
@@ -18,8 +38,10 @@ Each item in `values` should contain:
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSetValue(
   values: [
     {'key': 'userName', 'value': 'John Doe'},
@@ -29,12 +51,21 @@ StacSetValue(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "setValue",
   "values": [
-    { "key": "userName", "value": "John Doe" },
-    { "key": "isLoggedIn", "value": true }
+    {
+      "key": "userName",
+      "value": "John Doe"
+    },
+    {
+      "key": "isLoggedIn",
+      "value": true
+    }
   ],
   "child": {
     "type": "text",
@@ -42,8 +73,39 @@ StacSetValue(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={setValuePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: setValuePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ## Initializing State on Screen Load
 
 Use `StacSetValue` to initialize state when a screen loads:
diff --git a/docs/widgets/single_child_scroll_view.mdx b/docs/widgets/single_child_scroll_view.mdx
index 70bb9ae96..6ba88bafb 100644
--- a/docs/widgets/single_child_scroll_view.mdx
+++ b/docs/widgets/single_child_scroll_view.mdx
@@ -3,6 +3,33 @@ title: "SingleChildScrollView"
 description: "Documentation for SingleChildScrollView"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const singleChildScrollViewPreviewJson = {
+  "type": "singleChildScrollView",
+  "child": {
+    "type": "column",
+    "children": [
+      {
+        "type": "text",
+        "data": "Hello World!"
+      },
+      {
+        "type": "text",
+        "data": "This is a SingleChildScrollView widget."
+      },
+      {
+        "type": "text",
+        "data": "You can scroll vertically."
+      },
+      {
+        "type": "text",
+        "data": "You can also scroll horizontally."
+      }
+    ]
+  }
+};
+export const singleChildScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SingleChildScrollView allows you to build a Flutter SingleChildScrollView widget using JSON.
 To know more about the SingleChildScrollView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html).
 
@@ -23,8 +50,10 @@ To know more about the SingleChildScrollView widget in Flutter, refer to the [of
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSingleChildScrollView(
   child: StacColumn(
     children: [
@@ -37,7 +66,10 @@ StacSingleChildScrollView(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "singleChildScrollView",
   "child": {
@@ -63,4 +95,36 @@ StacSingleChildScrollView(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={singleChildScrollViewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: singleChildScrollViewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sized_box.mdx b/docs/widgets/sized_box.mdx
index 3bdfb013d..6a4237fbe 100644
--- a/docs/widgets/sized_box.mdx
+++ b/docs/widgets/sized_box.mdx
@@ -3,6 +3,13 @@ title: "SizedBox"
 description: "Documentation for SizedBox"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sizedBoxPreviewJson = {
+  "type": "sizedBox",
+  "height": 25
+};
+export const sizedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SizedBox allows you to build a Flutter SizedBox widget using JSON.
 To know more about the sizedBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/SizedBox-class.html).
 
@@ -16,16 +23,52 @@ To know more about the sizedBox widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSizedBox(height: 25)
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sizedBox",
   "height": 25
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sizedBoxPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sizedBoxPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/slider.mdx b/docs/widgets/slider.mdx
index 8f599c047..06b7d491c 100644
--- a/docs/widgets/slider.mdx
+++ b/docs/widgets/slider.mdx
@@ -3,6 +3,33 @@ title: "Slider"
 description: "Documentation for Slider"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliderPreviewJson = {
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "Stac Slider"
+    }
+  },
+  "body": {
+    "type": "form",
+    "child": {
+      "type": "center",
+      "child": {
+        "id": "example_slider",
+        "type": "slider",
+        "sliderType": "material",
+        "value": 20,
+        "max": 100,
+        "divisions": 5
+      }
+    }
+  }
+};
+export const sliderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Slider allows you to build a Flutter Slider widget using JSON. 
 To know more about the Slider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Slider-class.html).
 
@@ -32,8 +59,10 @@ To know more about the Slider widget in Flutter, refer to the [official document
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacScaffold(
   appBar: StacAppBar(
     title: StacText(data: 'Stac Slider'),
@@ -52,7 +81,10 @@ StacScaffold(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "scaffold",
   "appBar": {
@@ -78,4 +110,36 @@ StacScaffold(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliderPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliderPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_app_bar.mdx b/docs/widgets/sliver_app_bar.mdx
index a435274b6..ce032d05d 100644
--- a/docs/widgets/sliver_app_bar.mdx
+++ b/docs/widgets/sliver_app_bar.mdx
@@ -3,6 +3,37 @@ title: "SliverAppBar"
 description: "Documentation for SliverAppBar"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverAppBarPreviewJson = {
+  "type": "sliverAppBar",
+  "title": {
+    "type": "text",
+    "data": "SliverAppBar"
+  },
+  "leading": {
+    "type": "iconButton",
+    "icon": {
+      "type": "icon",
+      "iconType": "material",
+      "icon": "menu"
+    },
+    "onPressed": {}
+  },
+  "backgroundColor": "primary",
+  "actions": [
+    {
+      "type": "iconButton",
+      "icon": {
+        "type": "icon",
+        "iconType": "cupertino",
+        "icon": "heart_solid"
+      },
+      "onPressed": {}
+    }
+  ]
+};
+export const sliverAppBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverAppBar allows you to build a Flutter sliver app bar widget using JSON.
 To know more about the app bar widget in Flutter, refer to
 the [official documentation](https://api.flutter.dev/flutter/material/SliverAppBar-class.html).
@@ -46,8 +77,10 @@ the [official documentation](https://api.flutter.dev/flutter/material/SliverAppB
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSliverAppBar(
   title: StacText(data: 'SliverAppBar'),
   leading: StacIconButton(
@@ -64,7 +97,10 @@ StacSliverAppBar(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverAppBar",
   "title": {
@@ -94,4 +130,36 @@ StacSliverAppBar(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverAppBarPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverAppBarPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_fill_remaining.mdx b/docs/widgets/sliver_fill_remaining.mdx
index 968716b09..e0326a78a 100644
--- a/docs/widgets/sliver_fill_remaining.mdx
+++ b/docs/widgets/sliver_fill_remaining.mdx
@@ -3,6 +3,20 @@ title: "SliverFillRemaining"
 description: "Documentation for SliverFillRemaining"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverFillRemainingPreviewJson = {
+  "type": "sliverFillRemaining",
+  "hasScrollBody": false,
+  "child": {
+    "type": "center",
+    "child": {
+      "type": "text",
+      "data": "This content fills the remaining space"
+    }
+  }
+};
+export const sliverFillRemainingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverFillRemaining allows you to build a Flutter `SliverFillRemaining`
 widget using JSON.
 
@@ -28,8 +42,10 @@ To learn more about the SliverFillRemaining widget in Flutter, refer to the
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 const StacSliverFillRemaining(
   hasScrollBody: false,
   child: StacCenter(
@@ -38,7 +54,10 @@ const StacSliverFillRemaining(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverFillRemaining",
   "hasScrollBody": false,
@@ -51,4 +70,36 @@ const StacSliverFillRemaining(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverFillRemainingPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverFillRemainingPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_grid.mdx b/docs/widgets/sliver_grid.mdx
index 0dff62981..536c95c6d 100644
--- a/docs/widgets/sliver_grid.mdx
+++ b/docs/widgets/sliver_grid.mdx
@@ -3,6 +3,78 @@ title: "SliverGrid"
 description: "Documentation for SliverGrid"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverGridPreviewJson = {
+  "type": "sliverGrid",
+  "crossAxisCount": 2,
+  "mainAxisSpacing": 16,
+  "crossAxisSpacing": 16,
+  "childAspectRatio": 1,
+  "children": [
+    {
+      "type": "container",
+      "color": "#4CAF50",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Grid Item 1",
+          "style": {
+            "color": "#FFFFFF",
+            "fontWeight": "bold"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#4CAF50",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Grid Item 2",
+          "style": {
+            "color": "#FFFFFF",
+            "fontWeight": "bold"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#4CAF50",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Grid Item 3",
+          "style": {
+            "color": "#FFFFFF",
+            "fontWeight": "bold"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#4CAF50",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "Grid Item 4",
+          "style": {
+            "color": "#FFFFFF",
+            "fontWeight": "bold"
+          }
+        }
+      }
+    }
+  ]
+};
+export const sliverGridPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac **SliverGrid** allows you to build a Flutter `SliverGrid` widget using JSON.
 It displays its children in a two-dimensional scrollable grid within a sliver
 context.
@@ -10,7 +82,6 @@ context.
 To learn more about Flutter’s `SliverGrid`, refer to the
 [official documentation](https://api.flutter.dev/flutter/widgets/SliverGrid-class.html).
 
-
 ## Properties
 
 | Property               | Type                          | Description                                                                 |
@@ -33,8 +104,10 @@ To learn more about Flutter’s `SliverGrid`, refer to the
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 const StacSliverGrid(
   crossAxisCount: 2,
   mainAxisSpacing: 16,
@@ -93,7 +166,10 @@ const StacSliverGrid(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverGrid",
   "crossAxisCount": 2,
@@ -164,4 +240,36 @@ const StacSliverGrid(
   ]
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverGridPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverGridPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_list.mdx b/docs/widgets/sliver_list.mdx
index 3fd31859b..d87f4810a 100644
--- a/docs/widgets/sliver_list.mdx
+++ b/docs/widgets/sliver_list.mdx
@@ -3,6 +3,58 @@ title: "SliverList"
 description: "Documentation for SliverList"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverListPreviewJson = {
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverList",
+        "children": [
+          {
+            "type": "container",
+            "height": 80,
+            "color": "primary",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "List Item 1"
+              }
+            }
+          },
+          {
+            "type": "container",
+            "height": 80,
+            "color": "secondary",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "List Item 2"
+              }
+            }
+          },
+          {
+            "type": "container",
+            "height": 80,
+            "color": "success",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "List Item 3"
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+};
+export const sliverListPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverList allows you to build a Flutter sliver list widget using JSON.
 It displays its children in a linear, scrollable list within a sliver context.
 
@@ -28,8 +80,10 @@ To learn more about the SliverList widget in Flutter, refer to the
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 const StacSliverList(
   children: [
     StacContainer(
@@ -57,7 +111,10 @@ const StacSliverList(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "scaffold",
   "body": {
@@ -108,4 +165,36 @@ const StacSliverList(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverListPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverListPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_opacity.mdx b/docs/widgets/sliver_opacity.mdx
index a53135c9c..7d89d38b1 100644
--- a/docs/widgets/sliver_opacity.mdx
+++ b/docs/widgets/sliver_opacity.mdx
@@ -3,6 +3,28 @@ title: "SliverOpacity"
 description: "Documentation for SliverOpacity"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverOpacityPreviewJson = {
+  "type": "sliverOpacity",
+  "opacity": 0.5,
+  "sliver": {
+    "type": "sliverToBoxAdapter",
+    "child": {
+      "type": "container",
+      "height": 200,
+      "color": "red",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "I am a faded sliver"
+        }
+      }
+    }
+  }
+};
+export const sliverOpacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverOpacity allows you to apply opacity to an entire sliver inside a `CustomScrollView`.
 
 It is useful for creating fade effects on scrollable content.
@@ -20,8 +42,10 @@ To know more about the SliverOpacity widget in Flutter, refer to the
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSliverOpacity(
   opacity: 0.5,
   sliver: StacSliverToBoxAdapter(
@@ -36,7 +60,10 @@ StacSliverOpacity(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverOpacity",
   "opacity": 0.5,
@@ -57,4 +84,36 @@ StacSliverOpacity(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverOpacityPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverOpacityPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_padding.mdx b/docs/widgets/sliver_padding.mdx
index c070b331a..448c3e78c 100644
--- a/docs/widgets/sliver_padding.mdx
+++ b/docs/widgets/sliver_padding.mdx
@@ -3,6 +3,32 @@ title: "SliverPadding"
 description: "Documentation for SliverPadding"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverPaddingPreviewJson = {
+  "type": "sliverPadding",
+  "padding": 16,
+  "sliver": {
+    "type": "sliverToBoxAdapter",
+    "child": {
+      "type": "container",
+      "height": 150,
+      "color": "#4CAF50",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "I am a Box inside a SliverPadding!",
+          "style": {
+            "color": "#FFFFFF",
+            "fontWeight": "bold"
+          }
+        }
+      }
+    }
+  }
+};
+export const sliverPaddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverPadding allows you to inset a sliver widget by a given padding using JSON. It is typically used inside a `CustomScrollView`.
 To know more about the sliver padding widget in Flutter, refer to
 the [official documentation](https://api.flutter.dev/flutter/widgets/SliverPadding-class.html).
@@ -16,8 +42,10 @@ the [official documentation](https://api.flutter.dev/flutter/widgets/SliverPaddi
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSliverPadding(
   padding: StacEdgeInsets.all(16.0),
   sliver: StacSliverToBoxAdapter(
@@ -35,10 +63,13 @@ StacSliverPadding(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverPadding",
-  "padding": 16.0,
+  "padding": 16,
   "sliver": {
     "type": "sliverToBoxAdapter",
     "child": {
@@ -60,4 +91,36 @@ StacSliverPadding(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverPaddingPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverPaddingPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_safe_area.mdx b/docs/widgets/sliver_safe_area.mdx
index b6e1d0bb6..c0ee5706a 100644
--- a/docs/widgets/sliver_safe_area.mdx
+++ b/docs/widgets/sliver_safe_area.mdx
@@ -3,6 +3,20 @@ title: "SliverSafeArea"
 description: "Documentation for SliverSafeArea"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverSafeAreaPreviewJson = {
+  "type": "sliverSafeArea",
+  "top": true,
+  "sliver": {
+    "type": "sliverToBoxAdapter",
+    "child": {
+      "type": "text",
+      "data": "Hello World"
+    }
+  }
+};
+export const sliverSafeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverSafeArea allows you to build a Flutter sliver safe area widget using JSON.  
 To know more about the safe area widget in Flutter, refer to  
 the [official documentation](https://api.flutter.dev/flutter/widgets/SliverSafeArea-class.html).
@@ -20,8 +34,10 @@ the [official documentation](https://api.flutter.dev/flutter/widgets/SliverSafeA
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSliverSafeArea(
   top: true,
   sliver: StacSliverToBoxAdapter(
@@ -30,7 +46,10 @@ StacSliverSafeArea(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverSafeArea",
   "top": true,
@@ -43,4 +62,36 @@ StacSliverSafeArea(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverSafeAreaPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverSafeAreaPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_to_box_adapter.mdx b/docs/widgets/sliver_to_box_adapter.mdx
index 43f5c9d37..df52a4d36 100644
--- a/docs/widgets/sliver_to_box_adapter.mdx
+++ b/docs/widgets/sliver_to_box_adapter.mdx
@@ -3,6 +3,32 @@ title: "SliverToBoxAdapter"
 description: "A sliver that contains a single box widget."
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverToBoxAdapterPreviewJson = {
+  "type": "sliverPadding",
+  "padding": 16,
+  "sliver": {
+    "type": "sliverToBoxAdapter",
+    "child": {
+      "type": "container",
+      "height": 150,
+      "color": "#4CAF50",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "I am a Box inside a SliverToBoxAdapter!",
+          "style": {
+            "color": "#FFFFFF",
+            "fontWeight": "bold"
+          }
+        }
+      }
+    }
+  }
+};
+export const sliverToBoxAdapterPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverToBoxAdapter allows you to build a Flutter sliver-to-box-adapter widget using JSON. It creates a sliver that contains a single box widget.
 To know more about the sliver-to-box-adapter widget in Flutter, refer to
 the [official documentation](https://api.flutter.dev/flutter/widgets/SliverToBoxAdapter-class.html).
@@ -15,8 +41,10 @@ the [official documentation](https://api.flutter.dev/flutter/widgets/SliverToBox
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSliverPadding(
   padding: StacEdgeInsets.all(16),
   sliver: StacSliverToBoxAdapter(
@@ -34,7 +62,10 @@ StacSliverPadding(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverPadding",
   "padding": 16,
@@ -59,4 +90,36 @@ StacSliverPadding(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverToBoxAdapterPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverToBoxAdapterPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/sliver_visibility.mdx b/docs/widgets/sliver_visibility.mdx
index 3b95bca2a..7eb6a04c4 100644
--- a/docs/widgets/sliver_visibility.mdx
+++ b/docs/widgets/sliver_visibility.mdx
@@ -3,6 +3,28 @@ title: "SliverVisibility"
 description: "Documentation for SliverVisibility"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const sliverVisibilityPreviewJson = {
+  "type": "sliverVisibility",
+  "visible": false,
+  "sliver": {
+    "type": "sliverToBoxAdapter",
+    "child": {
+      "type": "container",
+      "height": 180,
+      "color": "warning",
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "This sliver is hidden"
+        }
+      }
+    }
+  }
+};
+export const sliverVisibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac SliverVisibility allows you to conditionally show or hide a sliver
 inside a `CustomScrollView`.
 
@@ -27,8 +49,10 @@ the [official documentation](https://api.flutter.dev/flutter/widgets/SliverVisib
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSliverVisibility(
   visible: false,
   sliver: StacSliverToBoxAdapter(
@@ -43,7 +67,10 @@ StacSliverVisibility(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "sliverVisibility",
   "visible": false,
@@ -64,4 +91,36 @@ StacSliverVisibility(
   }
 }
 ```
-</CodeGroup>
\ No newline at end of file
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={sliverVisibilityPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: sliverVisibilityPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/spacer.mdx b/docs/widgets/spacer.mdx
index 87c6cf0e5..167e9bf49 100644
--- a/docs/widgets/spacer.mdx
+++ b/docs/widgets/spacer.mdx
@@ -3,6 +3,13 @@ title: "Spacer"
 description: "Documentation for Spacer"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const spacerPreviewJson = {
+  "type": "spacer",
+  "flex": 2
+};
+export const spacerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Spacer allows you to build a Flutter spacer widget using JSON.
 To know more about the spacer widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Spacer-class.html).
 
@@ -14,15 +21,52 @@ To know more about the spacer widget in Flutter, refer to the [official document
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSpacer(flex: 2)
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "spacer",
   "flex": 2
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={spacerPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: spacerPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/stack.mdx b/docs/widgets/stack.mdx
index 30854fcb5..d9633e16b 100644
--- a/docs/widgets/stack.mdx
+++ b/docs/widgets/stack.mdx
@@ -3,6 +3,28 @@ title: "Stack"
 description: "Documentation for Stack"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const stackPreviewJson = {
+  "type": "stack",
+  "alignment": "center",
+  "clipBehavior": "antiAlias",
+  "fit": "expand",
+  "textDirection": "ltr",
+  "children": [
+    {
+      "type": "text",
+      "data": "Hello, World!"
+    },
+    {
+      "type": "container",
+      "width": 100,
+      "height": 100,
+      "color": "#FF0000"
+    }
+  ]
+};
+export const stackPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Stack allows you to build a Flutter stack widget using JSON.
 To know more about the stack widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Stack-class.html).
 
@@ -18,8 +40,10 @@ To know more about the stack widget in Flutter, refer to the [official documenta
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacStack(
   alignment: StacAlignment.center,
   clipBehavior: StacClip.antiAlias,
@@ -32,7 +56,10 @@ StacStack(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "stack",
   "alignment": "center",
@@ -53,4 +80,36 @@ StacStack(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={stackPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: stackPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/switch.mdx b/docs/widgets/switch.mdx
index 62a7c139a..9ffe6b70c 100644
--- a/docs/widgets/switch.mdx
+++ b/docs/widgets/switch.mdx
@@ -3,6 +3,14 @@ title: "Switch"
 description: "Documentation for Switch"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const switchPreviewJson = {
+  "type": "switch",
+  "switchType": "cupertino",
+  "value": true
+};
+export const switchPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac `Switch` widget allows you to build the Flutter Switch widget using JSON.
 To know more about the Switch widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Switch-class.html).
 
@@ -39,23 +47,59 @@ To know more about the Switch widget in Flutter, refer to the [official document
 
 ### Example 1: Cupertino Switch
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacSwitch(
   switchType: StacSwitchType.cupertino,
   value: true,
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "switch",
   "switchType": "cupertino",
   "value": true
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={switchPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: switchPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ### Example 2: Adaptive Switch
 
 <CodeGroup>
diff --git a/docs/widgets/tab_bar.mdx b/docs/widgets/tab_bar.mdx
index 41840f966..ed2a18619 100644
--- a/docs/widgets/tab_bar.mdx
+++ b/docs/widgets/tab_bar.mdx
@@ -3,6 +3,57 @@ title: "TabBar"
 description: "Documentation for TabBar"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const tabBarPreviewJson = {
+  "type": "defaultTabController",
+  "length": 3,
+  "child": {
+    "type": "scaffold",
+    "appBar": {
+      "type": "appBar",
+      "title": {
+        "type": "text",
+        "data": "Tabbar"
+      },
+      "bottom": {
+        "type": "tabBar",
+        "tabs": [
+          {
+            "type": "tab",
+            "text": "Red"
+          },
+          {
+            "type": "tab",
+            "text": "Red"
+          },
+          {
+            "type": "tab",
+            "text": "Red"
+          }
+        ]
+      }
+    },
+    "body": {
+      "type": "tabBarView",
+      "children": [
+        {
+          "type": "container",
+          "color": "#D9D9D9"
+        },
+        {
+          "type": "container",
+          "color": "#FC3F1B"
+        },
+        {
+          "type": "container",
+          "color": "#D9D9D9"
+        }
+      ]
+    }
+  }
+};
+export const tabBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac TabBar allows you to build a Flutter TabBar widget using JSON.
 To know more about the TabBar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TabBar-class.html).
 
@@ -58,7 +109,6 @@ To know more about the Tab widget in Flutter, refer to the [official documentati
 | height      | `double`                | The height of the tab.                           |
 | child       | `StacWidget`            | The widget below this widget in the tree.        |
 
-
 ## TabBarView
 
 The Stac TabBarView allows you to build a Flutter TabBarView widget using JSON.
@@ -77,8 +127,10 @@ To know more about the TabBarView widget in Flutter, refer to the [official docu
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacDefaultTabController(
   length: 3,
   child: StacScaffold(
@@ -103,7 +155,10 @@ StacDefaultTabController(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "defaultTabController",
   "length": 3,
@@ -153,5 +208,36 @@ StacDefaultTabController(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={tabBarPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: tabBarPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/table.mdx b/docs/widgets/table.mdx
index 10129a665..e578dea33 100644
--- a/docs/widgets/table.mdx
+++ b/docs/widgets/table.mdx
@@ -3,6 +3,134 @@ title: "Table"
 description: "Documentation for Table"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const tablePreviewJson = {
+  "type": "table",
+  "columnWidths": {
+    "1": {
+      "type": "fixedColumnWidth",
+      "value": 200
+    }
+  },
+  "defaultColumnWidth": {
+    "type": "flexColumnWidth",
+    "value": 1
+  },
+  "textDirection": "ltr",
+  "defaultVerticalAlignment": "bottom",
+  "border": {
+    "color": "#428AF5",
+    "width": 1,
+    "style": "solid",
+    "borderRadius": {
+      "topLeft": 16,
+      "topRight": 16,
+      "bottomLeft": 16,
+      "bottomRight": 16
+    }
+  },
+  "children": [
+    {
+      "type": "tableRow",
+      "children": [
+        {
+          "type": "tableCell",
+          "child": {
+            "type": "container",
+            "color": "#40000000",
+            "height": 50,
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Header 1"
+              }
+            }
+          }
+        },
+        {
+          "type": "tableCell",
+          "child": {
+            "type": "container",
+            "color": "#40000000",
+            "height": 50,
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Header 2"
+              }
+            }
+          }
+        },
+        {
+          "type": "tableCell",
+          "child": {
+            "type": "container",
+            "color": "#40000000",
+            "height": 50,
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Header 3"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "type": "tableRow",
+      "children": [
+        {
+          "type": "tableCell",
+          "child": {
+            "type": "sizedBox",
+            "height": 50,
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Row 1, Cell 1"
+              }
+            }
+          }
+        },
+        {
+          "type": "tableCell",
+          "child": {
+            "type": "sizedBox",
+            "height": 50,
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Row 1, Cell 2"
+              }
+            }
+          }
+        },
+        {
+          "type": "tableCell",
+          "child": {
+            "type": "sizedBox",
+            "height": 50,
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Row 1, Cell 3"
+              }
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+export const tablePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 StacTable allows you to build the Flutter Table widget using JSON.
 To know more about the Table widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Table-class.html).
 
@@ -20,8 +148,10 @@ To know more about the Table widget in Flutter, refer to the [official documenta
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTable(
   columnWidths: {
     1: StacFixedColumnWidth(value: 200),
@@ -87,7 +217,10 @@ StacTable(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "table",
   "columnWidths": {
@@ -104,13 +237,13 @@ StacTable(
   "defaultVerticalAlignment": "bottom",
   "border": {
     "color": "#428AF5",
-    "width": 1.0,
+    "width": 1,
     "style": "solid",
     "borderRadius": {
-      "topLeft": 16.0,
-      "topRight": 16.0,
-      "bottomLeft": 16.0,
-      "bottomRight": 16.0
+      "topLeft": 16,
+      "topRight": 16,
+      "bottomLeft": 16,
+      "bottomRight": 16
     }
   },
   "children": [
@@ -122,7 +255,7 @@ StacTable(
           "child": {
             "type": "container",
             "color": "#40000000",
-            "height": 50.0,
+            "height": 50,
             "child": {
               "type": "center",
               "child": {
@@ -137,7 +270,7 @@ StacTable(
           "child": {
             "type": "container",
             "color": "#40000000",
-            "height": 50.0,
+            "height": 50,
             "child": {
               "type": "center",
               "child": {
@@ -152,7 +285,7 @@ StacTable(
           "child": {
             "type": "container",
             "color": "#40000000",
-            "height": 50.0,
+            "height": 50,
             "child": {
               "type": "center",
               "child": {
@@ -171,7 +304,7 @@ StacTable(
           "type": "tableCell",
           "child": {
             "type": "sizedBox",
-            "height": 50.0,
+            "height": 50,
             "child": {
               "type": "center",
               "child": {
@@ -185,7 +318,7 @@ StacTable(
           "type": "tableCell",
           "child": {
             "type": "sizedBox",
-            "height": 50.0,
+            "height": 50,
             "child": {
               "type": "center",
               "child": {
@@ -199,7 +332,7 @@ StacTable(
           "type": "tableCell",
           "child": {
             "type": "sizedBox",
-            "height": 50.0,
+            "height": 50,
             "child": {
               "type": "center",
               "child": {
@@ -214,4 +347,36 @@ StacTable(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={tablePreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: tablePreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/table_cell.mdx b/docs/widgets/table_cell.mdx
index 44acce7cc..fbd2ec2dc 100644
--- a/docs/widgets/table_cell.mdx
+++ b/docs/widgets/table_cell.mdx
@@ -3,6 +3,25 @@ title: "TableCell"
 description: "Documentation for TableCell"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const tableCellPreviewJson = {
+  "type": "tableCell",
+  "verticalAlignment": "top",
+  "child": {
+    "type": "container",
+    "color": "#40000000",
+    "height": 50,
+    "child": {
+      "type": "center",
+      "child": {
+        "type": "text",
+        "data": "Header 1"
+      }
+    }
+  }
+};
+export const tableCellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 StacTableCell allows you to define the Flutter TableCell widget using JSON.
 To know more about the TableCell widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/TableCell-class.html).
 
@@ -14,8 +33,10 @@ To know more about the TableCell widget in Flutter, refer to the [official docum
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTableCell(
   verticalAlignment: StacTableCellVerticalAlignment.top,
   child: StacContainer(
@@ -28,14 +49,17 @@ StacTableCell(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "tableCell",
   "verticalAlignment": "top",
   "child": {
     "type": "container",
     "color": "#40000000",
-    "height": 50.0,
+    "height": 50,
     "child": {
       "type": "center",
       "child": {
@@ -46,4 +70,36 @@ StacTableCell(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={tableCellPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: tableCellPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/table_row.mdx b/docs/widgets/table_row.mdx
index d6d92c701..6e7af739a 100644
--- a/docs/widgets/table_row.mdx
+++ b/docs/widgets/table_row.mdx
@@ -3,6 +3,59 @@ title: "TableRow"
 description: "Documentation for TableRow"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const tableRowPreviewJson = {
+  "type": "tableRow",
+  "children": [
+    {
+      "type": "tableCell",
+      "child": {
+        "type": "container",
+        "color": "#40000000",
+        "height": 50,
+        "child": {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "Header 1"
+          }
+        }
+      }
+    },
+    {
+      "type": "tableCell",
+      "child": {
+        "type": "container",
+        "color": "#40000000",
+        "height": 50,
+        "child": {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "Header 2"
+          }
+        }
+      }
+    },
+    {
+      "type": "tableCell",
+      "child": {
+        "type": "container",
+        "color": "#40000000",
+        "height": 50,
+        "child": {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "Header 3"
+          }
+        }
+      }
+    }
+  ]
+};
+export const tableRowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 StacTableRow allows you to define the Flutter TableRow widget using JSON.
 To know more about the TableRow widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/TableRow-class.html).
 
@@ -15,8 +68,10 @@ To know more about the TableRow widget in Flutter, refer to the [official docume
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTableRow(
   children: [
     StacTableCell(
@@ -44,7 +99,10 @@ StacTableRow(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "tableRow",
   "children": [
@@ -53,7 +111,7 @@ StacTableRow(
       "child": {
         "type": "container",
         "color": "#40000000",
-        "height": 50.0,
+        "height": 50,
         "child": {
           "type": "center",
           "child": {
@@ -68,7 +126,7 @@ StacTableRow(
       "child": {
         "type": "container",
         "color": "#40000000",
-        "height": 50.0,
+        "height": 50,
         "child": {
           "type": "center",
           "child": {
@@ -83,7 +141,7 @@ StacTableRow(
       "child": {
         "type": "container",
         "color": "#40000000",
-        "height": 50.0,
+        "height": 50,
         "child": {
           "type": "center",
           "child": {
@@ -96,4 +154,36 @@ StacTableRow(
   ]
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={tableRowPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: tableRowPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/text.mdx b/docs/widgets/text.mdx
index c748f215e..479c4370b 100644
--- a/docs/widgets/text.mdx
+++ b/docs/widgets/text.mdx
@@ -3,6 +3,17 @@ title: "Text"
 description: "Documentation for Text"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const textPreviewJson = {
+  "type": "text",
+  "data": "Hello, World!",
+  "style": {
+    "color": "#FFFFFF",
+    "fontSize": 24
+  }
+};
+export const textPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Text allows you to build a Flutter Text widget using JSON.
 To know more about the text widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Text-class.html).
 
@@ -26,8 +37,10 @@ To know more about the text widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacText(
   data: 'Hello, World!',
   style: StacTextStyle(
@@ -37,15 +50,49 @@ StacText(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "text",
   "data": "Hello, World!",
   "style": {
     "color": "#FFFFFF",
-    "fontSize": 24.0
+    "fontSize": 24
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={textPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: textPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/text_button.mdx b/docs/widgets/text_button.mdx
index 18ecaf7b1..e1d50919b 100644
--- a/docs/widgets/text_button.mdx
+++ b/docs/widgets/text_button.mdx
@@ -3,6 +3,26 @@ title: "TextButton"
 description: "Documentation for TextButton"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const textButtonPreviewJson = {
+  "type": "textButton",
+  "onPressed": {},
+  "onLongPress": {},
+  "onHover": {},
+  "onFocusChange": {},
+  "style": {
+    "backgroundColor": "#FFC107",
+    "foregroundColor": "#000000"
+  },
+  "autofocus": false,
+  "clipBehavior": "none",
+  "child": {
+    "type": "text",
+    "data": "Click Me!"
+  }
+};
+export const textButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Text Button allows you to build a Flutter text button widget using JSON.
 To know more about the text button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextButton-class.html).
 
@@ -22,8 +42,10 @@ To know more about the text button widget in Flutter, refer to the [official doc
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTextButton(
   onPressed: StacNoneAction(),
   style: StacButtonStyle(
@@ -36,7 +58,10 @@ StacTextButton(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "textButton",
   "onPressed": {},
@@ -55,4 +80,36 @@ StacTextButton(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={textButtonPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: textButtonPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/text_field.mdx b/docs/widgets/text_field.mdx
index 62dc98b71..7f9ad12c0 100644
--- a/docs/widgets/text_field.mdx
+++ b/docs/widgets/text_field.mdx
@@ -3,6 +3,23 @@ title: "TextField"
 description: "Documentation for TextField"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const textFieldPreviewJson = {
+  "type": "textField",
+  "initialValue": "Enter text here",
+  "decoration": {
+    "hintText": "Enter your name"
+  },
+  "style": {
+    "color": "#000000",
+    "fontSize": 16
+  },
+  "textAlign": "center",
+  "obscureText": false,
+  "maxLength": 50
+};
+export const textFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac TextField allows you to build a Flutter text field widget using JSON. To know more about the text field widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextField-class.html).
 
 ## Properties
@@ -37,8 +54,10 @@ The Stac TextField allows you to build a Flutter text field widget using JSON. T
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTextField(
   initialValue: 'Enter text here',
   decoration: StacInputDecoration(hintText: 'Enter your name'),
@@ -49,7 +68,10 @@ StacTextField(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "textField",
   "initialValue": "Enter text here",
@@ -58,11 +80,43 @@ StacTextField(
   },
   "style": {
     "color": "#000000",
-    "fontSize": 16.0
+    "fontSize": 16
   },
   "textAlign": "center",
   "obscureText": false,
   "maxLength": 50
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={textFieldPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: textFieldPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/text_form_field.mdx b/docs/widgets/text_form_field.mdx
index 4b93395f2..1bba0b710 100644
--- a/docs/widgets/text_form_field.mdx
+++ b/docs/widgets/text_form_field.mdx
@@ -3,6 +3,35 @@ title: "TextFormField"
 description: "Documentation for TextFormField"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const textFormFieldPreviewJson = {
+  "type": "textFormField",
+  "id": "email",
+  "autovalidateMode": "onUserInteraction",
+  "validatorRules": [
+    {
+      "rule": "isEmail",
+      "message": "Please enter a valid email"
+    }
+  ],
+  "style": {
+    "fontSize": 16,
+    "fontWeight": "w400",
+    "height": 1.5
+  },
+  "decoration": {
+    "hintText": "Email",
+    "filled": true,
+    "fillColor": "#FFFFFF",
+    "border": {
+      "type": "outlineInputBorder",
+      "borderRadius": 8,
+      "color": "#24151D29"
+    }
+  }
+};
+export const textFormFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac TextFormField allows you to build a Flutter TextFormField widget using JSON.
 To know more about the TextFormField widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextFormField-class.html).
 
@@ -50,8 +79,10 @@ To know more about the TextFormField widget in Flutter, refer to the [official d
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTextFormField(
   id: 'email',
   autovalidateMode: StacAutovalidateMode.onUserInteraction,
@@ -68,7 +99,10 @@ StacTextFormField(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "textFormField",
   "id": "email",
@@ -96,4 +130,36 @@ StacTextFormField(
   }
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={textFormFieldPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: textFormFieldPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/tool_tip.mdx b/docs/widgets/tool_tip.mdx
index 8ecd9273d..ee2d16c34 100644
--- a/docs/widgets/tool_tip.mdx
+++ b/docs/widgets/tool_tip.mdx
@@ -3,6 +3,18 @@ title: "Tooltip"
 description: "Documentation for Tooltip"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const toolTipPreviewJson = {
+  "type": "tooltip",
+  "message": "This is a basic tooltip",
+  "child": {
+    "type": "icon",
+    "icon": "info",
+    "size": 32
+  }
+};
+export const toolTipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The **Stac Tooltip** allows you to build a Flutter `Tooltip` widget using JSON. 
 To learn more about Flutter’s Tooltip widget, refer to the [official Flutter documentation](https://api.flutter.dev/flutter/material/Tooltip-class.html).
 
@@ -37,15 +49,20 @@ To learn more about Flutter’s Tooltip widget, refer to the [official Flutter d
 
 #### Basic Tooltip
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacTooltip(
   message: 'This is a basic tooltip',
   child: StacIcon(icon: 'info', size: 32),
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "tooltip",
   "message": "This is a basic tooltip",
@@ -56,8 +73,39 @@ StacTooltip(
   }
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={toolTipPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: toolTipPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 #### Styled Tooltip
 
 <CodeGroup>
@@ -219,4 +267,3 @@ StacTooltip(
 ```
 </CodeGroup>
 
-
diff --git a/docs/widgets/vertical_divider.mdx b/docs/widgets/vertical_divider.mdx
index 46d6cd894..f3e198c44 100644
--- a/docs/widgets/vertical_divider.mdx
+++ b/docs/widgets/vertical_divider.mdx
@@ -3,6 +3,17 @@ title: "Vertical Divider"
 description: "Documentation for Vertical Divider"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const verticalDividerPreviewJson = {
+  "type": "verticalDivider",
+  "width": 20,
+  "thickness": 4,
+  "indent": 10,
+  "endIndent": 10,
+  "color": "#21814C"
+};
+export const verticalDividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Vertical Divider allows you to build a Flutter vertical divider widget using JSON.
 To know more about the vertical divider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/VerticalDivider-class.html).
 
@@ -18,8 +29,10 @@ To know more about the vertical divider widget in Flutter, refer to the [officia
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacVerticalDivider(
   width: 20,
   thickness: 4,
@@ -29,7 +42,10 @@ StacVerticalDivider(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "verticalDivider",
   "width": 20,
@@ -39,5 +55,36 @@ StacVerticalDivider(
   "color": "#21814C"
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={verticalDividerPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: verticalDividerPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
diff --git a/docs/widgets/visibility.mdx b/docs/widgets/visibility.mdx
index 6ac09048b..c8d1d3fc9 100644
--- a/docs/widgets/visibility.mdx
+++ b/docs/widgets/visibility.mdx
@@ -3,6 +3,17 @@ title: "Visibility"
 description: "Documentation for Visibility"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const visibilityPreviewJson = {
+  "type": "visibility",
+  "child": {
+    "type": "text",
+    "data": "I am visible!"
+  },
+  "visible": true
+};
+export const visibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 Stac Visibility allows you to build the Flutter Visibility widget using JSON.
 To know more about the Visibility widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Visibility-class.html).
 
@@ -27,15 +38,20 @@ To know more about the Visibility widget in Flutter, refer to the [official docu
 
 ### Example 1: Basic Visibility
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacVisibility(
   child: StacText(data: 'I am visible!'),
   visible: true,
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "visibility",
   "child": {
@@ -45,8 +61,39 @@ StacVisibility(
   "visible": true
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={visibilityPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: visibilityPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 ### Example 2: Hidden with Replacement
 
 <CodeGroup>
diff --git a/docs/widgets/webview.mdx b/docs/widgets/webview.mdx
index 508a6dda8..65899d07f 100644
--- a/docs/widgets/webview.mdx
+++ b/docs/widgets/webview.mdx
@@ -3,6 +3,13 @@ title: "WebView"
 description: "Documentation for WebView"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const webviewPreviewJson = {
+  "type": "webView",
+  "url": "https://github.com/StacDev/stac"
+};
+export const webviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac WebView allows you to display WebView widget using JSON in your app. It is based on the [webview_flutter](https://pub.dev/packages/webview_flutter) plugin.
 
 ## Usage
@@ -48,17 +55,54 @@ void main() async {
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacWebView(
   url: 'https://github.com/StacDev/stac',
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "webView",
   "url": "https://github.com/StacDev/stac"
 }
 ```
-</CodeGroup>
+
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={webviewPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: webviewPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
+
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
\ No newline at end of file
diff --git a/docs/widgets/wrap.mdx b/docs/widgets/wrap.mdx
index 171551441..d3f016cfa 100644
--- a/docs/widgets/wrap.mdx
+++ b/docs/widgets/wrap.mdx
@@ -3,6 +3,80 @@ title: "Wrap"
 description: "Documentation for Wrap"
 ---
 
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+export const wrapPreviewJson = {
+  "type": "wrap",
+  "spacing": 8,
+  "runSpacing": 4,
+  "children": [
+    {
+      "type": "container",
+      "color": "#FFF44336",
+      "width": 100,
+      "height": 100,
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "1",
+          "style": {
+            "color": "#FFFFFFFF"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#FFE91E63",
+      "width": 100,
+      "height": 100,
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "2",
+          "style": {
+            "color": "#FFFFFFFF"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#FF9C27B0",
+      "width": 100,
+      "height": 100,
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "3",
+          "style": {
+            "color": "#FFFFFFFF"
+          }
+        }
+      }
+    },
+    {
+      "type": "container",
+      "color": "#FF673AB7",
+      "width": 100,
+      "height": 100,
+      "child": {
+        "type": "center",
+        "child": {
+          "type": "text",
+          "data": "4",
+          "style": {
+            "color": "#FFFFFFFF"
+          }
+        }
+      }
+    }
+  ]
+};
+export const wrapPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+
 The Stac Wrap allows you to build a Flutter Wrap widget using JSON.
 To know more about the wrap widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Wrap-class.html).
 
@@ -23,8 +97,10 @@ To know more about the wrap widget in Flutter, refer to the [official documentat
 
 ## Example
 
-<CodeGroup>
-```dart Dart
+<Tabs sync={false}>
+  <Tab title="Dart">
+
+```dart
 StacWrap(
   spacing: 8.0,
   runSpacing: 4.0,
@@ -57,11 +133,14 @@ StacWrap(
 )
 ```
 
-```json JSON
+  </Tab>
+  <Tab title="JSON">
+
+```json
 {
   "type": "wrap",
-  "spacing": 8.0,
-  "runSpacing": 4.0,
+  "spacing": 8,
+  "runSpacing": 4,
   "children": [
     {
       "type": "container",
@@ -130,7 +209,37 @@ StacWrap(
   ]
 }
 ```
-</CodeGroup>
 
+  </Tab>
+  <Tab title="Preview">
+    <Frame>
+      <iframe
+        id="stac"
+        src={wrapPreviewSrc}
+        title="Stac Playground"
+        className="w-full h-[640px] rounded-xl border-0"
+        loading="lazy"
+        onLoad={(event) => {
+          const iframe = event.currentTarget;
+          const targetOrigin = PLAYGROUND_BASE_URL;
+          const message = {
+            type: "stac-preview-json",
+            payload: wrapPreviewJson
+          };
+
+          let attempts = 0;
+          const maxAttempts = 12;
+          const interval = setInterval(() => {
+            iframe.contentWindow?.postMessage(message, targetOrigin);
+            attempts += 1;
 
+            if (attempts >= maxAttempts) {
+              clearInterval(interval);
+            }
+          }, 250);
+        }}
+      />
+    </Frame>
+  </Tab>
+</Tabs>
 

From 88511a02bffa8fb4cae42245160f610bafac29f2 Mon Sep 17 00:00:00 2001
From: Mithul Nayagam <mitthulnayagam@gmail.com>
Date: Sat, 18 Apr 2026 19:20:51 +0530
Subject: [PATCH 2/6] docs: update widget documentation with better examples
 for some widgets

- Refactored widget documentation to include structured JSON representations and playground examples for DropdownMenu, Positioned, RefreshIndicator, SliverAppBar, SliverFillRemaining, SliverGrid, SliverOpacity, SliverPadding, SliverSafeArea, and SliverVisibility.
- Enhanced clarity and usability of widget examples for better developer experience.
---
 docs/widgets/dropdown_menu.mdx         |  12 +--
 docs/widgets/positioned.mdx            |  23 +++--
 docs/widgets/refresh_indicator.mdx     |  74 +++++++++++++
 docs/widgets/sliver_app_bar.mdx        |  60 ++++++-----
 docs/widgets/sliver_fill_remaining.mdx |  24 +++--
 docs/widgets/sliver_grid.mdx           | 138 +++++++++++++------------
 docs/widgets/sliver_opacity.mdx        |  36 ++++---
 docs/widgets/sliver_padding.mdx        |  42 +++++---
 docs/widgets/sliver_safe_area.mdx      |  24 +++--
 docs/widgets/sliver_visibility.mdx     |  36 ++++---
 10 files changed, 302 insertions(+), 167 deletions(-)

diff --git a/docs/widgets/dropdown_menu.mdx b/docs/widgets/dropdown_menu.mdx
index 7fec9dac5..d94a7c6b6 100644
--- a/docs/widgets/dropdown_menu.mdx
+++ b/docs/widgets/dropdown_menu.mdx
@@ -18,7 +18,7 @@ export const dropdownMenuPreviewJson = {
       "label": "Option 1",
       "leadingIcon": {
         "type": "icon",
-        "iconData": "home"
+        "icon": "home"
       }
     },
     {
@@ -26,7 +26,7 @@ export const dropdownMenuPreviewJson = {
       "label": "Option 2",
       "leadingIcon": {
         "type": "icon",
-        "iconData": "settings"
+        "icon": "settings"
       }
     },
     {
@@ -34,7 +34,7 @@ export const dropdownMenuPreviewJson = {
       "label": "Option 3",
       "leadingIcon": {
         "type": "icon",
-        "iconData": "favorite"
+        "icon": "favorite"
       }
     }
   ]
@@ -130,7 +130,7 @@ StacDropdownMenu(
       "label": "Option 1",
       "leadingIcon": {
         "type": "icon",
-        "iconData": "home"
+        "icon": "home"
       }
     },
     {
@@ -138,7 +138,7 @@ StacDropdownMenu(
       "label": "Option 2",
       "leadingIcon": {
         "type": "icon",
-        "iconData": "settings"
+        "icon": "settings"
       }
     },
     {
@@ -146,7 +146,7 @@ StacDropdownMenu(
       "label": "Option 3",
       "leadingIcon": {
         "type": "icon",
-        "iconData": "favorite"
+        "icon": "favorite"
       }
     }
   ]
diff --git a/docs/widgets/positioned.mdx b/docs/widgets/positioned.mdx
index 368307c72..2e2b826f8 100644
--- a/docs/widgets/positioned.mdx
+++ b/docs/widgets/positioned.mdx
@@ -5,15 +5,20 @@ description: "Documentation for Positioned"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const positionedPreviewJson = {
-  "type": "positioned",
-  "left": 10,
-  "top": 20,
-  "right": 30,
-  "bottom": 40,
-  "child": {
-    "type": "text",
-    "data": "Hello, World!"
-  }
+  "type": "stack",
+  "children": [
+    {
+      "type": "positioned",
+      "left": 10,
+      "top": 20,
+      "right": 30,
+      "bottom": 40,
+      "child": {
+        "type": "text",
+        "data": "Hello, World!"
+      }
+    }
+  ]
 };
 export const positionedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
 
diff --git a/docs/widgets/refresh_indicator.mdx b/docs/widgets/refresh_indicator.mdx
index 9ca2dfec3..8ced9689c 100644
--- a/docs/widgets/refresh_indicator.mdx
+++ b/docs/widgets/refresh_indicator.mdx
@@ -11,6 +11,39 @@ export const refreshIndicatorPreviewJson = {
     "url": "https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json",
     "method": "get",
     "contentType": "application/json"
+  },
+  "child": {
+    "type": "listView",
+    "children": [
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Pull down to refresh"
+        }
+      },
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Item 1"
+        }
+      },
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Item 2"
+        }
+      },
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Item 3"
+        }
+      }
+    ]
   }
 };
 export const refreshIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
@@ -45,6 +78,14 @@ StacRefreshIndicator(
     method: Method.get,
     contentType: 'application/json',
   ),
+  child: StacListView(
+    children: [
+      StacListTile(title: StacText(data: 'Pull down to refresh')),
+      StacListTile(title: StacText(data: 'Item 1')),
+      StacListTile(title: StacText(data: 'Item 2')),
+      StacListTile(title: StacText(data: 'Item 3')),
+    ],
+  ),
 )
 ```
 
@@ -59,6 +100,39 @@ StacRefreshIndicator(
     "url": "https://raw.githubusercontent.com/StacDev/stac/main/examples/stac_gallery/assets/json/list_view_example.json",
     "method": "get",
     "contentType": "application/json"
+  },
+  "child": {
+    "type": "listView",
+    "children": [
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Pull down to refresh"
+        }
+      },
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Item 1"
+        }
+      },
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Item 2"
+        }
+      },
+      {
+        "type": "listTile",
+        "title": {
+          "type": "text",
+          "data": "Item 3"
+        }
+      }
+    ]
   }
 }
 ```
diff --git a/docs/widgets/sliver_app_bar.mdx b/docs/widgets/sliver_app_bar.mdx
index ce032d05d..a0c039b8a 100644
--- a/docs/widgets/sliver_app_bar.mdx
+++ b/docs/widgets/sliver_app_bar.mdx
@@ -5,32 +5,40 @@ description: "Documentation for SliverAppBar"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverAppBarPreviewJson = {
-  "type": "sliverAppBar",
-  "title": {
-    "type": "text",
-    "data": "SliverAppBar"
-  },
-  "leading": {
-    "type": "iconButton",
-    "icon": {
-      "type": "icon",
-      "iconType": "material",
-      "icon": "menu"
-    },
-    "onPressed": {}
-  },
-  "backgroundColor": "primary",
-  "actions": [
-    {
-      "type": "iconButton",
-      "icon": {
-        "type": "icon",
-        "iconType": "cupertino",
-        "icon": "heart_solid"
-      },
-      "onPressed": {}
-    }
-  ]
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverAppBar",
+        "title": {
+          "type": "text",
+          "data": "SliverAppBar"
+        },
+        "leading": {
+          "type": "iconButton",
+          "icon": {
+            "type": "icon",
+            "iconType": "material",
+            "icon": "menu"
+          },
+          "onPressed": {}
+        },
+        "backgroundColor": "primary",
+        "actions": [
+          {
+            "type": "iconButton",
+            "icon": {
+              "type": "icon",
+              "iconType": "cupertino",
+              "icon": "heart_solid"
+            },
+            "onPressed": {}
+          }
+        ]
+      }
+    ]
+  }
 };
 export const sliverAppBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
 
diff --git a/docs/widgets/sliver_fill_remaining.mdx b/docs/widgets/sliver_fill_remaining.mdx
index e0326a78a..1c40e72dc 100644
--- a/docs/widgets/sliver_fill_remaining.mdx
+++ b/docs/widgets/sliver_fill_remaining.mdx
@@ -5,14 +5,22 @@ description: "Documentation for SliverFillRemaining"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverFillRemainingPreviewJson = {
-  "type": "sliverFillRemaining",
-  "hasScrollBody": false,
-  "child": {
-    "type": "center",
-    "child": {
-      "type": "text",
-      "data": "This content fills the remaining space"
-    }
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverFillRemaining",
+        "hasScrollBody": false,
+        "child": {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "This content fills the remaining space"
+          }
+        }
+      }
+    ]
   }
 };
 export const sliverFillRemainingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
diff --git a/docs/widgets/sliver_grid.mdx b/docs/widgets/sliver_grid.mdx
index 536c95c6d..8c4670dc7 100644
--- a/docs/widgets/sliver_grid.mdx
+++ b/docs/widgets/sliver_grid.mdx
@@ -5,73 +5,81 @@ description: "Documentation for SliverGrid"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverGridPreviewJson = {
-  "type": "sliverGrid",
-  "crossAxisCount": 2,
-  "mainAxisSpacing": 16,
-  "crossAxisSpacing": 16,
-  "childAspectRatio": 1,
-  "children": [
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 1",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
-          }
-        }
-      }
-    },
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 2",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
-          }
-        }
-      }
-    },
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 3",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
-          }
-        }
-      }
-    },
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 4",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverGrid",
+        "crossAxisCount": 2,
+        "mainAxisSpacing": 16,
+        "crossAxisSpacing": 16,
+        "childAspectRatio": 1,
+        "children": [
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 1",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
+          },
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 2",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
+          },
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 3",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
+          },
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 4",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
           }
-        }
+        ]
       }
-    }
-  ]
+    ]
+  }
 };
 export const sliverGridPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
 
diff --git a/docs/widgets/sliver_opacity.mdx b/docs/widgets/sliver_opacity.mdx
index 7d89d38b1..714fb5934 100644
--- a/docs/widgets/sliver_opacity.mdx
+++ b/docs/widgets/sliver_opacity.mdx
@@ -5,22 +5,30 @@ description: "Documentation for SliverOpacity"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverOpacityPreviewJson = {
-  "type": "sliverOpacity",
-  "opacity": 0.5,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "container",
-      "height": 200,
-      "color": "red",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "I am a faded sliver"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverOpacity",
+        "opacity": 0.5,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "container",
+            "height": 200,
+            "color": "red",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "I am a faded sliver"
+              }
+            }
+          }
         }
       }
-    }
+    ]
   }
 };
 export const sliverOpacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
diff --git a/docs/widgets/sliver_padding.mdx b/docs/widgets/sliver_padding.mdx
index 448c3e78c..804b57f64 100644
--- a/docs/widgets/sliver_padding.mdx
+++ b/docs/widgets/sliver_padding.mdx
@@ -5,26 +5,34 @@ description: "Documentation for SliverPadding"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverPaddingPreviewJson = {
-  "type": "sliverPadding",
-  "padding": 16,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "container",
-      "height": 150,
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "I am a Box inside a SliverPadding!",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverPadding",
+        "padding": 16,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "container",
+            "height": 150,
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "I am a Box inside a SliverPadding!",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
           }
         }
       }
-    }
+    ]
   }
 };
 export const sliverPaddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
diff --git a/docs/widgets/sliver_safe_area.mdx b/docs/widgets/sliver_safe_area.mdx
index c0ee5706a..e05e19089 100644
--- a/docs/widgets/sliver_safe_area.mdx
+++ b/docs/widgets/sliver_safe_area.mdx
@@ -5,14 +5,22 @@ description: "Documentation for SliverSafeArea"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverSafeAreaPreviewJson = {
-  "type": "sliverSafeArea",
-  "top": true,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "text",
-      "data": "Hello World"
-    }
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverSafeArea",
+        "top": true,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "text",
+            "data": "Hello World"
+          }
+        }
+      }
+    ]
   }
 };
 export const sliverSafeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
diff --git a/docs/widgets/sliver_visibility.mdx b/docs/widgets/sliver_visibility.mdx
index 7eb6a04c4..5ac97e5e7 100644
--- a/docs/widgets/sliver_visibility.mdx
+++ b/docs/widgets/sliver_visibility.mdx
@@ -5,22 +5,30 @@ description: "Documentation for SliverVisibility"
 
 export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
 export const sliverVisibilityPreviewJson = {
-  "type": "sliverVisibility",
-  "visible": false,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "container",
-      "height": 180,
-      "color": "warning",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "This sliver is hidden"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverVisibility",
+        "visible": false,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "container",
+            "height": 180,
+            "color": "warning",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "This sliver is hidden"
+              }
+            }
+          }
         }
       }
-    }
+    ]
   }
 };
 export const sliverVisibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;

From 847466d7a0be3e1edbda087a35eaf73c1d20f03d Mon Sep 17 00:00:00 2001
From: Mithul Nayagam <113115383+Potatomonsta@users.noreply.github.com>
Date: Thu, 23 Apr 2026 14:30:26 +0530
Subject: [PATCH 3/6] docs: refactor widget documentation to import playground
 base URL

- Updated multiple widget documentation files to import the PLAYGROUND_BASE_URL from a centralized snippet for consistency.
- Simplified the preview source URL for each widget by removing unnecessary query parameters.
- Adjusted iframe styling to maintain a consistent height across all widget previews.
---
 docs/snippets/playground_base.mdx            |  1 +
 docs/widgets/alert_dialog.mdx                |  8 ++--
 docs/widgets/align.mdx                       |  9 ++--
 docs/widgets/app_bar.mdx                     |  8 ++--
 docs/widgets/aspect_ratio.mdx                |  8 ++--
 docs/widgets/auto_complete.mdx               |  8 ++--
 docs/widgets/backdrop_filter.mdx             |  8 ++--
 docs/widgets/badge.mdx                       |  8 ++--
 docs/widgets/bottom_navigation_bar.mdx       |  8 ++--
 docs/widgets/card.mdx                        |  8 ++--
 docs/widgets/carousel_view.mdx               |  8 ++--
 docs/widgets/center.mdx                      |  8 ++--
 docs/widgets/check_box.mdx                   |  8 ++--
 docs/widgets/chip.mdx                        |  8 ++--
 docs/widgets/circle_avatar.mdx               |  8 ++--
 docs/widgets/circular_progress_indicator.mdx |  8 ++--
 docs/widgets/clip_oval.mdx                   |  8 ++--
 docs/widgets/clip_rrect.mdx                  |  8 ++--
 docs/widgets/colored_box.mdx                 |  8 ++--
 docs/widgets/column.mdx                      |  8 ++--
 docs/widgets/conditional.mdx                 |  8 ++--
 docs/widgets/container.mdx                   |  8 ++--
 docs/widgets/custom_scroll_view.mdx          |  8 ++--
 docs/widgets/divider.mdx                     |  8 ++--
 docs/widgets/drawer.mdx                      |  8 ++--
 docs/widgets/dropdown_menu.mdx               |  8 ++--
 docs/widgets/dynamic_view.mdx                |  8 ++--
 docs/widgets/elevated_button.mdx             |  8 ++--
 docs/widgets/expanded.mdx                    |  8 ++--
 docs/widgets/filled_button.mdx               |  8 ++--
 docs/widgets/fitted_box.mdx                  |  8 ++--
 docs/widgets/flexible.mdx                    |  8 ++--
 docs/widgets/floating_action_button.mdx      |  8 ++--
 docs/widgets/form.mdx                        |  8 ++--
 docs/widgets/fractionally_sized_box.mdx      |  8 ++--
 docs/widgets/gesture_detector.mdx            |  8 ++--
 docs/widgets/grid_view.mdx                   |  8 ++--
 docs/widgets/hero.mdx                        |  8 ++--
 docs/widgets/icon.mdx                        |  8 ++--
 docs/widgets/icon_button.mdx                 |  8 ++--
 docs/widgets/image.mdx                       |  8 ++--
 docs/widgets/ink_well.mdx                    |  9 ++--
 docs/widgets/limited_box.mdx                 |  8 ++--
 docs/widgets/linear_progress_indicator.mdx   |  8 ++--
 docs/widgets/list_tile.mdx                   |  8 ++--
 docs/widgets/listview.mdx                    |  8 ++--
 docs/widgets/network_widget.mdx              |  8 ++--
 docs/widgets/opacity.mdx                     |  8 ++--
 docs/widgets/outlined_button.mdx             |  8 ++--
 docs/widgets/padding.mdx                     |  8 ++--
 docs/widgets/page_view.mdx                   |  8 ++--
 docs/widgets/placeholder.mdx                 |  8 ++--
 docs/widgets/positioned.mdx                  |  8 ++--
 docs/widgets/radio_group.mdx                 |  8 ++--
 docs/widgets/refresh_indicator.mdx           |  8 ++--
 docs/widgets/row.mdx                         |  8 ++--
 docs/widgets/safe_area.mdx                   |  8 ++--
 docs/widgets/scaffold.mdx                    |  8 ++--
 docs/widgets/selectable_text.mdx             |  8 ++--
 docs/widgets/set_value.mdx                   |  8 ++--
 docs/widgets/single_child_scroll_view.mdx    |  8 ++--
 docs/widgets/sized_box.mdx                   |  8 ++--
 docs/widgets/slider.mdx                      |  8 ++--
 docs/widgets/sliver_app_bar.mdx              |  8 ++--
 docs/widgets/sliver_fill_remaining.mdx       |  8 ++--
 docs/widgets/sliver_grid.mdx                 |  8 ++--
 docs/widgets/sliver_list.mdx                 |  8 ++--
 docs/widgets/sliver_opacity.mdx              |  8 ++--
 docs/widgets/sliver_padding.mdx              |  8 ++--
 docs/widgets/sliver_safe_area.mdx            |  8 ++--
 docs/widgets/sliver_to_box_adapter.mdx       |  8 ++--
 docs/widgets/sliver_visibility.mdx           |  8 ++--
 docs/widgets/spacer.mdx                      |  8 ++--
 docs/widgets/stack.mdx                       |  8 ++--
 docs/widgets/switch.mdx                      |  8 ++--
 docs/widgets/tab_bar.mdx                     |  8 ++--
 docs/widgets/table.mdx                       |  8 ++--
 docs/widgets/table_cell.mdx                  |  8 ++--
 docs/widgets/table_row.mdx                   |  8 ++--
 docs/widgets/text.mdx                        |  8 ++--
 docs/widgets/text_button.mdx                 |  8 ++--
 docs/widgets/text_field.mdx                  |  8 ++--
 docs/widgets/text_form_field.mdx             |  8 ++--
 docs/widgets/tool_tip.mdx                    |  8 ++--
 docs/widgets/vertical_divider.mdx            |  8 ++--
 docs/widgets/visibility.mdx                  |  8 ++--
 docs/widgets/webview.mdx                     |  8 ++--
 docs/widgets/wrap.mdx                        |  8 ++--
 examples/counter_example/pubspec.lock        | 36 ++++++++--------
 examples/movie_app/pubspec.lock              | 36 ++++++++--------
 examples/stac_gallery/pubspec.lock           | 43 +++++++++-----------
 packages/stac_cli/pubspec.lock               | 43 ++++----------------
 92 files changed, 494 insertions(+), 363 deletions(-)
 create mode 100644 docs/snippets/playground_base.mdx

diff --git a/docs/snippets/playground_base.mdx b/docs/snippets/playground_base.mdx
new file mode 100644
index 000000000..ee48430f4
--- /dev/null
+++ b/docs/snippets/playground_base.mdx
@@ -0,0 +1 @@
+export const PLAYGROUND_BASE_URL = "http://localhost:49794";
diff --git a/docs/widgets/alert_dialog.mdx b/docs/widgets/alert_dialog.mdx
index 57e34f216..095f8d98f 100644
--- a/docs/widgets/alert_dialog.mdx
+++ b/docs/widgets/alert_dialog.mdx
@@ -3,7 +3,8 @@ title: "AlertDialog"
 description: "Documentation for AlertDialog"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const alertDialogPreviewJson = {
   "type": "alertDialog",
   "content": {
@@ -56,7 +57,7 @@ export const alertDialogPreviewJson = {
     }
   ]
 };
-export const alertDialogPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const alertDialogPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac AlertDialog allows you to build a Flutter alert dialog widget using JSON.
 To know more about the alert dialog widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/AlertDialog-class.html).
@@ -192,7 +193,8 @@ StacAlertDialog(
         id="stac"
         src={alertDialogPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/align.mdx b/docs/widgets/align.mdx
index 417d186bb..2f3d96ed8 100644
--- a/docs/widgets/align.mdx
+++ b/docs/widgets/align.mdx
@@ -3,14 +3,14 @@ title: "Align"
 description: "Documentation for Align"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const alignPreviewJson = {
   "type": "align",
   "alignment": "topEnd",
   "child": {
     "type": "container",
     "color": "#FC5632",
-    "clipBehavior": "hardEdge",
     "height": 250,
     "width": 200,
     "child": {
@@ -27,7 +27,7 @@ export const alignPreviewJson = {
     }
   }
 };
-export const alignPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const alignPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Align allows you to build a Flutter Align widget using JSON.
 To know more about the align widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Align-class.html).
@@ -104,7 +104,8 @@ StacAlign(
         id="stac"
         src={alignPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/app_bar.mdx b/docs/widgets/app_bar.mdx
index cccb0299f..8eacdaf12 100644
--- a/docs/widgets/app_bar.mdx
+++ b/docs/widgets/app_bar.mdx
@@ -3,7 +3,8 @@ title: "AppBar"
 description: "Documentation for AppBar"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const appBarPreviewJson = {
   "type": "appBar",
   "title": {
@@ -29,7 +30,7 @@ export const appBarPreviewJson = {
     }
   ]
 };
-export const appBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const appBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac AppBar allows you to build a Flutter app bar widget using JSON.
 To know more about the app bar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/AppBar-class.html).
@@ -117,7 +118,8 @@ StacAppBar(
         id="stac"
         src={appBarPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/aspect_ratio.mdx b/docs/widgets/aspect_ratio.mdx
index 0133cbbf9..61a39b343 100644
--- a/docs/widgets/aspect_ratio.mdx
+++ b/docs/widgets/aspect_ratio.mdx
@@ -3,7 +3,8 @@ title: "AspectRatio"
 description: "Documentation for AspectRatio"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const aspectRatioPreviewJson = {
   "type": "aspectRatio",
   "aspectRatio": 1.33,
@@ -14,7 +15,7 @@ export const aspectRatioPreviewJson = {
     "height": 100
   }
 };
-export const aspectRatioPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const aspectRatioPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac AspectRatio allows you to build a Flutter AspectRatio widget using JSON.
 To know more about the aspectRatio widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html).
@@ -67,7 +68,8 @@ StacAspectRatio(
         id="stac"
         src={aspectRatioPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/auto_complete.mdx b/docs/widgets/auto_complete.mdx
index 15c7ff070..5cfea7d03 100644
--- a/docs/widgets/auto_complete.mdx
+++ b/docs/widgets/auto_complete.mdx
@@ -3,7 +3,8 @@ title: "AutoComplete"
 description: "Documentation for AutoComplete"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const autoCompletePreviewJson = {
   "type": "autoComplete",
   "options": [
@@ -19,7 +20,7 @@ export const autoCompletePreviewJson = {
   "optionsViewOpenDirection": "up",
   "initialValue": "Option 1"
 };
-export const autoCompletePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const autoCompletePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac AutoComplete allows you to build a Flutter AutoComplete widget using JSON.
 To know more about the AutoComplete widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Autocomplete-class.html).
@@ -77,7 +78,8 @@ StacAutoComplete(
         id="stac"
         src={autoCompletePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/backdrop_filter.mdx b/docs/widgets/backdrop_filter.mdx
index 0e52b7f83..d4cb1e02e 100644
--- a/docs/widgets/backdrop_filter.mdx
+++ b/docs/widgets/backdrop_filter.mdx
@@ -3,7 +3,8 @@ title: "BackdropFilter"
 description: "Documentation for BackdropFilter"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const backdropFilterPreviewJson = {
   "type": "clipRRect",
   "borderRadius": {
@@ -44,7 +45,7 @@ export const backdropFilterPreviewJson = {
     }
   }
 };
-export const backdropFilterPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const backdropFilterPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac BackdropFilter allows you to build the Flutter BackdropFilter widget using JSON. This widget applies a filter to the existing painted content and then paints its child. It's commonly used to create frosted glass effects, blurs, and other visual effects.
 To know more about the BackdropFilter widget in Flutter, refer to the official documentation for [Backdrop Filter](https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html) and [Image Filter](https://api.flutter.dev/flutter/dart-ui/ImageFilter-class.html).
@@ -192,7 +193,8 @@ StacClipRRect(
         id="stac"
         src={backdropFilterPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/badge.mdx b/docs/widgets/badge.mdx
index 14ced5396..889c0955e 100644
--- a/docs/widgets/badge.mdx
+++ b/docs/widgets/badge.mdx
@@ -3,7 +3,8 @@ title: "Badge"
 description: "Documentation for Badge"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const badgePreviewJson = {
   "type": "badge",
   "label": {
@@ -18,7 +19,7 @@ export const badgePreviewJson = {
   "backgroundColor": "#F44336",
   "textColor": "#FFFFFF"
 };
-export const badgePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const badgePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Badge allows you to build a Flutter Badge widget using JSON.
 To know more about the Badge widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Badge-class.html).
@@ -84,7 +85,8 @@ StacBadge(
         id="stac"
         src={badgePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/bottom_navigation_bar.mdx b/docs/widgets/bottom_navigation_bar.mdx
index e753f5a9c..ae0b70982 100644
--- a/docs/widgets/bottom_navigation_bar.mdx
+++ b/docs/widgets/bottom_navigation_bar.mdx
@@ -3,7 +3,8 @@ title: "BottomNavigationBar"
 description: "Documentation for BottomNavigationBar"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const bottomNavigationBarPreviewJson = {
   "type": "defaultBottomNavigationController",
   "length": 3,
@@ -85,7 +86,7 @@ export const bottomNavigationBarPreviewJson = {
     }
   }
 };
-export const bottomNavigationBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const bottomNavigationBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac BottomNavigationBar allows you to build a Flutter BottomNavigationBar widget using JSON.
 To know more about the BottomNavigationBar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html).
@@ -296,7 +297,8 @@ StacDefaultBottomNavigationController(
         id="stac"
         src={bottomNavigationBarPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/card.mdx b/docs/widgets/card.mdx
index 1dcdc64c9..40a1f137f 100644
--- a/docs/widgets/card.mdx
+++ b/docs/widgets/card.mdx
@@ -3,7 +3,8 @@ title: "Card"
 description: "Documentation for Card"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const cardPreviewJson = {
   "type": "card",
   "color": "#FFFFFF",
@@ -28,7 +29,7 @@ export const cardPreviewJson = {
   },
   "semanticContainer": true
 };
-export const cardPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const cardPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Card allows you to build a Flutter Card widget using JSON.
 To know more about the Card widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Card-class.html).
@@ -105,7 +106,8 @@ StacCard(
         id="stac"
         src={cardPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/carousel_view.mdx b/docs/widgets/carousel_view.mdx
index 0d0dafe1e..ebc84e861 100644
--- a/docs/widgets/carousel_view.mdx
+++ b/docs/widgets/carousel_view.mdx
@@ -3,7 +3,8 @@ title: "CarouselView"
 description: "Documentation for CarouselView"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const carouselViewPreviewJson = {
   "type": "carouselView",
   "carouselType": "weighted",
@@ -47,7 +48,7 @@ export const carouselViewPreviewJson = {
     }
   ]
 };
-export const carouselViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const carouselViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac CarouselView allows you to build a Flutter CarouselView widget using JSON.
 To know more about the CarouselView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Carousel-class.html).
@@ -167,7 +168,8 @@ StacCarouselView(
         id="stac"
         src={carouselViewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/center.mdx b/docs/widgets/center.mdx
index e2fceed68..8202bb457 100644
--- a/docs/widgets/center.mdx
+++ b/docs/widgets/center.mdx
@@ -3,7 +3,8 @@ title: "Center"
 description: "Documentation for Center"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const centerPreviewJson = {
   "type": "center",
   "child": {
@@ -11,7 +12,7 @@ export const centerPreviewJson = {
     "data": "Hello, World!"
   }
 };
-export const centerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const centerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Center allows you to build a Flutter center widget using JSON.
 To know more about the center widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Center-class.html).
@@ -55,7 +56,8 @@ StacCenter(
         id="stac"
         src={centerPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/check_box.mdx b/docs/widgets/check_box.mdx
index 22a2079af..31621deba 100644
--- a/docs/widgets/check_box.mdx
+++ b/docs/widgets/check_box.mdx
@@ -3,7 +3,8 @@ title: "CheckBox"
 description: "Documentation for CheckBox"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const checkBoxPreviewJson = {
   "type": "checkBox",
   "id": "checkbox_1",
@@ -23,7 +24,7 @@ export const checkBoxPreviewJson = {
   "autofocus": true,
   "isError": false
 };
-export const checkBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const checkBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac CheckBox allows you to build a Flutter CheckBox widget using JSON.
 To know more about the CheckBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Checkbox-class.html).
@@ -103,7 +104,8 @@ StacCheckBox(
         id="stac"
         src={checkBoxPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/chip.mdx b/docs/widgets/chip.mdx
index d95241831..6e54e1d37 100644
--- a/docs/widgets/chip.mdx
+++ b/docs/widgets/chip.mdx
@@ -3,7 +3,8 @@ title: "Chip"
 description: "Documentation for Chip"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const chipPreviewJson = {
   "type": "chip",
   "avatar": {
@@ -73,7 +74,7 @@ export const chipPreviewJson = {
     "minHeight": 24
   }
 };
-export const chipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const chipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Chip allows you to build a Flutter Chip widget using JSON.
 To know more about the Chip widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Chip-class.html).
@@ -223,7 +224,8 @@ StacChip(
         id="stac"
         src={chipPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/circle_avatar.mdx b/docs/widgets/circle_avatar.mdx
index 80c29b8b7..dff78a7bb 100644
--- a/docs/widgets/circle_avatar.mdx
+++ b/docs/widgets/circle_avatar.mdx
@@ -3,7 +3,8 @@ title: "CircleAvatar"
 description: "Documentation for CircleAvatar"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const circleAvatarPreviewJson = {
   "type": "circleAvatar",
   "backgroundColor": "#FF0000",
@@ -15,7 +16,7 @@ export const circleAvatarPreviewJson = {
     "data": "A"
   }
 };
-export const circleAvatarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const circleAvatarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac CircleAvatar allows you to build a Flutter circle avatar widget using JSON.
 To know more about the circle avatar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/CircleAvatar-class.html).
@@ -74,7 +75,8 @@ StacCircleAvatar(
         id="stac"
         src={circleAvatarPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/circular_progress_indicator.mdx b/docs/widgets/circular_progress_indicator.mdx
index 7c1a68ad5..a02a9bbfc 100644
--- a/docs/widgets/circular_progress_indicator.mdx
+++ b/docs/widgets/circular_progress_indicator.mdx
@@ -3,7 +3,8 @@ title: "CircularProgressIndicator"
 description: "Documentation for CircularProgressIndicator"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const circularProgressIndicatorPreviewJson = {
   "type": "circularProgressIndicator",
   "color": "#541204",
@@ -11,7 +12,7 @@ export const circularProgressIndicatorPreviewJson = {
   "backgroundColor": "#FFD700",
   "strokeCap": "round"
 };
-export const circularProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const circularProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac CircularProgressIndicator allows you to build a Flutter CircularProgressIndicator widget using JSON. 
 To know more about the CircularProgressIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html).
@@ -63,7 +64,8 @@ StacCircularProgressIndicator(
         id="stac"
         src={circularProgressIndicatorPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/clip_oval.mdx b/docs/widgets/clip_oval.mdx
index f7c3b8988..f06fb3729 100644
--- a/docs/widgets/clip_oval.mdx
+++ b/docs/widgets/clip_oval.mdx
@@ -3,7 +3,8 @@ title: "ClipOval"
 description: "Documentation for ClipOval"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const clipOvalPreviewJson = {
   "type": "clipOval",
   "clipBehavior": "antiAlias",
@@ -15,7 +16,7 @@ export const clipOvalPreviewJson = {
     "fit": "cover"
   }
 };
-export const clipOvalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const clipOvalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac ClipOval allows you to build the Flutter ClipOval widget using JSON. It clips its child using an oval shape, which is useful for creating circular or oval UI elements.
 To know more about the ClipOval widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ClipOval-class.html).
@@ -68,7 +69,8 @@ StacClipOval(
         id="stac"
         src={clipOvalPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/clip_rrect.mdx b/docs/widgets/clip_rrect.mdx
index f9562ceeb..2d50b66f9 100644
--- a/docs/widgets/clip_rrect.mdx
+++ b/docs/widgets/clip_rrect.mdx
@@ -3,7 +3,8 @@ title: "ClipRRect"
 description: "Documentation for ClipRRect"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const clipRrectPreviewJson = {
   "type": "clipRRect",
   "borderRadius": 8,
@@ -15,7 +16,7 @@ export const clipRrectPreviewJson = {
     "width": 100
   }
 };
-export const clipRrectPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const clipRrectPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The `ClipRRect` widget in Stac allows you to clip its child using rounded rectangles. This is useful when you want to create UI elements with rounded corners.
 
@@ -60,7 +61,8 @@ StacClipRRect(
         id="stac"
         src={clipRrectPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/colored_box.mdx b/docs/widgets/colored_box.mdx
index edd8c3b3b..ebb7782da 100644
--- a/docs/widgets/colored_box.mdx
+++ b/docs/widgets/colored_box.mdx
@@ -3,7 +3,8 @@ title: "ColoredBox"
 description: "Documentation for ColoredBox"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const coloredBoxPreviewJson = {
   "type": "coloredBox",
   "color": "#FF0000",
@@ -12,7 +13,7 @@ export const coloredBoxPreviewJson = {
     "data": "Hello, World!"
   }
 };
-export const coloredBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const coloredBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Colored Box allows you to build a Flutter colored box widget using JSON.
 To know more about the colored box widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ColoredBox-class.html).
@@ -57,7 +58,8 @@ StacColoredBox(
         id="stac"
         src={coloredBoxPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/column.mdx b/docs/widgets/column.mdx
index bb3b49b0e..9d75fdd64 100644
--- a/docs/widgets/column.mdx
+++ b/docs/widgets/column.mdx
@@ -3,7 +3,8 @@ title: "Column"
 description: "Documentation for Column"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const columnPreviewJson = {
   "type": "column",
   "mainAxisAlignment": "center",
@@ -25,7 +26,7 @@ export const columnPreviewJson = {
     }
   ]
 };
-export const columnPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const columnPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Column allows you to build a Flutter column widget using JSON.
 To know more about the column widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Column-class.html).
@@ -101,7 +102,8 @@ StacColumn(
         id="stac"
         src={columnPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/conditional.mdx b/docs/widgets/conditional.mdx
index 335de8553..6d3a845bc 100644
--- a/docs/widgets/conditional.mdx
+++ b/docs/widgets/conditional.mdx
@@ -3,7 +3,8 @@ title: "Conditional"
 description: "Documentation for Conditional"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const conditionalPreviewJson = {
   "type": "conditional",
   "condition": "user.isLoggedIn == true",
@@ -16,7 +17,7 @@ export const conditionalPreviewJson = {
     "data": "Please sign in"
   }
 };
-export const conditionalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const conditionalPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Conditional allows you to conditionally render widgets based on a boolean expression. It evaluates the condition at runtime and renders either the `ifTrue` or `ifFalse` widget.
 
@@ -66,7 +67,8 @@ StacConditional(
         id="stac"
         src={conditionalPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/container.mdx b/docs/widgets/container.mdx
index 61f99bdb6..b7f59916f 100644
--- a/docs/widgets/container.mdx
+++ b/docs/widgets/container.mdx
@@ -3,7 +3,8 @@ title: "Container"
 description: "Documentation for Container"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const containerPreviewJson = {
   "type": "container",
   "alignment": "center",
@@ -33,7 +34,7 @@ export const containerPreviewJson = {
     }
   }
 };
-export const containerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const containerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Container allows you to build a Flutter Container widget using JSON. 
 To know more about the container widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Container-class.html).
@@ -132,7 +133,8 @@ StacContainer(
         id="stac"
         src={containerPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/custom_scroll_view.mdx b/docs/widgets/custom_scroll_view.mdx
index 06150e247..5fecf4c73 100644
--- a/docs/widgets/custom_scroll_view.mdx
+++ b/docs/widgets/custom_scroll_view.mdx
@@ -3,7 +3,8 @@ title: "CustomScrollView"
 description: "Documentation for CustomScrollView"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const customScrollViewPreviewJson = {
   "type": "customScrollView",
   "slivers": [
@@ -26,7 +27,7 @@ export const customScrollViewPreviewJson = {
     }
   ]
 };
-export const customScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const customScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac CustomScrollView allows you to build a Flutter CustomScrollView widget using JSON.
 To know more about the CustomScrollView widget in Flutter, refer to
@@ -102,7 +103,8 @@ StacCustomScrollView(
         id="stac"
         src={customScrollViewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/divider.mdx b/docs/widgets/divider.mdx
index 2a05f448f..f4e8ff166 100644
--- a/docs/widgets/divider.mdx
+++ b/docs/widgets/divider.mdx
@@ -3,7 +3,8 @@ title: "Divider"
 description: "Documentation for Divider"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const dividerPreviewJson = {
   "type": "divider",
   "thickness": 2,
@@ -11,7 +12,7 @@ export const dividerPreviewJson = {
   "indent": 16,
   "endIndent": 16
 };
-export const dividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const dividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Divider allows you to build a Flutter Divider widget using JSON. It creates a thin horizontal line with padding on either side.
 To know more about the Divider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Divider-class.html).
@@ -60,7 +61,8 @@ StacDivider(
         id="stac"
         src={dividerPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/drawer.mdx b/docs/widgets/drawer.mdx
index ef3254056..692463608 100644
--- a/docs/widgets/drawer.mdx
+++ b/docs/widgets/drawer.mdx
@@ -3,7 +3,8 @@ title: "Drawer"
 description: "Documentation for Drawer"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const drawerPreviewJson = {
   "type": "drawer",
   "backgroundColor": "#FFFFFF",
@@ -35,7 +36,7 @@ export const drawerPreviewJson = {
     ]
   }
 };
-export const drawerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const drawerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Drawer allows you to build a Flutter Drawer widget using JSON.
 To know more about the Drawer widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Drawer-class.html).
@@ -123,7 +124,8 @@ StacDrawer(
         id="stac"
         src={drawerPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/dropdown_menu.mdx b/docs/widgets/dropdown_menu.mdx
index d94a7c6b6..2fcfdc725 100644
--- a/docs/widgets/dropdown_menu.mdx
+++ b/docs/widgets/dropdown_menu.mdx
@@ -3,7 +3,8 @@ title: "DropdownMenu"
 description: "Documentation for DropdownMenu"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const dropdownMenuPreviewJson = {
   "type": "dropdownMenu",
   "label": {
@@ -39,7 +40,7 @@ export const dropdownMenuPreviewJson = {
     }
   ]
 };
-export const dropdownMenuPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const dropdownMenuPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac DropdownMenu allows you to build a Flutter DropdownMenu widget using JSON.
 To know more about the DropdownMenu widget in Flutter, refer to
@@ -160,7 +161,8 @@ StacDropdownMenu(
         id="stac"
         src={dropdownMenuPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/dynamic_view.mdx b/docs/widgets/dynamic_view.mdx
index ee9cd0751..c80079eaf 100644
--- a/docs/widgets/dynamic_view.mdx
+++ b/docs/widgets/dynamic_view.mdx
@@ -3,7 +3,8 @@ title: "Dynamic View"
 description: "Documentation for Dynamic View"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const dynamicViewPreviewJson = {
   "type": "dynamicView",
   "request": {
@@ -15,7 +16,7 @@ export const dynamicViewPreviewJson = {
     "data": "Hello, {{name}}!"
   }
 };
-export const dynamicViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const dynamicViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 ## Overview
 
@@ -83,7 +84,8 @@ StacDynamicView(
         id="stac"
         src={dynamicViewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/elevated_button.mdx b/docs/widgets/elevated_button.mdx
index b91041b52..c37fdfef2 100644
--- a/docs/widgets/elevated_button.mdx
+++ b/docs/widgets/elevated_button.mdx
@@ -3,7 +3,8 @@ title: "ElevatedButton"
 description: "Documentation for ElevatedButton"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const elevatedButtonPreviewJson = {
   "type": "elevatedButton",
   "onPressed": {},
@@ -21,7 +22,7 @@ export const elevatedButtonPreviewJson = {
     "data": "Click Me!"
   }
 };
-export const elevatedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const elevatedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Elevated Button allows you to build a Flutter elevated button widget using JSON.
 To know more about the elevated button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/ElevatedButton-class.html).
@@ -88,7 +89,8 @@ StacElevatedButton(
         id="stac"
         src={elevatedButtonPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/expanded.mdx b/docs/widgets/expanded.mdx
index 9af600e7c..a90b59589 100644
--- a/docs/widgets/expanded.mdx
+++ b/docs/widgets/expanded.mdx
@@ -3,7 +3,8 @@ title: "Expanded"
 description: "Documentation for Expanded"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const expandedPreviewJson = {
   "type": "expanded",
   "flex": 2,
@@ -12,7 +13,7 @@ export const expandedPreviewJson = {
     "data": "Hello, World!"
   }
 };
-export const expandedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const expandedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Expanded allows you to build a Flutter expanded widget using JSON.
 To know more about the expanded widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Expanded-class.html).
@@ -57,7 +58,8 @@ StacExpanded(
         id="stac"
         src={expandedPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/filled_button.mdx b/docs/widgets/filled_button.mdx
index 034fe747b..94d9095f5 100644
--- a/docs/widgets/filled_button.mdx
+++ b/docs/widgets/filled_button.mdx
@@ -3,7 +3,8 @@ title: "FilledButton"
 description: "Documentation for FilledButton"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const filledButtonPreviewJson = {
   "type": "filledButton",
   "onPressed": {},
@@ -21,7 +22,7 @@ export const filledButtonPreviewJson = {
     "data": "Click Me!"
   }
 };
-export const filledButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const filledButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Filled Button allows you to build a Flutter filled button widget using JSON.
 To know more about the filled button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/FilledButton-class.html).
@@ -87,7 +88,8 @@ StacFilledButton(
         id="stac"
         src={filledButtonPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/fitted_box.mdx b/docs/widgets/fitted_box.mdx
index d31e87230..8ab34cc75 100644
--- a/docs/widgets/fitted_box.mdx
+++ b/docs/widgets/fitted_box.mdx
@@ -3,7 +3,8 @@ title: "FittedBox"
 description: "Documentation for FittedBox"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const fittedBoxPreviewJson = {
   "type": "fittedBox",
   "fit": "contain",
@@ -17,7 +18,7 @@ export const fittedBoxPreviewJson = {
     }
   }
 };
-export const fittedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const fittedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac FittedBox allows you to build the Flutter FittedBox widget using JSON.
 To know more about the FittedBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/FittedBox-class.html).
@@ -80,7 +81,8 @@ StacFittedBox(
         id="stac"
         src={fittedBoxPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/flexible.mdx b/docs/widgets/flexible.mdx
index f322868b5..d38dddaee 100644
--- a/docs/widgets/flexible.mdx
+++ b/docs/widgets/flexible.mdx
@@ -3,7 +3,8 @@ title: "Flexible"
 description: "Documentation for Flexible"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const flexiblePreviewJson = {
   "type": "flexible",
   "flex": 2,
@@ -13,7 +14,7 @@ export const flexiblePreviewJson = {
     "data": "Hello, World!"
   }
 };
-export const flexiblePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const flexiblePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Flexible allows you to build a Flutter flexible widget using JSON.
 To know more about the flexible widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Flexible-class.html).
@@ -61,7 +62,8 @@ StacFlexible(
         id="stac"
         src={flexiblePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/floating_action_button.mdx b/docs/widgets/floating_action_button.mdx
index 68b2998b2..d53a4696e 100644
--- a/docs/widgets/floating_action_button.mdx
+++ b/docs/widgets/floating_action_button.mdx
@@ -3,7 +3,8 @@ title: "FloatingActionButton"
 description: "Documentation for FloatingActionButton"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const floatingActionButtonPreviewJson = {
   "type": "floatingActionButton",
   "onPressed": {},
@@ -40,7 +41,7 @@ export const floatingActionButtonPreviewJson = {
     "data": "Add"
   }
 };
-export const floatingActionButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const floatingActionButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Floating Action Button allows you to build a Flutter floating action button widget using JSON.
 To know more about the floating action button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/FloatingActionButton-class.html).
@@ -151,7 +152,8 @@ StacFloatingActionButton(
         id="stac"
         src={floatingActionButtonPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/form.mdx b/docs/widgets/form.mdx
index 03caed785..7f40f6765 100644
--- a/docs/widgets/form.mdx
+++ b/docs/widgets/form.mdx
@@ -3,7 +3,8 @@ title: "Form"
 description: "Documentation for Form"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const formPreviewJson = {
   "type": "form",
   "autovalidateMode": "always",
@@ -53,7 +54,7 @@ export const formPreviewJson = {
     ]
   }
 };
-export const formPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const formPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Form allows you to build a Flutter form widget using JSON.
 To know more about the form widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Form-class.html).
@@ -164,7 +165,8 @@ StacForm(
         id="stac"
         src={formPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/fractionally_sized_box.mdx b/docs/widgets/fractionally_sized_box.mdx
index cc05863f5..33f499810 100644
--- a/docs/widgets/fractionally_sized_box.mdx
+++ b/docs/widgets/fractionally_sized_box.mdx
@@ -3,7 +3,8 @@ title: "FractionallySizedBox"
 description: "Documentation for FractionallySizedBox"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const fractionallySizedBoxPreviewJson = {
   "type": "fractionallySizedBox",
   "alignment": "center",
@@ -18,7 +19,7 @@ export const fractionallySizedBoxPreviewJson = {
     }
   }
 };
-export const fractionallySizedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const fractionallySizedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac FractionallySizedBox allows you to build a Flutter fractionally sized box widget using JSON.
 To know more about the fractionally sized box widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html).
@@ -76,7 +77,8 @@ StacFractionallySizedBox(
         id="stac"
         src={fractionallySizedBoxPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/gesture_detector.mdx b/docs/widgets/gesture_detector.mdx
index bed3fb2b7..50a812d1c 100644
--- a/docs/widgets/gesture_detector.mdx
+++ b/docs/widgets/gesture_detector.mdx
@@ -3,7 +3,8 @@ title: "GestureDetector"
 description: "Documentation for GestureDetector"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const gestureDetectorPreviewJson = {
   "type": "gestureDetector",
   "child": {
@@ -29,7 +30,7 @@ export const gestureDetectorPreviewJson = {
     }
   }
 };
-export const gestureDetectorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const gestureDetectorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The `GestureDetector` widget in Stac allows you to detect various gestures and user interactions within your application. It wraps Flutter's native GestureDetector widget, providing a JSON-based interface to handle touch events, taps, drags, and more.
 
@@ -96,7 +97,8 @@ StacGestureDetector(
         id="stac"
         src={gestureDetectorPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/grid_view.mdx b/docs/widgets/grid_view.mdx
index 05497ded7..3e099ac68 100644
--- a/docs/widgets/grid_view.mdx
+++ b/docs/widgets/grid_view.mdx
@@ -3,7 +3,8 @@ title: "GridView"
 description: "Documentation for GridView"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const gridViewPreviewJson = {
   "type": "gridView",
   "scrollDirection": "vertical",
@@ -45,7 +46,7 @@ export const gridViewPreviewJson = {
   "restorationId": "grid_view_1",
   "clipBehavior": "hardEdge"
 };
-export const gridViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const gridViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac GridView allows you to build a Flutter GridView widget using JSON.
 To know more about the GridView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/GridView-class.html).
@@ -164,7 +165,8 @@ StacGridView(
         id="stac"
         src={gridViewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/hero.mdx b/docs/widgets/hero.mdx
index d2d018f8c..ba524f023 100644
--- a/docs/widgets/hero.mdx
+++ b/docs/widgets/hero.mdx
@@ -3,7 +3,8 @@ title: "Hero"
 description: "Documentation for Hero"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const heroPreviewJson = {
   "type": "hero",
   "tag": "userAvatar",
@@ -12,7 +13,7 @@ export const heroPreviewJson = {
     "network": "https://example.com/avatar.png"
   }
 };
-export const heroPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const heroPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Hero allows you to build a Flutter Hero widget using JSON. It enables hero animations between routes by tagging widgets with the same tag.
 To know more about the Hero widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Hero-class.html).
@@ -61,7 +62,8 @@ StacHero(
         id="stac"
         src={heroPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/icon.mdx b/docs/widgets/icon.mdx
index b44008377..ebb47ede5 100644
--- a/docs/widgets/icon.mdx
+++ b/docs/widgets/icon.mdx
@@ -3,7 +3,8 @@ title: "Icon"
 description: "Documentation for Icon"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const iconPreviewJson = {
   "type": "icon",
   "icon": "home",
@@ -12,7 +13,7 @@ export const iconPreviewJson = {
   "semanticLabel": "Home Icon",
   "textDirection": "ltr"
 };
-export const iconPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const iconPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Icon allows you to build a Flutter icon widget using JSON.
 To know more about the icon widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Icon-class.html).
@@ -66,7 +67,8 @@ StacIcon(
         id="stac"
         src={iconPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/icon_button.mdx b/docs/widgets/icon_button.mdx
index 74674caf6..440484f36 100644
--- a/docs/widgets/icon_button.mdx
+++ b/docs/widgets/icon_button.mdx
@@ -3,7 +3,8 @@ title: "IconButton"
 description: "Documentation for IconButton"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const iconButtonPreviewJson = {
   "type": "iconButton",
   "iconSize": 24,
@@ -43,7 +44,7 @@ export const iconButtonPreviewJson = {
     "icon": "add"
   }
 };
-export const iconButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const iconButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Icon Button allows you to build a Flutter icon button widget using JSON.
 To know more about the icon button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/IconButton-class.html).
@@ -153,7 +154,8 @@ StacIconButton(
         id="stac"
         src={iconButtonPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/image.mdx b/docs/widgets/image.mdx
index f986bcb86..c0c33d526 100644
--- a/docs/widgets/image.mdx
+++ b/docs/widgets/image.mdx
@@ -3,7 +3,8 @@ title: "Image"
 description: "Documentation for Image"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const imagePreviewJson = {
   "type": "image",
   "src": "assets/logo.png",
@@ -12,7 +13,7 @@ export const imagePreviewJson = {
   "height": 100,
   "fit": "cover"
 };
-export const imagePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const imagePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The `Image` widget allows you to display an image in your Flutter app using JSON. It supports images from multiple sources, including assets, files, and network URLs, and provides customization options such as alignment, color, width, height, and fit.
 
@@ -73,7 +74,8 @@ const StacImage.asset(
         id="stac"
         src={imagePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/ink_well.mdx b/docs/widgets/ink_well.mdx
index ff41de2d4..349e6e4db 100644
--- a/docs/widgets/ink_well.mdx
+++ b/docs/widgets/ink_well.mdx
@@ -3,7 +3,8 @@ title: "InkWell"
 description: "Documentation for InkWell"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const inkWellPreviewJson = {
   "type": "inkWell",
   "child": {
@@ -33,8 +34,7 @@ export const inkWellPreviewJson = {
   },
   "onTap": {}
 };
-export const inkWellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
-
+export const inkWellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 **Stac InkWell** allows you to build the Flutter `InkWell` widget using JSON.  
 To learn more about the `InkWell` widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/InkWell-class.html).
 
@@ -139,7 +139,8 @@ StacInkWell(
         id="stac"
         src={inkWellPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/limited_box.mdx b/docs/widgets/limited_box.mdx
index 774e1b7d4..645863b1d 100644
--- a/docs/widgets/limited_box.mdx
+++ b/docs/widgets/limited_box.mdx
@@ -3,7 +3,8 @@ title: "Limited Box"
 description: "Documentation for Limited Box"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const limitedBoxPreviewJson = {
   "type": "limitedBox",
   "child": {
@@ -13,7 +14,7 @@ export const limitedBoxPreviewJson = {
     "color": "#FF0000"
   }
 };
-export const limitedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const limitedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac LimitedBox allows you to build the Flutter LimitedBox widget using JSON.
 To know more about the LimitedBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/LimitedBox-class.html).
@@ -67,7 +68,8 @@ StacLimitedBox(
         id="stac"
         src={limitedBoxPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/linear_progress_indicator.mdx b/docs/widgets/linear_progress_indicator.mdx
index 356bedcbf..0a02f116b 100644
--- a/docs/widgets/linear_progress_indicator.mdx
+++ b/docs/widgets/linear_progress_indicator.mdx
@@ -3,7 +3,8 @@ title: "LinearProgressIndicator"
 description: "Documentation for LinearProgressIndicator"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const linearProgressIndicatorPreviewJson = {
   "type": "linearProgressIndicator",
   "color": "#541204",
@@ -16,7 +17,7 @@ export const linearProgressIndicatorPreviewJson = {
     "bottomRight": 10
   }
 };
-export const linearProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const linearProgressIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac LinearProgressIndicator allows you to build a Flutter LinearProgressIndicator widget using JSON. 
 To know more about the LinearProgressIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html).
@@ -77,7 +78,8 @@ StacLinearProgressIndicator(
         id="stac"
         src={linearProgressIndicatorPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/list_tile.mdx b/docs/widgets/list_tile.mdx
index aad0647a5..fcbb6c35f 100644
--- a/docs/widgets/list_tile.mdx
+++ b/docs/widgets/list_tile.mdx
@@ -3,7 +3,8 @@ title: "ListTile"
 description: "Documentation for ListTile"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const listTilePreviewJson = {
   "type": "column",
   "mainAxisAlignment": "start",
@@ -97,7 +98,7 @@ export const listTilePreviewJson = {
     }
   ]
 };
-export const listTilePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const listTilePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac ListTile allows you to build a Flutter ListTile widget using JSON.
 To know more about the list tile widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/ListTile-class.html).
@@ -289,7 +290,8 @@ StacColumn(
         id="stac"
         src={listTilePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/listview.mdx b/docs/widgets/listview.mdx
index 1cfc00168..98ac93d1b 100644
--- a/docs/widgets/listview.mdx
+++ b/docs/widgets/listview.mdx
@@ -3,7 +3,8 @@ title: "List View"
 description: "Documentation for List View"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const listviewPreviewJson = {
   "type": "listView",
   "shrinkWrap": true,
@@ -179,7 +180,7 @@ export const listviewPreviewJson = {
     }
   ]
 };
-export const listviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const listviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac ListView allows you to build a Flutter ListView widget using JSON.
 To know more about the listview widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/ListView-class.html).
@@ -455,7 +456,8 @@ StacListView(
         id="stac"
         src={listviewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/network_widget.mdx b/docs/widgets/network_widget.mdx
index fd5f9183f..65a45b0c2 100644
--- a/docs/widgets/network_widget.mdx
+++ b/docs/widgets/network_widget.mdx
@@ -3,7 +3,8 @@ title: "NetworkWidget"
 description: "Documentation for NetworkWidget"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const networkWidgetPreviewJson = {
   "type": "networkWidget",
   "request": {
@@ -14,7 +15,7 @@ export const networkWidgetPreviewJson = {
     }
   }
 };
-export const networkWidgetPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const networkWidgetPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac NetworkWidget allows you to build a widget that makes a network request and renders a widget based on the response using JSON.
 
@@ -62,7 +63,8 @@ StacNetworkWidget(
         id="stac"
         src={networkWidgetPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/opacity.mdx b/docs/widgets/opacity.mdx
index 62334afe2..9e8cb4d9b 100644
--- a/docs/widgets/opacity.mdx
+++ b/docs/widgets/opacity.mdx
@@ -3,7 +3,8 @@ title: "Opacity"
 description: "Documentation for Opacity"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const opacityPreviewJson = {
   "type": "scaffold",
   "appBar": {
@@ -29,7 +30,7 @@ export const opacityPreviewJson = {
     }
   }
 };
-export const opacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const opacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Opacity allows you to build a Flutter Opacity widget using JSON.
 To know more about the Slider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Opacity-class.html).
@@ -101,7 +102,8 @@ StacScaffold(
         id="stac"
         src={opacityPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/outlined_button.mdx b/docs/widgets/outlined_button.mdx
index 8622b9348..23f09a30d 100644
--- a/docs/widgets/outlined_button.mdx
+++ b/docs/widgets/outlined_button.mdx
@@ -3,7 +3,8 @@ title: "OutlinedButton"
 description: "Documentation for OutlinedButton"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const outlinedButtonPreviewJson = {
   "type": "outlinedButton",
   "onPressed": {},
@@ -21,7 +22,7 @@ export const outlinedButtonPreviewJson = {
     "data": "Click Me!"
   }
 };
-export const outlinedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const outlinedButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Outlined Button allows you to build a Flutter outlined button widget using JSON.
 To know more about the outlined button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/OutlinedButton-class.html).
@@ -87,7 +88,8 @@ StacOutlinedButton(
         id="stac"
         src={outlinedButtonPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/padding.mdx b/docs/widgets/padding.mdx
index 1b8ad062e..0603aa834 100644
--- a/docs/widgets/padding.mdx
+++ b/docs/widgets/padding.mdx
@@ -3,7 +3,8 @@ title: "Padding"
 description: "Documentation for Padding"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const paddingPreviewJson = {
   "type": "padding",
   "padding": {
@@ -18,7 +19,7 @@ export const paddingPreviewJson = {
     "width": 700
   }
 };
-export const paddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const paddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Padding allows you to build a Flutter Padding widget using JSON. 
 To know more about the padding widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Padding-class.html).
@@ -74,7 +75,8 @@ StacPadding(
         id="stac"
         src={paddingPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/page_view.mdx b/docs/widgets/page_view.mdx
index e21f8606f..da05a2685 100644
--- a/docs/widgets/page_view.mdx
+++ b/docs/widgets/page_view.mdx
@@ -3,7 +3,8 @@ title: "PageView"
 description: "Documentation for PageView"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const pageViewPreviewJson = {
   "type": "pageView",
   "children": [
@@ -54,7 +55,7 @@ export const pageViewPreviewJson = {
     }
   ]
 };
-export const pageViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const pageViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac PageView allows you to build a Flutter PageView widget using JSON.
 To know more about the PageView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/PageView-class.html).
@@ -180,7 +181,8 @@ StacPageView(
         id="stac"
         src={pageViewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/placeholder.mdx b/docs/widgets/placeholder.mdx
index 217715adc..4b09bdb78 100644
--- a/docs/widgets/placeholder.mdx
+++ b/docs/widgets/placeholder.mdx
@@ -3,7 +3,8 @@ title: "Placeholder"
 description: "Documentation for Placeholder"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const placeholderPreviewJson = {
   "type": "placeholder",
   "color": "#455A64",
@@ -11,7 +12,7 @@ export const placeholderPreviewJson = {
   "fallbackWidth": 400,
   "fallbackHeight": 400
 };
-export const placeholderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const placeholderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac `Placeholder` widget allows you to build the Flutter Placeholder widget using JSON.
 is used to draw a box that serves as a placeholder in your Flutter UI. It is typically used to represent areas where widgets are yet to be added or for debugging layout constraints.
@@ -66,7 +67,8 @@ StacPlaceholder(
         id="stac"
         src={placeholderPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/positioned.mdx b/docs/widgets/positioned.mdx
index 2e2b826f8..5e1ff7acf 100644
--- a/docs/widgets/positioned.mdx
+++ b/docs/widgets/positioned.mdx
@@ -3,7 +3,8 @@ title: "Positioned"
 description: "Documentation for Positioned"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const positionedPreviewJson = {
   "type": "stack",
   "children": [
@@ -20,7 +21,7 @@ export const positionedPreviewJson = {
     }
   ]
 };
-export const positionedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const positionedPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Positioned widget controls where a child of a [Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html) is positioned. It corresponds to Flutter's Positioned widget and allows precise positioning using coordinates and optional sizing constraints. Use it with JSON to declare positioned children inside a Stack.
 
@@ -85,7 +86,8 @@ StacPositioned(
         id="stac"
         src={positionedPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/radio_group.mdx b/docs/widgets/radio_group.mdx
index 0a16c78d3..dbbf190c8 100644
--- a/docs/widgets/radio_group.mdx
+++ b/docs/widgets/radio_group.mdx
@@ -3,7 +3,8 @@ title: "RadioGroup"
 description: "Documentation for RadioGroup"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const radioGroupPreviewJson = {
   "type": "radioGroup",
   "child": {
@@ -63,7 +64,7 @@ export const radioGroupPreviewJson = {
     ]
   }
 };
-export const radioGroupPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const radioGroupPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac RadioGroup allows you to build Flutter Radio widgets using JSON. 
 To know more about the Radio widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Radio-class.html).
@@ -223,7 +224,8 @@ StacRadioGroup(
         id="stac"
         src={radioGroupPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/refresh_indicator.mdx b/docs/widgets/refresh_indicator.mdx
index 8ced9689c..01b42bb4e 100644
--- a/docs/widgets/refresh_indicator.mdx
+++ b/docs/widgets/refresh_indicator.mdx
@@ -3,7 +3,8 @@ title: "RefreshIndicator"
 description: "Documentation for RefreshIndicator"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const refreshIndicatorPreviewJson = {
   "type": "refreshIndicator",
   "onRefresh": {
@@ -46,7 +47,7 @@ export const refreshIndicatorPreviewJson = {
     ]
   }
 };
-export const refreshIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const refreshIndicatorPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac RefreshIndicator allows you to build a Flutter RefreshIndicator widget using JSON.
 To know more about the RefreshIndicator widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/RefreshIndicator-class.html).
@@ -144,7 +145,8 @@ StacRefreshIndicator(
         id="stac"
         src={refreshIndicatorPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/row.mdx b/docs/widgets/row.mdx
index 96bdbc9b0..ece5fd75c 100644
--- a/docs/widgets/row.mdx
+++ b/docs/widgets/row.mdx
@@ -3,7 +3,8 @@ title: "Row"
 description: "Documentation for Row"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const rowPreviewJson = {
   "type": "row",
   "mainAxisAlignment": "center",
@@ -27,7 +28,7 @@ export const rowPreviewJson = {
     }
   ]
 };
-export const rowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const rowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Row allows you to build a Flutter Row widget using JSON.
 To know more about the row widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Row-class.html).
@@ -108,7 +109,8 @@ StacRow(
         id="stac"
         src={rowPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/safe_area.mdx b/docs/widgets/safe_area.mdx
index 704421f7b..3c2cf40dd 100644
--- a/docs/widgets/safe_area.mdx
+++ b/docs/widgets/safe_area.mdx
@@ -3,7 +3,8 @@ title: "SafeArea"
 description: "Documentation for SafeArea"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const safeAreaPreviewJson = {
   "type": "safeArea",
   "child": {
@@ -15,7 +16,7 @@ export const safeAreaPreviewJson = {
     }
   }
 };
-export const safeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const safeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac `SafeArea` allows you to build the Flutter SafeArea widget using JSON. 
 To know more about the SafeArea widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/SafeArea-class.html).
@@ -70,7 +71,8 @@ StacSafeArea(
         id="stac"
         src={safeAreaPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/scaffold.mdx b/docs/widgets/scaffold.mdx
index e876e6f0f..2516f6937 100644
--- a/docs/widgets/scaffold.mdx
+++ b/docs/widgets/scaffold.mdx
@@ -3,7 +3,8 @@ title: "Scaffold"
 description: "Documentation for Scaffold"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const scaffoldPreviewJson = {
   "type": "scaffold",
   "appBar": {
@@ -49,7 +50,7 @@ export const scaffoldPreviewJson = {
     }
   }
 };
-export const scaffoldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const scaffoldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Scaffold allows you to build a Flutter scaffold widget using JSON.
 To know more about the scaffold widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Scaffold-class.html).
@@ -169,7 +170,8 @@ StacScaffold(
         id="stac"
         src={scaffoldPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/selectable_text.mdx b/docs/widgets/selectable_text.mdx
index 9ac73baaf..cf78bb553 100644
--- a/docs/widgets/selectable_text.mdx
+++ b/docs/widgets/selectable_text.mdx
@@ -3,7 +3,8 @@ title: "SelectableText"
 description: "Documentation for SelectableText"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const selectableTextPreviewJson = {
   "type": "selectableText",
   "data": "This is a selectable text",
@@ -14,7 +15,7 @@ export const selectableTextPreviewJson = {
   "showCursor": true,
   "cursorColor": "#FF0000"
 };
-export const selectableTextPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const selectableTextPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac SelectableText allows you to build the Flutter SelectableText widget using JSON.
 To know more about the SelectableText widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/SelectableText-class.html).
@@ -85,7 +86,8 @@ StacSelectableText(
         id="stac"
         src={selectableTextPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/set_value.mdx b/docs/widgets/set_value.mdx
index 7939f32f8..d246114dc 100644
--- a/docs/widgets/set_value.mdx
+++ b/docs/widgets/set_value.mdx
@@ -3,7 +3,8 @@ title: "Set Value"
 description: "Documentation for Set Value"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const setValuePreviewJson = {
   "type": "setValue",
   "values": [
@@ -21,7 +22,7 @@ export const setValuePreviewJson = {
     "data": "Welcome!"
   }
 };
-export const setValuePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const setValuePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SetValue widget allows you to set multiple key-value pairs in the application's state and optionally render a child widget. It's useful for managing application state through JSON configuration.
 
@@ -81,7 +82,8 @@ StacSetValue(
         id="stac"
         src={setValuePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/single_child_scroll_view.mdx b/docs/widgets/single_child_scroll_view.mdx
index 6ba88bafb..a7857b0cc 100644
--- a/docs/widgets/single_child_scroll_view.mdx
+++ b/docs/widgets/single_child_scroll_view.mdx
@@ -3,7 +3,8 @@ title: "SingleChildScrollView"
 description: "Documentation for SingleChildScrollView"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const singleChildScrollViewPreviewJson = {
   "type": "singleChildScrollView",
   "child": {
@@ -28,7 +29,7 @@ export const singleChildScrollViewPreviewJson = {
     ]
   }
 };
-export const singleChildScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const singleChildScrollViewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SingleChildScrollView allows you to build a Flutter SingleChildScrollView widget using JSON.
 To know more about the SingleChildScrollView widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html).
@@ -103,7 +104,8 @@ StacSingleChildScrollView(
         id="stac"
         src={singleChildScrollViewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sized_box.mdx b/docs/widgets/sized_box.mdx
index 6a4237fbe..1835276c5 100644
--- a/docs/widgets/sized_box.mdx
+++ b/docs/widgets/sized_box.mdx
@@ -3,12 +3,13 @@ title: "SizedBox"
 description: "Documentation for SizedBox"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sizedBoxPreviewJson = {
   "type": "sizedBox",
   "height": 25
 };
-export const sizedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sizedBoxPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SizedBox allows you to build a Flutter SizedBox widget using JSON.
 To know more about the sizedBox widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/SizedBox-class.html).
@@ -47,7 +48,8 @@ StacSizedBox(height: 25)
         id="stac"
         src={sizedBoxPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/slider.mdx b/docs/widgets/slider.mdx
index 06b7d491c..b42e5754a 100644
--- a/docs/widgets/slider.mdx
+++ b/docs/widgets/slider.mdx
@@ -3,7 +3,8 @@ title: "Slider"
 description: "Documentation for Slider"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliderPreviewJson = {
   "type": "scaffold",
   "appBar": {
@@ -28,7 +29,7 @@ export const sliderPreviewJson = {
     }
   }
 };
-export const sliderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliderPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Slider allows you to build a Flutter Slider widget using JSON. 
 To know more about the Slider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Slider-class.html).
@@ -118,7 +119,8 @@ StacScaffold(
         id="stac"
         src={sliderPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_app_bar.mdx b/docs/widgets/sliver_app_bar.mdx
index a0c039b8a..9eb0e8a1b 100644
--- a/docs/widgets/sliver_app_bar.mdx
+++ b/docs/widgets/sliver_app_bar.mdx
@@ -3,7 +3,8 @@ title: "SliverAppBar"
 description: "Documentation for SliverAppBar"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverAppBarPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -40,7 +41,7 @@ export const sliverAppBarPreviewJson = {
     ]
   }
 };
-export const sliverAppBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverAppBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverAppBar allows you to build a Flutter sliver app bar widget using JSON.
 To know more about the app bar widget in Flutter, refer to
@@ -146,7 +147,8 @@ StacSliverAppBar(
         id="stac"
         src={sliverAppBarPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_fill_remaining.mdx b/docs/widgets/sliver_fill_remaining.mdx
index 1c40e72dc..8f3f15930 100644
--- a/docs/widgets/sliver_fill_remaining.mdx
+++ b/docs/widgets/sliver_fill_remaining.mdx
@@ -3,7 +3,8 @@ title: "SliverFillRemaining"
 description: "Documentation for SliverFillRemaining"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverFillRemainingPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -23,7 +24,7 @@ export const sliverFillRemainingPreviewJson = {
     ]
   }
 };
-export const sliverFillRemainingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverFillRemainingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverFillRemaining allows you to build a Flutter `SliverFillRemaining`
 widget using JSON.
@@ -86,7 +87,8 @@ const StacSliverFillRemaining(
         id="stac"
         src={sliverFillRemainingPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_grid.mdx b/docs/widgets/sliver_grid.mdx
index 8c4670dc7..82e7edabb 100644
--- a/docs/widgets/sliver_grid.mdx
+++ b/docs/widgets/sliver_grid.mdx
@@ -3,7 +3,8 @@ title: "SliverGrid"
 description: "Documentation for SliverGrid"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverGridPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -81,7 +82,7 @@ export const sliverGridPreviewJson = {
     ]
   }
 };
-export const sliverGridPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverGridPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac **SliverGrid** allows you to build a Flutter `SliverGrid` widget using JSON.
 It displays its children in a two-dimensional scrollable grid within a sliver
@@ -256,7 +257,8 @@ const StacSliverGrid(
         id="stac"
         src={sliverGridPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_list.mdx b/docs/widgets/sliver_list.mdx
index d87f4810a..3f4fda958 100644
--- a/docs/widgets/sliver_list.mdx
+++ b/docs/widgets/sliver_list.mdx
@@ -3,7 +3,8 @@ title: "SliverList"
 description: "Documentation for SliverList"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverListPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -53,7 +54,7 @@ export const sliverListPreviewJson = {
     ]
   }
 };
-export const sliverListPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverListPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverList allows you to build a Flutter sliver list widget using JSON.
 It displays its children in a linear, scrollable list within a sliver context.
@@ -173,7 +174,8 @@ const StacSliverList(
         id="stac"
         src={sliverListPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_opacity.mdx b/docs/widgets/sliver_opacity.mdx
index 714fb5934..da3f6d872 100644
--- a/docs/widgets/sliver_opacity.mdx
+++ b/docs/widgets/sliver_opacity.mdx
@@ -3,7 +3,8 @@ title: "SliverOpacity"
 description: "Documentation for SliverOpacity"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverOpacityPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -31,7 +32,7 @@ export const sliverOpacityPreviewJson = {
     ]
   }
 };
-export const sliverOpacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverOpacityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverOpacity allows you to apply opacity to an entire sliver inside a `CustomScrollView`.
 
@@ -100,7 +101,8 @@ StacSliverOpacity(
         id="stac"
         src={sliverOpacityPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_padding.mdx b/docs/widgets/sliver_padding.mdx
index 804b57f64..2fb0fbe10 100644
--- a/docs/widgets/sliver_padding.mdx
+++ b/docs/widgets/sliver_padding.mdx
@@ -3,7 +3,8 @@ title: "SliverPadding"
 description: "Documentation for SliverPadding"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverPaddingPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -35,7 +36,7 @@ export const sliverPaddingPreviewJson = {
     ]
   }
 };
-export const sliverPaddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverPaddingPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverPadding allows you to inset a sliver widget by a given padding using JSON. It is typically used inside a `CustomScrollView`.
 To know more about the sliver padding widget in Flutter, refer to
@@ -107,7 +108,8 @@ StacSliverPadding(
         id="stac"
         src={sliverPaddingPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_safe_area.mdx b/docs/widgets/sliver_safe_area.mdx
index e05e19089..ea10204d2 100644
--- a/docs/widgets/sliver_safe_area.mdx
+++ b/docs/widgets/sliver_safe_area.mdx
@@ -3,7 +3,8 @@ title: "SliverSafeArea"
 description: "Documentation for SliverSafeArea"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverSafeAreaPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -23,7 +24,7 @@ export const sliverSafeAreaPreviewJson = {
     ]
   }
 };
-export const sliverSafeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverSafeAreaPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverSafeArea allows you to build a Flutter sliver safe area widget using JSON.  
 To know more about the safe area widget in Flutter, refer to  
@@ -78,7 +79,8 @@ StacSliverSafeArea(
         id="stac"
         src={sliverSafeAreaPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_to_box_adapter.mdx b/docs/widgets/sliver_to_box_adapter.mdx
index df52a4d36..2c2f26285 100644
--- a/docs/widgets/sliver_to_box_adapter.mdx
+++ b/docs/widgets/sliver_to_box_adapter.mdx
@@ -3,7 +3,8 @@ title: "SliverToBoxAdapter"
 description: "A sliver that contains a single box widget."
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverToBoxAdapterPreviewJson = {
   "type": "sliverPadding",
   "padding": 16,
@@ -27,7 +28,7 @@ export const sliverToBoxAdapterPreviewJson = {
     }
   }
 };
-export const sliverToBoxAdapterPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverToBoxAdapterPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverToBoxAdapter allows you to build a Flutter sliver-to-box-adapter widget using JSON. It creates a sliver that contains a single box widget.
 To know more about the sliver-to-box-adapter widget in Flutter, refer to
@@ -98,7 +99,8 @@ StacSliverPadding(
         id="stac"
         src={sliverToBoxAdapterPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/sliver_visibility.mdx b/docs/widgets/sliver_visibility.mdx
index 5ac97e5e7..83e3320ff 100644
--- a/docs/widgets/sliver_visibility.mdx
+++ b/docs/widgets/sliver_visibility.mdx
@@ -3,7 +3,8 @@ title: "SliverVisibility"
 description: "Documentation for SliverVisibility"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const sliverVisibilityPreviewJson = {
   "type": "scaffold",
   "body": {
@@ -31,7 +32,7 @@ export const sliverVisibilityPreviewJson = {
     ]
   }
 };
-export const sliverVisibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const sliverVisibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac SliverVisibility allows you to conditionally show or hide a sliver
 inside a `CustomScrollView`.
@@ -107,7 +108,8 @@ StacSliverVisibility(
         id="stac"
         src={sliverVisibilityPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/spacer.mdx b/docs/widgets/spacer.mdx
index 167e9bf49..dadac476f 100644
--- a/docs/widgets/spacer.mdx
+++ b/docs/widgets/spacer.mdx
@@ -3,12 +3,13 @@ title: "Spacer"
 description: "Documentation for Spacer"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const spacerPreviewJson = {
   "type": "spacer",
   "flex": 2
 };
-export const spacerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const spacerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Spacer allows you to build a Flutter spacer widget using JSON.
 To know more about the spacer widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Spacer-class.html).
@@ -45,7 +46,8 @@ StacSpacer(flex: 2)
         id="stac"
         src={spacerPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/stack.mdx b/docs/widgets/stack.mdx
index d9633e16b..70d65481b 100644
--- a/docs/widgets/stack.mdx
+++ b/docs/widgets/stack.mdx
@@ -3,7 +3,8 @@ title: "Stack"
 description: "Documentation for Stack"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const stackPreviewJson = {
   "type": "stack",
   "alignment": "center",
@@ -23,7 +24,7 @@ export const stackPreviewJson = {
     }
   ]
 };
-export const stackPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const stackPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Stack allows you to build a Flutter stack widget using JSON.
 To know more about the stack widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Stack-class.html).
@@ -88,7 +89,8 @@ StacStack(
         id="stac"
         src={stackPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/switch.mdx b/docs/widgets/switch.mdx
index 9ffe6b70c..5d92883c0 100644
--- a/docs/widgets/switch.mdx
+++ b/docs/widgets/switch.mdx
@@ -3,13 +3,14 @@ title: "Switch"
 description: "Documentation for Switch"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const switchPreviewJson = {
   "type": "switch",
   "switchType": "cupertino",
   "value": true
 };
-export const switchPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const switchPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac `Switch` widget allows you to build the Flutter Switch widget using JSON.
 To know more about the Switch widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Switch-class.html).
@@ -75,7 +76,8 @@ StacSwitch(
         id="stac"
         src={switchPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/tab_bar.mdx b/docs/widgets/tab_bar.mdx
index ed2a18619..c6d913639 100644
--- a/docs/widgets/tab_bar.mdx
+++ b/docs/widgets/tab_bar.mdx
@@ -3,7 +3,8 @@ title: "TabBar"
 description: "Documentation for TabBar"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const tabBarPreviewJson = {
   "type": "defaultTabController",
   "length": 3,
@@ -52,7 +53,7 @@ export const tabBarPreviewJson = {
     }
   }
 };
-export const tabBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const tabBarPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac TabBar allows you to build a Flutter TabBar widget using JSON.
 To know more about the TabBar widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TabBar-class.html).
@@ -216,7 +217,8 @@ StacDefaultTabController(
         id="stac"
         src={tabBarPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/table.mdx b/docs/widgets/table.mdx
index e578dea33..4ce0e812d 100644
--- a/docs/widgets/table.mdx
+++ b/docs/widgets/table.mdx
@@ -3,7 +3,8 @@ title: "Table"
 description: "Documentation for Table"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const tablePreviewJson = {
   "type": "table",
   "columnWidths": {
@@ -129,7 +130,7 @@ export const tablePreviewJson = {
     }
   ]
 };
-export const tablePreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const tablePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 StacTable allows you to build the Flutter Table widget using JSON.
 To know more about the Table widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Table-class.html).
@@ -355,7 +356,8 @@ StacTable(
         id="stac"
         src={tablePreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/table_cell.mdx b/docs/widgets/table_cell.mdx
index fbd2ec2dc..085b38977 100644
--- a/docs/widgets/table_cell.mdx
+++ b/docs/widgets/table_cell.mdx
@@ -3,7 +3,8 @@ title: "TableCell"
 description: "Documentation for TableCell"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const tableCellPreviewJson = {
   "type": "tableCell",
   "verticalAlignment": "top",
@@ -20,7 +21,7 @@ export const tableCellPreviewJson = {
     }
   }
 };
-export const tableCellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const tableCellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 StacTableCell allows you to define the Flutter TableCell widget using JSON.
 To know more about the TableCell widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/TableCell-class.html).
@@ -78,7 +79,8 @@ StacTableCell(
         id="stac"
         src={tableCellPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/table_row.mdx b/docs/widgets/table_row.mdx
index 6e7af739a..85dc591ce 100644
--- a/docs/widgets/table_row.mdx
+++ b/docs/widgets/table_row.mdx
@@ -3,7 +3,8 @@ title: "TableRow"
 description: "Documentation for TableRow"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const tableRowPreviewJson = {
   "type": "tableRow",
   "children": [
@@ -54,7 +55,7 @@ export const tableRowPreviewJson = {
     }
   ]
 };
-export const tableRowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const tableRowPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 StacTableRow allows you to define the Flutter TableRow widget using JSON.
 To know more about the TableRow widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/TableRow-class.html).
@@ -162,7 +163,8 @@ StacTableRow(
         id="stac"
         src={tableRowPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/text.mdx b/docs/widgets/text.mdx
index 479c4370b..8171d6361 100644
--- a/docs/widgets/text.mdx
+++ b/docs/widgets/text.mdx
@@ -3,7 +3,8 @@ title: "Text"
 description: "Documentation for Text"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const textPreviewJson = {
   "type": "text",
   "data": "Hello, World!",
@@ -12,7 +13,7 @@ export const textPreviewJson = {
     "fontSize": 24
   }
 };
-export const textPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const textPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Text allows you to build a Flutter Text widget using JSON.
 To know more about the text widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Text-class.html).
@@ -71,7 +72,8 @@ StacText(
         id="stac"
         src={textPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/text_button.mdx b/docs/widgets/text_button.mdx
index e1d50919b..30721af73 100644
--- a/docs/widgets/text_button.mdx
+++ b/docs/widgets/text_button.mdx
@@ -3,7 +3,8 @@ title: "TextButton"
 description: "Documentation for TextButton"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const textButtonPreviewJson = {
   "type": "textButton",
   "onPressed": {},
@@ -21,7 +22,7 @@ export const textButtonPreviewJson = {
     "data": "Click Me!"
   }
 };
-export const textButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const textButtonPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Text Button allows you to build a Flutter text button widget using JSON.
 To know more about the text button widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextButton-class.html).
@@ -88,7 +89,8 @@ StacTextButton(
         id="stac"
         src={textButtonPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/text_field.mdx b/docs/widgets/text_field.mdx
index 7f9ad12c0..e1d02237a 100644
--- a/docs/widgets/text_field.mdx
+++ b/docs/widgets/text_field.mdx
@@ -3,7 +3,8 @@ title: "TextField"
 description: "Documentation for TextField"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const textFieldPreviewJson = {
   "type": "textField",
   "initialValue": "Enter text here",
@@ -18,7 +19,7 @@ export const textFieldPreviewJson = {
   "obscureText": false,
   "maxLength": 50
 };
-export const textFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const textFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac TextField allows you to build a Flutter text field widget using JSON. To know more about the text field widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextField-class.html).
 
@@ -95,7 +96,8 @@ StacTextField(
         id="stac"
         src={textFieldPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/text_form_field.mdx b/docs/widgets/text_form_field.mdx
index 1bba0b710..5e74ddd22 100644
--- a/docs/widgets/text_form_field.mdx
+++ b/docs/widgets/text_form_field.mdx
@@ -3,7 +3,8 @@ title: "TextFormField"
 description: "Documentation for TextFormField"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const textFormFieldPreviewJson = {
   "type": "textFormField",
   "id": "email",
@@ -30,7 +31,7 @@ export const textFormFieldPreviewJson = {
     }
   }
 };
-export const textFormFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const textFormFieldPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac TextFormField allows you to build a Flutter TextFormField widget using JSON.
 To know more about the TextFormField widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/TextFormField-class.html).
@@ -138,7 +139,8 @@ StacTextFormField(
         id="stac"
         src={textFormFieldPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/tool_tip.mdx b/docs/widgets/tool_tip.mdx
index ee2d16c34..52e69a7e8 100644
--- a/docs/widgets/tool_tip.mdx
+++ b/docs/widgets/tool_tip.mdx
@@ -3,7 +3,8 @@ title: "Tooltip"
 description: "Documentation for Tooltip"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const toolTipPreviewJson = {
   "type": "tooltip",
   "message": "This is a basic tooltip",
@@ -13,7 +14,7 @@ export const toolTipPreviewJson = {
     "size": 32
   }
 };
-export const toolTipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const toolTipPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The **Stac Tooltip** allows you to build a Flutter `Tooltip` widget using JSON. 
 To learn more about Flutter’s Tooltip widget, refer to the [official Flutter documentation](https://api.flutter.dev/flutter/material/Tooltip-class.html).
@@ -81,7 +82,8 @@ StacTooltip(
         id="stac"
         src={toolTipPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/vertical_divider.mdx b/docs/widgets/vertical_divider.mdx
index f3e198c44..674621b64 100644
--- a/docs/widgets/vertical_divider.mdx
+++ b/docs/widgets/vertical_divider.mdx
@@ -3,7 +3,8 @@ title: "Vertical Divider"
 description: "Documentation for Vertical Divider"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const verticalDividerPreviewJson = {
   "type": "verticalDivider",
   "width": 20,
@@ -12,7 +13,7 @@ export const verticalDividerPreviewJson = {
   "endIndent": 10,
   "color": "#21814C"
 };
-export const verticalDividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const verticalDividerPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Vertical Divider allows you to build a Flutter vertical divider widget using JSON.
 To know more about the vertical divider widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/VerticalDivider-class.html).
@@ -63,7 +64,8 @@ StacVerticalDivider(
         id="stac"
         src={verticalDividerPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/visibility.mdx b/docs/widgets/visibility.mdx
index c8d1d3fc9..81d5b53a0 100644
--- a/docs/widgets/visibility.mdx
+++ b/docs/widgets/visibility.mdx
@@ -3,7 +3,8 @@ title: "Visibility"
 description: "Documentation for Visibility"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const visibilityPreviewJson = {
   "type": "visibility",
   "child": {
@@ -12,7 +13,7 @@ export const visibilityPreviewJson = {
   },
   "visible": true
 };
-export const visibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const visibilityPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 Stac Visibility allows you to build the Flutter Visibility widget using JSON.
 To know more about the Visibility widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Visibility-class.html).
@@ -69,7 +70,8 @@ StacVisibility(
         id="stac"
         src={visibilityPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/webview.mdx b/docs/widgets/webview.mdx
index 65899d07f..30fbd468c 100644
--- a/docs/widgets/webview.mdx
+++ b/docs/widgets/webview.mdx
@@ -3,12 +3,13 @@ title: "WebView"
 description: "Documentation for WebView"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const webviewPreviewJson = {
   "type": "webView",
   "url": "https://github.com/StacDev/stac"
 };
-export const webviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const webviewPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac WebView allows you to display WebView widget using JSON in your app. It is based on the [webview_flutter](https://pub.dev/packages/webview_flutter) plugin.
 
@@ -81,7 +82,8 @@ StacWebView(
         id="stac"
         src={webviewPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/docs/widgets/wrap.mdx b/docs/widgets/wrap.mdx
index d3f016cfa..7b1f843e7 100644
--- a/docs/widgets/wrap.mdx
+++ b/docs/widgets/wrap.mdx
@@ -3,7 +3,8 @@ title: "Wrap"
 description: "Documentation for Wrap"
 ---
 
-export const PLAYGROUND_BASE_URL = "https://playground.stac.dev";
+import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
+
 export const wrapPreviewJson = {
   "type": "wrap",
   "spacing": 8,
@@ -75,7 +76,7 @@ export const wrapPreviewJson = {
     }
   ]
 };
-export const wrapPreviewSrc = `${PLAYGROUND_BASE_URL}/embed?showTopBar=false&showEditor=false`;
+export const wrapPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
 The Stac Wrap allows you to build a Flutter Wrap widget using JSON.
 To know more about the wrap widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Wrap-class.html).
@@ -217,7 +218,8 @@ StacWrap(
         id="stac"
         src={wrapPreviewSrc}
         title="Stac Playground"
-        className="w-full h-[640px] rounded-xl border-0"
+        className="w-full rounded-xl border-0"
+        style={{ height: "640px" }}
         loading="lazy"
         onLoad={(event) => {
           const iframe = event.currentTarget;
diff --git a/examples/counter_example/pubspec.lock b/examples/counter_example/pubspec.lock
index 24d756a89..5062314b0 100644
--- a/examples/counter_example/pubspec.lock
+++ b/examples/counter_example/pubspec.lock
@@ -784,34 +784,30 @@ packages:
   stac:
     dependency: "direct main"
     description:
-      name: stac
-      sha256: f1a53751157e7882d7218765b6e13016aa345007f2c6b48520c6edb32b4d02d3
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_core:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_core
-      sha256: fd7e618b62b8ea136ec56837a466ab3f639a124e371d18f9d75af8631f4e2980
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_core"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_framework:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_framework
-      sha256: e75d1a1b2fd46c65acbc6ce174c7272aef4eb4020722f09c35fce2b3dadf858e
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_framework"
+      relative: true
+    source: path
     version: "1.0.0"
   stac_logger:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_logger
-      sha256: bc3c1cc486d59d2378c1e18bfd9bfa078be564b58d4ae2b3898633c05a02df26
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_logger"
+      relative: true
+    source: path
     version: "1.1.0"
   stack_trace:
     dependency: transitive
@@ -990,5 +986,5 @@ packages:
     source: hosted
     version: "3.1.3"
 sdks:
-  dart: ">=3.9.2 <4.0.0"
+  dart: ">=3.9.0 <4.0.0"
   flutter: ">=3.35.0"
diff --git a/examples/movie_app/pubspec.lock b/examples/movie_app/pubspec.lock
index 48b37aed9..7ed7c023e 100644
--- a/examples/movie_app/pubspec.lock
+++ b/examples/movie_app/pubspec.lock
@@ -712,34 +712,30 @@ packages:
   stac:
     dependency: "direct main"
     description:
-      name: stac
-      sha256: f1a53751157e7882d7218765b6e13016aa345007f2c6b48520c6edb32b4d02d3
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_core:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_core
-      sha256: fd7e618b62b8ea136ec56837a466ab3f639a124e371d18f9d75af8631f4e2980
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_core"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_framework:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_framework
-      sha256: e75d1a1b2fd46c65acbc6ce174c7272aef4eb4020722f09c35fce2b3dadf858e
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_framework"
+      relative: true
+    source: path
     version: "1.0.0"
   stac_logger:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_logger
-      sha256: bc3c1cc486d59d2378c1e18bfd9bfa078be564b58d4ae2b3898633c05a02df26
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_logger"
+      relative: true
+    source: path
     version: "1.1.0"
   stack_trace:
     dependency: transitive
@@ -910,5 +906,5 @@ packages:
     source: hosted
     version: "3.1.3"
 sdks:
-  dart: ">=3.9.2 <4.0.0"
+  dart: ">=3.9.0 <4.0.0"
   flutter: ">=3.35.0"
diff --git a/examples/stac_gallery/pubspec.lock b/examples/stac_gallery/pubspec.lock
index 820e330ef..ff6d69155 100644
--- a/examples/stac_gallery/pubspec.lock
+++ b/examples/stac_gallery/pubspec.lock
@@ -776,42 +776,37 @@ packages:
   stac:
     dependency: "direct main"
     description:
-      name: stac
-      sha256: f1a53751157e7882d7218765b6e13016aa345007f2c6b48520c6edb32b4d02d3
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_core:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_core
-      sha256: fd7e618b62b8ea136ec56837a466ab3f639a124e371d18f9d75af8631f4e2980
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_core"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_framework:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_framework
-      sha256: e75d1a1b2fd46c65acbc6ce174c7272aef4eb4020722f09c35fce2b3dadf858e
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_framework"
+      relative: true
+    source: path
     version: "1.0.0"
   stac_logger:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_logger
-      sha256: bc3c1cc486d59d2378c1e18bfd9bfa078be564b58d4ae2b3898633c05a02df26
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_logger"
+      relative: true
+    source: path
     version: "1.1.0"
   stac_webview:
     dependency: "direct main"
     description:
-      name: stac_webview
-      sha256: "6cf9a59a8b7b9aea85e599777a57618365b45f544d0a66916995a9dd4b2ee379"
-      url: "https://pub.dev"
-    source: hosted
+      path: "../../packages/stac_webview"
+      relative: true
+    source: path
     version: "1.0.0"
   stack_trace:
     dependency: transitive
@@ -1022,5 +1017,5 @@ packages:
     source: hosted
     version: "3.1.3"
 sdks:
-  dart: ">=3.9.2 <4.0.0"
+  dart: ">=3.9.0 <4.0.0"
   flutter: ">=3.35.0"
diff --git a/packages/stac_cli/pubspec.lock b/packages/stac_cli/pubspec.lock
index 20428a541..ea1f4bd3b 100644
--- a/packages/stac_cli/pubspec.lock
+++ b/packages/stac_cli/pubspec.lock
@@ -241,11 +241,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
-  flutter:
-    dependency: transitive
-    description: flutter
-    source: sdk
-    version: "0.0.0"
   frontend_server_client:
     dependency: transitive
     description:
@@ -358,14 +353,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.12.19"
-  material_color_utilities:
-    dependency: transitive
-    description:
-      name: material_color_utilities
-      sha256: "9c337007e82b1889149c82ed242ed1cb24a66044e30979c44912381e9be4c48b"
-      url: "https://pub.dev"
-    source: hosted
-    version: "0.13.0"
   meta:
     dependency: transitive
     description:
@@ -462,11 +449,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.0"
-  sky_engine:
-    dependency: transitive
-    description: flutter
-    source: sdk
-    version: "0.0.0"
   source_gen:
     dependency: transitive
     description:
@@ -510,18 +492,16 @@ packages:
   stac_core:
     dependency: "direct main"
     description:
-      name: stac_core
-      sha256: fd7e618b62b8ea136ec56837a466ab3f639a124e371d18f9d75af8631f4e2980
-      url: "https://pub.dev"
-    source: hosted
+      path: "../stac_core"
+      relative: true
+    source: path
     version: "1.4.0"
   stac_logger:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: stac_logger
-      sha256: bc3c1cc486d59d2378c1e18bfd9bfa078be564b58d4ae2b3898633c05a02df26
-      url: "https://pub.dev"
-    source: hosted
+      path: "../stac_logger"
+      relative: true
+    source: path
     version: "1.1.0"
   stack_trace:
     dependency: transitive
@@ -603,14 +583,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
-  vector_math:
-    dependency: transitive
-    description:
-      name: vector_math
-      sha256: d530bd74fea330e6e364cda7a85019c434070188383e1cd8d9777ee586914c5b
-      url: "https://pub.dev"
-    source: hosted
-    version: "2.2.0"
   vm_service:
     dependency: transitive
     description:
@@ -677,4 +649,3 @@ packages:
     version: "3.1.3"
 sdks:
   dart: ">=3.10.0 <4.0.0"
-  flutter: ">=1.17.0"

From 5318c190eba9eec97a49b01a7a19c703df9a783f Mon Sep 17 00:00:00 2001
From: Divyanshu Bhargava <divyanshub024@gmail.com>
Date: Tue, 28 Apr 2026 19:37:16 +0530
Subject: [PATCH 4/6] docs: update widget documentation t

- Refactored multiple widget documentation files to adopt a consistent scaffold structure for JSON representations.
- Updated examples for Align, Positioned, SliverAppBar, SliverFillRemaining, SliverGrid, SliverOpacity, SliverPadding, SliverSafeArea, and SliverVisibility to enhance clarity and usability.
- Adjusted the PLAYGROUND_BASE_URL for better accessibility in examples.
---
 docs/snippets/playground_base.mdx      |   2 +-
 docs/widgets/align.mdx                 |  10 +-
 docs/widgets/ink_well.mdx              |   1 +
 docs/widgets/positioned.mdx            |  23 +++--
 docs/widgets/sliver_app_bar.mdx        |  61 ++++++-----
 docs/widgets/sliver_fill_remaining.mdx |  24 +++--
 docs/widgets/sliver_grid.mdx           | 138 +++++++++++++------------
 docs/widgets/sliver_opacity.mdx        |  36 ++++---
 docs/widgets/sliver_padding.mdx        |  42 +++++---
 docs/widgets/sliver_safe_area.mdx      |  24 +++--
 docs/widgets/sliver_visibility.mdx     |  36 ++++---
 11 files changed, 227 insertions(+), 170 deletions(-)

diff --git a/docs/snippets/playground_base.mdx b/docs/snippets/playground_base.mdx
index ee48430f4..3c27456ff 100644
--- a/docs/snippets/playground_base.mdx
+++ b/docs/snippets/playground_base.mdx
@@ -1 +1 @@
-export const PLAYGROUND_BASE_URL = "http://localhost:49794";
+export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";
\ No newline at end of file
diff --git a/docs/widgets/align.mdx b/docs/widgets/align.mdx
index 2f3d96ed8..66eb6071f 100644
--- a/docs/widgets/align.mdx
+++ b/docs/widgets/align.mdx
@@ -7,7 +7,6 @@ import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
 
 export const alignPreviewJson = {
   "type": "align",
-  "alignment": "topEnd",
   "child": {
     "type": "container",
     "color": "#FC5632",
@@ -48,10 +47,8 @@ To know more about the align widget in Flutter, refer to the [official documenta
 
 ```dart
 StacAlign(
-  alignment: StacAlignment.topEnd,
   child: StacContainer(
     color: '#FC5632',
-    clipBehavior: StacClip.hardEdge,
     height: 250,
     width: 200,
     child: StacAlign(
@@ -69,16 +66,16 @@ StacAlign(
 ```
 
   </Tab>
+
   <Tab title="JSON">
 
+
 ```json
 {
   "type": "align",
-  "alignment": "topEnd",
   "child": {
     "type": "container",
     "color": "#FC5632",
-    "clipBehavior": "hardEdge",
     "height": 250,
     "width": 200,
     "child": {
@@ -98,6 +95,7 @@ StacAlign(
 ```
 
   </Tab>
+
   <Tab title="Preview">
     <Frame>
       <iframe
@@ -129,4 +127,4 @@ StacAlign(
       />
     </Frame>
   </Tab>
-</Tabs>
\ No newline at end of file
+</Tabs>
diff --git a/docs/widgets/ink_well.mdx b/docs/widgets/ink_well.mdx
index 349e6e4db..3ac7d25d5 100644
--- a/docs/widgets/ink_well.mdx
+++ b/docs/widgets/ink_well.mdx
@@ -35,6 +35,7 @@ export const inkWellPreviewJson = {
   "onTap": {}
 };
 export const inkWellPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
+
 **Stac InkWell** allows you to build the Flutter `InkWell` widget using JSON.  
 To learn more about the `InkWell` widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/InkWell-class.html).
 
diff --git a/docs/widgets/positioned.mdx b/docs/widgets/positioned.mdx
index 5e1ff7acf..0d8a2d041 100644
--- a/docs/widgets/positioned.mdx
+++ b/docs/widgets/positioned.mdx
@@ -67,15 +67,20 @@ StacPositioned(
 
 ```json
 {
-  "type": "positioned",
-  "left": 10,
-  "top": 20,
-  "right": 30,
-  "bottom": 40,
-  "child": {
-    "type": "text",
-    "data": "Hello, World!"
-  }
+  "type": "stack",
+  "children": [
+    {
+      "type": "positioned",
+      "left": 10,
+      "top": 20,
+      "right": 30,
+      "bottom": 40,
+      "child": {
+        "type": "text",
+        "data": "Hello, World!"
+      }
+    }
+  ]
 }
 ```
 
diff --git a/docs/widgets/sliver_app_bar.mdx b/docs/widgets/sliver_app_bar.mdx
index 9eb0e8a1b..212ab13b4 100644
--- a/docs/widgets/sliver_app_bar.mdx
+++ b/docs/widgets/sliver_app_bar.mdx
@@ -25,7 +25,6 @@ export const sliverAppBarPreviewJson = {
           },
           "onPressed": {}
         },
-        "backgroundColor": "primary",
         "actions": [
           {
             "type": "iconButton",
@@ -96,7 +95,6 @@ StacSliverAppBar(
     icon: StacIcon(iconType: 'material', icon: 'menu'),
     onPressed: StacNoneAction(),
   ),
-  backgroundColor: 'primary',
   actions: [
     StacIconButton(
       icon: StacIcon(iconType: 'cupertino', icon: 'heart_solid'),
@@ -111,32 +109,39 @@ StacSliverAppBar(
 
 ```json
 {
-  "type": "sliverAppBar",
-  "title": {
-    "type": "text",
-    "data": "SliverAppBar"
-  },
-  "leading": {
-    "type": "iconButton",
-    "icon": {
-      "type": "icon",
-      "iconType": "material",
-      "icon": "menu"
-    },
-    "onPressed": {}
-  },
-  "backgroundColor": "primary",
-  "actions": [
-    {
-      "type": "iconButton",
-      "icon": {
-        "type": "icon",
-        "iconType": "cupertino",
-        "icon": "heart_solid"
-      },
-      "onPressed": {}
-    }
-  ]
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverAppBar",
+        "title": {
+          "type": "text",
+          "data": "SliverAppBar"
+        },
+        "leading": {
+          "type": "iconButton",
+          "icon": {
+            "type": "icon",
+            "iconType": "material",
+            "icon": "menu"
+          },
+          "onPressed": {}
+        },
+        "actions": [
+          {
+            "type": "iconButton",
+            "icon": {
+              "type": "icon",
+              "iconType": "cupertino",
+              "icon": "heart_solid"
+            },
+            "onPressed": {}
+          }
+        ]
+      }
+    ]
+  }
 }
 ```
 
diff --git a/docs/widgets/sliver_fill_remaining.mdx b/docs/widgets/sliver_fill_remaining.mdx
index 8f3f15930..1a868ba8d 100644
--- a/docs/widgets/sliver_fill_remaining.mdx
+++ b/docs/widgets/sliver_fill_remaining.mdx
@@ -68,14 +68,22 @@ const StacSliverFillRemaining(
 
 ```json
 {
-  "type": "sliverFillRemaining",
-  "hasScrollBody": false,
-  "child": {
-    "type": "center",
-    "child": {
-      "type": "text",
-      "data": "This content fills the remaining space"
-    }
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverFillRemaining",
+        "hasScrollBody": false,
+        "child": {
+          "type": "center",
+          "child": {
+            "type": "text",
+            "data": "This content fills the remaining space"
+          }
+        }
+      }
+    ]
   }
 }
 ```
diff --git a/docs/widgets/sliver_grid.mdx b/docs/widgets/sliver_grid.mdx
index 82e7edabb..096378136 100644
--- a/docs/widgets/sliver_grid.mdx
+++ b/docs/widgets/sliver_grid.mdx
@@ -180,73 +180,81 @@ const StacSliverGrid(
 
 ```json
 {
-  "type": "sliverGrid",
-  "crossAxisCount": 2,
-  "mainAxisSpacing": 16,
-  "crossAxisSpacing": 16,
-  "childAspectRatio": 1,
-  "children": [
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 1",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
-          }
-        }
-      }
-    },
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 2",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
-          }
-        }
-      }
-    },
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 3",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
-          }
-        }
-      }
-    },
-    {
-      "type": "container",
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "Grid Item 4",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverGrid",
+        "crossAxisCount": 2,
+        "mainAxisSpacing": 16,
+        "crossAxisSpacing": 16,
+        "childAspectRatio": 1,
+        "children": [
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 1",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
+          },
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 2",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
+          },
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 3",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
+          },
+          {
+            "type": "container",
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "Grid Item 4",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
           }
-        }
+        ]
       }
-    }
-  ]
+    ]
+  }
 }
 ```
 
diff --git a/docs/widgets/sliver_opacity.mdx b/docs/widgets/sliver_opacity.mdx
index da3f6d872..99235820f 100644
--- a/docs/widgets/sliver_opacity.mdx
+++ b/docs/widgets/sliver_opacity.mdx
@@ -74,22 +74,30 @@ StacSliverOpacity(
 
 ```json
 {
-  "type": "sliverOpacity",
-  "opacity": 0.5,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "container",
-      "height": 200,
-      "color": "red",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "I am a faded sliver"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverOpacity",
+        "opacity": 0.5,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "container",
+            "height": 200,
+            "color": "red",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "I am a faded sliver"
+              }
+            }
+          }
         }
       }
-    }
+    ]
   }
 }
 ```
diff --git a/docs/widgets/sliver_padding.mdx b/docs/widgets/sliver_padding.mdx
index 2fb0fbe10..382ca9eec 100644
--- a/docs/widgets/sliver_padding.mdx
+++ b/docs/widgets/sliver_padding.mdx
@@ -77,26 +77,34 @@ StacSliverPadding(
 
 ```json
 {
-  "type": "sliverPadding",
-  "padding": 16,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "container",
-      "height": 150,
-      "color": "#4CAF50",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "I am a Box inside a SliverPadding!",
-          "style": {
-            "color": "#FFFFFF",
-            "fontWeight": "bold"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverPadding",
+        "padding": 16,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "container",
+            "height": 150,
+            "color": "#4CAF50",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "I am a Box inside a SliverPadding!",
+                "style": {
+                  "color": "#FFFFFF",
+                  "fontWeight": "bold"
+                }
+              }
+            }
           }
         }
       }
-    }
+    ]
   }
 }
 ```
diff --git a/docs/widgets/sliver_safe_area.mdx b/docs/widgets/sliver_safe_area.mdx
index ea10204d2..4ead9b40e 100644
--- a/docs/widgets/sliver_safe_area.mdx
+++ b/docs/widgets/sliver_safe_area.mdx
@@ -60,14 +60,22 @@ StacSliverSafeArea(
 
 ```json
 {
-  "type": "sliverSafeArea",
-  "top": true,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "text",
-      "data": "Hello World"
-    }
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverSafeArea",
+        "top": true,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "text",
+            "data": "Hello World"
+          }
+        }
+      }
+    ]
   }
 }
 ```
diff --git a/docs/widgets/sliver_visibility.mdx b/docs/widgets/sliver_visibility.mdx
index 83e3320ff..0eb61302d 100644
--- a/docs/widgets/sliver_visibility.mdx
+++ b/docs/widgets/sliver_visibility.mdx
@@ -81,22 +81,30 @@ StacSliverVisibility(
 
 ```json
 {
-  "type": "sliverVisibility",
-  "visible": false,
-  "sliver": {
-    "type": "sliverToBoxAdapter",
-    "child": {
-      "type": "container",
-      "height": 180,
-      "color": "warning",
-      "child": {
-        "type": "center",
-        "child": {
-          "type": "text",
-          "data": "This sliver is hidden"
+  "type": "scaffold",
+  "body": {
+    "type": "customScrollView",
+    "slivers": [
+      {
+        "type": "sliverVisibility",
+        "visible": false,
+        "sliver": {
+          "type": "sliverToBoxAdapter",
+          "child": {
+            "type": "container",
+            "height": 180,
+            "color": "warning",
+            "child": {
+              "type": "center",
+              "child": {
+                "type": "text",
+                "data": "This sliver is hidden"
+              }
+            }
+          }
         }
       }
-    }
+    ]
   }
 }
 ```

From 35d741aa415ed4e453212a0d6cfa62d8d55a4d3f Mon Sep 17 00:00:00 2001
From: Divyanshu Bhargava <divyanshub024@gmail.com>
Date: Tue, 28 Apr 2026 19:50:38 +0530
Subject: [PATCH 5/6] docs: refactor Align widget documentation to use Scaffold
 structure

- Updated the JSON representation of the Align widget to include a Scaffold wrapper for better layout context.
- Adjusted the Dart code examples to reflect the new structure and improved alignment properties.
- Enhanced the documentation to clarify the usage of StacAlignmentDirectional for child alignment.
---
 docs/widgets/align.mdx | 103 +++++++++++++++++++++++++----------------
 1 file changed, 62 insertions(+), 41 deletions(-)

diff --git a/docs/widgets/align.mdx b/docs/widgets/align.mdx
index 66eb6071f..dbf1c1362 100644
--- a/docs/widgets/align.mdx
+++ b/docs/widgets/align.mdx
@@ -6,21 +6,25 @@ description: "Documentation for Align"
 import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
 
 export const alignPreviewJson = {
-  "type": "align",
-  "child": {
-    "type": "container",
-    "color": "#FC5632",
-    "height": 250,
-    "width": 200,
+  "type": "scaffold",
+  "body": {
+    "type": "align",
+    "alignment": "topEnd",
     "child": {
-      "type": "align",
-      "alignment": "bottomCenter",
+      "type": "container",
+      "color": "#FC5632",
+      "height": 250,
+      "width": 200,
       "child": {
-        "type": "text",
-        "data": "Flutter",
-        "style": {
-          "fontSize": 23,
-          "fontWeight": "w600"
+        "type": "align",
+        "alignment": "bottomCenter",
+        "child": {
+          "type": "text",
+          "data": "Flutter",
+          "style": {
+            "fontSize": 23,
+            "fontWeight": "w600"
+          }
         }
       }
     }
@@ -31,11 +35,13 @@ export const alignPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 The Stac Align allows you to build a Flutter Align widget using JSON.
 To know more about the align widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Align-class.html).
 
+The playground centers the root widget; this example wraps `Align` in a `Scaffold` so `Align` fills the body and lays out like a real screen.
+
 ## Properties
 
-| Property     | Type                  | Description                                                                   |
-|--------------|-----------------------|-------------------------------------------------------------------------------|
-| alignment    | `StacAlignment`       | How to align the child.                                                       |
+| Property     | Type                       | Description                                                                   |
+|--------------|----------------------------|-------------------------------------------------------------------------------|
+| alignment    | `StacAlignmentDirectional` | How to align the child.                                                       |
 | widthFactor  | `double`              | If non-null, sets its width to the child's width multiplied by this factor.   |
 | heightFactor | `double`              | If non-null, sets its height to the child's height multiplied by this factor. |
 | child        | `StacWidget`          | The widget below this widget in the tree.                                     |
@@ -46,18 +52,23 @@ To know more about the align widget in Flutter, refer to the [official documenta
   <Tab title="Dart">
 
 ```dart
-StacAlign(
-  child: StacContainer(
-    color: '#FC5632',
-    height: 250,
-    width: 200,
-    child: StacAlign(
-      alignment: StacAlignment.bottomCenter,
-      child: StacText(
-        data: 'Flutter',
-        style: StacTextStyle(
-          fontSize: 23,
-          fontWeight: StacFontWeight.w600,
+StacScaffold(
+  appBar: StacAppBar(
+    title: StacText(data: 'Align'),
+  ),
+  body: StacAlign(
+    child: StacContainer(
+      color: '#FC5632',
+      height: 250,
+      width: 200,
+      child: StacAlign(
+        alignment: StacAlignmentDirectional.bottomCenter,
+        child: StacText(
+          data: 'Flutter',
+          style: StacTextStyle(
+            fontSize: 23,
+            fontWeight: StacFontWeight.w600,
+          ),
         ),
       ),
     ),
@@ -72,21 +83,31 @@ StacAlign(
 
 ```json
 {
-  "type": "align",
-  "child": {
-    "type": "container",
-    "color": "#FC5632",
-    "height": 250,
-    "width": 200,
+  "type": "scaffold",
+  "appBar": {
+    "type": "appBar",
+    "title": {
+      "type": "text",
+      "data": "Align"
+    }
+  },
+  "body": {
+    "type": "align",
     "child": {
-      "type": "align",
-      "alignment": "bottomCenter",
+      "type": "container",
+      "color": "#FC5632",
+      "height": 250,
+      "width": 200,
       "child": {
-        "type": "text",
-        "data": "Flutter",
-        "style": {
-          "fontSize": 23,
-          "fontWeight": "w600"
+        "type": "align",
+        "alignment": "bottomCenter",
+        "child": {
+          "type": "text",
+          "data": "Flutter",
+          "style": {
+            "fontSize": 23,
+            "fontWeight": "w600"
+          }
         }
       }
     }

From 2254742911f1a9f174588a283f9e3c5fff53b338 Mon Sep 17 00:00:00 2001
From: Divyanshu Bhargava <divyanshub024@gmail.com>
Date: Tue, 28 Apr 2026 22:06:46 +0530
Subject: [PATCH 6/6] docs: refine SliverGrid and Align widget documentation

- Updated the SliverGrid documentation to adopt a consistent structure, including a customScrollView wrapper.
- Simplified the JSON representation and Dart code examples for both SliverGrid and Align widgets.
- Enhanced clarity in the documentation to improve usability and understanding of widget properties.
---
 docs/widgets/align.mdx       |  13 +-
 docs/widgets/sliver_grid.mdx | 336 +++++++++++++++++------------------
 2 files changed, 168 insertions(+), 181 deletions(-)

diff --git a/docs/widgets/align.mdx b/docs/widgets/align.mdx
index dbf1c1362..279f326c2 100644
--- a/docs/widgets/align.mdx
+++ b/docs/widgets/align.mdx
@@ -9,7 +9,6 @@ export const alignPreviewJson = {
   "type": "scaffold",
   "body": {
     "type": "align",
-    "alignment": "topEnd",
     "child": {
       "type": "container",
       "color": "#FC5632",
@@ -35,7 +34,7 @@ export const alignPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 The Stac Align allows you to build a Flutter Align widget using JSON.
 To know more about the align widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/widgets/Align-class.html).
 
-The playground centers the root widget; this example wraps `Align` in a `Scaffold` so `Align` fills the body and lays out like a real screen.
+The playground centers the root widget; this example wraps `Align` in a `Scaffold` body so it gets full-screen constraints.
 
 ## Properties
 
@@ -53,9 +52,6 @@ The playground centers the root widget; this example wraps `Align` in a `Scaffol
 
 ```dart
 StacScaffold(
-  appBar: StacAppBar(
-    title: StacText(data: 'Align'),
-  ),
   body: StacAlign(
     child: StacContainer(
       color: '#FC5632',
@@ -84,13 +80,6 @@ StacScaffold(
 ```json
 {
   "type": "scaffold",
-  "appBar": {
-    "type": "appBar",
-    "title": {
-      "type": "text",
-      "data": "Align"
-    }
-  },
   "body": {
     "type": "align",
     "child": {
diff --git a/docs/widgets/sliver_grid.mdx b/docs/widgets/sliver_grid.mdx
index 096378136..13eb236ea 100644
--- a/docs/widgets/sliver_grid.mdx
+++ b/docs/widgets/sliver_grid.mdx
@@ -6,81 +6,78 @@ description: "Documentation for SliverGrid"
 import { PLAYGROUND_BASE_URL } from "/snippets/playground_base.mdx";
 
 export const sliverGridPreviewJson = {
-  "type": "scaffold",
-  "body": {
-    "type": "customScrollView",
-    "slivers": [
-      {
-        "type": "sliverGrid",
-        "crossAxisCount": 2,
-        "mainAxisSpacing": 16,
-        "crossAxisSpacing": 16,
-        "childAspectRatio": 1,
-        "children": [
-          {
-            "type": "container",
-            "color": "#4CAF50",
+  "type": "customScrollView",
+  "slivers": [
+    {
+      "type": "sliverGrid",
+      "crossAxisCount": 2,
+      "mainAxisSpacing": 16,
+      "crossAxisSpacing": 16,
+      "childAspectRatio": 1,
+      "children": [
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 1",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 1",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
-          },
-          {
-            "type": "container",
-            "color": "#4CAF50",
+          }
+        },
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 2",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 2",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
-          },
-          {
-            "type": "container",
-            "color": "#4CAF50",
+          }
+        },
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 3",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 3",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
-          },
-          {
-            "type": "container",
-            "color": "#4CAF50",
+          }
+        },
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 4",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 4",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
           }
-        ]
-      }
-    ]
-  }
+        }
+      ]
+    }
+  ]
 };
 export const sliverGridPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;
 
@@ -117,59 +114,63 @@ To learn more about Flutter’s `SliverGrid`, refer to the
   <Tab title="Dart">
 
 ```dart
-const StacSliverGrid(
-  crossAxisCount: 2,
-  mainAxisSpacing: 16,
-  crossAxisSpacing: 16,
-  childAspectRatio: 1,
-  children: [
-    StacContainer(
-      color: StacColor('#4CAF50'),
-      child: StacCenter(
-        child: StacText(
-          data: 'Grid Item 1',
-          style: StacTextStyle(
-            color: StacColor('#FFFFFF'),
-            fontWeight: StacFontWeight.bold,
+const StacCustomScrollView(
+  slivers: [
+    StacSliverGrid(
+      crossAxisCount: 2,
+      mainAxisSpacing: 16,
+      crossAxisSpacing: 16,
+      childAspectRatio: 1,
+      children: [
+        StacContainer(
+          color: StacColor('#4CAF50'),
+          child: StacCenter(
+            child: StacText(
+              data: 'Grid Item 1',
+              style: StacTextStyle(
+                color: StacColor('#FFFFFF'),
+                fontWeight: StacFontWeight.bold,
+              ),
+            ),
           ),
         ),
-      ),
-    ),
-    StacContainer(
-      color: StacColor('#4CAF50'),
-      child: StacCenter(
-        child: StacText(
-          data: 'Grid Item 2',
-          style: StacTextStyle(
-            color: StacColor('#FFFFFF'),
-            fontWeight: StacFontWeight.bold,
+        StacContainer(
+          color: StacColor('#4CAF50'),
+          child: StacCenter(
+            child: StacText(
+              data: 'Grid Item 2',
+              style: StacTextStyle(
+                color: StacColor('#FFFFFF'),
+                fontWeight: StacFontWeight.bold,
+              ),
+            ),
           ),
         ),
-      ),
-    ),
-    StacContainer(
-      color: StacColor('#4CAF50'),
-      child: StacCenter(
-        child: StacText(
-          data: 'Grid Item 3',
-          style: StacTextStyle(
-            color: StacColor('#FFFFFF'),
-            fontWeight: StacFontWeight.bold,
+        StacContainer(
+          color: StacColor('#4CAF50'),
+          child: StacCenter(
+            child: StacText(
+              data: 'Grid Item 3',
+              style: StacTextStyle(
+                color: StacColor('#FFFFFF'),
+                fontWeight: StacFontWeight.bold,
+              ),
+            ),
           ),
         ),
-      ),
-    ),
-    StacContainer(
-      color: StacColor('#4CAF50'),
-      child: StacCenter(
-        child: StacText(
-          data: 'Grid Item 4',
-          style: StacTextStyle(
-            color: StacColor('#FFFFFF'),
-            fontWeight: StacFontWeight.bold,
+        StacContainer(
+          color: StacColor('#4CAF50'),
+          child: StacCenter(
+            child: StacText(
+              data: 'Grid Item 4',
+              style: StacTextStyle(
+                color: StacColor('#FFFFFF'),
+                fontWeight: StacFontWeight.bold,
+              ),
+            ),
           ),
         ),
-      ),
+      ],
     ),
   ],
 )
@@ -180,81 +181,78 @@ const StacSliverGrid(
 
 ```json
 {
-  "type": "scaffold",
-  "body": {
-    "type": "customScrollView",
-    "slivers": [
-      {
-        "type": "sliverGrid",
-        "crossAxisCount": 2,
-        "mainAxisSpacing": 16,
-        "crossAxisSpacing": 16,
-        "childAspectRatio": 1,
-        "children": [
-          {
-            "type": "container",
-            "color": "#4CAF50",
+  "type": "customScrollView",
+  "slivers": [
+    {
+      "type": "sliverGrid",
+      "crossAxisCount": 2,
+      "mainAxisSpacing": 16,
+      "crossAxisSpacing": 16,
+      "childAspectRatio": 1,
+      "children": [
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 1",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 1",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
-          },
-          {
-            "type": "container",
-            "color": "#4CAF50",
+          }
+        },
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 2",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 2",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
-          },
-          {
-            "type": "container",
-            "color": "#4CAF50",
+          }
+        },
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 3",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 3",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
-          },
-          {
-            "type": "container",
-            "color": "#4CAF50",
+          }
+        },
+        {
+          "type": "container",
+          "color": "#4CAF50",
+          "child": {
+            "type": "center",
             "child": {
-              "type": "center",
-              "child": {
-                "type": "text",
-                "data": "Grid Item 4",
-                "style": {
-                  "color": "#FFFFFF",
-                  "fontWeight": "bold"
-                }
+              "type": "text",
+              "data": "Grid Item 4",
+              "style": {
+                "color": "#FFFFFF",
+                "fontWeight": "bold"
               }
             }
           }
-        ]
-      }
-    ]
-  }
+        }
+      ]
+    }
+  ]
 }
 ```