Safe HTML rendering for Svelte powered by DOMPurify. SSR-ready, browser-only entry, and edge-friendly options.
npm install @humanspeak/svelte-purifyA tiny, friendly sanitizer for Svelte that keeps your HTML shiny and safe using DOMPurify. SSR-ready by default.
- 🚀 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
``bash`
npm i -S @humanspeak/svelte-purifyor
pnpm add @humanspeak/svelte-purifyor
yarn add @humanspeak/svelte-purify
`svelte
$3
svelte
`$3
You can render UI before and after the sanitized HTML. Each hook receives the sanitized HTML length as a number.
svelte
preHtml={(len) => <>Sanitized length: {len}}
postHtml={(len) => <> • {len} chars}
/>
`Options (DOMPurify)
Pass any
options. We don’t hide anything—use the full power of DOMPurify.`svelte
`Note: The component returns sanitized HTML as a string (not DOM nodes).
Props
| Component | Prop | Type | Description |
| -------------- | ----------- | ------------------------------------------ | ---------------------------------------------- |
|
| html | string | Raw HTML to sanitize and render |
| | options | Parameters | 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
`ts
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
), and unsafe URLs (javascript:), among many other protections.Examples
Strip a specific tag with DOMPurify options:
`svelte
`Allow an extra tag:
svelte
options={{ ADD_TAGS: ['iframe'] }}
/>
``MIT © Humanspeak, Inc.
Made with ❤️ by Humanspeak
Special thanks to @jill64 — her years of Svelte contributions taught me so much and inspired this work.