[Codesandbox] Pass additional files to sandbox instances by weronikaolejniczak · Pull Request #9317 · elastic/eui

weronikaolejniczak · 2026-01-14T17:17:46Z

Summary

Important

This PR scopes the changes to extending the capabilities of the Demo component and fixing the originally reported issue. Any other examples not working will be fixed separately.

Changes

`@elastic/eui-docusaurus-theme`

Added demoFiles prop to the Demo component. It allows to pass extra files that will be added to the Codesandbox instance. c54b4d2
Updated the IMPORT_REGEX to include relative imports so that all imports are removed from the snippet. All references have to be provided through Demo prop called scope. 97bd9e8

`@elastic/eui-website`

Added SVG imports directly into the example snippet. This is important, otherwise the reference to e.g. contentSvg won't be resolved. da98f54

It does bring noise to the snippets but @tkajtoch has a proof of concept that only shows the relevant code parts and hides the full source under a toggle. That would eliminate this disadvantage.

Another one is having to do this each time explicitly, the thing is that we cannot programmatically require files based on e.g. "scope" or parsed imports, unfortunately. Unless I'm missing something, it's not easily achievable technically.

Why are we making this change?

Resolves #8969

Page template examples do not work in Codesandbox. You can see it by clicking on the "Codesandbox" button icon in any of the examples on the page:

Screenshots #

Kapture.2026-01-14.at.18.12.25.mp4

Impact to users

🟢 This does not affect EUI library, only the documentation website.

QA

Page template examples
- all examples work in Codesandbox
- the example sources looks as expected
- the example previews render correctly
Smoke test other pages to make sure there's no regression around Demo usage

weronikaolejniczak · 2026-01-15T13:40:13Z

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

   * Allows to extend the default scope of the rendered demo and pass additional
   * properties available within the demo.
-   *
-   * The default scope exposes all React and EUI exports.


We don't want to rely on preloading anymore. If the import is not in the snippet, it will not be there in Codesandbox and will lead to unresolved references.

acstll

This is working like a charm. I have only one question regarding "docs", and a suggestion for the changelog. Thank you @weronikaolejniczak!

wiki/contributing-to-eui/documenting/writing-documentation.md

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

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

packages/docusaurus-theme/changelogs/upcoming/9317.md

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

acstll

🟢 The docs update is very clear and the mock in the snippet works as expected. Thanks for addressing the feedback!

acstll · 2026-01-26T09:23:12Z

wiki/contributing-to-eui/documenting/writing-documentation.md

+</Demo>
+````
+
+`scope` and `extraFiles` serve different purposes. `scope` is used to inject variables into the snippet execution context while `extraFiles` is used to pass additional files to the CodeSandbox instance.


this is perfect

elasticmachine · 2026-01-26T09:33:03Z

💚 Build Succeeded

History

💚 Build #2510 succeeded 5317d1a
💚 Build #2507 succeeded ace6b64
💚 Build #2505 succeeded fef2d29
💚 Build #2430 succeeded c660a67

cc @weronikaolejniczak

elasticmachine · 2026-01-26T09:49:31Z

💚 Build Succeeded

Buildkite Build
Commit: 809ffc4

History

💚 Build #5660 succeeded 5317d1a
💚 Build #5659 succeeded ace6b64
💚 Build #5600 succeeded c660a67

cc @weronikaolejniczak

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

`112.0.0` ⏩ `112.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update `span_links_badge.tsx` conditional `onClick` props on `EuiBadge` to satisfy TypeScript 93d7fae - Update snapshots 24c2f9a ## Package updates ### `@elastic/eui` [`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0) - Updated `timeline` icon glyph ([elastic#9331](elastic/eui#9331)) - Updated `EuiContextMenu` panels to allow passing `data-test-subj`, `aria-label`, `className` and `css` props ([elastic#9323](elastic/eui#9323)) - Added "zoom in" functionality to time window buttons in `EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325)) - Added `displayName` to `EuiButton`, `EuiButtonEmpty`, `EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`, `EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`, `EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its sub-components and `EuiPanel` ([elastic#9324](elastic/eui#9324)) - Added `fill` prop (defaults to `false`) to `EuiBadge` component that controls whether the badge should use filled or non-filled (less intense) colors. By default, badges will now render as the non-filled variant. ([elastic#9306](elastic/eui#9306)) - Updated EuiBadge design to have rounded corners and improved paddings ([elastic#9302](elastic/eui#9302)) **Bug fixes** - Fixed non-virtualized `EuiSelectable` throwing SyntaxError when selecting an option ([elastic#9326](elastic/eui#9326)) - Fixed an issue where `push` flyouts in a stacked layout calculated the content offset based on the hidden main flyout's width instead of the visible child flyout's width ([elastic#9322](elastic/eui#9322)) ### @elastic/eui-theme-borealis [`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540) - Updated `badgeBackground` color token value to equal `backgroundFilledText` ([elastic#9306](elastic/eui#9306)) ### @elastic/eui-docusaurus-theme [`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220) - Added `extraFiles` prop to the `Demo` component. It allows to pass extra files that will be added to the Codesandbox instance. ([elastic#9317](elastic/eui#9317)) - Updated the `IMPORT_REGEX` to include relative imports so that all imports are removed from the snippet. All imported references have to be passed to `Demo` in the `scope` prop. ([elastic#9317](elastic/eui#9317)) --------- Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>

weronikaolejniczak added 3 commits January 14, 2026 18:05

feat(docusaurus-theme): add demoFiles prop to the demo component

c54b4d2

feat(docusaurus-theme): parse all imports including relative

97bd9e8

fix(website): pass raw content through demoFiles for page template

da98f54

weronikaolejniczak self-assigned this Jan 14, 2026

weronikaolejniczak added 2 commits January 14, 2026 18:33

chore(docusaurus-theme): add changelog

4ab5e4a

refactor: reuse type and improve JSDoc

c660a67

weronikaolejniczak force-pushed the spike/codesandbox-examples branch from 87ae6a9 to c660a67 Compare January 14, 2026 17:38

weronikaolejniczak marked this pull request as ready for review January 14, 2026 17:39

weronikaolejniczak requested a review from a team as a code owner January 14, 2026 17:39

weronikaolejniczak mentioned this pull request Jan 15, 2026

[Codesandbox] Fix all broken Codesandbox examples #9320

Closed

weronikaolejniczak commented Jan 15, 2026

View reviewed changes

acstll self-requested a review January 23, 2026 09:29

weronikaolejniczak added 5 commits January 23, 2026 11:44

chore(wiki): update writing documentation wiki

fef2d29

refactor(docusaurus-theme): rename demoFiles to extraFiles

29b64d3

refactor(website): use extraFiles instead of demoFiles

89c231c

chore(wiki): replace demoFiles with extraFiles

4165ba3

chore(docusaurus-theme): narrow down ExtraFiles type

ace6b64

acstll requested changes Jan 23, 2026

View reviewed changes

Update packages/docusaurus-theme/changelogs/upcoming/9317.md

5317d1a

Co-authored-by: Arturo Castillo Delgado <arturo@arturu.com>

weronikaolejniczak requested a review from acstll January 23, 2026 13:47

weronikaolejniczak added 2 commits January 26, 2026 10:13

chore(wiki): update extraFiles snippet and add explanation

deca25e

chore(docusaurus-theme): improve scope prop JSDoc comment

809ffc4

acstll approved these changes Jan 26, 2026

View reviewed changes

weronikaolejniczak enabled auto-merge (squash) January 26, 2026 09:26

weronikaolejniczak merged commit 4c2f22e into elastic:main Jan 26, 2026
5 checks passed

acstll mentioned this pull request Jan 26, 2026

Upgrade EUI to v112.1.0 elastic/kibana#250407

Merged

weronikaolejniczak deleted the spike/codesandbox-examples branch February 10, 2026 10:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Codesandbox] Pass additional files to sandbox instances#9317

[Codesandbox] Pass additional files to sandbox instances#9317
weronikaolejniczak merged 13 commits intoelastic:mainfrom
weronikaolejniczak:spike/codesandbox-examples

weronikaolejniczak commented Jan 14, 2026 •

edited

Loading

Uh oh!

weronikaolejniczak Jan 15, 2026

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Uh oh!

acstll Jan 26, 2026

Uh oh!

elasticmachine commented Jan 26, 2026

Uh oh!

elasticmachine commented Jan 26, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

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

Uh oh!

Summary

Changes

@elastic/eui-docusaurus-theme

@elastic/eui-website

Why are we making this change?

Screenshots #

Impact to users

QA

Uh oh!

weronikaolejniczak Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

acstll Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 26, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jan 26, 2026

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

weronikaolejniczak commented Jan 14, 2026 •

edited

Loading

`@elastic/eui-docusaurus-theme`

`@elastic/eui-website`