Is there any project like remotion but for creating images programmatically?

[star8ks]

Is there any project like remotion but for creating images programmatically?

[BrunnerLivio]

Why not just simply write SVG + live-reload? 😅

[tomByrer]

SVG would be a good option, or just have a 1-frame ReMotion? then automate a capture.

Also:
https://github.com/elraccoone/react-unity-webgl
https://github.com/pmndrs/react-three-fiber

[JonnyBurger]

I don't claim it's the best tool for the job, but the Remotion logo is done in Remotion and it's just a 1-frame composition! 😁 Use --png flag while rendering.

https://github.com/JonnyBurger/remotion-logo

[Cyklan]

There is html2canvas by niklasvh, which takes - as the name suggests - rendered html and puts it in a canvas. You can then just save the canvas element to your device.

It's great, but has some flaws.
AFAIK it doesn't support SVGs (see the CRA-template photo below)

and there are a few css rules that are not supported, see here: https://html2canvas.hertzen.com/features

[JonnyBurger]

We now have first-class support for it: https://www.remotion.dev/docs/stills/

[JonnyBurger]

True, though actually when we forked Puppeteer we already removed PDF exporting functionality because we did not use it.
We support stills because we need to generate them anyway, but the main goal is still to generate videos :)

[bennobuilder]

thanks for the reply :)
yeah, 100% I'm currently misusing remotion for image generation though as I love the real-time remotion previewer and stuff and don't like working with canvas.
Is there a documentation on how the generated webpack bundle works, or could you share intel on how to open a composition using that bundle. Maybe I could use that to render a .pdf using a separate puppeteer instance.
thanks a lot :)

[JonnyBurger]

We don't have any documentation for it since it is internal and I want to be able to move the code around without having to worry about breaking someones workflow. So very sorry that we will not support this :( If you want to proceed on your own risk, see screenshot-task in Remotion renderer and work backwards to how we get there

[bennobuilder]

ok thanks anyway :)
I've taken a look and played around a bit with .pdf rendering in the remotion project.
First of all, props for the easy setup of the remotion project for potential contributors. This makes contribution much easier 👍
I used Chrome Devtools Protocol to capture the webpage as .pdf and it seems to work relatively good for my use cases.
Currently, for test purposes it's implemented relatively dirty in the screenshot-task.ts but if you are interested I could implement it properly and create an MR. Otherwise, I'll focus on just implementing it into my project. But I'm wondering whether I'm missing something, as you mentioned something about Rust binary in #1885 .

Thanks :)

const result = await client.send('Page.printToPDF', {
	paperWidth: width / 96, // Convert to Inch
	paperHeight: height / 96, // Convert to Inch
	marginTop: 0,
	marginBottom: 0,
	marginLeft: 0,
	marginRight: 0,
	scale: 1,
	printBackground: true,
});

https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDF

Basic PDF renders from Remotion Examples

[JonnyBurger]

Super cool! Thanks for building this! It seems like you were able to do it cleanly, so I am happy to consider it as a feature in Remotion.
We could just disallow rendering a PDF if some other non-web-layers are being rendered, but this case is rare at the moment.