{"repo":"StephenGunn/svelte-component-to-image","free":true,"listed":false,"github":"https://github.com/StephenGunn/svelte-component-to-image","clone":"git clone https://github.com/StephenGunn/svelte-component-to-image.git","description":"Renders a standard Svelte component as a .png for easy dynamic image generation.","language":"TypeScript","stars":89,"topics":["open-graph","open-graph-generator","svelte","sveltekit","typescript","image-generator"],"license":"MIT","category":"media-processing","readme_excerpt":"svelte-component-to-image A package for easily rendering .png images from svelte components in SvelteKit. Inspired by Vercel's OG Image Generation tool. Good for rendering dynamic Open Graph images quickly and effeciently without having to use canvas. - Demo + Blog post about how to generate OG images - Minimal Deployment Demo on Vercel - A quick reference if you need it. Features - Renders a normal svelte component as a png - Component props are supported for dynamic image generation - Use basic CSS like flexbox and absolute positioning (See valid CSS) - Lightweight and fast (doesn't use canvas or puppeteer) - Load custom fonts: tff, otf, woff accepted (woff2 not accepted currently) Svelte 5 Usage You will need to add to every component you want to render as an image. You will see an error if you don't and the component will not render. Svelte 4 Usage The Svelte 4 version is available as the 0.1.0 release. Installation Note: Install as a regular dependency, not a dev dependency. This library is needed at runtime and some bundlers (e.g., adapter-node) handle dev dependencies differently, which can cause production build failures. Vite Plugin Every package that uses svelte as a peer dependency is automatically added to the noExternal of vite but since vite can't handle the native bindings of @resvg/resvg-js you need to add this library to ssr.external ...to provide you with a better DX this library ships with a vite plugin so you only need to do this Tested On - Vercel (workin","default_branch":null,"files":null,"tree":[],"storefront":"/r/StephenGunn","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/StephenGunn/svelte-component-to-image/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}