Incremark Solid 版本上线： Vue/React/Svelte/Solid 四大框架，统一体验

Incremark 现已支持 Solid ，至此完成了对 Vue 、React 、Svelte 、Solid 四大主流前端框架的全面覆盖。

为什么要做框架无关

市面上大多数 Markdown 渲染库都是针对特定框架开发的。React 生态有 react-markdown ，Vue 生态有各种 v-md 组件。这带来几个问题：

1. 重复造轮子：每个框架社区都在独立实现相似的功能
2. 能力不一致：不同框架的实现质量参差不齐
3. 团队切换成本：换框架意味着重新学习新的 API

Incremark 采用不同的思路：核心逻辑与 UI 框架完全解耦。

@incremark/core 负责所有解析、转换、增量更新的工作，输出的是框架无关的数据结构。各框架包（@incremark/vue、@incremark/react、@incremark/svelte、@incremark/solid）只需要把这些数据渲染成对应框架的组件即可。

这意味着：

• 核心能力一次实现，四个框架同时受益
• Bug 修复和性能优化自动同步到所有框架
• API 设计保持高度一致，切换框架几乎零学习成本

包结构

┌───────────────────────────────┐ │ @incremark/core │ │ │ │ 增量解析 双引擎 插件系统 │ └───────────────┬───────────────┘ │ ┌───────────────────────────────┐ │ @incremark/vue │ │ @incremark/react │ │ @incremark/svelte │ │ @incremark/solid ← NEW │ └───────────────┬───────────────┘ │ ┌───────────────────────────────┐ │ @incremark/theme │ │ │ │ 样式 主题 代码高亮 │ └───────────────────────────────┘ 

增量解析

传统 Markdown 渲染器在流式场景下存在性能问题：每次新内容到达都要重新解析整个文档，复杂度是 O(n)。

Incremark 只处理新增内容，已解析的块不再重复处理，复杂度降至 O(n)。

四个框架的用法对比

四个框架的组件 API 完全一致，只是语法风格不同：

Vue

<script setup> import { IncremarkContent } from '@incremark/vue' // ... </script> <template> <IncremarkContent :cOntent="content" :is-finished="isFinished" /> </template> 

React

import { IncremarkContent } from '@incremark/react' // ... <IncremarkContent cOntent={content} isFinished={isFinished} /> 

Svelte

<script> import { IncremarkContent } from '@incremark/svelte' // ... </script> <IncremarkContent cOntent={content} isFinished={isFinished} /> 

Solid

import { IncremarkContent } from '@incremark/solid' // ... <IncremarkContent cOntent={content()} isFinished={isFinished()} /> 

可以看到，除了各框架本身的响应式语法差异（ Vue 的 ref、React 的 useState、Svelte 的 $state、Solid 的 createSignal），组件的使用方式完全统一。

在线演示

• Solid Demo
• Vue Demo
• React Demo
• Svelte Demo

链接

• npm: @incremark/core
• 文档: incremark.com
• GitHub: github.com/anthropics/incremark

MIT 许可证。