💎 Safe html expansion for Svelte with DOMPurify
npm i svelte-purifySee DOMPurify for detailed settings.
<script>
import { Render } from 'svelte-purify'
const code = '<h1>Hello World</h1>'
</script>
<Render html={code} config={/* DOMPurify Config */} />
<!-- Equivalent to {@html code} -->Render uses DOMPurify internally and only works in the browser or at Node runtime.
There are 3 options for use in non-node environments such as the edge.
- Use
svelte-sanitize
Enables the use of html rendering in non-node environments at the expense of detailed compatibility.
Please check the link for details.
<script>
import { Render } from 'svelte-sanitize'
</script>
<Render html={/* ... */} />- Use Browser Only Entry Point
In this case, html is not rendered on the server.
<script>
import { Render } from 'svelte-purify/browser-only'
</script>
<Render html={/* ... */} />- Manual Config
Conditional Exports is not yet fully supported, so 2. may not work.
Sacrificing bundle size avoids this problem.
npm i dompurify<script>
import { browser } from '$app/environment'
import DOMPurify from 'dompurify'
</script>
{@html browser ? DOMPurify.sanitize(/* ... */) : 'server-fallback-value'}