https://github.com/humanspeak/svelte-purify
DOMPurify-powered HTML sanitizer for Svelte — SSR-safe, browser-ready, TypeScript-first.
https://github.com/humanspeak/svelte-purify
browser-only dompurify frontend html-sanitizer runes safe-html sanitization sanitize security ssr svelte svelte-component svelte-library svelte5 sveltekit typescript vite web-security xss
Last synced: about 1 month ago
JSON representation
DOMPurify-powered HTML sanitizer for Svelte — SSR-safe, browser-ready, TypeScript-first.
- Host: GitHub
- URL: https://github.com/humanspeak/svelte-purify
- Owner: humanspeak
- License: mit
- Created: 2025-09-08T13:47:13.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-10-23T20:52:26.000Z (8 months ago)
- Last Synced: 2025-10-23T22:26:37.221Z (8 months ago)
- Topics: browser-only, dompurify, frontend, html-sanitizer, runes, safe-html, sanitization, sanitize, security, ssr, svelte, svelte-component, svelte-library, svelte5, sveltekit, typescript, vite, web-security, xss
- Language: TypeScript
- Homepage: https://purify.svelte.page
- Size: 637 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @humanspeak/svelte-purify
A tiny, friendly sanitizer for Svelte that keeps your HTML shiny and safe using DOMPurify. SSR-ready by default.
[](https://www.npmjs.com/package/@humanspeak/svelte-purify)
[](https://github.com/humanspeak/svelte-purify/actions/workflows/npm-publish.yml)
[](https://coveralls.io/github/humanspeak/svelte-purify?branch=main)
[](https://github.com/humanspeak/svelte-purify/blob/main/LICENSE)
[](https://www.npmjs.com/package/@humanspeak/svelte-purify)
[](https://github.com/humanspeak/svelte-purify/actions/workflows/codeql.yml)
[](https://packagephobia.com/result?p=@humanspeak/svelte-purify)
[](https://trunk.io)
[](http://www.typescriptlang.org/)
[](https://www.npmjs.com/package/@humanspeak/svelte-purify)
[](https://github.com/humanspeak/svelte-purify/graphs/commit-activity)
## 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
```bash
npm i -S @humanspeak/svelte-purify
# or
pnpm add @humanspeak/svelte-purify
# or
yarn add @humanspeak/svelte-purify
```
## Basic Usage
### Default
```svelte
import { SveltePurify } from '@humanspeak/svelte-purify'
const html = `<p>Hello <strong>world</strong><script>alert(1)`
```
### Limit output length
```svelte
```
### Render hooks (preHtml/postHtml)
You can render UI before and after the sanitized HTML. Each hook receives the sanitized HTML length as a number.
```svelte
import { SveltePurify } from '@humanspeak/svelte-purify'
const html = `<p><strong>Hello</strong> world!</p>`
<>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.
```svelte
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']
}
```
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[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
```ts
import { SveltePurify } from '@humanspeak/svelte-purify'
```
- **SveltePurify**: SSR-friendly sanitizer component
## Security
This library delegates sanitization to [DOMPurify](https://github.com/cure53/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:
```svelte
```
Allow an extra tag:
```svelte
"
options={{ ADD_TAGS: ['iframe'] }}
/>
```
## License
MIT © [Humanspeak, Inc.](LICENSE)
## Credits
Made with ❤️ by [Humanspeak](https://humanspeak.com)
Special thanks to [@jill64](https://github.com/jill64) — her years of Svelte contributions taught me so much and inspired this work.