Setup

npm install svelte-jsx-snippet

tsconfig.json

{
  "compilerOptions": {
    // set jsx config
    "jsx": "preserve",
    "jsxImportSource": "svelte-jsx-snippet",
  },
  // include jsx/tsx files
  "include": ["**/*.svelte", "**/*.ts", "**/*.tsx"],
}

vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";
// Put svelteJsxSnippet plugin
import { svelteJsxSnippet } from "svelte-jsx-snippet/vite";

export default defineConfig({
  plugins: [sveltekit(), svelteJsxSnippet()],
});

API

JSX

JSX will be Svelte snippet. The following two are synonymous:

const hello = <h3>Hello, world!</h3> // JSX

{#snippet hello()}
  <h3>Hello, world!</h3> <!-- Svelte -->
{/snippet}