feat: data binding in components

[farnabaz]

resolves #113

This PR allows to bind variables on runtime

Binding variables are structured in an interface as below:

export interface NodeRenderData {
  /*
   * Frontmatter data from the markdown file
   */
  frontmatter: Record<string, unknown>
  /**
   * Meta information from Comark Tree
   */
  meta: Record<string, unknown>
  /**
   * Additional data paased to rendere
   */
  data: Record<string, unknown>
  /**
   * Props from parent node
   */
  props: Record<string, unknown>
}

Examples

Frontmatter

---
theAnswer: 42
---

::question{:answer="frontmatter.theAnswer"}
The answer to life universe and everything: 
::

Props

::question{answer="42"}
The answer to life universe and everything: 

  :::answer{:value="props.answer"}
  :::
::

Runtime data

::date{:date="data.date"}
::

<Comark :markdown="makrdown" :data="{ date: new Date() }" />

---

As for {{ variable | defaultValue }} syntax, it will be a separate plugin and converts this syntax to

[
  "binding",
  {
    ":value": "variable",
    "defaultValue": "defaultValue" 
  }
]

So users can use this plugin and have simple <binding> component to get and render values on runitme

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
comark	Ready	Preview	Apr 21, 2026 1:49pm
comark-json-render	Ready	Preview	Apr 21, 2026 1:49pm
comark-nextjs	Ready	Preview	Apr 21, 2026 1:49pm
comark-nuxt	Ready	Preview	Apr 21, 2026 1:49pm
comark-svelte	Ready	Preview	Apr 21, 2026 1:49pm
comark-twoslash	Ready	Preview	Apr 21, 2026 1:49pm
comark-vue	Ready	Preview	Apr 21, 2026 1:49pm

[pkg-pr-new]

Open in StackBlitz

comark

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

@comark/ansi

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

@comark/html

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

@comark/nuxt

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

@comark/react

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

@comark/svelte

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

@comark/vue

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

commit: 7bebd82

[atinux]

This is awesome