rjsf-team · heath-freenome · Oct 21, 2025 · Oct 21, 2025 · Oct 22, 2025 · Oct 22, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,57 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
+# 6.0.0-beta.24
+
+## @rjsf/antd
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/chakra-ui
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/core
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/daisyui
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/fluentui-rc
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/mantine
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/mui
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/primereact
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/react-bootstrap
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/semantic-ui
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## @rjsf/shadcn
+
+- Updated the `README.md` to show the theme snapshot with the latest theme UI from the playground, making it a link to the theme
+
+## Dev / docs / playground
+
+- Updated the playground to modernize the UI using MUI components
+- Updated the documentation to switch to using an animated gif based on the latest modernized playground UI
+
 # 6.0.0-beta.23
 
 ## @rjsf/core
@@ -23,6 +74,7 @@ should change the heading of the (upcoming) version to include a major version b
 - Updated `Form` to support the new feature to do `onBlur` handling of `liveValidate` and `liveOmit`
 
 ## Dev / docs / playground
+
 - Updated the playground to switch `liveValidate` and `liveOmit` from checkboxes to radio buttons for the new options
 - Updated `form-props.md` and `v6x upgrade guide.md` to document the new feature and deprecation
 
@@ -127,6 +179,7 @@ should change the heading of the (upcoming) version to include a major version b
 - BREAKING CHANGE: Renamed `ArrayFieldItemButtonsTemplateType` to `ArrayFieldItemButtonsTemplateProps` and updated it to replace the `onAddIndexClick()`, `onCopyIndexClick()`, `onDropIndexClick()` and `onReorderClick()` callback-generator props with the `onAddItem()`, `onCopyItem()`, `onMoveUpItem()`, `onMoveDownItem()` and `onRemoveItem()` callback props
 
 ## Dev / docs / playground
+
 - Updated the `formTests.tsx` snapshots to add an `anyOf` of all arrays with different item types and removed the disabling of the optional data controls feature for the optional object with oneOfs
   - Updated the snapshots in all of the themes accordingly
 - Updated the playground to make the same changes as `formTests.tsx` in the `optionalDataControls.ts` sample, moving the `experimental_defaultFormStateBehavior` inside of a `liveSettings` block

diff --git a/packages/antd/README.md b/packages/antd/README.md
@@ -47,6 +47,8 @@
 
 Ant Design theme, fields and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/antd)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

diff --git a/packages/antd/screenshot.png b/packages/antd/screenshot.png
diff --git a/packages/chakra-ui/README.md b/packages/chakra-ui/README.md
@@ -48,7 +48,7 @@
 
 ## About The Project
 
-[![@rjsf/chakra-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/chakra-ui)
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/chakra-ui)
 
 Exports `chakra-ui` theme, fields and widgets for `react-jsonschema-form`.
 

diff --git a/packages/chakra-ui/screenshot.png b/packages/chakra-ui/screenshot.png
diff --git a/packages/core/README.md b/packages/core/README.md
@@ -47,6 +47,8 @@
 
 Core logic and classic Bootstrap 3 theme for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/core)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

diff --git a/packages/core/screenshot.png b/packages/core/screenshot.png
diff --git a/packages/daisyui/README.md b/packages/daisyui/README.md
@@ -12,8 +12,7 @@ This package integrates [DaisyUI](https://daisyui.com/), [Tailwind CSS](https://
 
 ## Screenshots
 
-![DaisyUI Form Example 1](daisy-screenshot1.png)
-![DaisyUI Form Example 2](daisy-screenshot2.png)
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/daisyui)
 
 ## Features
 

diff --git a/packages/daisyui/daisy-screenshot1.png b/packages/daisyui/daisy-screenshot1.png
diff --git a/packages/daisyui/daisy-screenshot2.png b/packages/daisyui/daisy-screenshot2.png
diff --git a/packages/daisyui/screenshot.png b/packages/daisyui/screenshot.png
diff --git a/packages/docs/docs/00-introduction.mdx b/packages/docs/docs/00-introduction.mdx
@@ -13,7 +13,7 @@ A simple [React](https://reactjs.org/) component capable of building HTML forms
 A [live playground](https://rjsf-team.github.io/react-jsonschema-form/) is hosted on GitHub Pages:
 
 <a target='_blank' href='https://rjsf-team.github.io/react-jsonschema-form/'>
-    <img alt='Playground' src='https://i.imgur.com/M8ZCES5.gif'/>
+  ![Playground](./rjsf-playground.gif)
 </a>
 
 ## Philosophy

diff --git a/packages/docs/docs/rjsf-playground.gif b/packages/docs/docs/rjsf-playground.gif
diff --git a/packages/fluentui-rc/README.md b/packages/fluentui-rc/README.md
@@ -47,6 +47,8 @@
 
 Fluent UI React Components (v9) theme, fields and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/fluentui-rc)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

diff --git a/packages/fluentui-rc/screenshot.png b/packages/fluentui-rc/screenshot.png
diff --git a/packages/mantine/README.md b/packages/mantine/README.md
@@ -50,6 +50,8 @@
 
 `Mantine` theme, fields and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/mantine)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

diff --git a/packages/mantine/screenshot.png b/packages/mantine/screenshot.png
diff --git a/packages/mui/README.md b/packages/mui/README.md
@@ -47,10 +47,10 @@
 
 ## About The Project
 
-[![@rjsf/mui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/mui)
-
 Exports `MUI` version 5 theme, fields, and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/mui)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

diff --git a/packages/mui/screenshot.png b/packages/mui/screenshot.png
diff --git a/packages/playground/src/components/CopyLink.tsx b/packages/playground/src/components/CopyLink.tsx
@@ -13,16 +13,17 @@ export default function CopyLink({ shareURL, onShare }: CopyLinkProps) {
     navigator.clipboard.writeText(input.current?.value ?? '');
   }
 
+  const style = { maxWidth: '21.525rem', margin: '5px 0' };
   if (!shareURL) {
     return (
-      <button className='btn btn-default' type='button' onClick={onShare}>
-        Share
+      <button className='btn btn-default' type='button' onClick={onShare} style={style}>
+        Share Playground
       </button>
     );
   }
 
   return (
-    <div className='input-group'>
+    <div className='input-group' style={style}>
       <input type='text' ref={input} className='form-control' defaultValue={shareURL} />
       <span className='input-group-btn'>
         <button className='btn btn-default' type='button' onClick={onCopyClick}>

diff --git a/packages/playground/src/components/Editors.tsx b/packages/playground/src/components/Editors.tsx
@@ -1,15 +1,31 @@
-import { useCallback, useState } from 'react';
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { styled } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MonacoEditor from '@monaco-editor/react';
 import { ErrorSchema, RJSFSchema, UiSchema } from '@rjsf/utils';
 import isEqualWith from 'lodash/isEqualWith';
 
+import ThemeSelector, { ThemesType } from './ThemeSelector';
+import SubthemeSelector, { SubthemeType } from './SubthemeSelector';
+
 const monacoEditorOptions = {
   minimap: {
     enabled: false,
   },
   automaticLayout: true,
 };
 
+const AccordionSummary = styled(MuiAccordionSummary)({
+  '.MuiAccordionSummary-content': {
+    margin: 0,
+  },
+});
+
 type EditorProps = {
   title: string;
   code: string;
@@ -70,6 +86,12 @@ type EditorsProps = {
   setExtraErrors: React.Dispatch<React.SetStateAction<ErrorSchema | undefined>>;
   setShareURL: React.Dispatch<React.SetStateAction<string | null>>;
   hasUiSchemaGenerator: boolean;
+  themes: { [themeName: string]: ThemesType };
+  theme: string;
+  subtheme: string | null;
+  onThemeSelected: (theme: string, themeObj: ThemesType) => void;
+  setSubtheme: Dispatch<SetStateAction<string | null>>;
+  setStylesheet: Dispatch<SetStateAction<string | null>>;
 };
 
 export default function Editors({
@@ -83,7 +105,20 @@ export default function Editors({
   setShareURL,
   setUiSchema,
   hasUiSchemaGenerator,
+  themes,
+  theme,
+  subtheme,
+  onThemeSelected,
+  setSubtheme,
+  setStylesheet,
 }: EditorsProps) {
+  const onSubthemeSelected = useCallback(
+    (subtheme: any, { stylesheet }: SubthemeType) => {
+      setSubtheme(subtheme);
+      setStylesheet(stylesheet || null);
+    },
+    [setSubtheme, setStylesheet],
+  );
   const onSchemaEdited = useCallback(
     (newSchema: any) => {
       setSchema(newSchema);
@@ -127,23 +162,42 @@ export default function Editors({
   const uiSchemaTitle = hasUiSchemaGenerator ? 'UISchema (regenerated on theme change)' : 'UiSchema';
 
   return (
-    <div className='col-sm-7'>
-      <Editor title='JSONSchema' code={toJson(schema)} onChange={onSchemaEdited} />
-      <div className='row'>
-        <div className='col-sm-6'>
-          <Editor title={uiSchemaTitle} code={toJson(uiSchema)} onChange={onUISchemaEdited} />
-        </div>
-        <div className='col-sm-6'>
-          <Editor title='formData' code={toJson(formData)} onChange={onFormDataEdited} />
-        </div>
-      </div>
-      {extraErrors && (
-        <div className='row'>
-          <div className='col'>
-            <Editor title='extraErrors' code={toJson(extraErrors || {})} onChange={onExtraErrorsEdited} />
-          </div>
-        </div>
-      )}
-    </div>
+    <Accordion defaultExpanded disableGutters>
+      <AccordionSummary expandIcon={<ExpandMoreIcon fontSize='large' />} title='Toggle Editors'>
+        <Grid container spacing={1} sx={{ width: '100%' }}>
+          <Grid size={6}>
+            <Typography component='div' variant='h2' sx={{ pr: 1 }}>
+              react-jsonschema-form
+            </Typography>
+          </Grid>
+          <Grid size={3}>
+            <ThemeSelector themes={themes} theme={theme} select={onThemeSelected} />
+          </Grid>
+          <Grid size={3}>
+            {themes[theme] && themes[theme].subthemes && (
+              <SubthemeSelector subthemes={themes[theme].subthemes!} subtheme={subtheme} select={onSubthemeSelected} />
+            )}
+          </Grid>
+        </Grid>
+      </AccordionSummary>
+      <AccordionDetails sx={{ p: 0 }}>
+        <Grid container spacing={0.5}>
+          <Grid size={extraErrors ? 3 : 4}>
+            <Editor title='JSONSchema' code={toJson(schema)} onChange={onSchemaEdited} />
+          </Grid>
+          <Grid size={extraErrors ? 3 : 4}>
+            <Editor title={uiSchemaTitle} code={toJson(uiSchema)} onChange={onUISchemaEdited} />
+          </Grid>
+          <Grid size={extraErrors ? 3 : 4}>
+            <Editor title='formData' code={toJson(formData)} onChange={onFormDataEdited} />
+          </Grid>
+          {extraErrors && (
+            <Grid size={3}>
+              <Editor title='extraErrors' code={toJson(extraErrors || {})} onChange={onExtraErrorsEdited} />
+            </Grid>
+          )}
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
   );
 }