[Website] Fix all broken CodeSandbox examples by weronikaolejniczak · Pull Request #9516 · elastic/eui

weronikaolejniczak · 2026-03-18T17:57:06Z

Tip

I recommend reviewing this PR by commits.

Summary

Resolves #9320

Many CodeSandbox examples were broken. This PR fixes all of them.

Updated @faker-js/faker to ^10.3.0 to align the docs preview with CodeSandbox, which resolves latest, and updated faker.internet.userName() calls to faker.internet.username() (renamed in v9).
Fixed broken CodeSandbox examples by adding missing import React and component imports, converting raw JSX fragments to full export default components.
Fixed broken CodeSandbox examples caused by Docusaurus-specific APIs (useBaseUrl, useChartBaseTheme) not being available in CodeSandbox - replaced with self-contained alternatives.
Fixed broken image references in CodeSandbox by embedding images as base64 data URLs via url-loader, passing them through scope (react-live) and extraFiles (CodeSandbox).
Added charts CSS loading to the Docusaurus theme so chart-based demos render correctly in the docs preview.
Fixed several demos in icons, forms, layout, navigation, templates, utilities, and display pages that had syntax errors or missing imports.

Impact Assessment

Impact level: 🟢 None

QA instructions for reviewer

Test all broken examples. If you feel up for it, you could test all examples.

Update `@faker-js/faker` to latest

Replace `Link` with `EuiLink`

Error handling and feedback

Add charts CSS imports

Simple cases (missing import, syntax error)

Complex cases

Checklist before marking Ready for Review

Filled out all sections above
QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
QA: Tested in CodeSandbox and Kibana
QA: Tested docs changes
Tests: Added/updated Jest, Cypress, and VRT
Changelog: Added changelog entry
Breaking changes: Added breaking change label (if applicable)

Copilot

Pull request overview

This pull request updates the EUI docs site demos to better support live editing + CodeSandbox exports by attaching required “extra files” (raw source/assets) to demos, and refreshes a few demo dependencies (notably @faker-js/faker).

Changes:

Bump @faker-js/faker (website) and update affected docs snippets.
Add extraFiles (raw-loaded sources/assets) to many MDX demos so CodeSandbox can include referenced local files.
Improve CodeSandbox demo generation by auto-injecting @elastic/charts theme CSS when charts are used.

Reviewed changes

Copilot reviewed 49 out of 50 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
yarn.lock	Updates lockfile for `@faker-js/faker` version bump.
packages/website/src/theme/Demo/actions.tsx	Adds `moment-timezone` to CodeSandbox dependency set.
packages/website/package.json	Bumps `@faker-js/faker` to `^10.3.0`.
packages/website/docs/utilities/window-events/index.mdx	Adds raw source as `extraFiles` for CodeSandbox.
packages/website/docs/utilities/text-truncation.mdx	Adds missing imports in snippet.
packages/website/docs/utilities/focus-trap/index.mdx	Adds raw source as `extraFiles` for CodeSandbox.
packages/website/docs/utilities/color-palettes/index.mdx	Adds raw source as `extraFiles`; updates snippet imports.
packages/website/docs/utilities/accessibility/index.mdx	Makes snippets self-contained (imports/exports).
packages/website/docs/dataviz/types/part-to-whole-comparisons.mdx	Adds raw source `extraFiles` and adjusts imports in snippets.
packages/website/docs/dataviz/types/metric-chart.mdx	Adds raw source `extraFiles` and adjusts imports in snippets.
packages/website/docs/dataviz/theming.mdx	Adds raw source `extraFiles` and adjusts imports in snippets.
packages/website/docs/dataviz/sizing.mdx	Adds raw source `extraFiles` and adjusts imports in snippets.
packages/website/docs/dataviz/accessibility-features.mdx	Adds raw source `extraFiles` and adjusts imports in snippets.
packages/website/docs/components/templates/sitewide-search/index.mdx	Makes snippet self-contained with imports.
packages/website/docs/components/templates/page-template/guidelines.mdx	Adds SVG raw sources as `extraFiles` and imports inside snippet.
packages/website/docs/components/tables/basic.mdx	Updates faker API usage and other snippet tweaks.
packages/website/docs/components/navigation/facet.mdx	Switches to `useEuiPaletteColorBlind` hook usage in snippet.
packages/website/docs/components/navigation/buttons/group.mdx	Fixes snippet imports to match usage.
packages/website/docs/components/navigation/buttons/button.mdx	Fixes import formatting in snippet.
packages/website/docs/components/layout/page_components/index.mdx	Adds SVG raw sources as `extraFiles` and imports inside snippets.
packages/website/docs/components/layout/flex/item.mdx	Fixes snippet imports to match usage.
packages/website/docs/components/layout/flex/grid.mdx	Corrects demo snippet to use `EuiFlexGrid`.
packages/website/docs/components/forms/text/password.mdx	Wraps demos with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/text/basic.mdx	Wraps demos with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/selection/switch.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/selection/super-select.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/selection/radio-and-radio-group.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/selection/combo-box.mdx	Wraps multiple demos with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/selection/checkbox-and-checkbox-group.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/selection/basic-select.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/search-and-filter/search.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/other/palette-picker.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/other/file-picker.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/other/color-picker.mdx	Wraps demos with `extraFiles` for shared `display_toggles` file; snippet import tweaks.
packages/website/docs/components/forms/numeric/range-sliders.mdx	Wraps demos with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/numeric/basic.mdx	Wraps demo with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/layouts/form_control_buttons.mdx	Refactors interactive snippet; adds popover + filtering example.
packages/website/docs/components/forms/date-and-time/super-date-picker.mdx	Adjusts imports/snippet structure.
packages/website/docs/components/forms/date-and-time/date-picker.mdx	Wraps demos with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/forms/date-and-time/date-picker-range.mdx	Wraps demos with `extraFiles` for shared `display_toggles` file.
packages/website/docs/components/editors-and-syntax/markdown/plugins.mdx	Normalizes snippet string quoting/formatting.
packages/website/docs/components/editors-and-syntax/markdown/editor.mdx	Removes Docusaurus `Link` usage in demo snippet; uses `EuiLink`.
packages/website/docs/components/display/icons/index.mdx	Adds raw source `extraFiles` and makes multiple snippets self-contained.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/use_case_images.ts	Adds url-loader mapping for use-case images.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/sidebar_snippet.tsx	Reworks demo to use url-loader assets + code string output.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/multiple_snippet.tsx	Reworks demo to use url-loader assets + code string output.
packages/website/docs/components/display/empty-prompt/types_of_empty_states/empty_snippet.tsx	Reworks demo to use image URL mapping + code string output.
packages/website/docs/components/display/empty-prompt/index.mdx	Switches illustration demo to use url/raw loaders and `extraFiles`.
packages/website/docs/components/display/empty-prompt/_multiple_types.tsx	Converts examples to explicit code strings + adds `extraFiles`/scope for images.
packages/docusaurus-theme/src/components/demo/codesandbox/open_action.tsx	Injects `@elastic/charts` theme CSS imports into CodeSandbox demos.

Comments suppressed due to low confidence (3)

packages/website/docs/components/forms/other/palette-picker.mdx:21

This demo's code imports DisplayToggles from a relative path, but the demo transformer strips all import statements for react-live. Without also passing DisplayToggles via the <Demo scope={...}>, the interactive preview will throw (undefined component). Consider importing DisplayToggles in the MDX file and adding scope={{ DisplayToggles }} to the <Demo> props (keep extraFiles for CodeSandbox).

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
```tsx interactive
import React, { useState } from 'react';
import {
  euiPaletteColorBlind,
  euiPaletteForStatus,

packages/website/docs/components/forms/other/file-picker.mdx:17

This demo's code imports DisplayToggles from a relative path, but the demo transformer strips all import statements for react-live. Without also passing DisplayToggles via the <Demo scope={...}>, the interactive preview will throw (undefined component). Consider importing DisplayToggles in the MDX file and adding scope={{ DisplayToggles }} to the <Demo> props (keep extraFiles for CodeSandbox).

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
```tsx interactive
import React, { useState } from 'react';
import {
  EuiFilePicker,
  EuiFlexGroup,

packages/website/docs/components/forms/numeric/range-sliders.mdx:564

This demo's code imports DisplayToggles from a relative path, but the demo transformer strips all import statements for react-live. Without also passing DisplayToggles via the <Demo scope={...}>, the interactive preview will throw (undefined component). Consider importing DisplayToggles in the MDX file and adding scope={{ DisplayToggles }} to the <Demo> props (keep extraFiles for CodeSandbox).

<Demo extraFiles={{ 'display_toggles.tsx': displayTogglesSource }}>
```tsx interactive
import React, { useState } from 'react';
import {
  EuiRange,
  EuiRangeProps,

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/website/docs/components/display/empty-prompt/index.mdx

packages/website/docs/components/forms/layouts/form_control_buttons.mdx

packages/website/docs/components/display/empty-prompt/types_of_empty_states/empty_snippet.tsx

packages/website/docs/components/display/empty-prompt/types_of_empty_states/sidebar_snippet.tsx

packages/website/docs/components/forms/search-and-filter/search.mdx

packages/website/docs/components/forms/other/color-picker.mdx

packages/website/docs/components/forms/numeric/basic.mdx

packages/website/docs/components/forms/date-and-time/date-picker.mdx

packages/website/docs/components/forms/date-and-time/date-picker-range.mdx

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

packages/website/docs/components/editors-and-syntax/markdown/plugins.mdx

packages/website/docs/components/forms/layouts/form_control_buttons.mdx

tkajtoch

I tested all updated CodeSandbox examples. Most of them work beautifully and I'm so glad you were able to find time and fix them! I found a few that are broken:

EuiEmptyPrompt page is now crashing the browser. I also tried in Incognito and Firefox with the same results.
Gutter sizing doesn't show the background color in CodeSandbox
EuiFieldSearch's incremental search example is broken in CodeSandbox
EuiFilePicker's Removing files programmatically example throws an error in both CodeSandbox and the main docs site
- I know this isn't part of this PR, but could you please address it while you're at it?

Overall, this is a great improvement, and I can't wait till this is shipped and live!

weronikaolejniczak · 2026-03-25T15:17:19Z

packages/website/docs/components/display/icons/index.mdx

+  import { iconSizes, iconSizesText } from './icon_sizes';
+
+  export default () => (
+    <div css={css`height: fit-content;`}>


The reason I'm adding this wrapping div to all Icon examples is because otherwise the EuiCodeBlock is stretched out in Codesandbox and you have to scroll down to see the icons.

weronikaolejniczak · 2026-03-25T15:21:31Z

packages/website/docs/components/forms/layouts/form_control_buttons.mdx

The formatting in this example was all screwed up. The only change needed was adding ChangeEvent import.

weronikaolejniczak · 2026-03-25T16:32:48Z

@tkajtoch Thank you for testing thoroughly 🙏🏻 I'm glad you were able to catch these! 🦅 👁️

❓ EuiEmptyPrompt page - I can access this page locally and deployed, and all Codesandboxes are working. Could you share what's the error? 🤔
✅ All flex examples, including EuiFlexGrid's Gutter sizing - dc1b741
✅ EuiFieldSearch's Incremental search - 62153c1
✅ EuiFilePicker's Removing files programmatically - 73abfbf

weronikaolejniczak · 2026-03-25T16:33:32Z

packages/docusaurus-theme/src/components/demo/actions_bar/actions_bar.tsx

      </EuiButton>
      {extraActions.map((ActionComponent) => (
        <ActionComponent
+          key={ActionComponent.displayName ?? ActionComponent.name}


This is to get rid of that annoying "key" warning in DevTools console. Not that the lack of key in this case is causing any issues.

weronikaolejniczak · 2026-03-25T16:35:38Z

packages/docusaurus-theme/src/components/demo/codesandbox/open_action.tsx

+                    .replace(
+                      "import Demo from './demo';",
+                      "import Demo from './demo';\nimport PreviewWrapper from './preview_wrapper';"
+                    )
+                    .replace(
+                      '<Demo />',
+                      '<PreviewWrapper>\n      <Demo />\n    </PreviewWrapper>'
+                    ),


Personally, I don't like this but the only other ideas that came to mind were: 2 separate indexTsxSource variables or a function that modifies the template. That being said, this way was the simplest one.

weronikaolejniczak · 2026-03-25T16:37:22Z

packages/website/docs/components/layout/flex/flex_preview_wrapper.tsx

+  return <div css={styles}>{children}</div>;
 };
+
+export default FlexPreviewWrapper;


Not sure if this needs documenting... That preview wrappers have to be separate .tsx files with a default export.

elasticmachine · 2026-03-25T16:49:04Z

💚 Build Succeeded

History

💚 Build #3076 succeeded 903ec42
💚 Build #3073 succeeded 62153c1
💚 Build #3034 succeeded ec873ce
💚 Build #3030 succeeded 90d52bb

cc @weronikaolejniczak

elasticmachine · 2026-03-25T17:08:36Z

💚 Build Succeeded

Buildkite Build
Commit: dc1b741

History

💔 Build #6125 failed 903ec42
💚 Build #6122 succeeded 62153c1
💚 Build #6095 succeeded ec873ce
💚 Build #6092 succeeded 90d52bb

cc @weronikaolejniczak

weronikaolejniczak self-assigned this Mar 18, 2026

weronikaolejniczak force-pushed the fix/codesandbox-examples branch from 427e0e1 to 8650d01 Compare March 18, 2026 17:58

weronikaolejniczak added 12 commits March 18, 2026 18:59

fix(website): add moment-timezone to CodeSandbox deps

9cb8a1a

fix(website): fix broken examples in Utilities

326db57

fix(website): fix broken dataviz examples

844f523

fix(docusaurus-theme): load charts css to render charts

13c313f

fix(website): fix broken Navigation examples

774bf9d

fix(website): fix broken Layout examples

f07abbd

fix(website): fix broken Templates examples

69366ca

chore(website): update @faker-js/faker dep to latest

12e76f1

fix(website): fix broken Editors and Syntax examples

1ccd784

fix(website): fix broken Tables examples

6bf0b14

fix(website): fix broken Forms examples

a3feb6c

fix(website): fix all broken Display examples

90d52bb

weronikaolejniczak force-pushed the fix/codesandbox-examples branch from 8650d01 to 90d52bb Compare March 18, 2026 18:00

weronikaolejniczak added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Mar 18, 2026

weronikaolejniczak marked this pull request as ready for review March 18, 2026 18:08

weronikaolejniczak requested a review from a team as a code owner March 18, 2026 18:08

Copilot AI review requested due to automatic review settings March 18, 2026 18:08

Copilot started reviewing on behalf of weronikaolejniczak March 18, 2026 18:09 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

weronikaolejniczak and others added 3 commits March 19, 2026 11:22

Potential fix for pull request finding

f5cdb82

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

refactor(website): address Copilot's feedback

ac3547c

Merge branch 'main' into fix/codesandbox-examples

ec873ce

tkajtoch self-requested a review March 25, 2026 10:29

tkajtoch reviewed Mar 25, 2026

View reviewed changes

packages/website/docs/components/editors-and-syntax/markdown/plugins.mdx Show resolved Hide resolved

tkajtoch reviewed Mar 25, 2026

View reviewed changes

packages/website/docs/components/forms/layouts/form_control_buttons.mdx Show resolved Hide resolved

tkajtoch requested changes Mar 25, 2026

View reviewed changes

weronikaolejniczak added 2 commits March 25, 2026 15:13

fix(website): add missing imports to Incremental search

62153c1

fix(website): fix file picker programmatic removal

73abfbf

weronikaolejniczak added 2 commits March 25, 2026 16:04

fix(docusaurus-theme): set key on ActionComponent

903ec42

revert(website): revert double-quote formatting

4aa944c

weronikaolejniczak commented Mar 25, 2026

View reviewed changes

revert(website): revert double-quotes formatting

fce0463

weronikaolejniczak commented Mar 25, 2026

View reviewed changes

feat(website): pass previewWrapperSource to Codesandbox

dc1b741

weronikaolejniczak commented Mar 25, 2026

View reviewed changes

weronikaolejniczak requested a review from tkajtoch March 25, 2026 16:39

Conversation

weronikaolejniczak commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Impact Assessment

QA instructions for reviewer

Update @faker-js/faker to latest

Replace Link with EuiLink

Add charts CSS imports

Simple cases (missing import, syntax error)

Complex cases

Checklist before marking Ready for Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Mar 25, 2026

Uh oh!

weronikaolejniczak Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Mar 25, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Mar 25, 2026

💚 Build Succeeded

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

weronikaolejniczak commented Mar 18, 2026 •

edited

Loading

Update `@faker-js/faker` to latest

Replace `Link` with `EuiLink`

weronikaolejniczak Mar 25, 2026 •

edited

Loading