@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} />

Limit output length

<SveltePurify {html} maxLength={120} />

Render hooks (preHtml/postHtml)

You can render UI before and after the sanitized HTML. Each hook receives the sanitized HTML length as a number.

<script lang="ts">
    import { SveltePurify } from '@humanspeak/svelte-purify'
    const html = `<p><strong>Hello</strong> world!</p>`
</script>

<SveltePurify
    {html}
    preHtml={(len) => <>Sanitized length: {len}</>}
    postHtml={(len) => <> • {len} chars</>}
/>

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

| Component | Prop | Type | Description | | -------------- | ----------- | ------------------------------------------ | ---------------------------------------------- | | SveltePurify | html | string | Raw HTML to sanitize and render | | | options | Parameters<typeof DOMPurify.sanitize>[1] | DOMPurify options (all supported) | | | maxLength | number | If set, truncates the sanitized HTML string | | | preHtml | Snippet<[number]> | Renders before HTML; receives sanitized length | | | postHtml | Snippet<[number]> | Renders after HTML; receives sanitized length |

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.