Generate Images Programmatically on the Edge 

One day someone needs to create a wizard tool to figure out what framework and libraries to use depending on what you need to do. How awesome would it be to get from thousands of possibilities to a few and picking the one you're the most familiar with.

I built this for myself and now happy that there’s now a faster implementation 😅

Another piece of gold, nice work man!

a video on fleet please!

Already 100k, congrats for another success, and thank you for keeping up with great content!

The real magic here is the JSX to SVG library. The rest is just routing.

Great video! Perfect timing 👏

This is awesome, thanks. Vercel does an amazing job with Next.

I sometimes think this guy is a sorcerer, how does he digest new tech that quick and sell it to us in an undeniable fashion???

this is incredible and exactly what i was looking for. really appreciate you 🙏🏻

This is GOLD. Thank you!

I was just trying to figure this out for my site. Thanks

I literally googled this topic today. thank u fireship

Great video man Lately I've been developing a serverless function to modify the open graph meta attributes of a url for a SPA. I think that'd make a nice video!

Such cool thing worths trying. Thanks

You the OG Dawg 🔥

"Fleet, VSCode killer?" Really like to see that as a video title ;)

OMG! Thank you so much bro!

Vercel is on fire🔥🔥🔥

Wow this is almost exactly what I was looking for (was thinking of using image magick before). I wanted to do simple overlays and it should be easy with this

THANK U SO MUCH FOR THIS !!!!!!

vercel great as always

Really cool!

I manually made this in Vue like a boss xd

Hi im glad to be here

Awesome!

Thank's man

amazing

Just learned about Nuxt Image like a few days ago

it seems like someone could take this to make something similar to flash games, back in the day

Can you use Tailwind for styling the dynamic image?

Nice egg about cyberpunk edge runner :p

Awesome

I was this close to refreshing my PHP knowledge to make this happen myself... now I don't even need to bother with that because there's a way better solution now lol

Couldn't you do this with vanilla js+html?

Pre 10k sub club

Will you create a Nuxt 3 course when it will be a stable release?

original gangster jeff

Let's gooooo

So it's just a library to get an SVG on the fly given some html/css ? I'm surprised nobody has done that before but thanks for the discovery, might be useful !

game changer

Nice firedaddy

Would like to use it in an internal project, does it need to connect to vercel in order to generate the Image? Or can I do this offline?

This is great, but it doesn't translate well to the app directory. Can you make one for the app directory?

Does it work without Next.js too?

For some reason when implementing this I just get a blank image shown at the api route

is it the same way with angular and Ts?

Please do a video on jetpack compose

Does it need to be hosted in Vercel environment?

The W

imagemagick has done this since forever

shesshh

Canb this generate any sort of images or only open graph?

Kinda feels like Software Engineering has jumped the shark, using a 50MB instance of Chrome browser in a serverless function to create ... wait for it ... a simple SVG image. LOL

Can you run this on your own server as well or only on Vercel?

What about canvas?

Now we know how to do on the Edge we want to know how to Generate Images Programmatically on the Chrome

this looks sick, too bad I'm stuck with Netlify now

Dynamic Mages

first you sounded like a text-to-speech coverter.. but anyway, 😆 now we can use this to automate making of video thumbnail...

Your courses needs to get updated in fireship.

Fleet review

I still hate that SSR is required for doing basically any embedding or meta tag stuff nowadays. Would love if I could just say and have that URL handle things.

Could this also be used to serve dynamic images with a Discord bot?

I think beyond fireship video should be more details and more lengthy whereas the fire video should be like 100 secs

It's not new I am using this feature from 2021, but there no package from next until now

Og og og, je protège mon gang et mon lobby !

well couldnt you do that with a cloudflare worker for years?

Does anyone know of tools to help with this without using next?

Noice.

Why not just write the SVG?

whats wrong with me, i only hear background noises

Wtf today I was just wondering how this can be done! I guess now I know.

As far as I know, OG images doesn't support SVG format. Not sure, how they're doing though.

So now Jeff can create videos as code with Remotion, thumbnails as code with OG. Now if only there was a trained model for Jeff's voice, which can read out video scripts with memes created by (INSERT NEXT HOT JS LIBRARY HERE).

A video on discords full stack plzzz

Figma supremacy

Who is fireship?

Wow! no need to create dynamic svgs

OG, which stands for Original Gangster. 😂😂

Why o why would you define an image in HTML rather than SVG? 🥺🥺 I mean, I get that if you're in a rush and unfamiliar with SVG it might take longer to learn... so I guess there might be valid use cases for it... but it definitely isn't something that sounds sensible for a 'mature' product?

So this is the JSON way to spawn CSS shit, yes?

Waiting for Vue3 and Nuxt3 videos

Trade compute f bandw... Hmm

SVG mark-up isn't that complicated

Sounds good, but the pattern of the image will eventually and quickly become recognizable and generic.

Please help: I don't still understand the use. Like can't we load images normally? why go through the hassle? Why not create an image and just use an svg converter to render the image as svg? Why create an image using css and hmtl when you can just create the same image using your favorite image editor and insert it into your code? Please someone should help me out with a clear explanation of this tool while contrasting it with other ways on manipulating images. Please

Can anyone share some good php library for generating og image

You said the first rule of SEO is to make good content, and now you say SEO is important, so are you saying it's important to make really good content?

9 views 💀

Fart on space

Npm package. For generating a f*king preview. I don't know what is better describing everything what's wrong with a WebDevs.

Jeff, you have bots impersonating every channel you own 😅 I hope you'll see this comment, and I hope none of your users would reply to those phishing scams

First comment 🎉

I feel like things are getting more complicated just for the fun of it :-/

which stands for "original gangster" bruh 😂

a video on fleet please!