feat: add vite devtools integration with playground

[arashsheyda]

Description

Note

Requires Vite 8+ (DevTools Kit uses the plugin.devtools hook
introduced in Vite 8).

closes #9

this PR adds support for vite devtools integration with playground.

Usage:

check out https://github.com/comarkdown/comark/pull/102/changes#diff-0bffb03d8c49a00cae04014114b0d848afea2cddf16768a45ce13291919735bd

How to test

1. Install dependencies from the repo root:

   pnpm install

2. Run the Vue + Vite example (already configured with @vitejs/devtools):

   pnpm dev:vue

3. Open the app in the browser. the DevTools floating panel should appear at the bottom of the page. Click the Comark icon in the dock to open the playground iframe.

[vercel]

@arashsheyda is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

[pkg-pr-new]

Open in StackBlitz

comark

npm i https://pkg.pr.new/comarkdown/comark@102

@comark/ansi

npm i https://pkg.pr.new/comarkdown/comark/@comark/ansi@102

@comark/html

npm i https://pkg.pr.new/comarkdown/comark/@comark/html@102

@comark/nuxt

npm i https://pkg.pr.new/comarkdown/comark/@comark/nuxt@102

@comark/react

npm i https://pkg.pr.new/comarkdown/comark/@comark/react@102

@comark/svelte

npm i https://pkg.pr.new/comarkdown/comark/@comark/svelte@102

@comark/vue

npm i https://pkg.pr.new/comarkdown/comark/@comark/vue@102

commit: cde04d8

[arashsheyda]

@farnabaz @atinux trying to add vite devtools support here: the vue package has a vite entry so we can include the devtools there, but the others (like svelete or react) they don't have that entry so I thought user can incldue the devtools as a plugin... does that makes sense? or do we want to add vite entries for those packages as well

current example usage for react:

import { DevTools } from '@vitejs/devtools'
import { comarkDevtools } from 'comark/vite'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    DevTools(),
    react(),
    comarkDevtools(),
  ],
})

[antfu]

Otherwise LGTM, thanks!

[atinux]

Would you be happy to share a video about the devtools here @arashsheyda ?

[arashsheyda]

sure, @atinux you mean like this?

Screen.Recording.2026-04-16.at.2.43.07.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
comark	Error		Apr 17, 2026 1:32pm

[farnabaz]

Nice Work 👍
This is great start, but having website playground is not quite useful IMO.
It would be great if:

• devtools detects <Comark>/<ComarkRender> and get the content out of it and allow user to edit right in playground.

Not sure what is the best way achieve this 🤔 Maybe we can provide global utility for dev mode.

[farnabaz]

May be wild but:

• We can us DOM element to get access to tree document.querySelector('.comark-content').__vnode.ctx.props.tree
• The convert to markdown and show editor in devtools to edit it
• Update component props document.querySelector('.comark-content').__vnode.ctx.props.tree = updated tree
• And re-render the element document.querySelector('.comark-content').__vnode.ctx.update()

Of course this only works for Vue. Maybe @antfu could help us on this and finding best universal solution 👼

[antfu]

I am working on the utilities/infra for DevTools kit to work on the hosted website: vitejs/devtools#294 which might benefit this PR