A Preact component that renders HTML/XML as Virtual DOM, mapping custom elements to Preact components.
preact-markup is a Preact component that renders HTML or XML strings as Virtual DOM, allowing custom elements in the markup to be mapped to Preact components. It solves the problem of dynamically rendering structured content (like Markdown or CMS HTML) within a Preact application while maintaining component-based interactivity and efficient updates.
Preact developers who need to render dynamic HTML/XML content (e.g., from Markdown, CMS, or user input) and want to integrate custom Preact components into that markup seamlessly.
Developers choose preact-markup for its lightweight integration with Preact, efficient diffing rendering, and the ability to treat HTML as a declarative UI layer with full component capabilities, avoiding manual DOM manipulation or complex parsing logic.
:zap: Render HTML5 as VDOM, with Components as Custom Elements!
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Only re-renders when markup changes, optimizing performance through efficient DOM updates, as explicitly stated in the README's diffing renderer feature.
Maps custom elements in markup to Preact components, passing attributes as props for dynamic rendering, enabling declarative HTML structures with interactive UIs without manual DOM manipulation.
Removes script tags by default to prevent XSS attacks, with an optional `allow-scripts` prop for controlled JavaScript execution, balancing safety and flexibility.
Supports both XML and HTML parsing via the `type` prop, allowing developers to choose based on content strictness, as mentioned in the parsing options section.
Exclusively designed for Preact, making it incompatible with other frameworks like React or Vue without significant rework, limiting its versatility.
Defaults to XML parsing, which can be too strict for typical HTML content and may break on malformed markup, requiring explicit configuration to use HTML parsing.
While an `onError` callback is provided, parsing failures might not be gracefully handled out-of-the-box, potentially leading to silent errors or broken renders.