@humanspeak/svelte-purify

A tiny, friendly sanitizer for Svelte that keeps your HTML shiny and safe using DOMPurify. SSR-ready by default.

Features

• 🚀 Fast and tiny: DOMPurify under the hood, minimal wrapper
• 🔒 XSS protection: strips scripts, unsafe URLs, and sneaky attributes
• 🧰 Options passthrough: you control DOMPurify via options
• 🧭 SSR-ready: default component works on server and client
• 🧪 Tested: unit tests with Vitest/JSDOM
• 🧑‍💻 Full TypeScript: proper types for options and props
• 🧿 Svelte 5 runes-friendly: clean, modern Svelte API

Installation

npm i -S @humanspeak/svelte-purify
# or
pnpm add @humanspeak/svelte-purify
# or
yarn add @humanspeak/svelte-purify

Basic Usage

Default

<script lang="ts">
    import { SveltePurify } from '@humanspeak/svelte-purify'

    const html = `<p>Hello <strong>world</strong><script>alert(1)</script></p>`
</script>

<SveltePurify {html} />

Options (DOMPurify)

Pass any DOMPurify.sanitize options. We don’t hide anything—use the full power of DOMPurify.

<script lang="ts">
    import { SveltePurify } from '@humanspeak/svelte-purify'

    const html = `<a href="javascript:alert(1)" title="nope">click me</a>`
    const options = {
        ALLOWED_TAGS: ['a'],
        ALLOWED_ATTR: ['href', 'title']
    }
</script>

<SveltePurify {html} {options} />

Note: The component returns sanitized HTML as a string (not DOM nodes).

Props

Exports

import { SveltePurify } from '@humanspeak/svelte-purify'

• SveltePurify: SSR-friendly sanitizer component

Security

This library delegates sanitization to DOMPurify, a battle-tested sanitizer. It removes script tags, event handler attributes (like onerror), and unsafe URLs (javascript:), among many other protections.

Examples

Strip a specific tag with DOMPurify options:

<SveltePurify html="<p>Hello <strong>world</strong></p>" options={{ FORBID_TAGS: ['strong'] }} />

Allow an extra tag:

<SveltePurify
    html="<iframe src=\"about:blank\"></iframe>"
    options={{ ADD_TAGS: ['iframe'] }}
/>

License

MIT © Humanspeak, Inc.

Credits

Made with ❤️ by Humanspeak

Special thanks to @jill64 — her years of Svelte contributions taught me so much and inspired this work.