DEV Community

Cover image for Incremark Now Supports Solid: One Library for Vue, React, Svelte, and Solid
king
king

Posted on

Incremark Now Supports Solid: One Library for Vue, React, Svelte, and Solid

#incremark #markdown #solid #ai

Incremark now supports Solid, completing our coverage of all four major frontend frameworks: Vue, React, Svelte, and Solid.

Why Framework-Agnostic?

Most Markdown rendering libraries are built for specific frameworks. React has react-markdown, Vue has various v-md components. This creates problems:

  1. Duplicated effort: Each framework community independently implements similar features
  2. Inconsistent capabilities: Implementation quality varies across frameworks
  3. Switching costs: Changing frameworks means learning a new API

Incremark takes a different approach: core logic is completely decoupled from UI frameworks.

@incremark/core handles all parsing, transformation, and incremental updates, outputting framework-agnostic data structures. Framework packages (@incremark/vue, @incremark/react, @incremark/svelte, @incremark/solid) simply render this data as framework-specific components.

This means:

  • Core capabilities implemented once, benefiting all four frameworks
  • Bug fixes and performance optimizations automatically sync to all frameworks
  • Consistent API design, near-zero learning curve when switching frameworks

Package Structure 

┌───────────────────────────────┐
│       @incremark/core         │
│                               │
│  Incremental · Dual Engine ·  │
│        Plugin System          │
└───────────────┬───────────────┘
                │
                ▼
┌───────────────────────────────┐
│  @incremark/vue               │
│  @incremark/react             │
│  @incremark/svelte            │
│  @incremark/solid  ← NEW      │
└───────────────┬───────────────┘
                │
                ▼
┌───────────────────────────────┐
│       @incremark/theme        │
│                               │
│  Styles · Themes · Syntax     │
│        Highlighting           │
└───────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Incremental Parsing

Traditional Markdown renderers have performance issues in streaming scenarios: they re-parse the entire document whenever new content arrives, resulting in O(n²) complexity.

Incremark only processes new content. Already-parsed blocks are never reprocessed, reducing complexity to O(n).

Usage Across All Four Frameworks

The component API is identical across all four frameworks, differing only in syntax:

Vue

<script setup>
import { IncremarkContent } from '@incremark/vue'
// ...
</script>

<template>
  <IncremarkContent :content="content" :is-finished="isFinished" />
</template>
Enter fullscreen mode Exit fullscreen mode

React

import { IncremarkContent } from '@incremark/react'
// ...

<IncremarkContent content={content} isFinished={isFinished} />
Enter fullscreen mode Exit fullscreen mode

Svelte

<script>
import { IncremarkContent } from '@incremark/svelte'
// ...
</script>

<IncremarkContent content={content} isFinished={isFinished} />
Enter fullscreen mode Exit fullscreen mode

Solid

import { IncremarkContent } from '@incremark/solid'
// ...

<IncremarkContent content={content()} isFinished={isFinished()} />
Enter fullscreen mode Exit fullscreen mode

Apart from each framework's reactive syntax (Vue's ref, React's useState, Svelte's $state, Solid's createSignal), the component usage is completely unified.

Live Demos

Links

MIT License.

Top comments (0)