Skip to content

๐Ÿ’Ž Safe html expansion for Svelte with DOMPurify

License

Notifications You must be signed in to change notification settings

jill64/svelte-purify

Repository files navigation

svelte-purify

npm-version npm-license npm-download-month npm-min-size ci.yml

๐Ÿ’Ž 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'}

License

MIT