Simon-He95/markstream-vue
Markstream Vue
Markstream-vue is a specialized rendering library for Vue and Nuxt applications designed to process and display streaming markdown content in real time. It provides a dedicated component for handling incoming text streams, such as those generated by artificial intelligence models, by converting them into structured visual layouts as the data arrives.
The library distinguishes itself through a performance-focused rendering engine that utilizes document virtualization to manage long-form content. By rendering only the segments currently visible within the user viewport, it maintains smooth scrolling and predictable memory usage even when handling extensive or continuously growing documents.
The framework includes a comprehensive processing pipeline that supports the integration of interactive custom components, mathematical formulas, and diagrams directly within the markdown flow. It also features a built-in security layer that filters raw markup against a strict allowlist to prevent cross-site scripting, ensuring that user-provided or external content remains safe for display.
Developers can implement these capabilities using the provided Vue-native components, which include middleware for syntax highlighting and modular tools for injecting dynamic interface elements into technical documentation.
Features
- Real-Time Streaming Renderers - Converts incoming text streams into structured visual layouts in real time as data arrives.
- Text Response Streaming - Displays text generated by artificial intelligence models in real time with immediate formatting as data arrives.
- HTML Content Sanitization - Filters raw HTML output against a strict allowlist to prevent cross-site scripting attacks before DOM insertion.
- Rendered Content Sanitization - Ensures secure display of external content by filtering out malicious scripts from rendered output.
- Text Document Optimizations - Maintains smooth scrolling and memory efficiency for extensive documents by rendering only visible sections.
- AI-Driven Chat Components - Provides a frontend component for displaying AI-generated text streams with integrated code and diagram support.
- Vue Components - Provides a specialized Vue component for high-performance, low-jitter rendering of streaming text content.
- Virtual Rendering Engines - Uses virtualization to display long-form streaming content while maintaining smooth scrolling and predictable memory usage.
- Virtualized List Rendering - Optimizes performance by mounting only the document segments currently visible within the user viewport.
- Incremental Content Streaming - Processes incoming text chunks into structured trees in real time to enable immediate rendering of partial content.
- Markdown Abstract Syntax Trees - Transforms raw markdown into structured tree representations to facilitate efficient document processing and plugin integration.
- Technical Content Renderers - Presents complex technical content including math, diagrams, and code blocks within web applications.
- Diagram Renderers - Generates visual charts and mathematical formulas from text descriptions to provide context for complex data.
- UI Component Injections - Intercepts parsing to inject interactive UI components directly into the rendered markdown flow.
- Markdown Interaction Components - Integrates interactive UI widgets directly into markdown documents to create engaging user experiences.
- Component Embeddings - Enables the embedding of interactive custom components directly within text-based markdown documents.
- Syntax Highlighting - Applies static color formatting to code blocks by processing text tokens through a language-aware engine.
- Syntax Highlighters - Provides color-coded syntax highlighting for code blocks to improve readability and logic scanning.
- Virtual Scrolling - Renders only the visible portion of a document to maintain predictable memory usage and smooth scrolling performance.
