Skip to content

feat(iframe): add custom stylesheet support#1523

Open
allandelmare wants to merge 2 commits intopuckeditor:mainfrom
allandelmare:feat/iframe-stylesheet-support
Open

feat(iframe): add custom stylesheet support#1523
allandelmare wants to merge 2 commits intopuckeditor:mainfrom
allandelmare:feat/iframe-stylesheet-support

Conversation

@allandelmare
Copy link
Copy Markdown
Contributor

@allandelmare allandelmare commented Jan 20, 2026

Summary

Add support for injecting custom stylesheets into the iframe that participate in the waitForStyles mechanism.

Changes

  • Add stylesheets array to IframeConfig for custom CSS URLs
  • Add onStylesLoaded callback to IframeConfig
  • Inject custom <link> elements after host styles
  • Track loading via onload/onerror handlers
  • Add 10s timeout fallback for reliability
  • Properly clean up timeout when styles load successfully

Usage

<Puck
  iframe={{
    enabled: true,
    waitForStyles: true,
    stylesheets: ['/api/styles', 'https://fonts.googleapis.com/...'],
    onStylesLoaded: () => console.log('Ready!'),
  }}
/>

Test plan

  • Verify custom stylesheets are injected into iframe <head>
  • Verify onStylesLoaded callback fires after all styles load
  • Verify timeout fallback works when a stylesheet fails to load
  • Verify existing behavior unchanged when stylesheets not provided

Closes #1515

The style loading validation was comparing against elements.length
instead of filtered.length. When stylesheets are dynamically added
(e.g., Monaco editor CSS), the elements array grows but filtered
remains the same, causing the completion check to never trigger.

Closes puckeditor#1324
- Add stylesheets array to IframeConfig for injecting custom CSS URLs
- Add onStylesLoaded callback to IframeConfig for notification when ready
- Create customStylesheets prop on AutoFrame component
- Inject custom stylesheets after host styles, track loading via onload/onerror
- Add 10s timeout fallback for reliability when stylesheets fail to load
- Properly clear timeout when all styles load successfully
- Handle edge case where there are no stylesheets to load

Closes puckeditor#1515
@vercel
Copy link
Copy Markdown

vercel Bot commented Jan 20, 2026

@allandelmare is attempting to deploy a commit to the Puck Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(iframe): support custom stylesheet injection

1 participant