Using nextjs's ImageResponse

[tianhuil]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.11.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

Nextjs provides ImageResponse to generate open graph images from HTML / CSS: https://nextjs.org/docs/app/api-reference/functions/image-response

This does not work out of the box with something like:

<MantineProvider><Title>text</Title></MantineProvider>

and it's not quite clear how to proceed. This would be very useful because we may want to preview some of our Mantine webpage in the open graph image.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

I think the issue is getting .css into these components inline. If someone could provide a general outline, I would be happy to write up a solution / contribute an article more fully.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

It is not possible, they use a third-party library for that which has its own api for styling, see https://github.com/vercel/satori#css

[tianhuil]

Thanks for the quick response @rtivital!