ViewHtml

The ViewHtml component safely renders HTML content using DOMPurify for sanitization. It applies prose styling for better readability and prevents XSS attacks by cleaning potentially dangerous HTML.

The component automatically sanitizes all HTML content before rendering, ensuring that only safe HTML elements and attributes are displayed.

Demo

React

HTML Content

Rich HTML content with various elements and styling.

You can use bold, italic, and highlighted text. Press Ctrl + V to paste.

Features

• Semantic HTML
• Accessible markup
• Clean structure

HTML is the foundation of the web.

const html = '
Hello
';

Element	Purpose
<div>	Container
<span>	Inline

Last updated: Today

Vue

HTML Content

Rich HTML content with various elements and styling.

You can use bold, italic, and highlighted text. Press Ctrl + V to paste.

Features

• Semantic HTML
• Accessible markup
• Clean structure

HTML is the foundation of the web.

const html = '
Hello
';

Element	Purpose
<div>	Container
<span>	Inline

Last updated: Today

Usage

React

import { ViewHtml } from '@fintech-sandpit/ui/react';

const htmlContent = '<h1>Hello World</h1><p>This is safe HTML content.</p>';

return (
  <ViewHtml html={htmlContent} />
);

Vue

<template>
  <ViewHtml :html="htmlContent" />
</template>

<script setup lang="ts">
import { ViewHtml } from '@fintech-sandpit/ui/vue';

const htmlContent = '<h1>Hello World</h1><p>This is safe HTML content.</p>';
</script>

Props

Name	Type	Required	Default	Description
html	string	Yes	—	The HTML content to render. Will be sanitized using DOMPurify before display.