svelte-purify

svelte-purify

💎 Safe html expansion for Svelte with DOMPurify

Installation

npm i svelte-purify

Usage

See 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} -->

SSR

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.

1. 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={/* ... */} />

1. 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={/* ... */} />

1. 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'}