Repository: seek-oss/braid-design-system
Pull request #1770: Run `prettier` inside `source.macro` to trim down docs bundle
Author: login: askoufis
Created: 2025-04-28T05:32:38Z | Merged: 2025-04-30T04:46:49Z

Since `id` has been phased out of code snippets, code to [remove `id` props from snippets](https://github.com/seek-oss/braid-design-system/pull/1767/files#diff-6628fe60035e75c5ffdce29c5d3147b718ae027f7e077135d60cbadb55680e62L52) was also recently removed. This makes it possible to do all code snippet formatting at build time (via the source macro) instead of at runtime.

Doing so lets us remove `prettier/standalone` from the docs site bundle, reducing its size from ~929kb to ~645kb. This is a reduction of **284kb** or **~31%**.

Another benefit of doing this is we can remove the async state updates that were made necessary by the prettier v3 update as we can utilize `@prettier/sync` for formatting since it is now performed in `node` rather than in the browser (which is incompatible with `@prettier/sync`).

The minor tradeoff is that we need to use `dedent` in a few more places, specifically wherever a plain string is used as a code snippet.

I've also marked this as a breaking change, just in case, as this _will_ affect the `code` string returned by the macro.


Diff:
diff --git a/.changeset/better-animals-deny.md b/.changeset/better-animals-deny.md
new file mode 100644
index 000000000000..029124468fed
--- /dev/null
+++ b/.changeset/better-animals-deny.md
@@ -0,0 +1,19 @@
+---
+'@braid-design-system/source.macro': major
+---
+
+Run `prettier` on macro code output
+
+**BREAKING CHANGE**:
+
+The code string returned by the macro is now formatted with `prettier` by default. The resulting code string may be different relative to previous versions of the macro, so please ensure it aligns with your expectations.
+
+Prettier formatting can be disabled via the `formatWithPrettier` configuration option2️⃣:
+
+```js
+const babelTransformOptions = {
+  plugins: [
+    [require.resolve('babel-plugin-macros'), { source: { formatWithPrettier: false } }],
+  ],
+}
+```
diff --git a/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx b/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx
index 895c5fe97aa1..500389e00ff2 100644
--- a/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/BraidProvider/BraidProvider.docs.tsx
@@ -24,8 +24,8 @@ const docs: ComponentDocs = {
         </Text>
       ),
       code: `
-      import wireframe from 'braid-design-system/themes/wireframe';
-      import { BraidProvider } from 'braid-design-system';
+        import wireframe from 'braid-design-system/themes/wireframe';
+        import { BraidProvider } from 'braid-design-system';
 
         export const App = () => (
           <BraidProvider theme={wireframe}>
@@ -62,7 +62,6 @@ const docs: ComponentDocs = {
         </Fragment>
       ),
       code: `
-
         import { Link as ReactRouterLink } from 'react-router-dom';
         import { BraidProvider, makeLinkComponent } from 'braid-design-system';
         import wireframe from 'braid-design-system/themes/wireframe';
diff --git a/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx b/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx
index 5ba28324efe0..763544ed3632 100644
--- a/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx
+++ b/packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx
@@ -97,13 +97,13 @@ const docs: ComponentDocs = {
           </Text>
           <Code playroom={false}>
             {`
-          import { useToast } from 'braid-design-system';
+              import { useToast } from 'braid-design-system';
 
-          export const Demo = () => {
-            const showToast = useToast();
+              export const Demo = () => {
+                const showToast = useToast();
 
-            // etc...
-          }
+                // etc...
+              }
         `}
           </Code>
           <Text>
@@ -113,15 +113,15 @@ const docs: ComponentDocs = {
           </Text>
           <Code playroom={false}>
             {`
-          import { BraidProvider, ToastProvider } from 'braid-design-system';
+              import { BraidProvider, ToastProvider } from 'braid-design-system';
 
-          export const App = () => (
-            <BraidProvider>
-              <ToastProvider>
-                {/* App code... */}
-              </ToastProvider>
-            </BraidProvider>
-          )
+              export const App = () => (
+                <BraidProvider>
+                  <ToastProvider>
+                    {/* App code... */}
+                  </ToastProvider>
+                </BraidProvider>
+              )
         `}
           </Code>
         </>
diff --git a/packages/source.macro/__snapshots__/source.macro.test.ts.snap b/packages/source.macro/__snapshots__/source.macro.test.ts.snap
index 9f411e8f69ca..7307a519a119 100644
--- a/packages/source.macro/__snapshots__/source.macro.test.ts.snap
+++ b/packages/source.macro/__snapshots__/source.macro.test.ts.snap
@@ -14,7 +14,7 @@ const result = source({
       ↓ ↓ ↓ ↓ ↓ ↓
 
 const result = {
-  code: "{\\n  // comment\\n  hello: () => 'world'\\n}",
+  code: '{\\n  // comment\\n  hello: () => "world"\\n}',
   value: {
     // comment
     hello: () => 'world',
@@ -75,7 +75,7 @@ const options = source(() => {
       ↓ ↓ ↓ ↓ ↓ ↓
 
 const options = {
-  code: '() => {\\n  sideEffect();\\n\\n  return [\\n  { value: "1", label: "Option 1" },\\n  { value: "2", label: "Option 2" },\\n  { value: "3", label: "Option 3" }];\\n\\n}',
+  code: '() => {\\n  sideEffect()\\n\\n  return [\\n    { value: "1", label: "Option 1" },\\n    { value: "2", label: "Option 2" },\\n    { value: "3", label: "Option 3" },\\n  ]\\n}',
   value: () => {
     sideEffect();
     return [
@@ -103,13 +103,193 @@ exports[`source.macro 5. code only: 5. code only 1`] = `
 import source from './source.macro';
 
 const result = source({
-  hello: () => 'world',
-  some: 'value',
+  hello: () => ({ world: '!', foo: 'bar'}),
 });
       
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const result = "{\\n  hello: () => 'world',\\n  some: 'value'\\n}";
+const result = '{\\n  hello: () => ({ world: "!", foo: "bar" })\\n}';
+
+`;
+
+exports[`source.macro 6. JSX with playroom state: 6. JSX with playroom state 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+      );
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: '<>\\n  {setDefaultState("jobs", [\\n    {\\n      id: 1,\\n      title: "Lead Designer",\\n      location: "Melbourne",\\n    },\\n    {\\n      id: 2,\\n      title: "Senior Developer",\\n      location: "Sydney",\\n    },\\n    {\\n      id: 3,\\n      title: "Product Manager",\\n      location: "Canberra",\\n    },\\n  ])}\\n\\n  <Stack space="medium">\\n    {getState("jobs").map((job) => (\\n      <Card key={job.id}>\\n        <Stack space="small">\\n          <Text weight="strong">{job.title}</Text>\\n          <Text>{job.location}</Text>\\n        </Stack>\\n      </Card>\\n    ))}\\n  </Stack>\\n</>',
+        value: (
+          <>
+            {setDefaultState('jobs', [
+              {
+                id: 1,
+                title: 'Lead Designer',
+                location: 'Melbourne',
+              },
+              {
+                id: 2,
+                title: 'Senior Developer',
+                location: 'Sydney',
+              },
+              {
+                id: 3,
+                title: 'Product Manager',
+                location: 'Canberra',
+              },
+            ])}
+
+            <Stack space="medium">
+              {getState('jobs').map((job) => (
+                <Card key={job.id}>
+                  <Stack space="small">
+                    <Text weight="strong">{job.title}</Text>
+                    <Text>{job.location}</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </>
+        ),
+      };
+    }}
+  </Code>
+);
+
+`;
+
+exports[`source.macro 7. allows disabling prettier formatting: 7. allows disabling prettier formatting 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>)
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: "<>\\n          {setDefaultState('jobs', [\\n  {\\n    id: 1,\\n    title: 'Lead Designer',\\n    location: 'Melbourne'\\n  },\\n  {\\n    id: 2,\\n    title: 'Senior Developer',\\n    location: 'Sydney'\\n  },\\n  {\\n    id: 3,\\n    title: 'Product Manager',\\n    location: 'Canberra'\\n  }]\\n  )}\\n\\n          <Stack space=\\"medium\\">\\n            {getState('jobs').map((job) =>\\n    <Card key={job.id}>\\n                <Stack space=\\"small\\">\\n                  <Text weight=\\"strong\\">{job.title}</Text>\\n                  <Text>{job.location}</Text>\\n                </Stack>\\n              </Card>\\n    )}\\n          </Stack>\\n        </>",
+        value: (
+          <>
+            {setDefaultState('jobs', [
+              {
+                id: 1,
+                title: 'Lead Designer',
+                location: 'Melbourne',
+              },
+              {
+                id: 2,
+                title: 'Senior Developer',
+                location: 'Sydney',
+              },
+              {
+                id: 3,
+                title: 'Product Manager',
+                location: 'Canberra',
+              },
+            ])}
+
+            <Stack space="medium">
+              {getState('jobs').map((job) => (
+                <Card key={job.id}>
+                  <Stack space="small">
+                    <Text weight="strong">{job.title}</Text>
+                    <Text>{job.location}</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </>
+        ),
+      };
+    }}
+  </Code>
+);
 
 `;
diff --git a/packages/source.macro/package.json b/packages/source.macro/package.json
index c5aa67244f18..0c4186a950e9 100644
--- a/packages/source.macro/package.json
+++ b/packages/source.macro/package.json
@@ -16,7 +16,9 @@
   },
   "dependencies": {
     "@babel/generator": "^7.22.15",
-    "babel-plugin-macros": "^3.1.0"
+    "@prettier/sync": "^0.5.5",
+    "babel-plugin-macros": "^3.1.0",
+    "prettier": "^3.4.1"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.17.12",
diff --git a/packages/source.macro/source.macro.cjs b/packages/source.macro/source.macro.cjs
index 8024a031b5d2..ada922f61d1f 100644
--- a/packages/source.macro/source.macro.cjs
+++ b/packages/source.macro/source.macro.cjs
@@ -1,23 +1,37 @@
 const { default: generate } = require('@babel/generator');
+const prettier = require('@prettier/sync');
 const { createMacro } = require('babel-plugin-macros');
 
 module.exports = createMacro(
-  ({ babel: { types: t }, references, config: { codeOnly = false } }) => {
+  ({
+    babel: { types: t },
+    references,
+    config: { codeOnly = false, formatWithPrettier = true },
+  }) => {
     if (!references.default) {
       return;
     }
 
     references.default.forEach(({ parentPath }) => {
       const value = parentPath.node.arguments[0] || t.identifier('undefined');
-      const code = t.stringLiteral(
-        generate(value, { retainLines: true }).code.replace(/^\n+/, ''),
-      );
+      let { code } = generate(value, { retainLines: true });
+
+      if (formatWithPrettier) {
+        code = prettier
+          .format(code, {
+            parser: 'typescript',
+            semi: false,
+          })
+          .replace(/^;/, ''); // Remove leading semicolons from JSX
+      }
+
+      const codeAst = t.stringLiteral(code.trim());
 
       return parentPath.replaceWith(
         codeOnly
-          ? code
+          ? codeAst
           : t.objectExpression([
-              t.objectProperty(t.identifier('code'), code),
+              t.objectProperty(t.identifier('code'), codeAst),
               t.objectProperty(t.identifier('value'), value),
             ]),
       );
diff --git a/packages/source.macro/source.macro.test.ts b/packages/source.macro/source.macro.test.ts
index dc7dc7a38cd9..1e882a2a0112 100644
--- a/packages/source.macro/source.macro.test.ts
+++ b/packages/source.macro/source.macro.test.ts
@@ -60,10 +60,95 @@ pluginTester({
         import source from './source.macro';
 
         const result = source({
-          hello: () => 'world',
-          some: 'value',
+          hello: () => ({ world: '!', foo: 'bar'}),
         });
       `,
     },
+    'JSX with playroom state': {
+      code: /* ts */ `
+        import source from './source.macro';
+        const result =
+          <Code>
+            {({ setDefaultState, getState: getStateUntyped }) => {
+              const getState = getStateUntyped as (key: string) => MockJob[];
+              return source(
+                <>
+                  {setDefaultState('jobs', [
+                    {
+                      id: 1,
+                      title: 'Lead Designer',
+                      location: 'Melbourne',
+                    },
+                    {
+                      id: 2,
+                      title: 'Senior Developer',
+                      location: 'Sydney',
+                    },
+                    {
+                      id: 3,
+                      title: 'Product Manager',
+                      location: 'Canberra',
+                    },
+                  ])}
+
+                  <Stack space="medium">
+                    {getState('jobs').map((job) => (
+                      <Card key={job.id}>
+                        <Stack space="small">
+                          <Text weight="strong">{job.title}</Text>
+                          <Text>{job.location}</Text>
+                        </Stack>
+                      </Card>
+                    ))}
+                  </Stack>
+                </>,
+              );
+            }}
+          </Code>;
+      `,
+    },
+    'allows disabling prettier formatting': {
+      pluginOptions: { source: { formatWithPrettier: false } },
+      code: /* ts */ `
+        import source from './source.macro';
+        const result =
+          <Code>
+            {({ setDefaultState, getState: getStateUntyped }) => {
+              const getState = getStateUntyped as (key: string) => MockJob[];
+              return source(
+                <>
+                  {setDefaultState('jobs', [
+                    {
+                      id: 1,
+                      title: 'Lead Designer',
+                      location: 'Melbourne',
+                    },
+                    {
+                      id: 2,
+                      title: 'Senior Developer',
+                      location: 'Sydney',
+                    },
+                    {
+                      id: 3,
+                      title: 'Product Manager',
+                      location: 'Canberra',
+                    },
+                  ])}
+
+                  <Stack space="medium">
+                    {getState('jobs').map((job) => (
+                      <Card key={job.id}>
+                        <Stack space="small">
+                          <Text weight="strong">{job.title}</Text>
+                          <Text>{job.location}</Text>
+                        </Stack>
+                      </Card>
+                    ))}
+                  </Stack>
+                </>)
+            }}
+          </Code>;
+      `,
+    },
   },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1148610ee8e7..5e9a1450c756 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -483,9 +483,15 @@ importers:
       '@babel/generator':
         specifier: ^7.22.15
         version: 7.27.0
+      '@prettier/sync':
+        specifier: ^0.5.5
+        version: 0.5.5(prettier@3.5.3)
       babel-plugin-macros:
         specifier: ^3.1.0
         version: 3.1.0
+      prettier:
+        specifier: ^3.4.1
+        version: 3.5.3
     devDependencies:
       '@babel/plugin-syntax-jsx':
         specifier: ^7.17.12
@@ -2439,6 +2445,11 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@prettier/sync@0.5.5':
+    resolution: {integrity: sha512-6BMtNr7aQhyNcGzmumkL0tgr1YQGfm9d7ZdmRpWqWuqpc9vZBind4xMe5NMiRECOhjuSiWHfBWLBnXkpeE90bw==}
+    peerDependencies:
+      prettier: '*'
+
   '@remix-run/router@1.23.0':
     resolution: {integrity: sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==}
     engines: {node: '>=14.0.0'}
@@ -6657,6 +6668,9 @@ packages:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
+  make-synchronized@0.4.2:
+    resolution: {integrity: sha512-EwEJSg8gSGLicKXp/VzNi1tvzhdmNBxOzslkkJSoNUCQFZKH/NIUIp7xlfN+noaHrz4BJDN73gne8IHnjl/F/A==}
+
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
@@ -11668,6 +11682,11 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@prettier/sync@0.5.5(prettier@3.5.3)':
+    dependencies:
+      make-synchronized: 0.4.2
+      prettier: 3.5.3
+
   '@remix-run/router@1.23.0': {}
 
   '@rollup/rollup-android-arm-eabi@4.38.0':
@@ -17353,6 +17372,8 @@ snapshots:
     dependencies:
       semver: 7.7.1
 
+  make-synchronized@0.4.2: {}
+
   makeerror@1.0.12:
     dependencies:
       tmpl: 1.0.5
diff --git a/site/src/App/Code/Code.tsx b/site/src/App/Code/Code.tsx
index 77eec1bcc49b..e2263a2068bb 100644
--- a/site/src/App/Code/Code.tsx
+++ b/site/src/App/Code/Code.tsx
@@ -20,9 +20,6 @@ import copy from 'copy-to-clipboard';
 import dedent from 'dedent';
 import memoize from 'lodash.memoize';
 import { createUrl } from 'playroom/utils';
-import prettierPluginEstree from 'prettier/plugins/estree';
-import typescriptParser from 'prettier/plugins/typescript';
-import prettier from 'prettier/standalone';
 import { type ReactElement, useState, useEffect, useRef } from 'react';
 import reactElementToJsxString from 'react-element-to-jsx-string';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -47,18 +44,8 @@ for (const [name, language] of Object.entries({ diff, jsx, tsx })) {
 const supportedLanguages = ['diff', 'js', 'jsx', 'ts', 'tsx'] as const;
 export type SupportedLanguage = (typeof supportedLanguages)[number];
 
-export const formatSnippet = memoize(async (snippet: string) => {
-  const prettierSnippet = await prettier.format(snippet, {
-    parser: 'typescript',
-    plugins: [typescriptParser, prettierPluginEstree],
-    semi: false,
-  });
-  const formattedSnippet = prettierSnippet
-    .replace(/^;/, '') // Remove leading semicolons from JSX
-    .replace(/[\r\n]+$/, ''); // Remove trailing newline
-
-  const lines = formattedSnippet.split('\n');
-
+export const formatSnippet = memoize((snippet: string) => {
+  const lines = snippet.split('\n');
   const firstLine = lines[0];
   const lastLine = lines[lines.length - 1];
 
@@ -70,7 +57,7 @@ export const formatSnippet = memoize(async (snippet: string) => {
     return dedent(lines.slice(1, lines.length - 1).join('\n'));
   }
 
-  return formattedSnippet;
+  return snippet;
 });
 
 interface CodeButtonProps extends BoxProps {
@@ -202,30 +189,35 @@ const isSource = function <Value>(input: any): input is Source<Value> {
   );
 };
 
-const parseInput = async (
+const parseInput = (
   input: ReactElementOrString | Source<ReactElementOrString>,
-): Promise<Source<ReactElementOrString>> => {
+): Source<ReactElementOrString> => {
   if (typeof input === 'string') {
-    const code = await formatSnippet(input);
+    // Dedent only if input starts with whitespace
+    const shouldDedent = /^\s+/.test(input);
+
+    const code = shouldDedent ? dedent(input) : input;
+    const formattedCode = formatSnippet(code);
 
     return {
-      code,
-      value: code,
+      code: formattedCode,
+      value: formattedCode,
     };
   }
 
   return isSource(input)
     ? {
-        code: await formatSnippet(input.code),
+        code: formatSnippet(input.code),
         value: input.value,
       }
     : {
-        code: await formatSnippet(
+        code: formatSnippet(
           reactElementToJsxString(input, {
             useBooleanShorthandSyntax: false,
             showDefaultProps: false,
             showFunctions: false,
             filterProps: ['onChange', 'onBlur', 'onFocus'],
+            maxInlineAttributesLineLength: 60,
           }),
         ),
         value: input,
@@ -250,22 +242,9 @@ const Code = ({
   const [hideCode, setHideCode] = useState(collapsedByDefault);
   const { playroomUrl } = useConfig();
   const playroomScope = usePlayroomScope();
-  const [{ code, value }, setSource] = useState<Source<ReactElementOrString>>({
-    code: '',
-    value: '',
-  });
-
-  useEffect(() => {
-    async function parse() {
-      const parsedInput = await parseInput(
-        typeof children === 'function' ? children(playroomScope) : children,
-      );
-      setSource(parsedInput);
-    }
-    parse();
-    // Ignore `playroomScope` to avoid re-renders
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [children]);
+  const { code, value } = parseInput(
+    typeof children === 'function' ? children(playroomScope) : children,
+  );
 
   return (
     <Box position="relative">
diff --git a/site/src/App/routes/examples/basic-form/basic-form.tsx b/site/src/App/routes/examples/basic-form/basic-form.tsx
index 72c04e25db6e..20c740463fd6 100644
--- a/site/src/App/routes/examples/basic-form/basic-form.tsx
+++ b/site/src/App/routes/examples/basic-form/basic-form.tsx
@@ -54,35 +54,33 @@ const page: Page = {
       </Stack>
 
       <Code collapsedByDefault>
-        {() =>
-          source(
-            <Card>
-              <Stack space="large">
-                <Heading level="3">Add role</Heading>
-                <Stack space="medium">
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                  <TextField label="Company name" />
-                  <MonthPicker label="Started" />
-                  <Textarea
-                    label="Description"
-                    secondaryLabel="recommended"
-                    description="Summarise your responsibilities, skills and achievements."
-                  />
-                  <Actions>
-                    <Button>Save</Button>
-                  </Actions>
-                </Stack>
+        {source(
+          <Card>
+            <Stack space="large">
+              <Heading level="3">Add role</Heading>
+              <Stack space="medium">
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+                <TextField label="Company name" />
+                <MonthPicker label="Started" />
+                <Textarea
+                  label="Description"
+                  secondaryLabel="recommended"
+                  description="Summarise your responsibilities, skills and achievements."
+                />
+                <Actions>
+                  <Button>Save</Button>
+                </Actions>
               </Stack>
-            </Card>,
-          )
-        }
+            </Stack>
+          </Card>,
+        )}
       </Code>
 
       <Heading level="3">How do I build this example for myself?</Heading>
@@ -117,9 +115,11 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Heading level="3">Add role</Heading>
-          </Card>
+          {source(
+            <Card>
+              <Heading level="3">Add role</Heading>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -133,21 +133,19 @@ const page: Page = {
             </Text>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Heading level="3">Add role</Heading>
-                <Autosuggest
-                  label="Job title"
-                  suggestions={filterSuggestions([
-                    { text: 'Developer' },
-                    { text: 'Designer' },
-                    { text: 'Product Manager' },
-                  ])}
-                />
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Heading level="3">Add role</Heading>
+              <Autosuggest
+                label="Job title"
+                suggestions={filterSuggestions([
+                  { text: 'Developer' },
+                  { text: 'Designer' },
+                  { text: 'Product Manager' },
+                ])}
+              />
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -163,23 +161,21 @@ const page: Page = {
             </Text>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="large">
-                  <Heading level="3">Add role</Heading>
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                </Stack>
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="3">Add role</Heading>
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -201,26 +197,24 @@ const page: Page = {
             </Stack>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="large">
-                  <Heading level="3">Add role</Heading>
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                  <TextField label="Company name" />
-                  <MonthPicker label="Started" />
-                  <Textarea label="Description" />
-                </Stack>
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="3">Add role</Heading>
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+                <TextField label="Company name" />
+                <MonthPicker label="Started" />
+                <Textarea label="Description" />
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -242,26 +236,24 @@ const page: Page = {
             </Stack>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="large">
-                  <Heading level="3">Add role</Heading>
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                  <TextField label="Company name" />
-                  <MonthPicker label="Started" />
-                  <Textarea label="Description" secondaryLabel="recommended" />
-                </Stack>
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="3">Add role</Heading>
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+                <TextField label="Company name" />
+                <MonthPicker label="Started" />
+                <Textarea label="Description" secondaryLabel="recommended" />
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -273,30 +265,28 @@ const page: Page = {
             </Text>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="large">
-                  <Heading level="3">Add role</Heading>
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                  <TextField label="Company name" />
-                  <MonthPicker label="Started" />
-                  <Textarea
-                    label="Description"
-                    secondaryLabel="recommended"
-                    description="Summarise your responsibilities, skills and achievements."
-                  />
-                </Stack>
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="3">Add role</Heading>
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+                <TextField label="Company name" />
+                <MonthPicker label="Started" />
+                <Textarea
+                  label="Description"
+                  secondaryLabel="recommended"
+                  description="Summarise your responsibilities, skills and achievements."
+                />
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -309,31 +299,29 @@ const page: Page = {
             </Text>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="large">
-                  <Heading level="3">Add role</Heading>
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                  <TextField label="Company name" />
-                  <MonthPicker label="Started" />
-                  <Textarea
-                    label="Description"
-                    secondaryLabel="recommended"
-                    description="Summarise your responsibilities, skills and achievements."
-                  />
-                  <Button>Save</Button>
-                </Stack>
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="3">Add role</Heading>
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+                <TextField label="Company name" />
+                <MonthPicker label="Started" />
+                <Textarea
+                  label="Description"
+                  secondaryLabel="recommended"
+                  description="Summarise your responsibilities, skills and achievements."
+                />
+                <Button>Save</Button>
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -353,33 +341,31 @@ const page: Page = {
             </Stack>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="large">
-                  <Heading level="3">Add role</Heading>
-                  <Autosuggest
-                    label="Job title"
-                    suggestions={filterSuggestions([
-                      { text: 'Developer' },
-                      { text: 'Designer' },
-                      { text: 'Product Manager' },
-                    ])}
-                  />
-                  <TextField label="Company name" />
-                  <MonthPicker label="Started" />
-                  <Textarea
-                    label="Description"
-                    secondaryLabel="recommended"
-                    description="Summarise your responsibilities, skills and achievements."
-                  />
-                  <Actions>
-                    <Button>Save</Button>
-                  </Actions>
-                </Stack>
-              </Card>,
-            )
-          }
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="3">Add role</Heading>
+                <Autosuggest
+                  label="Job title"
+                  suggestions={filterSuggestions([
+                    { text: 'Developer' },
+                    { text: 'Designer' },
+                    { text: 'Product Manager' },
+                  ])}
+                />
+                <TextField label="Company name" />
+                <MonthPicker label="Started" />
+                <Textarea
+                  label="Description"
+                  secondaryLabel="recommended"
+                  description="Summarise your responsibilities, skills and achievements."
+                />
+                <Actions>
+                  <Button>Save</Button>
+                </Actions>
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -401,35 +387,33 @@ const page: Page = {
             </Stack>
           }
         >
-          {() =>
-            source(
-              <Card>
-                <Stack space="xlarge">
-                  <Heading level="3">Add role</Heading>
-                  <Stack space="large">
-                    <Autosuggest
-                      label="Job title"
-                      suggestions={filterSuggestions([
-                        { text: 'Developer' },
-                        { text: 'Designer' },
-                        { text: 'Product Manager' },
-                      ])}
-                    />
-                    <TextField label="Company name" />
-                    <MonthPicker label="Started" />
-                    <Textarea
-                      label="Description"
-                      secondaryLabel="recommended"
-                      description="Summarise your responsibilities, skills and achievements."
-                    />
-                  </Stack>
-                  <Actions>
-                    <Button>Save</Button>
-                  </Actions>
+          {source(
+            <Card>
+              <Stack space="xlarge">
+                <Heading level="3">Add role</Heading>
+                <Stack space="large">
+                  <Autosuggest
+                    label="Job title"
+                    suggestions={filterSuggestions([
+                      { text: 'Developer' },
+                      { text: 'Designer' },
+                      { text: 'Product Manager' },
+                    ])}
+                  />
+                  <TextField label="Company name" />
+                  <MonthPicker label="Started" />
+                  <Textarea
+                    label="Description"
+                    secondaryLabel="recommended"
+                    description="Summarise your responsibilities, skills and achievements."
+                  />
                 </Stack>
-              </Card>,
-            )
-          }
+                <Actions>
+                  <Button>Save</Button>
+                </Actions>
+              </Stack>
+            </Card>,
+          )}
         </Step>
       </Stack>
 
diff --git a/site/src/App/routes/examples/job-summary/job-summary.tsx b/site/src/App/routes/examples/job-summary/job-summary.tsx
index 4c4cd8ed3370..561b314af897 100644
--- a/site/src/App/routes/examples/job-summary/job-summary.tsx
+++ b/site/src/App/routes/examples/job-summary/job-summary.tsx
@@ -1,4 +1,5 @@
 import { LinkableHeading } from '@braid-design-system/docs-ui';
+import source from '@braid-design-system/source.macro';
 import {
   Heading,
   Text,
@@ -19,7 +20,7 @@ import {
 } from 'braid-src/lib/components';
 import type { ReactNodeNoStrings } from 'braid-src/lib/components/private/ReactNodeNoStrings';
 import { Placeholder } from 'braid-src/lib/playroom/components';
-import type { ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
 import type { Page } from '../../../../types';
 import Code from '../../../Code/Code';
@@ -29,7 +30,7 @@ import { TextStack } from '../../../TextStack/TextStack';
 interface StepProps {
   heading?: string;
   detail: ReactNodeNoStrings;
-  children: ReactElement;
+  children: ComponentProps<typeof Code>['children'];
 }
 const Step = ({ heading, detail, children }: StepProps) => (
   <Stack space="xlarge">
@@ -129,17 +130,19 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Heading level="4">Product Designer</Heading>
-            <Text>Braid Design Pty Ltd</Text>
-            <Text>Melbourne</Text>
-            <Text>Information Technology</Text>
-            <Text>150k+</Text>
-            <Text>
-              Long description of card details providing more information.
-            </Text>
-            <Text>2d ago</Text>
-          </Card>
+          {source(
+            <Card>
+              <Heading level="4">Product Designer</Heading>
+              <Text>Braid Design Pty Ltd</Text>
+              <Text>Melbourne</Text>
+              <Text>Information Technology</Text>
+              <Text>150k+</Text>
+              <Text>
+                Long description of card details providing more information.
+              </Text>
+              <Text>2d ago</Text>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -155,19 +158,21 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Stack space="large">
-              <Heading level="4">Product Designer</Heading>
-              <Text>Braid Design Pty Ltd</Text>
-              <Text>Melbourne</Text>
-              <Text>Information Technology</Text>
-              <Text>150k+</Text>
-              <Text>
-                Long description of card details providing more information.
-              </Text>
-              <Text>2d ago</Text>
-            </Stack>
-          </Card>
+          {source(
+            <Card>
+              <Stack space="large">
+                <Heading level="4">Product Designer</Heading>
+                <Text>Braid Design Pty Ltd</Text>
+                <Text>Melbourne</Text>
+                <Text>Information Technology</Text>
+                <Text>150k+</Text>
+                <Text>
+                  Long description of card details providing more information.
+                </Text>
+                <Text>2d ago</Text>
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -184,26 +189,28 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Stack space="large">
-              <Stack space="small">
-                <Heading level="4">Product Designer</Heading>
-                <Text>Braid Design Pty Ltd</Text>
-              </Stack>
+          {source(
+            <Card>
+              <Stack space="large">
+                <Stack space="small">
+                  <Heading level="4">Product Designer</Heading>
+                  <Text>Braid Design Pty Ltd</Text>
+                </Stack>
 
-              <Stack space="small">
-                <Text>Melbourne</Text>
-                <Text>Information Technology</Text>
-                <Text>150k+</Text>
-              </Stack>
+                <Stack space="small">
+                  <Text>Melbourne</Text>
+                  <Text>Information Technology</Text>
+                  <Text>150k+</Text>
+                </Stack>
 
-              <Text>
-                Long description of card details providing more information.
-              </Text>
+                <Text>
+                  Long description of card details providing more information.
+                </Text>
 
-              <Text>2d ago</Text>
-            </Stack>
-          </Card>
+                <Text>2d ago</Text>
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -219,28 +226,30 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Stack space="large">
-              <Stack space="small">
-                <Heading level="4">Product Designer</Heading>
-                <Text>Braid Design Pty Ltd</Text>
-              </Stack>
+          {source(
+            <Card>
+              <Stack space="large">
+                <Stack space="small">
+                  <Heading level="4">Product Designer</Heading>
+                  <Text>Braid Design Pty Ltd</Text>
+                </Stack>
 
-              <Stack space="small">
-                <Text tone="secondary">Melbourne</Text>
-                <Text tone="secondary">Information Technology</Text>
-                <Text tone="secondary">150k+</Text>
-              </Stack>
+                <Stack space="small">
+                  <Text tone="secondary">Melbourne</Text>
+                  <Text tone="secondary">Information Technology</Text>
+                  <Text tone="secondary">150k+</Text>
+                </Stack>
 
-              <Text>
-                Long description of card details providing more information.
-              </Text>
+                <Text>
+                  Long description of card details providing more information.
+                </Text>
 
-              <Text tone="secondary" size="small">
-                2d ago
-              </Text>
-            </Stack>
-          </Card>
+                <Text tone="secondary" size="small">
+                  2d ago
+                </Text>
+              </Stack>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -254,34 +263,36 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Stack space="large">
-              <Stack space="small">
-                <Heading level="4">Product Designer</Heading>
-                <Text>Braid Design Pty Ltd</Text>
-              </Stack>
+          {source(
+            <Card>
+              <Stack space="large">
+                <Stack space="small">
+                  <Heading level="4">Product Designer</Heading>
+                  <Text>Braid Design Pty Ltd</Text>
+                </Stack>
 
-              <Stack space="small">
-                <Text tone="secondary" icon={<IconLocation />}>
-                  Melbourne
-                </Text>
-                <Text tone="secondary" icon={<IconTag />}>
-                  Information Technology
+                <Stack space="small">
+                  <Text tone="secondary" icon={<IconLocation />}>
+                    Melbourne
+                  </Text>
+                  <Text tone="secondary" icon={<IconTag />}>
+                    Information Technology
+                  </Text>
+                  <Text tone="secondary" icon={<IconMoney />}>
+                    150k+
+                  </Text>
+                </Stack>
+
+                <Text>
+                  Long description of card details providing more information.
                 </Text>
-                <Text tone="secondary" icon={<IconMoney />}>
-                  150k+
+
+                <Text tone="secondary" size="small">
+                  2d ago
                 </Text>
               </Stack>
-
-              <Text>
-                Long description of card details providing more information.
-              </Text>
-
-              <Text tone="secondary" size="small">
-                2d ago
-              </Text>
-            </Stack>
-          </Card>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -295,35 +306,37 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Stack space="large">
-              <Stack space="small">
-                <Badge tone="positive">New</Badge>
-                <Heading level="4">Product Designer</Heading>
-                <Text>Braid Design Pty Ltd</Text>
-              </Stack>
+          {source(
+            <Card>
+              <Stack space="large">
+                <Stack space="small">
+                  <Badge tone="positive">New</Badge>
+                  <Heading level="4">Product Designer</Heading>
+                  <Text>Braid Design Pty Ltd</Text>
+                </Stack>
 
-              <Stack space="small">
-                <Text tone="secondary" icon={<IconLocation />}>
-                  Melbourne
-                </Text>
-                <Text tone="secondary" icon={<IconTag />}>
-                  Information Technology
+                <Stack space="small">
+                  <Text tone="secondary" icon={<IconLocation />}>
+                    Melbourne
+                  </Text>
+                  <Text tone="secondary" icon={<IconTag />}>
+                    Information Technology
+                  </Text>
+                  <Text tone="secondary" icon={<IconMoney />}>
+                    150k+
+                  </Text>
+                </Stack>
+
+                <Text>
+                  Long description of card details providing more information.
                 </Text>
-                <Text tone="secondary" icon={<IconMoney />}>
-                  150k+
+
+                <Text tone="secondary" size="small">
+                  2d ago
                 </Text>
               </Stack>
-
-              <Text>
-                Long description of card details providing more information.
-              </Text>
-
-              <Text tone="secondary" size="small">
-                2d ago
-              </Text>
-            </Stack>
-          </Card>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -344,38 +357,40 @@ const page: Page = {
             </Stack>
           }
         >
-          <Card>
-            <Stack space="large">
-              <Stack space="small">
-                <Badge tone="positive">New</Badge>
-                <Heading level="4">Product Designer</Heading>
-                <Inline space="small" alignY="center">
-                  <Text>Braid Design Pty Ltd</Text>
-                  <Rating rating={4.5} />
-                </Inline>
-              </Stack>
+          {source(
+            <Card>
+              <Stack space="large">
+                <Stack space="small">
+                  <Badge tone="positive">New</Badge>
+                  <Heading level="4">Product Designer</Heading>
+                  <Inline space="small" alignY="center">
+                    <Text>Braid Design Pty Ltd</Text>
+                    <Rating rating={4.5} />
+                  </Inline>
+                </Stack>
 
-              <Stack space="small">
-                <Text tone="secondary" icon={<IconLocation />}>
-                  Melbourne
-                </Text>
-                <Text tone="secondary" icon={<IconTag />}>
-                  Information Technology
+                <Stack space="small">
+                  <Text tone="secondary" icon={<IconLocation />}>
+                    Melbourne
+                  </Text>
+                  <Text tone="secondary" icon={<IconTag />}>
+                    Information Technology
+                  </Text>
+                  <Text tone="secondary" icon={<IconMoney />}>
+                    150k+
+                  </Text>
+                </Stack>
+
+                <Text>
+                  Long description of card details providing more information.
                 </Text>
-                <Text tone="secondary" icon={<IconMoney />}>
-                  150k+
+
+                <Text tone="secondary" size="small">
+                  2d ago
                 </Text>
               </Stack>
-
-              <Text>
-                Long description of card details providing more information.
-              </Text>
-
-              <Text tone="secondary" size="small">
-                2d ago
-              </Text>
-            </Stack>
-          </Card>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -395,12 +410,14 @@ const page: Page = {
             </Stack>
           }
         >
-          <Card>
-            <Spread space="small">
-              <Placeholder label="Job content" height={80} />
-              <Placeholder label="Save action" height={80} />
-            </Spread>
-          </Card>
+          {source(
+            <Card>
+              <Spread space="small">
+                <Placeholder label="Job content" height={80} />
+                <Placeholder label="Save action" height={80} />
+              </Spread>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -415,17 +432,19 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Spread space="small">
-              <Placeholder label="Job content" height={80} />
-              <ButtonIcon
-                variant="transparent"
-                size="large"
-                icon={<IconBookmark />}
-                label="Save job"
-              />
-            </Spread>
-          </Card>
+          {source(
+            <Card>
+              <Spread space="small">
+                <Placeholder label="Job content" height={80} />
+                <ButtonIcon
+                  variant="transparent"
+                  size="large"
+                  icon={<IconBookmark />}
+                  label="Save job"
+                />
+              </Spread>
+            </Card>,
+          )}
         </Step>
 
         <Step
@@ -436,46 +455,48 @@ const page: Page = {
             </Text>
           }
         >
-          <Card>
-            <Spread space="small">
-              <Stack space="large">
-                <Stack space="small">
-                  <Badge tone="positive">New</Badge>
-                  <Heading level="4">Product Designer</Heading>
-                  <Inline space="small" alignY="center">
-                    <Text>Braid Design Pty Ltd</Text>
-                    <Rating rating={4.5} />
-                  </Inline>
-                </Stack>
-
-                <Stack space="small">
-                  <Text tone="secondary" icon={<IconLocation />}>
-                    Melbourne
+          {source(
+            <Card>
+              <Spread space="small">
+                <Stack space="large">
+                  <Stack space="small">
+                    <Badge tone="positive">New</Badge>
+                    <Heading level="4">Product Designer</Heading>
+                    <Inline space="small" alignY="center">
+                      <Text>Braid Design Pty Ltd</Text>
+                      <Rating rating={4.5} />
+                    </Inline>
+                  </Stack>
+
+                  <Stack space="small">
+                    <Text tone="secondary" icon={<IconLocation />}>
+                      Melbourne
+                    </Text>
+                    <Text tone="secondary" icon={<IconTag />}>
+                      Information Technology
+                    </Text>
+                    <Text tone="secondary" icon={<IconMoney />}>
+                      150k+
+                    </Text>
+                  </Stack>
+
+                  <Text>
+                    Long description of card details providing more information.
                   </Text>
-                  <Text tone="secondary" icon={<IconTag />}>
-                    Information Technology
-                  </Text>
-                  <Text tone="secondary" icon={<IconMoney />}>
-                    150k+
+
+                  <Text tone="secondary" size="small">
+                    2d ago
                   </Text>
                 </Stack>
-
-                <Text>
-                  Long description of card details providing more information.
-                </Text>
-
-                <Text tone="secondary" size="small">
-                  2d ago
-                </Text>
-              </Stack>
-              <ButtonIcon
-                variant="transparent"
-                size="large"
-                icon={<IconBookmark />}
-                label="Save job"
-              />
-            </Spread>
-          </Card>
+                <ButtonIcon
+                  variant="transparent"
+                  size="large"
+                  icon={<IconBookmark />}
+                  label="Save job"
+                />
+              </Spread>
+            </Card>,
+          )}
         </Step>
 
         <Text>
diff --git a/site/src/App/routes/examples/marketing-banner/marketing-banner.tsx b/site/src/App/routes/examples/marketing-banner/marketing-banner.tsx
index 368b68e2f516..15394f123c43 100644
--- a/site/src/App/routes/examples/marketing-banner/marketing-banner.tsx
+++ b/site/src/App/routes/examples/marketing-banner/marketing-banner.tsx
@@ -16,7 +16,7 @@ import {
 } from 'braid-src/lib/components';
 import type { ReactNodeNoStrings } from 'braid-src/lib/components/private/ReactNodeNoStrings';
 import { Placeholder } from 'braid-src/lib/playroom/components';
-import type { ReactElement } from 'react';
+import type { ComponentProps } from 'react';
 
 import type { Page } from '../../../../types';
 import Code from '../../../Code/Code';
@@ -26,7 +26,7 @@ import { TextStack } from '../../../TextStack/TextStack';
 interface StepProps {
   heading?: string;
   detail: ReactNodeNoStrings;
-  children: ReactElement;
+  children: ComponentProps<typeof Code>['children'];
 }
 const Step = ({ heading, detail, children }: StepProps) => (
   <Stack space="xlarge">
@@ -141,13 +141,15 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box>
-            <Heading level="1">
-              Heard about our latest marketing campaign?
-            </Heading>
-            <Button>Show me</Button>
-            <Placeholder height={300} label="Marketing illustration" />
-          </Box>
+          {source(
+            <Box>
+              <Heading level="1">
+                Heard about our latest marketing campaign?
+              </Heading>
+              <Button>Show me</Button>
+              <Placeholder height={300} label="Marketing illustration" />
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -172,14 +174,16 @@ const page: Page = {
             </Stack>
           }
         >
-          <Columns space="gutter">
-            <Column width="3/5">
-              <Placeholder height={300} />
-            </Column>
-            <Column>
-              <Placeholder height={300} />
-            </Column>
-          </Columns>
+          {source(
+            <Columns space="gutter">
+              <Column width="3/5">
+                <Placeholder height={300} />
+              </Column>
+              <Column>
+                <Placeholder height={300} />
+              </Column>
+            </Columns>,
+          )}
         </Step>
 
         <Step
@@ -216,21 +220,23 @@ const page: Page = {
             </Text>
           }
         >
-          <Box>
-            <Columns space="gutter">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Button>Show me</Button>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box>
+              <Columns space="gutter">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Button>Show me</Button>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -242,21 +248,23 @@ const page: Page = {
             </Text>
           }
         >
-          <Box>
-            <Columns space="gutter" alignY="center">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Button>Show me</Button>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box>
+              <Columns space="gutter" alignY="center">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Button>Show me</Button>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -269,21 +277,23 @@ const page: Page = {
             </Text>
           }
         >
-          <Box>
-            <Columns space="gutter" alignY="center">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Button variant="ghost">Show me</Button>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box>
+              <Columns space="gutter" alignY="center">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Button variant="ghost">Show me</Button>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -302,23 +312,25 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box>
-            <Columns space="gutter" alignY="center">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Inline space="none">
-                    <Button variant="ghost">Show me</Button>
-                  </Inline>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box>
+              <Columns space="gutter" alignY="center">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Inline space="none">
+                      <Button variant="ghost">Show me</Button>
+                    </Inline>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -339,25 +351,27 @@ const page: Page = {
             </>
           }
         >
-          <Box background="brandAccent">
-            <Columns space="gutter" alignY="center">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Inline space="none">
-                    <Button variant="ghost" tone="neutral">
-                      Show me
-                    </Button>
-                  </Inline>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box background="brandAccent">
+              <Columns space="gutter" alignY="center">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Inline space="none">
+                      <Button variant="ghost" tone="neutral">
+                        Show me
+                      </Button>
+                    </Inline>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Text>
@@ -398,25 +412,27 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box background="brandAccent" paddingX="small" paddingY="xlarge">
-            <Columns space="gutter" alignY="center">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Inline space="none">
-                    <Button variant="ghost" tone="neutral">
-                      Show me
-                    </Button>
-                  </Inline>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box background="brandAccent" paddingX="small" paddingY="xlarge">
+              <Columns space="gutter" alignY="center">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Inline space="none">
+                      <Button variant="ghost" tone="neutral">
+                        Show me
+                      </Button>
+                    </Inline>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Text component="p">
@@ -444,25 +460,27 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box background="brandAccent" paddingX="small" paddingY="xlarge">
-            <Columns space="gutter" alignY="center" collapseBelow="tablet">
-              <Column width="3/5">
-                <Stack space="large">
-                  <Heading level="1">
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Inline space="none">
-                    <Button variant="ghost" tone="neutral">
-                      Show me
-                    </Button>
-                  </Inline>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box background="brandAccent" paddingX="small" paddingY="xlarge">
+              <Columns space="gutter" alignY="center" collapseBelow="tablet">
+                <Column width="3/5">
+                  <Stack space="large">
+                    <Heading level="1">
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Inline space="none">
+                      <Button variant="ghost" tone="neutral">
+                        Show me
+                      </Button>
+                    </Inline>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Text component="p">
@@ -501,31 +519,33 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box background="brandAccent" paddingX="small" paddingY="xlarge">
-            <Columns space="gutter" alignY="center" collapseBelow="tablet">
-              <Column width="3/5">
-                <Stack space="xlarge">
-                  <Heading
-                    level="1"
-                    align={{ mobile: 'center', tablet: 'left' }}
-                  >
-                    Heard about our latest marketing campaign?
-                  </Heading>
-                  <Inline
-                    space="none"
-                    align={{ mobile: 'center', tablet: 'left' }}
-                  >
-                    <Button variant="ghost" tone="neutral">
-                      Show me
-                    </Button>
-                  </Inline>
-                </Stack>
-              </Column>
-              <Column>
-                <Placeholder height={300} label="Marketing illustration" />
-              </Column>
-            </Columns>
-          </Box>
+          {source(
+            <Box background="brandAccent" paddingX="small" paddingY="xlarge">
+              <Columns space="gutter" alignY="center" collapseBelow="tablet">
+                <Column width="3/5">
+                  <Stack space="xlarge">
+                    <Heading
+                      level="1"
+                      align={{ mobile: 'center', tablet: 'left' }}
+                    >
+                      Heard about our latest marketing campaign?
+                    </Heading>
+                    <Inline
+                      space="none"
+                      align={{ mobile: 'center', tablet: 'left' }}
+                    >
+                      <Button variant="ghost" tone="neutral">
+                        Show me
+                      </Button>
+                    </Inline>
+                  </Stack>
+                </Column>
+                <Column>
+                  <Placeholder height={300} label="Marketing illustration" />
+                </Column>
+              </Columns>
+            </Box>,
+          )}
         </Step>
 
         <Text component="p">
@@ -556,27 +576,29 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box background="brandAccent" paddingX="small" paddingY="xlarge">
-            <ContentBlock>
-              <Columns space="gutter" alignY="center">
-                <Column width="3/5">
-                  <Stack space="large">
-                    <Heading level="1">
-                      Heard about our latest marketing campaign?
-                    </Heading>
-                    <Inline space="none">
-                      <Button variant="ghost" tone="neutral">
-                        Show me
-                      </Button>
-                    </Inline>
-                  </Stack>
-                </Column>
-                <Column>
-                  <Placeholder height={300} label="Marketing illustration" />
-                </Column>
-              </Columns>
-            </ContentBlock>
-          </Box>
+          {source(
+            <Box background="brandAccent" paddingX="small" paddingY="xlarge">
+              <ContentBlock>
+                <Columns space="gutter" alignY="center">
+                  <Column width="3/5">
+                    <Stack space="large">
+                      <Heading level="1">
+                        Heard about our latest marketing campaign?
+                      </Heading>
+                      <Inline space="none">
+                        <Button variant="ghost" tone="neutral">
+                          Show me
+                        </Button>
+                      </Inline>
+                    </Stack>
+                  </Column>
+                  <Column>
+                    <Placeholder height={300} label="Marketing illustration" />
+                  </Column>
+                </Columns>
+              </ContentBlock>
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -595,37 +617,39 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box
-            background="brandAccent"
-            paddingX="small"
-            paddingY={{ mobile: 'xlarge', tablet: 'xxlarge' }}
-          >
-            <ContentBlock>
-              <Columns space="gutter" alignY="center" collapseBelow="tablet">
-                <Column width="3/5">
-                  <Stack space="xlarge">
-                    <Heading
-                      level="1"
-                      align={{ mobile: 'center', tablet: 'left' }}
-                    >
-                      Heard about our latest marketing campaign?
-                    </Heading>
-                    <Inline
-                      space="none"
-                      align={{ mobile: 'center', tablet: 'left' }}
-                    >
-                      <Button variant="ghost" tone="neutral">
-                        Show me
-                      </Button>
-                    </Inline>
-                  </Stack>
-                </Column>
-                <Column>
-                  <Placeholder height={300} label="Marketing illustration" />
-                </Column>
-              </Columns>
-            </ContentBlock>
-          </Box>
+          {source(
+            <Box
+              background="brandAccent"
+              paddingX="small"
+              paddingY={{ mobile: 'xlarge', tablet: 'xxlarge' }}
+            >
+              <ContentBlock>
+                <Columns space="gutter" alignY="center" collapseBelow="tablet">
+                  <Column width="3/5">
+                    <Stack space="xlarge">
+                      <Heading
+                        level="1"
+                        align={{ mobile: 'center', tablet: 'left' }}
+                      >
+                        Heard about our latest marketing campaign?
+                      </Heading>
+                      <Inline
+                        space="none"
+                        align={{ mobile: 'center', tablet: 'left' }}
+                      >
+                        <Button variant="ghost" tone="neutral">
+                          Show me
+                        </Button>
+                      </Inline>
+                    </Stack>
+                  </Column>
+                  <Column>
+                    <Placeholder height={300} label="Marketing illustration" />
+                  </Column>
+                </Columns>
+              </ContentBlock>
+            </Box>,
+          )}
         </Step>
 
         <Step
@@ -640,41 +664,43 @@ const page: Page = {
             </Stack>
           }
         >
-          <Box
-            background="brandAccent"
-            paddingX="small"
-            paddingY={{ mobile: 'xlarge', tablet: 'xxlarge' }}
-          >
-            <ContentBlock>
-              <Columns
-                space={{ mobile: 'xlarge', tablet: 'gutter' }}
-                alignY="center"
-                collapseBelow="tablet"
-              >
-                <Column width="3/5">
-                  <Stack space="large">
-                    <Heading
-                      level="1"
-                      align={{ mobile: 'center', tablet: 'left' }}
-                    >
-                      Heard about our latest marketing campaign?
-                    </Heading>
-                    <Inline
-                      space="none"
-                      align={{ mobile: 'center', tablet: 'left' }}
-                    >
-                      <Button variant="ghost" tone="neutral">
-                        Show me
-                      </Button>
-                    </Inline>
-                  </Stack>
-                </Column>
-                <Column>
-                  <Placeholder height={300} label="Marketing illustration" />
-                </Column>
-              </Columns>
-            </ContentBlock>
-          </Box>
+          {source(
+            <Box
+              background="brandAccent"
+              paddingX="small"
+              paddingY={{ mobile: 'xlarge', tablet: 'xxlarge' }}
+            >
+              <ContentBlock>
+                <Columns
+                  space={{ mobile: 'xlarge', tablet: 'gutter' }}
+                  alignY="center"
+                  collapseBelow="tablet"
+                >
+                  <Column width="3/5">
+                    <Stack space="large">
+                      <Heading
+                        level="1"
+                        align={{ mobile: 'center', tablet: 'left' }}
+                      >
+                        Heard about our latest marketing campaign?
+                      </Heading>
+                      <Inline
+                        space="none"
+                        align={{ mobile: 'center', tablet: 'left' }}
+                      >
+                        <Button variant="ghost" tone="neutral">
+                          Show me
+                        </Button>
+                      </Inline>
+                    </Stack>
+                  </Column>
+                  <Column>
+                    <Placeholder height={300} label="Marketing illustration" />
+                  </Column>
+                </Columns>
+              </ContentBlock>
+            </Box>,
+          )}
         </Step>
       </Stack>
 
diff --git a/site/src/App/routes/guides/development-workflow.tsx b/site/src/App/routes/guides/development-workflow.tsx
index 844f28daf44d..76d79eb5971a 100644
--- a/site/src/App/routes/guides/development-workflow.tsx
+++ b/site/src/App/routes/guides/development-workflow.tsx
@@ -13,7 +13,6 @@ import {
   Column,
   Box,
 } from 'braid-src/lib/components';
-import dedent from 'dedent';
 
 import type { Page } from '../../../types';
 import Code from '../../Code/Code';
@@ -288,7 +287,7 @@ const DevelopmentWorkflow = () => (
       <InlineCode>flex-basis</InlineCode> value:
     </Text>
     <Code>
-      {dedent`
+      {`
         // myComponent.css.ts
         import { style } from '@vanilla-extract/css';
         import { vars, responsiveStyle } from 'braid-design-system/css';
@@ -310,7 +309,7 @@ const DevelopmentWorkflow = () => (
       and type checking within your editor.
     </Text>
     <Code>
-      {dedent`
+      {`
         // myComponent.ts
         import * as styles from './myComponent.css';
 


Reviews:
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-28T05:33:39Z
user: login: michaeltaranto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T03:21:59Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T03:25:56Z
user: login: michaeltaranto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T03:29:26Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T04:22:54Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T04:23:10Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-29T04:24:44Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T00:01:24Z
user: login: michaeltaranto
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T00:28:06Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T01:18:01Z
user: login: askoufis
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T01:20:20Z
user: login: michaeltaranto
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-04-30T04:31:43Z

Review comments:
diff_hunk: @@ -60,10 +60,52 @@ pluginTester({
         import source from './source.macro';
 
         const result = source({
-          hello: () => 'world',
-          some: 'value',
+          hello: () => ({ world: '!', foo: 'bar'}),
path: packages/source.macro/source.macro.test.ts
user: login: askoufis
body: For some reason the previous code here was unable to be parsed by `prettier` running inside the macro. I modified the test case a bit as a workaround.
created_at: 2025-04-28T05:33:38Z
author_association: CONTRIBUTOR
path: packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx
user: login: michaeltaranto
body: Can we remove `dedent` from here too now?
created_at: 2025-04-29T03:21:59Z
author_association: CONTRIBUTOR
path: packages/braid-design-system/src/lib/components/useToast/useToast.docs.tsx
user: login: askoufis
body: Woops, missed those. https://github.com/seek-oss/braid-design-system/pull/1770/commits/920d9a5d91464b53f1872d9391373022a5946169
created_at: 2025-04-29T03:25:56Z
author_association: CONTRIBUTOR
path: packages/source.macro/source.macro.cjs
user: login: michaeltaranto
body: Should formatting be able to be controlled via config? I think for all our use cases we would want it formatted, but wonder whether we should be able to opt out of it?

What do you think?
created_at: 2025-04-29T03:29:26Z
author_association: CONTRIBUTOR
path: packages/source.macro/source.macro.cjs
user: login: askoufis
body: Good idea! Thought this would be tedious since you can only deal with AST nodes inside the macro, but turns out `path.evaluate()` exists, which is very handy for this use case.

https://github.com/seek-oss/braid-design-system/pull/1770/commits/dde51ee949611bb63d2c3aee29e65ce080b9d951
created_at: 2025-04-29T04:22:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,20 @@
+---
+'@braid-design-system/source.macro': minor
path: .changeset/better-animals-deny.md
user: login: askoufis
body: Downgraded this to `minor` as we're still 0-versioned.
created_at: 2025-04-29T04:23:10Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,13 +103,214 @@ exports[`source.macro 5. code only: 5. code only 1`] = `
 import source from './source.macro';
 
 const result = source({
-  hello: () => 'world',
-  some: 'value',
+  hello: () => ({ world: '!', foo: 'bar'}),
 });
       
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const result = "{\\n  hello: () => 'world',\\n  some: 'value'\\n}";
+const result = '{\\n  hello: () => ({ world: "!", foo: "bar" })\\n}';
+
+`;
+
+exports[`source.macro 6. JSX with playroom state: 6. JSX with playroom state 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+      );
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: '<>\\n  {setDefaultState("jobs", [\\n    {\\n      id: 1,\\n      title: "Lead Designer",\\n      location: "Melbourne",\\n    },\\n    {\\n      id: 2,\\n      title: "Senior Developer",\\n      location: "Sydney",\\n    },\\n    {\\n      id: 3,\\n      title: "Product Manager",\\n      location: "Canberra",\\n    },\\n  ])}\\n\\n  <Stack space="medium">\\n    {getState("jobs").map((job) => (\\n      <Card key={job.id}>\\n        <Stack space="small">\\n          <Text weight="strong">{job.title}</Text>\\n          <Text>{job.location}</Text>\\n        </Stack>\\n      </Card>\\n    ))}\\n  </Stack>\\n</>',
+        value: (
+          <>
+            {setDefaultState('jobs', [
+              {
+                id: 1,
+                title: 'Lead Designer',
+                location: 'Melbourne',
+              },
+              {
+                id: 2,
+                title: 'Senior Developer',
+                location: 'Sydney',
+              },
+              {
+                id: 3,
+                title: 'Product Manager',
+                location: 'Canberra',
+              },
+            ])}
+
+            <Stack space="medium">
+              {getState('jobs').map((job) => (
+                <Card key={job.id}>
+                  <Stack space="small">
+                    <Text weight="strong">{job.title}</Text>
+                    <Text>{job.location}</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </>
+        ),
+      };
+    }}
+  </Code>
+);
+
+`;
+
+exports[`source.macro 7. allows disabling prettier formatting: 7. allows disabling prettier formatting 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+        { formatWithPrettier: false });
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: "<>\\n          {setDefaultState('jobs', [\\n  {\\n    id: 1,\\n    title: 'Lead Designer',\\n    location: 'Melbourne'\\n  },\\n  {\\n    id: 2,\\n    title: 'Senior Developer',\\n    location: 'Sydney'\\n  },\\n  {\\n    id: 3,\\n    title: 'Product Manager',\\n    location: 'Canberra'\\n  }]\\n  )}\\n\\n          <Stack space=\\"medium\\">\\n            {getState('jobs').map((job) =>\\n    <Card key={job.id}>\\n                <Stack space=\\"small\\">\\n                  <Text weight=\\"strong\\">{job.title}</Text>\\n                  <Text>{job.location}</Text>\\n                </Stack>\\n              </Card>\\n    )}\\n          </Stack>\\n        </>",
path: packages/source.macro/__snapshots__/source.macro.test.ts.snap
user: login: askoufis
body: Note the different quoting and whitespace relative to the formatted snapshot above.
created_at: 2025-04-29T04:24:43Z
author_association: CONTRIBUTOR
path: packages/source.macro/source.macro.cjs
user: login: askoufis
body: Hoisted the config to the plugin level as discussed. https://github.com/seek-oss/braid-design-system/pull/1770/commits/8667eb7f88784328a1a3453e5add53b4a3d39045
created_at: 2025-04-30T00:01:24Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,13 +103,194 @@ exports[`source.macro 5. code only: 5. code only 1`] = `
 import source from './source.macro';
 
 const result = source({
-  hello: () => 'world',
-  some: 'value',
+  hello: () => ({ world: '!', foo: 'bar'}),
 });
       
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const result = "{\\n  hello: () => 'world',\\n  some: 'value'\\n}";
+const result = '{\\n  hello: () => ({ world: "!", foo: "bar" })\\n}';
+
+`;
+
+exports[`source.macro 6. JSX with playroom state: 6. JSX with playroom state 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+      );
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: '<>\\n  {setDefaultState("jobs", [\\n    {\\n      id: 1,\\n      title: "Lead Designer",\\n      location: "Melbourne",\\n    },\\n    {\\n      id: 2,\\n      title: "Senior Developer",\\n      location: "Sydney",\\n    },\\n    {\\n      id: 3,\\n      title: "Product Manager",\\n      location: "Canberra",\\n    },\\n  ])}\\n\\n  <Stack space="medium">\\n    {getState("jobs").map((job) => (\\n      <Card key={job.id}>\\n        <Stack space="small">\\n          <Text weight="strong">{job.title}</Text>\\n          <Text>{job.location}</Text>\\n        </Stack>\\n      </Card>\\n    ))}\\n  </Stack>\\n</>',
+        value: (
+          <>
+            {setDefaultState('jobs', [
+              {
+                id: 1,
+                title: 'Lead Designer',
+                location: 'Melbourne',
+              },
+              {
+                id: 2,
+                title: 'Senior Developer',
+                location: 'Sydney',
+              },
+              {
+                id: 3,
+                title: 'Product Manager',
+                location: 'Canberra',
+              },
+            ])}
+
+            <Stack space="medium">
+              {getState('jobs').map((job) => (
+                <Card key={job.id}>
+                  <Stack space="small">
+                    <Text weight="strong">{job.title}</Text>
+                    <Text>{job.location}</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </>
+        ),
+      };
+    }}
+  </Code>
+);
+
+`;
+
+exports[`source.macro 7. allows disabling prettier formatting: 7. allows disabling prettier formatting 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+        { formatWithPrettier: false });
path: packages/source.macro/__snapshots__/source.macro.test.ts.snap
user: login: michaeltaranto
body: This is a hangover from the inline config right?
created_at: 2025-04-30T00:28:06Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,13 +103,194 @@ exports[`source.macro 5. code only: 5. code only 1`] = `
 import source from './source.macro';
 
 const result = source({
-  hello: () => 'world',
-  some: 'value',
+  hello: () => ({ world: '!', foo: 'bar'}),
 });
       
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const result = "{\\n  hello: () => 'world',\\n  some: 'value'\\n}";
+const result = '{\\n  hello: () => ({ world: "!", foo: "bar" })\\n}';
+
+`;
+
+exports[`source.macro 6. JSX with playroom state: 6. JSX with playroom state 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+      );
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: '<>\\n  {setDefaultState("jobs", [\\n    {\\n      id: 1,\\n      title: "Lead Designer",\\n      location: "Melbourne",\\n    },\\n    {\\n      id: 2,\\n      title: "Senior Developer",\\n      location: "Sydney",\\n    },\\n    {\\n      id: 3,\\n      title: "Product Manager",\\n      location: "Canberra",\\n    },\\n  ])}\\n\\n  <Stack space="medium">\\n    {getState("jobs").map((job) => (\\n      <Card key={job.id}>\\n        <Stack space="small">\\n          <Text weight="strong">{job.title}</Text>\\n          <Text>{job.location}</Text>\\n        </Stack>\\n      </Card>\\n    ))}\\n  </Stack>\\n</>',
+        value: (
+          <>
+            {setDefaultState('jobs', [
+              {
+                id: 1,
+                title: 'Lead Designer',
+                location: 'Melbourne',
+              },
+              {
+                id: 2,
+                title: 'Senior Developer',
+                location: 'Sydney',
+              },
+              {
+                id: 3,
+                title: 'Product Manager',
+                location: 'Canberra',
+              },
+            ])}
+
+            <Stack space="medium">
+              {getState('jobs').map((job) => (
+                <Card key={job.id}>
+                  <Stack space="small">
+                    <Text weight="strong">{job.title}</Text>
+                    <Text>{job.location}</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </>
+        ),
+      };
+    }}
+  </Code>
+);
+
+`;
+
+exports[`source.macro 7. allows disabling prettier formatting: 7. allows disabling prettier formatting 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+        { formatWithPrettier: false });
path: packages/source.macro/__snapshots__/source.macro.test.ts.snap
user: login: askoufis
body: Oh, yes it is.
created_at: 2025-04-30T01:18:01Z
author_association: CONTRIBUTOR
diff_hunk: @@ -103,13 +103,194 @@ exports[`source.macro 5. code only: 5. code only 1`] = `
 import source from './source.macro';
 
 const result = source({
-  hello: () => 'world',
-  some: 'value',
+  hello: () => ({ world: '!', foo: 'bar'}),
 });
       
 
       ↓ ↓ ↓ ↓ ↓ ↓
 
-const result = "{\\n  hello: () => 'world',\\n  some: 'value'\\n}";
+const result = '{\\n  hello: () => ({ world: "!", foo: "bar" })\\n}';
+
+`;
+
+exports[`source.macro 6. JSX with playroom state: 6. JSX with playroom state 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+      );
+    }}
+  </Code>;
+      
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+const result = (
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return {
+        code: '<>\\n  {setDefaultState("jobs", [\\n    {\\n      id: 1,\\n      title: "Lead Designer",\\n      location: "Melbourne",\\n    },\\n    {\\n      id: 2,\\n      title: "Senior Developer",\\n      location: "Sydney",\\n    },\\n    {\\n      id: 3,\\n      title: "Product Manager",\\n      location: "Canberra",\\n    },\\n  ])}\\n\\n  <Stack space="medium">\\n    {getState("jobs").map((job) => (\\n      <Card key={job.id}>\\n        <Stack space="small">\\n          <Text weight="strong">{job.title}</Text>\\n          <Text>{job.location}</Text>\\n        </Stack>\\n      </Card>\\n    ))}\\n  </Stack>\\n</>',
+        value: (
+          <>
+            {setDefaultState('jobs', [
+              {
+                id: 1,
+                title: 'Lead Designer',
+                location: 'Melbourne',
+              },
+              {
+                id: 2,
+                title: 'Senior Developer',
+                location: 'Sydney',
+              },
+              {
+                id: 3,
+                title: 'Product Manager',
+                location: 'Canberra',
+              },
+            ])}
+
+            <Stack space="medium">
+              {getState('jobs').map((job) => (
+                <Card key={job.id}>
+                  <Stack space="small">
+                    <Text weight="strong">{job.title}</Text>
+                    <Text>{job.location}</Text>
+                  </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </>
+        ),
+      };
+    }}
+  </Code>
+);
+
+`;
+
+exports[`source.macro 7. allows disabling prettier formatting: 7. allows disabling prettier formatting 1`] = `
+
+
+import source from './source.macro';
+const result =
+  <Code>
+    {({ setDefaultState, getState: getStateUntyped }) => {
+      const getState = getStateUntyped as (key: string) => MockJob[];
+      return source(
+        <>
+          {setDefaultState('jobs', [
+            {
+              id: 1,
+              title: 'Lead Designer',
+              location: 'Melbourne',
+            },
+            {
+              id: 2,
+              title: 'Senior Developer',
+              location: 'Sydney',
+            },
+            {
+              id: 3,
+              title: 'Product Manager',
+              location: 'Canberra',
+            },
+          ])}
+
+          <Stack space="medium">
+            {getState('jobs').map((job) => (
+              <Card key={job.id}>
+                <Stack space="small">
+                  <Text weight="strong">{job.title}</Text>
+                  <Text>{job.location}</Text>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
+        </>,
+        { formatWithPrettier: false });
path: packages/source.macro/__snapshots__/source.macro.test.ts.snap
user: login: askoufis
body: https://github.com/seek-oss/braid-design-system/pull/1770/commits/8b74ece2332034c5fc2f7c74e5f7ff59e806f99b
created_at: 2025-04-30T01:20:19Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-04-28T05:32:42Z
body: ###  🦋  Changeset detected

Latest commit: 4b5eaa559144fbcc38a1366a0db495d73707d7a4

**The changes in this PR will be included in the next version bump.**



Not sure what this means? [Click here  to learn what changesets are](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add another changeset to this PR](https://github.com/seek-oss/braid-design-system/new/source-macro-prettier?filename=.changeset/plenty-coins-smile.md&value=---%0A%22%40fake-scope%2Ffake-pkg%22%3A%20patch%0A---%0A%0ARun%20%60prettier%60%20inside%20%60source.macro%60%20to%20trim%20down%20docs%20bundle%0A)


author_association: NONE
user: login: askoufis
created_at: 2025-04-29T01:33:51Z
body: Made a few more changes.

## Conditionally dedent `Code` children

When the `Code` component receives a `string` child, it now conditionally dedents that string. This means docs that consume `Code` don't need to dedent `string` snippets themselves.

## Reducing vertical size of code snippets

A lot of the example docs code snippets didn't use the `source` macro, which means are formatted using [`react-element-to-jsx-string`](https://www.npmjs.com/package/react-element-to-jsx-string) rather than `prettier`. This does a good-enough job in most cases, but it _always_ puts children on a separate line, which vertically stretches out code snippets with lots of nesting.

To mitigate this, I made 2 changes: 
- Use the `source` macro for all code snippets in example docs (we should make a lint rule for this or something)
- Set `maxInlineAttributesLineLength: 60` so inline attributes can on the same line together
author_association: CONTRIBUTOR