Parse and render HTML, PHP, JSON, XML, Markdown, CSS, and source code as React components with zero-config auto-detection. One unified API for web and React Native.
A comprehensive toolkit that handles every aspect of content parsing, rendering, and manipulation across web and mobile platforms.
Automatically detects HTML, HTML5, JSON, XML, PHP, Markdown, CSS, JavaScript, TypeScript, YAML, and plain text from content strings with zero config.
Full DOM support with custom component overrides, XSS sanitization, SVG support, inline style parsing, event handlers, and scoped CSS injection.
Full CSS parsing with selector matching (type, class, ID, attribute, pseudo-class, combinators), specificity calculation, CSS variables, calc(), @media queries, and scoped injection.
Full GFM plus reference links, footnotes, definition lists, math blocks, emoji shortcodes (30+), subscript/superscript, highlight syntax, and autolinks.
15+ language support with line numbers, line highlighting, copy button, dark/light themes, and customizable font sizes.
Collapsible tree view with search/filter, data type badges, copy-to-clipboard, sort keys, JSONPath querying, and dark/light themes.
21 SVG elements supported on React Native with zero external dependencies: paths, shapes, text, ViewBox transforms, and gradients.
FlatList-based virtualization on native and CSS content-visibility containment on web for efficient rendering of large documents.
Built-in XSS protection with configurable allowed tags, attributes, and strip rules. Protects all rendered HTML content by default.
42 supported locales, 13 RTL locales, locale-aware number/date formatting, localized UI strings in 13 languages, and automatic direction detection.
useFadeIn, useSlideIn, useCollapseAnimation, useThemeTransition, useScrollAnimation, useTypewriter, and more CSS-based animations.
Export rendered content to PDF with full styling, page breaks, and print-optimized layouts via browser print API.
PluginManager with lifecycle hooks (beforeParse, afterParse, beforeRender, afterRender, transformNode, extractData) and 8 built-in plugins.
ARIA role mapping, attribute generation, color contrast checking, document outline validation, and screen reader text generation.
renderToString, renderToStaticMarkup, extractMetadataForSSR, generateHeadTags, generateStructuredData (JSON-LD), and environment detection.
Intelligent fallback strategies for HTML, JSON, Markdown, CSS, and XML errors with human-readable fix suggestions and recovery attempts.
Fetch content from APIs (AEM, headless CMS, REST) with auto-detection, 9 extraction strategies, caching, retry, and polling.
Sub-path exports for parsers, utils, hooks, plugins, themes, and types. Import only what you need to keep bundles minimal.
Extract links, images, scripts, styles, meta tags, headings, tables, forms, lists, code blocks, SEO, OpenGraph, Twitter Cards, and more.
Install only what you need. Each package is independently versioned with sub-path exports for optimized tree-shaking.
Core parsing, utilities, hooks, plugins, themes, accessibility, SSR, i18n, error recovery, benchmarks & PDF export.
React + React Native components for all content types with animation hooks and unified web/native support.
Dedicated React Native components for HTML, PHP, JSON, XML, Markdown & code with native primitives.
Add ContentRenderer to your project with your preferred package manager. No complex configuration required.
# Install core package (parsers, utilities, hooks) npm install @laddhaanshul/content-renderer-core # Install React + React Native package npm install @laddhaanshul/content-renderer
Zero-config auto-detection means you can start rendering content immediately with just a single component.
import { ContentRenderer } from '@laddhaanshul/content-renderer'; function App() { const content = '<h1>Hello World</h1><p>This is <strong>HTML</strong> content.</p>'; return <ContentRenderer content={content} />; }
Every component works on both web and React Native with platform-appropriate rendering. Each accepts extensive props for customization.
Each parser provides comprehensive methods for parsing, validating, querying, and transforming content.
| Parser | Key Capabilities |
|---|---|
| HTMLParser | Full DOM, query selectors, serialization, validation |
| JSONParser | JSONPath, diff, schema inference, flatten/unflatten |
| XMLParser | XPath queries, namespaces, toObject conversion |
| MarkdownParser | GFM, frontmatter, TOC, link/image extraction |
| PHPParser | Class/function/variable extraction, PHPDoc |
| CSSParser | Specificity, media queries, keyframes, variables |
| CSEngine | Cascade, CSS vars, calc(), @media evaluation |
The PluginManager provides priority-based plugin hooks for every stage of the content rendering pipeline. Register custom plugins or use 8 production-ready built-in plugins.
| Plugin | Hook | Description |
|---|---|---|
| lineNumbers | afterParse | Adds line numbers to code blocks |
| sanitize | beforeRender | Applies HTML sanitization |
| toc | extractData | Generates table of contents |
| metaEnricher | afterParse | Enriches metadata with SEO data |
| linkRewrite | transformNode | Rewrites link URLs via mapping |
| imageProxy | transformNode | Proxies images through CDN |
| emoji | afterParse | Converts emoji shortcodes to Unicode |
| headingAnchor | transformNode | Adds anchor IDs to headings |
import { PluginManager, builtInPlugins } from '@laddhaanshul/content-renderer-core'; const manager = new PluginManager(); manager.use(builtInPlugins.lineNumbers()); manager.use(builtInPlugins.sanitize({ allowedTags: ['p', 'a', 'img', 'h1', 'h2'] })); manager.use(builtInPlugins.toc()); manager.use(builtInPlugins.headingAnchor()); // Register a custom plugin with priority ordering manager.register({ name: 'my-plugin', version: '1.0.0', priority: 50, beforeParse(content: string): string { return content.replace(/\r\n/g, '\n'); }, transformNode(node: HTMLNode): HTMLNode { return node; // Modify nodes before rendering }, });
Built as a Yarn Workspaces monorepo with clear separation between core logic and platform-specific rendering.
Web App (Next.js / Vite) • React Native App (Expo / Bare)
12+ Components, Animation Hooks, Themes
Native Components, TurboModules, Fabric
7 Parsers • CSEngine • Plugins • Hooks • HOCs • Provider • i18n • Accessibility • SSR • Error Recovery • PDF Export • Benchmarks • Sanitization • Extraction • Validation • Transform
Fast HTML/XML Parsing
CSS AST Parsing
Entity Encode/Decode
Comprehensive utility functions for content extraction, sanitization, transformation, validation, and more.
Extract links, images, scripts, styles, meta, headings, tables, forms, lists, code blocks, comments, SEO, OpenGraph, Twitter Cards, and structured data (JSON-LD).
sanitizeHTML, stripTags, stripAttributes, stripScripts, stripStyles, escapeHTML, unescapeHTML, encodeEntities, and decodeEntities with configurable options.
minify/format HTML/CSS/JSON/XML, convert between formats (JSON, XML, Markdown, HTML), string utilities (slugify, camelCase, kebabCase, snakeCase, pascalCase, titleCase).
isValidHTML, isValidJSON, isValidXML, isValidCSS, isValidURL, isValidEmail, isValidPhoneNumber, content type detection from extension, MIME type, and file header.
benchmarkParse, benchmarkExtract, benchmarkRender, benchmarkSuite, compareWithCompetitors, and formatBenchmarkResults for performance measurement.
recoverFromHTMLError, recoverFromJSONError, recoverFromMarkdownError, recoverFromCSSError, recoverFromXMLError, suggestFixes, and createFallbackContent.
Start rendering content in your React or React Native app today. One package, every content type, zero configuration.