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