16 Repos
Components for processing and outputting the HTML representation of complex, modular content fields.
Distinct from Content Rendering Components: Distinct from Content Rendering Components: focuses specifically on the rendering of structured block-based content fields.
Explore 16 awesome GitHub repositories matching user interface & experience · Structured Block Renderers. Refine with filters or upvote what's useful.
Draft-js is a framework for building customizable rich text editors within React applications. It serves as a state manager for document content and metadata, providing a system to handle text ranges, atomic blocks, and the conversion of HTML strings into structured document formats. The framework enables the creation of interactive editing interfaces that support custom inline styling and configurable block rendering. It includes tools for managing rich media document handling, allowing the integration of non-editable content and metadata into a text stream. The project covers a broad range
Allows mapping specific content block types to corresponding React components to control visual rendering.
markdown-it is a token-based Markdown compiler and CommonMark-compliant parser that converts structured plaintext markup into HTML. It functions as an extensible markup processor designed to transform text into browser-ready content while managing security and preventing cross-site scripting. The project is distinguished by a modular plugin system that allows for the extension of parsing capabilities and the addition of custom syntax, such as footnotes, tables, or emojis. It utilizes a two-stage tokenization process to break documents into structural tokens before rendering them into final HT
Identifies and tokenizes block-level structures such as tables, lists, and headings.
Wagtail is an open-source content management system built on the Django web framework. It provides a structured, tree-based approach to content modeling, allowing developers to define custom page types and reusable content components that are managed through a highly customizable administrative interface. The platform distinguishes itself through its flexible, block-based content composition system, which enables editors to assemble complex page layouts dynamically. It also offers robust support for multi-site and multi-lingual environments, allowing organizations to manage distinct websites
Outputs the HTML representation of complex, modular content fields by processing individual components and their associated templates.
EmDash is an open-source content management system built on Astro that combines a visual admin panel with a plugin-driven architecture and server-side rendering. It provides a complete content management system with structured content modeling, a rich text editor using Portable Text format, and a TypeScript API for type-safe content queries. The system supports authentication through passkeys, OAuth 2.1, and external providers, with role-based access control and fine-grained permission scopes. What distinguishes EmDash is its plugin development framework, which supports both native plugins ru
Transforms rich text blocks into HTML using configurable component mappings.
This project is a framework for building static websites using the Hugo static site generator. It functions as a Markdown-based content management system and a page builder that utilizes Tailwind CSS to assemble modular utility-first blocks into final web pages. The system features specialized capabilities for creating academic portfolios, including a framework to import BibTeX publications and manage scholarly resumes. It also includes an AI website generator that produces deployable Markdown structures and content based on natural language descriptions. The platform covers a broad range of
Resolves and renders modular content blocks while automatically managing their associated CSS.
BlockNote is a block-based rich text editor and a real-time collaborative workspace. It uses a JSON-based data model to organize content into draggable, nestable blocks rather than a single flat document. The system functions as a high-level interface built on ProseMirror that abstracts document state into discrete, manipulatable content blocks. The project serves as a framework for integrating large language models into document editors, enabling context-aware text generation and AI-driven workflows. It also acts as a document export engine capable of converting structured block data into fo
Renders the editor interface by mapping defined block schemas to specific UI components.
wxParse is a rich text parser and renderer specifically designed for the WeChat Mini Program ecosystem. It transforms standard HTML tags and Markdown syntax into native visual elements and compatible layouts. The system processes structured text strings into a repeating list of visual components and media links. It handles the conversion of complex text formats into formatted media and hyperlinks to ensure content displays correctly across mobile devices. The project manages content through regular expression-based parsing and schema-driven element mapping, translating identified content typ
Processes and outputs visual representations of complex, modular content blocks.
This project is a rich text editor component for React applications that provides a visual interface for composing and formatting content. It functions as a DraftJS-based WYSIWYG editor, allowing users to create structured documents with inline styles and block types. The editor features a customizable toolbar interface for managing text alignment, lists, and media embeds. It includes a specialized input system for inserting emojis, hashtags, and user mentions as single deletable units. The project provides capabilities for transforming internal editor state into HTML, JSON, or Markdown form
Supports rendering non-standard content types using structured block renderers.
Timber is a PHP library that integrates the Twig template engine into WordPress themes, providing an object-oriented framework for theme development. It wraps WordPress data — posts, terms, users, menus, and comments — in structured PHP classes, allowing developers to work with objects instead of raw arrays while keeping HTML markup separate from PHP logic through Twig templates. The library distinguishes itself by offering a complete set of tools for modern WordPress theme building. It includes a file-based template hierarchy with fallback chains, dynamic image manipulation with resizing, cr
Renders all Gutenberg blocks automatically when outputting post content through the template engine.
BlockSuite is a collaborative block editor framework built on a hierarchical block tree data model with CRDT-based state synchronization for real-time multi-user editing. It provides an extensible block component system, allowing developers to define custom block types through declarative schemas, services, and rendering components. The editor is packaged as cross-framework web components, making it embeddable in any JavaScript environment. The framework distinguishes itself with a command-driven editing pipeline that composes type-safe editing actions with dynamic context sharing and control
Renders nested block hierarchies recursively to form a tree document structure.
react-notion-x ist eine React-basierte Rendering-Engine und ein TypeScript-Client, die darauf ausgelegt sind, Notion-API-Daten in formatierte Webseiten und Komponenten umzuwandeln. Es fungiert als Content-Parser und Renderer, der Notion-API-Antworten abruft, normalisiert und in konsistente Datenstrukturen für die Anzeige verarbeitet. Das Projekt enthält ein Utility, um komplexe Notion-Seiteninhalte und Blockstrukturen in einfachen Markdown-Text umzuwandeln. Um die Performance aufrechtzuerhalten, nutzt es ein Lazy-Loading-Interface, das das Laden schwerer Elemente wie PDFs und mathematischer Gleichungen verzögert. Der Renderer unterstützt eine breite Palette von Inhaltstypen, einschließlich Codeblöcken mit Syntax-Highlighting, Datensammlungen und eingebetteten Dokumenten. Er bietet Funktionen für den Zugriff auf öffentliche und private Seiten und beinhaltet Bildoptimierungstechniken wie Platzhalter niedriger Qualität.
Provides structured block renderers for heavyweight content like PDFs and mathematical equations.
Getwidget is a comprehensive Flutter UI component library and design system providing over 1,000 pre-built widgets for creating cross-platform user interfaces. It serves as a production-ready widget gallery designed to accelerate the front-end development process through a wide array of pre-composed elements. The project includes a specialized AI interaction UI kit featuring components for rendering streaming large language model responses, RAG chat interfaces, and real-time voice agents. It also provides operational utilities for estimating monthly LLM expenditures based on token usage and p
Ships components for rendering token-by-token AI text and animated waveforms at high frame rates.
Dieses Projekt ist ein Framework für Konversationsschnittstellen und eine UI-Komponentenbibliothek, die für den Aufbau von Anwendungen mit Integration von Large Language Models entwickelt wurde. Es bietet eine standardisierte Provider-Integrationsschicht, um Frontend-Komponenten mit verschiedenen KI-Backends zu verbinden, sowie eine dedizierte Response-Rendering-Engine zur Anzeige generierter Inhalte. Das Framework ist auf hybride generative UI-Komposition spezialisiert und verbindet traditionelle interaktive Elemente mit dynamischen Modellausgaben. Es verfügt über ein protokollgesteuertes System zur Konvertierung strukturierter Datenströme in interaktive Karten und enthält Werkzeuge zur Visualisierung der internen Reasoning-Prozesse und Gedankengänge eines Modells. Die Bibliothek deckt eine breite Palette an Funktionen ab, einschließlich inkrementellem Markdown-Rendering, Konversations-Lebenszyklusmanagement und Persona-Konfiguration. Sie bietet zudem spezialisierte Komponenten für Prompting, die Erfassung von Nutzerfeedback und die Verwaltung von Chat-Sitzungszuständen. Ein Befehlszeilen-Dienstprogramm ist für das Projekt-Scaffolding verfügbar, um die Generierung initialer Projektstrukturen und Boilerplate-Code zu automatisieren.
Ships a dedicated engine for rendering streaming markdown, code blocks, and structured data from LLMs.
ChatGPT.nvim ist ein OpenAI-LLM-Neovim-Plugin, das als KI-gestützter Code-Assistent für Refactoring, Code-Vervollständigung und Fehlerbehebung dient. Es fungiert als Tool zur Automatisierung benutzerdefinierter Prompts und als Markdown-Renderer, der es Benutzern ermöglicht, direkt im Editor mit Sprachmodellen zu interagieren. Das Projekt zeichnet sich durch ein Framework zur Definition wiederverwendbarer KI-Personas und automatisierter Textverarbeitungsaufgaben mittels System-Prompts und Templates aus. Es enthält ein spezialisiertes Rendering-System, das Antworten in formatiertes Markdown mit einklappbaren Code-Blöcken umwandelt. Das Plugin deckt interaktive Chat-Interfaces, kontextbezogenes Prompting für Projektdateien und automatisierte Code-Aktionen für Grammatikkorrekturen und Bugfixes ab. Zudem implementiert es eine sichere Verwaltung von Zugangsdaten, indem API-Keys über externe Befehle abgerufen werden, anstatt sie statisch zu speichern.
Specializes in rendering streamed AI output with styled markdown and foldable code blocks for readability.
Dieses Projekt ist ein selbstgehostetes, webbasiertes Interface für die Interaktion mit Large Language Models. Es bietet ein zentrales Dashboard, mit dem Benutzer Modellkommunikation verwalten, dauerhafte Gesprächsverläufe pflegen und Prompt-Bibliotheken in einer privaten, containerisierten Umgebung organisieren können. Die Plattform zeichnet sich durch robuste Administrations- und Sicherheitskontrollen aus, einschließlich Unterstützung für Enterprise-Identity-Provider, passwortbasierten Zugriff und Request-Rate-Limiting. Sie ermöglicht flexible Konnektivität, indem Benutzer benutzerdefinierte Netzwerk-Proxys konfigurieren, mehrere API-Keys verwalten und Modell-Reasoning sowie Kontextfenster-Einstellungen an spezifische Anforderungen anpassen können. Die Anwendung unterstützt eine umfassende Suite an Funktionen für KI-Interaktionen, wie Echtzeit-Streaming-Antworten, Rich-Content-Rendering für Code und mathematische Notationen sowie geräteübergreifende Synchronisation von Chat-Sitzungen. Zudem enthält sie Tools für Content-Filtering und sitzungsspezifische Prompt-Anpassungen, um konsistente und sichere Ausgaben zu gewährleisten. Die Software ist für containerisierte Deployments konzipiert, was eine konsistente Ausführung über verschiedene Infrastrukturen hinweg sicherstellt. Sie kann als Progressive Web App installiert werden, um eine native Erfahrung auf Mobil- und Desktop-Geräten zu bieten.
Renders streamed AI-generated content including markdown, code blocks, and mathematical notation directly in the chat interface.
Pymdown-extensions is a collection of functional enhancements designed to extend the capabilities of standard Markdown processors. It functions as a Python-based library that integrates into the document conversion pipeline to support complex layouts, rich formatting, and specialized content structures. The library distinguishes itself through a modular extension pipeline that allows for advanced syntax transformation and configurable attribute processing. By hooking into the parsing lifecycle, it enables the creation of structured containers, the embedding of binary assets, and the dynamic i
Structures information into specialized containers like admonitions and tabs for improved documentation layout.