[GH-ISSUE #7] [Feature] Svelte #5

New issue

Open

opened 2026-03-02 05:16:29 +03:00 by kerem · 3 comments

kerem commented

2026-03-02 05:16:29 +03:00

Owner

Originally created by @hej-julian on GitHub (Feb 16, 2026).
Original GitHub issue: https://github.com/hiaaryan/sileo/issues/7

Nice Project!

Make it compatible with Svelte for the future?

Originally created by @hej-julian on GitHub (Feb 16, 2026). Original GitHub issue: https://github.com/hiaaryan/sileo/issues/7 Nice Project! Make it compatible with Svelte for the future?

kerem commented

2026-03-02 05:16:29 +03:00

Author

Owner

@alexgipi commented on GitHub (Feb 16, 2026):

This would be wonderful! If supporting Svelte is in your plans and you need help, I could take care of it @hiaaryan!
Great work, by the way! 👏👏
Cheers!

@alexgipi commented on GitHub (Feb 16, 2026): This would be wonderful! If supporting Svelte is in your plans and you need help, I could take care of it @hiaaryan! Great work, by the way! 👏👏 Cheers!

kerem commented

2026-03-02 05:16:29 +03:00

Author

Owner

@HorizonCode commented on GitHub (Feb 16, 2026):

until a proper Svelte port exists, you can use react and react-dom as a workaround. This approach already works in Svelte:

Create a SileoToast.svelte component and paste the following:

<script lang="ts">
	import { createElement } from 'react'
	import { createRoot } from 'react-dom/client'
	import type { SileoOptions } from 'sileo'

	let props: SileoOptions = $props()
	let rootEl: HTMLElement

	$effect(() => {
		const root = createRoot(rootEl)

		import('sileo').then(({ Toaster }) => {
			const sileo = createElement(Toaster, { ...props })
			root.render(sileo)
		})

		return () => root.unmount()
	})
</script>

<div bind:this={rootEl}></div>

Hopefully this helps until an official Svelte version becomes available :)

@HorizonCode commented on GitHub (Feb 16, 2026): until a proper Svelte port exists, you can use react and react-dom as a workaround. This approach already works in Svelte: Create a `SileoToast.svelte` component and paste the following: ```svelte <script lang="ts"> import { createElement } from 'react' import { createRoot } from 'react-dom/client' import type { SileoOptions } from 'sileo' let props: SileoOptions = $props() let rootEl: HTMLElement $effect(() => { const root = createRoot(rootEl) import('sileo').then(({ Toaster }) => { const sileo = createElement(Toaster, { ...props }) root.render(sileo) }) return () => root.unmount() }) </script> <div bind:this={rootEl}></div> ``` Hopefully this helps until an official Svelte version becomes available :)

kerem commented

2026-03-02 05:16:30 +03:00

Author

Owner

@hej-julian commented on GitHub (Feb 17, 2026):

until a proper Svelte port exists, you can use react and react-dom as a workaround. This approach already works in Svelte:

Create a SileoToast.svelte component and paste the following:

Hopefully this helps until an official Svelte version becomes available :)

Great solution @HorizonCode, but I'm waiting for full support.

@hej-julian commented on GitHub (Feb 17, 2026): > until a proper Svelte port exists, you can use react and react-dom as a workaround. This approach already works in Svelte: > > Create a `SileoToast.svelte` component and paste the following: > > <script lang="ts"> > import { createElement } from 'react' > import { createRoot } from 'react-dom/client' > import type { SileoOptions } from 'sileo' > > let props: SileoOptions = $props() > let rootEl: HTMLElement > > $effect(() => { > const root = createRoot(rootEl) > > import('sileo').then(({ Toaster }) => { > const sileo = createElement(Toaster, { ...props }) > root.render(sileo) > }) > > return () => root.unmount() > }) > </script> > > <div bind:this={rootEl}></div> > Hopefully this helps until an official Svelte version becomes available :) Great solution @HorizonCode, but I'm waiting for full support.