[{"data":1,"prerenderedAt":1087},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript":142,"\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript-surround":1084},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","\u002Fblog\u002Fvuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog\u002F001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","\u002Fblog\u002Funderstanding-javascript-and-its-quirks","blog\u002F002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","\u002Fblog\u002Fintroducing-vues-latest-experimental-vapor-mode","blog\u002F003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","\u002Fblog\u002Fecmascript-2024-nears-finalization","blog\u002F004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","\u002Fblog\u002Fui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog\u002F005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","\u002Fblog\u002Fmicro-frontend-architecture","blog\u002F006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","\u002Fblog\u002Fpre-rendering-and-hydration-in-vuejs","blog\u002F007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","\u002Fblog\u002Fsatori-by-vercel-dynamic-image-generation-in-javascript","blog\u002F008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","\u002Fblog\u002Fvuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog\u002F009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","\u002Fblog\u002Fmoving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog\u002F010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","\u002Fblog\u002Fnuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog\u002F011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","\u002Fblog\u002Fa-tribute-to-asa-bain-thank-you-for-everything","blog\u002F012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","\u002Fblog\u002Fmigrating-javascript-to-typescript-in-aspnet-mvc-projects","blog\u002F013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","\u002Fblog\u002Fmodernizing-classic-aspnet-mvc-with-vuejs","blog\u002F014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","\u002Fblog\u002Fwhich-ui-javascript-framework-should-you-use","blog\u002F015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","\u002Fblog\u002Fvue-ai-integration-workflows-enhancing-developer-productivity","blog\u002F016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","\u002Fblog\u002Fopenapi-standards-scalar-integration-for-nodejs-apps","blog\u002F017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","\u002Fblog\u002Fnuxt-317-data-fetching-improvements","blog\u002F019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","\u002Fblog\u002Fsubdomain-based-multi-tenancy-in-nuxt","blog\u002F020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","\u002Fblog\u002Ftype-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog\u002F021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","\u002Fblog\u002Funit-testing-vue-applications-with-vitest-and-agentic-ai","blog\u002F022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","\u002Fblog\u002Fhidden-features-lesser-known-typescript-gems","blog\u002F023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt\u002FVercel Acquisition and Its Impact on NuxtHub Users","\u002Fblog\u002Fnuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog\u002F024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","\u002Fblog\u002Fstate-of-vue-nuxt-ecosystem-2025","blog\u002F025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","\u002Fblog\u002Ffeature-adoption-in-typescript-over-time","blog\u002F026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","\u002Fblog\u002Fmigrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog\u002F027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","\u002Fblog\u002Fstrategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog\u002F028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","\u002Fblog\u002Fnuxt-4-and-the-evolving-full-stack-framework-landscape","blog\u002F029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","\u002Fblog\u002Fbun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog\u002F030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","\u002Fblog\u002Ftop-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog\u002F031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","\u002Fblog\u002Fstrategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog\u002F032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","\u002Fblog\u002Fthe-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog\u002F033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","\u002Fblog\u002Funderstanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog\u002F034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":38,"author":144,"body":148,"date":1077,"description":1078,"extension":1079,"image":1080,"meta":1081,"minRead":270,"navigation":266,"path":39,"seo":1082,"stem":40,"__hash__":1083},"blog\u002Fblog\u002F008.satori-by-vercel-dynamic-image-generation-in-javascript.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"\u002Favatars\u002Fprofile-image-1.png",{"type":149,"value":150,"toc":1065},"minimark",[151,156,160,168,172,175,180,190,195,525,529,537,541,549,553,561,565,583,588,955,960,963,967,1042,1045,1047,1051,1054,1061],[152,153,155],"h2",{"id":154},"introduction","Introduction",[157,158,159],"p",{},"In modern web applications, dynamically generating images for social media, personalized content, and marketing materials is a common requirement. Traditionally, developers relied on backend-heavy solutions such as Puppeteer or headless browsers to generate images, which could be slow and resource-intensive.",[157,161,162,163,167],{},"Enter ",[164,165,166],"strong",{},"Satori",", a library developed by Vercel that offers an efficient way to generate images from HTML and CSS using JavaScript. With its blazing-fast rendering engine, Satori enables developers to create dynamic graphics, including personalized birthday cards, event invitations, social media previews, and more. This report explores the benefits of Satori, its use cases, and how it can be leveraged to enhance custom content generation.",[152,169,171],{"id":170},"use-cases-for-satori","Use Cases for Satori",[157,173,174],{},"Satori is useful for a wide range of dynamic content generation tasks. Below are some practical applications:",[176,177,179],"h3",{"id":178},"_1-generating-custom-birthday-cards","1. Generating Custom Birthday Cards",[181,182,183,187],"ul",{},[184,185,186],"li",{},"Users can input their names, select a theme, and receive a personalized birthday card.",[184,188,189],{},"The card can be generated as an image and shared on social media or printed.",[157,191,192],{},[164,193,194],{},"Example Code:",[196,197,202],"pre",{"className":198,"code":199,"language":200,"meta":201,"style":201},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { Resvg } from '@resvg\u002Fresvg-js';\nimport satori from 'satori';\n\nconst jsx = (\n  \u003Cdiv style={{ fontSize: '24px', color: 'blue', textAlign: 'center' }}>\n    \u003Ch1>Happy Birthday, Alex!\u003C\u002Fh1>\n    \u003Cp>Wishing you a fantastic year ahead!\u003C\u002Fp>;\n  \u003C\u002Fdiv>\n);\n\nconst svg = satori(\n  jsx,\n  { width: 600, height: 400, fonts: [],\n});\n\nconst pngBuffer = new Resvg(svg).render().asPng();\n","tsx","",[203,204,205,241,261,268,284,345,368,388,398,406,411,428,437,474,484,489],"code",{"__ignoreMap":201},[206,207,210,214,218,222,225,228,231,235,238],"span",{"class":208,"line":209},"line",1,[206,211,213],{"class":212},"s7zQu","import",[206,215,217],{"class":216},"sMK4o"," {",[206,219,221],{"class":220},"sTEyZ"," Resvg",[206,223,224],{"class":216}," }",[206,226,227],{"class":212}," from",[206,229,230],{"class":216}," '",[206,232,234],{"class":233},"sfazB","@resvg\u002Fresvg-js",[206,236,237],{"class":216},"'",[206,239,240],{"class":216},";\n",[206,242,244,246,249,252,254,257,259],{"class":208,"line":243},2,[206,245,213],{"class":212},[206,247,248],{"class":220}," satori ",[206,250,251],{"class":212},"from",[206,253,230],{"class":216},[206,255,256],{"class":233},"satori",[206,258,237],{"class":216},[206,260,240],{"class":216},[206,262,264],{"class":208,"line":263},3,[206,265,267],{"emptyLinePlaceholder":266},true,"\n",[206,269,271,275,278,281],{"class":208,"line":270},4,[206,272,274],{"class":273},"spNyl","const",[206,276,277],{"class":220}," jsx ",[206,279,280],{"class":216},"=",[206,282,283],{"class":220}," (\n",[206,285,287,290,294,297,300,303,306,308,311,313,316,319,321,323,326,328,330,333,335,337,340,342],{"class":208,"line":286},5,[206,288,289],{"class":216},"  \u003C",[206,291,293],{"class":292},"swJcz","div",[206,295,296],{"class":273}," style",[206,298,299],{"class":216},"={{",[206,301,302],{"class":292}," fontSize",[206,304,305],{"class":216},":",[206,307,230],{"class":216},[206,309,310],{"class":233},"24px",[206,312,237],{"class":216},[206,314,315],{"class":216},",",[206,317,318],{"class":292}," color",[206,320,305],{"class":216},[206,322,230],{"class":216},[206,324,325],{"class":233},"blue",[206,327,237],{"class":216},[206,329,315],{"class":216},[206,331,332],{"class":292}," textAlign",[206,334,305],{"class":216},[206,336,230],{"class":216},[206,338,339],{"class":233},"center",[206,341,237],{"class":216},[206,343,344],{"class":216}," }}>\n",[206,346,348,351,354,357,360,363,365],{"class":208,"line":347},6,[206,349,350],{"class":216},"    \u003C",[206,352,353],{"class":292},"h1",[206,355,356],{"class":216},">",[206,358,359],{"class":220},"Happy Birthday, Alex!",[206,361,362],{"class":216},"\u003C\u002F",[206,364,353],{"class":292},[206,366,367],{"class":216},">\n",[206,369,371,373,375,377,380,382,384,386],{"class":208,"line":370},7,[206,372,350],{"class":216},[206,374,157],{"class":292},[206,376,356],{"class":216},[206,378,379],{"class":220},"Wishing you a fantastic year ahead!",[206,381,362],{"class":216},[206,383,157],{"class":292},[206,385,356],{"class":216},[206,387,240],{"class":220},[206,389,391,394,396],{"class":208,"line":390},8,[206,392,393],{"class":216},"  \u003C\u002F",[206,395,293],{"class":292},[206,397,367],{"class":216},[206,399,401,404],{"class":208,"line":400},9,[206,402,403],{"class":220},")",[206,405,240],{"class":216},[206,407,409],{"class":208,"line":408},10,[206,410,267],{"emptyLinePlaceholder":266},[206,412,414,416,419,421,425],{"class":208,"line":413},11,[206,415,274],{"class":273},[206,417,418],{"class":220}," svg ",[206,420,280],{"class":216},[206,422,424],{"class":423},"s2Zo4"," satori",[206,426,427],{"class":220},"(\n",[206,429,431,434],{"class":208,"line":430},12,[206,432,433],{"class":220},"  jsx",[206,435,436],{"class":216},",\n",[206,438,440,443,446,448,452,454,457,459,462,464,467,469,472],{"class":208,"line":439},13,[206,441,442],{"class":216},"  {",[206,444,445],{"class":292}," width",[206,447,305],{"class":216},[206,449,451],{"class":450},"sbssI"," 600",[206,453,315],{"class":216},[206,455,456],{"class":292}," height",[206,458,305],{"class":216},[206,460,461],{"class":450}," 400",[206,463,315],{"class":216},[206,465,466],{"class":292}," fonts",[206,468,305],{"class":216},[206,470,471],{"class":220}," []",[206,473,436],{"class":216},[206,475,477,480,482],{"class":208,"line":476},14,[206,478,479],{"class":216},"}",[206,481,403],{"class":220},[206,483,240],{"class":216},[206,485,487],{"class":208,"line":486},15,[206,488,267],{"emptyLinePlaceholder":266},[206,490,492,494,497,499,502,504,507,510,513,516,518,521,523],{"class":208,"line":491},16,[206,493,274],{"class":273},[206,495,496],{"class":220}," pngBuffer ",[206,498,280],{"class":216},[206,500,501],{"class":216}," new",[206,503,221],{"class":423},[206,505,506],{"class":220},"(svg)",[206,508,509],{"class":216},".",[206,511,512],{"class":423},"render",[206,514,515],{"class":220},"()",[206,517,509],{"class":216},[206,519,520],{"class":423},"asPng",[206,522,515],{"class":220},[206,524,240],{"class":216},[176,526,528],{"id":527},"_2-dynamic-social-media-cards","2. Dynamic Social Media Cards",[181,530,531,534],{},[184,532,533],{},"Auto-generating Open Graph (OG) images for blog posts or social media previews.",[184,535,536],{},"Faster image generation without the need for a headless browser.",[176,538,540],{"id":539},"_3-event-invitations-and-announcements","3. Event Invitations and Announcements",[181,542,543,546],{},[184,544,545],{},"Custom invitation cards for weddings, company events, or product launches.",[184,547,548],{},"Users can enter their details and instantly receive a high-quality event invite.",[176,550,552],{"id":551},"_4-e-commerce-personalized-marketing","4. E-commerce Personalized Marketing",[181,554,555,558],{},[184,556,557],{},"Automatically generate personalized product recommendations or discount vouchers.",[184,559,560],{},"Improve user engagement with dynamic visuals tailored to individual customers.",[176,562,564],{"id":563},"_5-integration-with-preesh-for-thank-you-card-generation","5. Integration with Preesh for Thank You Card Generation",[181,566,567,570,573],{},[184,568,569],{},"Preesh, a project within the company, allows users to create and customize thank-you cards.",[184,571,572],{},"Satori can be used to generate high-quality SVG images of the customized thank-you cards, ensuring efficient rendering and design flexibility.",[184,574,575,576,579,580,509],{},"The generated SVG or PNG can then be converted into a ",[164,577,578],{},"PDF"," for easy sharing or printing using ",[164,581,582],{},"pdf.js",[157,584,585],{},[164,586,587],{},"Example Code for PDF Export:",[196,589,593],{"className":590,"code":591,"language":592,"meta":201,"style":201},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { Resvg } from '@resvg\u002Fresvg-js';\nimport satori from 'satori';\nimport jsPDF from 'jspdf';\n\nconst jsx = (\n  \u003Cdiv style={{ fontSize: '24px', color: 'black', textAlign: 'center' }}>\n    \u003Ch1>Thank You!\u003C\u002Fh1>\n    \u003Cp>We appreciate your support.\u003C\u002Fp>\n  \u003C\u002Fdiv>\n);\n\nconst svg = satori(\n  jsx,\n  { width: 600, height: 400, fonts: [] \n});\n\nconst pngBuffer = new Resvg(svg).render().asPng();\n\n\u002F\u002F Call the pdf generation module and add the image into the addImage() function\n\u002F\u002F This produces hd quality and sharp images that is then embedded to a pdf file.\nconst pdf = new jsPDF();\npdf.addImage(pngBuffer, 'PNG', 10, 10, 180, 100);\npdf.save('thank_you_card.pdf');\n","jsx",[203,594,595,615,631,649,653,663,710,727,744,752,758,762,774,780,807,815,819,848,853,860,866,885,931],{"__ignoreMap":201},[206,596,597,599,601,603,605,607,609,611,613],{"class":208,"line":209},[206,598,213],{"class":212},[206,600,217],{"class":216},[206,602,221],{"class":220},[206,604,224],{"class":216},[206,606,227],{"class":212},[206,608,230],{"class":216},[206,610,234],{"class":233},[206,612,237],{"class":216},[206,614,240],{"class":216},[206,616,617,619,621,623,625,627,629],{"class":208,"line":243},[206,618,213],{"class":212},[206,620,248],{"class":220},[206,622,251],{"class":212},[206,624,230],{"class":216},[206,626,256],{"class":233},[206,628,237],{"class":216},[206,630,240],{"class":216},[206,632,633,635,638,640,642,645,647],{"class":208,"line":263},[206,634,213],{"class":212},[206,636,637],{"class":220}," jsPDF ",[206,639,251],{"class":212},[206,641,230],{"class":216},[206,643,644],{"class":233},"jspdf",[206,646,237],{"class":216},[206,648,240],{"class":216},[206,650,651],{"class":208,"line":270},[206,652,267],{"emptyLinePlaceholder":266},[206,654,655,657,659,661],{"class":208,"line":286},[206,656,274],{"class":273},[206,658,277],{"class":220},[206,660,280],{"class":216},[206,662,283],{"class":220},[206,664,665,667,669,671,673,675,677,679,681,683,685,687,689,691,694,696,698,700,702,704,706,708],{"class":208,"line":347},[206,666,289],{"class":216},[206,668,293],{"class":292},[206,670,296],{"class":273},[206,672,299],{"class":216},[206,674,302],{"class":292},[206,676,305],{"class":216},[206,678,230],{"class":216},[206,680,310],{"class":233},[206,682,237],{"class":216},[206,684,315],{"class":216},[206,686,318],{"class":292},[206,688,305],{"class":216},[206,690,230],{"class":216},[206,692,693],{"class":233},"black",[206,695,237],{"class":216},[206,697,315],{"class":216},[206,699,332],{"class":292},[206,701,305],{"class":216},[206,703,230],{"class":216},[206,705,339],{"class":233},[206,707,237],{"class":216},[206,709,344],{"class":216},[206,711,712,714,716,718,721,723,725],{"class":208,"line":370},[206,713,350],{"class":216},[206,715,353],{"class":292},[206,717,356],{"class":216},[206,719,720],{"class":220},"Thank You!",[206,722,362],{"class":216},[206,724,353],{"class":292},[206,726,367],{"class":216},[206,728,729,731,733,735,738,740,742],{"class":208,"line":390},[206,730,350],{"class":216},[206,732,157],{"class":292},[206,734,356],{"class":216},[206,736,737],{"class":220},"We appreciate your support.",[206,739,362],{"class":216},[206,741,157],{"class":292},[206,743,367],{"class":216},[206,745,746,748,750],{"class":208,"line":400},[206,747,393],{"class":216},[206,749,293],{"class":292},[206,751,367],{"class":216},[206,753,754,756],{"class":208,"line":408},[206,755,403],{"class":220},[206,757,240],{"class":216},[206,759,760],{"class":208,"line":413},[206,761,267],{"emptyLinePlaceholder":266},[206,763,764,766,768,770,772],{"class":208,"line":430},[206,765,274],{"class":273},[206,767,418],{"class":220},[206,769,280],{"class":216},[206,771,424],{"class":423},[206,773,427],{"class":220},[206,775,776,778],{"class":208,"line":439},[206,777,433],{"class":220},[206,779,436],{"class":216},[206,781,782,784,786,788,790,792,794,796,798,800,802,804],{"class":208,"line":476},[206,783,442],{"class":216},[206,785,445],{"class":292},[206,787,305],{"class":216},[206,789,451],{"class":450},[206,791,315],{"class":216},[206,793,456],{"class":292},[206,795,305],{"class":216},[206,797,461],{"class":450},[206,799,315],{"class":216},[206,801,466],{"class":292},[206,803,305],{"class":216},[206,805,806],{"class":220}," [] \n",[206,808,809,811,813],{"class":208,"line":486},[206,810,479],{"class":216},[206,812,403],{"class":220},[206,814,240],{"class":216},[206,816,817],{"class":208,"line":491},[206,818,267],{"emptyLinePlaceholder":266},[206,820,822,824,826,828,830,832,834,836,838,840,842,844,846],{"class":208,"line":821},17,[206,823,274],{"class":273},[206,825,496],{"class":220},[206,827,280],{"class":216},[206,829,501],{"class":216},[206,831,221],{"class":423},[206,833,506],{"class":220},[206,835,509],{"class":216},[206,837,512],{"class":423},[206,839,515],{"class":220},[206,841,509],{"class":216},[206,843,520],{"class":423},[206,845,515],{"class":220},[206,847,240],{"class":216},[206,849,851],{"class":208,"line":850},18,[206,852,267],{"emptyLinePlaceholder":266},[206,854,856],{"class":208,"line":855},19,[206,857,859],{"class":858},"sHwdD","\u002F\u002F Call the pdf generation module and add the image into the addImage() function\n",[206,861,863],{"class":208,"line":862},20,[206,864,865],{"class":858},"\u002F\u002F This produces hd quality and sharp images that is then embedded to a pdf file.\n",[206,867,869,871,874,876,878,881,883],{"class":208,"line":868},21,[206,870,274],{"class":273},[206,872,873],{"class":220}," pdf ",[206,875,280],{"class":216},[206,877,501],{"class":216},[206,879,880],{"class":423}," jsPDF",[206,882,515],{"class":220},[206,884,240],{"class":216},[206,886,888,891,893,896,899,901,903,906,908,910,913,915,917,919,922,924,927,929],{"class":208,"line":887},22,[206,889,890],{"class":220},"pdf",[206,892,509],{"class":216},[206,894,895],{"class":423},"addImage",[206,897,898],{"class":220},"(pngBuffer",[206,900,315],{"class":216},[206,902,230],{"class":216},[206,904,905],{"class":233},"PNG",[206,907,237],{"class":216},[206,909,315],{"class":216},[206,911,912],{"class":450}," 10",[206,914,315],{"class":216},[206,916,912],{"class":450},[206,918,315],{"class":216},[206,920,921],{"class":450}," 180",[206,923,315],{"class":216},[206,925,926],{"class":450}," 100",[206,928,403],{"class":220},[206,930,240],{"class":216},[206,932,934,936,938,941,944,946,949,951,953],{"class":208,"line":933},23,[206,935,890],{"class":220},[206,937,509],{"class":216},[206,939,940],{"class":423},"save",[206,942,943],{"class":220},"(",[206,945,237],{"class":216},[206,947,948],{"class":233},"thank_you_card.pdf",[206,950,237],{"class":216},[206,952,403],{"class":220},[206,954,240],{"class":216},[181,956,957],{},[184,958,959],{},"This workflow enables seamless customization and export of thank-you cards as PDFs, making Preesh a powerful tool for user engagement.",[961,962],"hr",{},[152,964,966],{"id":965},"why-choose-satori-over-traditional-image-generation","Why Choose Satori Over Traditional Image Generation?",[968,969,970,985],"table",{},[971,972,973],"thead",{},[974,975,976,980,982],"tr",{},[977,978,979],"th",{},"Feature",[977,981,166],{},[977,983,984],{},"Puppeteer\u002FHeadless Browsers",[986,987,988,1000,1011,1022,1032],"tbody",{},[974,989,990,994,997],{},[991,992,993],"td",{},"Performance",[991,995,996],{},"High (SVG-based)",[991,998,999],{},"Slower (Runs full browser instance)",[974,1001,1002,1005,1008],{},[991,1003,1004],{},"Serverless Support",[991,1006,1007],{},"Yes (Efficient for Edge Functions)",[991,1009,1010],{},"No (Resource-heavy)",[974,1012,1013,1016,1019],{},[991,1014,1015],{},"Dependency Size",[991,1017,1018],{},"Lightweight",[991,1020,1021],{},"Heavy (Chrome-based)",[974,1023,1024,1027,1030],{},[991,1025,1026],{},"Custom Fonts",[991,1028,1029],{},"Supported",[991,1031,1029],{},[974,1033,1034,1037,1040],{},[991,1035,1036],{},"HTML & CSS Support",[991,1038,1039],{},"Yes",[991,1041,1039],{},[157,1043,1044],{},"Satori outperforms traditional methods when it comes to speed, efficiency, and serverless compatibility, making it an excellent choice for real-time image generation.",[961,1046],{},[152,1048,1050],{"id":1049},"conclusion","Conclusion",[157,1052,1053],{},"Satori by Vercel introduces a game-changing way to generate dynamic images in JavaScript. Whether for personalized birthday cards, social media previews, or marketing visuals, Satori enables developers to create high-quality graphics without the overhead of traditional image generation techniques. Its fast rendering, server-less compatibility, and ease of use make it a powerful tool for modern web applications.",[157,1055,1056,1057,1060],{},"By integrating Satori into Vue.js or other JavaScript frameworks, developers can enhance their applications with dynamic, visually appealing content while maintaining high performance and scalability. Additionally, within ",[164,1058,1059],{},"Preesh"," project, Satori can be leveraged to allow users to create and export custom thank-you cards efficiently, improving the overall user experience.",[1062,1063,1064],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":201,"searchDepth":243,"depth":243,"links":1066},[1067,1068,1075,1076],{"id":154,"depth":243,"text":155},{"id":170,"depth":243,"text":171,"children":1069},[1070,1071,1072,1073,1074],{"id":178,"depth":263,"text":179},{"id":527,"depth":263,"text":528},{"id":539,"depth":263,"text":540},{"id":551,"depth":263,"text":552},{"id":563,"depth":263,"text":564},{"id":965,"depth":243,"text":966},{"id":1049,"depth":243,"text":1050},"2025-02-01","*By Sean Erick C. Ramones, Vue SME | JavaScript\u002FTypeScript SME*","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F9746929\u002Fpexels-photo-9746929.png?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},{"title":38,"description":1078},"kVND5IuE59EiaqVB0GVLcVCG_fE-gzNA9sxPQqdXAEI",[1085,1086],{"title":34,"path":35,"stem":36,"description":1078,"children":-1},{"title":42,"path":43,"stem":44,"description":1078,"children":-1},1779638277170]