Skip to main content
The RawText component renders its input as raw HTML without escaping. This is useful for rendering pre-sanitized HTML content, such as markdown-converted text or trusted HTML from a CMS.
Security Warning: This component does not escape any user input and is vulnerable to cross-site scripting (XSS) attacks. Make sure to sanitize any user input when using this component.

​
Constructor

RawText(String text, {Key? key})
​
text
String
required
The HTML string to render. This content will be inserted directly into the DOM without escaping.
​
key
Key?
Optional key for this component.

​
Basic usage

Render HTML content from a trusted source: 
import 'package:jaspr/jaspr.dart';

class BlogPost extends StatelessComponent {
  final String htmlContent;
  
  const BlogPost({required this.htmlContent});
  
  @override
  Component build(BuildContext context) {
    return article([
      RawText(htmlContent),
    ]);
  }
}

​
With markdown conversion

Combine with a markdown parser to render markdown as HTML: 
import 'package:jaspr/jaspr.dart';
import 'package:markdown/markdown.dart' as md;

class MarkdownContent extends StatelessComponent {
  final String markdown;
  
  const MarkdownContent({required this.markdown});
  
  @override
  Component build(BuildContext context) {
    final htmlContent = md.markdownToHtml(markdown);
    
    return div([
      RawText(htmlContent),
    ]);
  }
}

​
Server-side rendering

RawText works seamlessly with server-side rendering: 
import 'package:jaspr/server.dart';

class ArticlePage extends AsyncStatelessComponent {
  final String articleId;
  
  const ArticlePage({required this.articleId});
  
  @override
  Future<Component> build(BuildContext context) async {
    // Fetch article from database
    final article = await fetchArticle(articleId);
    
    // article.content is pre-sanitized HTML from CMS
    return Document.head(
      title: article.title,
      meta: {
        'description': article.excerpt,
      },
      child: article_([
        h1([text(article.title)]),
        RawText(article.content),
      ]),
    );
  }
}

​
Security best practices

Never pass unsanitized user input to RawText. Use a library like html to sanitize content:
import 'package:html/parser.dart' as html_parser;
import 'package:html/dom.dart' as html_dom;

String sanitizeHtml(String unsafeHtml) {
  final document = html_parser.parse(unsafeHtml);
  
  // Remove dangerous tags and attributes
  document.querySelectorAll('script, iframe, object, embed').forEach((element) {
    element.remove();
  });
  
  document.querySelectorAll('*').forEach((element) {
    element.attributes.removeWhere(
      (key, value) => key.startsWith('on') || key == 'href' && value.startsWith('javascript:'),
    );
  });
  
  return document.body?.innerHtml ?? '';
}

// Usage
final safeHtml = sanitizeHtml(userInput);
RawText(safeHtml);
If you just need to display plain text, use the Text component instead. It automatically escapes HTML:
// Safe - automatically escaped
Text('<script>alert("XSS")</script>')

// Dangerous - executes the script
RawText('<script>alert("XSS")</script>')
Only use RawText with content from trusted sources:✅ Safe sources:
  • Markdown converted to HTML by your server
  • HTML from your CMS after sanitization
  • Static HTML templates you control
  • Pre-validated API responses
❌ Unsafe sources:
  • User comments or posts
  • URL parameters
  • Form inputs
  • Third-party APIs without validation
Add a Content Security Policy header to mitigate XSS risks:
import 'package:jaspr/server.dart';

void main() {
  runApp(
    Document(
      head: [
        meta(
          httpEquiv: 'Content-Security-Policy',
          content: "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';",
        ),
      ],
      body: App(),
    ),
  );
}

​
Comparison with Text

FeatureTextRawText
HTML escaping✅ Automatic❌ None
XSS protection✅ Built-in❌ Manual
Use casePlain textPre-sanitized HTML
PerformanceFastFast
AccessibilityAutomaticDepends on HTML
  • Text - Safe text rendering with automatic escaping
  • DomComponent - Type-safe HTML element creation
  • SEO & Meta - Adding meta tags and structured data

Build docs developers (and LLMs) love

Get started for freeTalk to us