Key Features • How To Use • Download • Credits • Related • License
- Convert html/css to jsx
- Useful when you are going to use satori with Svelte & Kit.
- Compatible with new version of svelte
- As new versions are coming for better performance in svelte we maintain that.
- Easy to use with all available syntax in html css.
- Support for class based internal style.
- inline css
- Install @ethercorps/svelte-h2j using your favourite node package manager.
# NPM $ npm install @ethercorps/svelte-h2j css-tree# PNPM $ pnpm install @ethercorps/svelte-h2j css-tree# Yarn $ yarn add @ethercorps/svelte-h2j css-tree# bun $ bun install @ethercorps/svelte-h2j css-tree- Add
viteplugin tovite.config.[js,ts]
import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vitest/config'; import {vitePluginSvelteH2J} from "@ethercorps/svelte-h2j/vite" export default defineConfig({ plugins: [sveltekit(), vitePluginSvelteH2J()], test: { include: ['src/**/*.{test,spec}.{js,ts}'] } });This is required as we build for production and add css-tree while build.
- To convert html, css to JSX (Also supports Tailwind, inline css)
import {toReactElement} from "@ethercorps/svelte-h2j" const htmlString =` <div tw="bg-gray-50 flex w-full h-full items-center justify-center"> <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8"> <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left"> <span>Ready to dive in?</span> <span tw="text-indigo-600">Start your free trial today.</span> </h2> <div tw="mt-8 flex md:mt-0"> <div tw="flex rounded-md shadow"> <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a> </div> <div tw="ml-3 flex rounded-md shadow"> <a href="#" tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a> </div> </div> </div> </div> `; const jsx = toReactElement(htmlTemplate) // Takes a string only const svg = await satori(jsx, { width: options.width, height: options.height, debug: options.debug, fonts: options.fonts || [ { name: 'sans serif', data: fontData, style: 'normal', weight: 700 } ] });- We also provide a server side api for converting svelte components to JSX.
import {svelteComponentToJsx} from "@ethercorps/svelte-h2j"; import SvelteComponent from "SvelteComponent.svelte" const jsx = svelteComponentToJsx(SvelteComponent, props = { a: 2 // if you have `export let a;` in component }) // Takes two parameters 1. Component 2. Component Props const svg = await satori(jsx, { width: options.width, height: options.height, debug: options.debug, fonts: options.fonts || [ { name: 'sans serif', data: fontData, style: 'normal', weight: 700 } ] });This software uses the following open source packages:
satori-html - Similar but uses other libraries as dependency when we can approach with svelte compiler in sveltekit.
- Sveltekit OG - An alternative to @vercel/og for sveltekit.
MIT
ethercorps.io · GitHub @theetherGit · Twitter @theether0