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

[1244943563]

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 许可证。

github 链接交给 ai 重构架构图的时候给我替换了，正确的为： https://github.com/kingshuaishuai/incremark 特别抱歉

[beginor]

现在 Angular 都不算前段框架了么， 连 solid 和 svelte 都不如？

[1244943563]

@beginor svelte 确实很火，solid 我觉得不怎么样很小众，angular 我没想好要不要适配后面有人反馈再做吧

[subframe75361]

挺不错的，已 star

[jsq2627]

github 链接错了吧。是不是 AI 润色搞坏的 :doge:

[1244943563]

@jsq2627 我滴乖乖，是给我搞坏了，https://github.com/kingshuaishuai/incremark

[1244943563]

感谢支持

[1244943563]

@jsq2627 感谢支持

[TossPig]

我也要 Angular

[1244943563]

@TossPig
@beginor

真的要？那我要规划了，做好通知你们

[codehz]

这个增量解析好像并不一定能提升性能。。也许是对比的文档比较短？
我这边测试最高 1.4x,最低 0.9x 4.6ms vs 4.9ms 这样

[1244943563]

@codehz 目前是解析层测性能提升，benchmark 脚本已公开，clone 仓库，按文档，将你要测试的 markdown 文件全都丢进 test-data 中，短文档 increamrk 不占优势，长文档优势巨大

原因：incremark 默认使用极速模式，也就是使用 marked 作为引擎，streamdown 与 x-markdown 也都是 marked 作为引擎，incremark 每次只解析一个块，其他的每次都全量解析，单纯从相同的 marked 角度出发，你认为 o(n) 快还是 o(n²) 快。increamrk 短内容下，因为各种边界检测 + 内置的一些插件，会比默认 marked 慢的，这个文档中有描述。

测试方法文档： http://incremark.com/zh/advanced/benchmark.html

[orluna]

实用！

[nzbin]

暂时用不到，但也希望支持 Angular

[beginor]

@1244943563 已经入坑 md-editor-v3 了，封装成 Web component ，在任意前端框架中使用。

暂时不折腾了，不过还是希望能够支持 angular

[pursuer]

这么一看 preact 更小众了

[1244943563]

@beginor
@nzbin

OKK 那我先计划着，后续加，因为它其实有点重，不是特别轻量，目前策略先把轻量的主流框架抓住，感觉更优先的是基于它打造个 chat ui 直接提供一整套服务算了，太难挤进别人家的生态了

[1244943563]

@orluna 感谢体验

[1244943563]

@pursuer 哈哈哈 因为这个我一直没有使用过，solid 有比较代表性的 signal ，svelte 我深度使用过，国外现在确实也很火爆，所以它们俩支持上是很有必要的，其实我感觉就 react vue svelte 三个是 AI 应用中最轻量主流的，所有框架支持还真的精力不够（就算加上 ai 帮忙），里面的 core 跟 theme 包其实已经够三方来为自己喜欢的框架定制一套适配器了，现在自己的体量还太小没几个人知道更没几个人真的用，真有人用的话后续再考虑扩展更加广泛的市场😂

[nzbin]

@1244943563

必须解释一下，国内对 Angular 的误解还是太大，随着 Angular 最近几年的发展已经不重了，说它重难道是因为“大而全”。目前 Angular 已经有了 signal 响应式原语，这也是 tc39 signal 提案的关键参考依据。

[1244943563]

@nzbin 关注过 ag 的 signal ，不过我感觉不是因为使用 signal 就不重了，例如 react 的 class Component VS Function Component ，Class Compoennt 就重，Ag 的重体现在它的架构层设计与工程上，不在 signal ，这个没必要争，这是它的灵魂，就是不要求灵活性而要求代码一致性，我写过几周 ag 19, 它的写法让我很像回归函数式编程。16 以后核心是轻了，但是它重的何止是大而全，哎 难以言说...

[dassh]

next.js 16

import "@incremark/theme/styles.css";
会导致


Build Error



Parsing CSS source code failed
./node_modules/.pnpm/@[email protected]/node_modules/@incremark/theme/dist/styles.css (837:20)

Parsing CSS source code failed
835 | overflow-x: auto;
836 | }
> 837 | .mermaid-svg :deep(svg) {
| ^
838 | max-width: 100%;
839 | height: auto;
840 | }

'deep' is not recognized as a valid pseudo-class. Did you mean '::deep' (pseudo-element) or is this a typo?

Import trace:
Client Component Browser:
./node_modules/.pnpm/@[email protected]/node_modules/@incremark/theme/dist/styles.css [Client Component Browser]
./components/ui/streaming-markdown.tsx [Client Component Browser]
./components/script-guide/storyboard.tsx [Client Component Browser]
./components/script-guide/index.tsx [Client Component Browser]
./app/t/[storyId]/page.tsx [Client Component Browser]
./app/t/[storyId]/page.tsx [Server Component]

[1244943563]

@dassh 已修复，特别抱歉，没及时看到