A place for developers to talk about building on Farcaster.

/dev

Is there a better way to make dynamic frame images then using Satori?

Satori seems kind of clunky.

Building poolfish.xyz (/poolfish). A calculator for LP providers. Cooking /hotpotato. Built Potion solo to $6k+ MRR and sold for $300k.

My flow is clunky too. 

SVG markup built with react, passed through sharp to get a png. 

Positioning items with SVG is tedious though. Wish I could get a good tool that would let me do HTML/CSS to SVG. 

Also hoping frames support SVG someday.

yeah, debuggin the images isn't great and seeing that they are off compared to the vercel og image playground

so do you do the positioning of image elements in satori or in sharp?

So right now I basically design the image in a vector program, export the SVG, run the SVG through an online converter to make it valid JSX, and then edit the JSX to insert dynamic text. I server side render the JSX so I’m back to SVG and I just pipe that through sharp on its way out the door.

EEPVERS

Yeah it works well enough for my project /eepvers because I’m building a dynamic PFP that I render in frame using the same method (the PFP character is a react component). But to get it to make a gif I’d have to pass in the frame number and render the tree for each frame and stitch it into a gif with sharp.

I’ve used this 

https://www.svgviewer.dev/svg-to-react-jsx

And 

https://transform.tools/svg-to-react-native

I think.

Ok, nice. Yeah, that's quite the process!
So benefit of this I guess is that it's all jsx.
I'm doing an extra request within my satori code to pull in a png and then put that in the jsx,

What's the svg to jsx converter you use?
I'm also wanting to use gifs so that could complicate things.