[{"data":1,"prerenderedAt":946},["ShallowReactive",2],{"navigation_examples":3,"navigation_docs":114,"-compare-comark-vs-mdx":334,"-compare-comark-vs-mdx-surround":941},[4],{"title":5,"path":6,"stem":7,"children":8,"page":39},"Examples","\u002Fexamples","examples",[9,40,69,104],{"title":10,"path":11,"stem":12,"children":13,"page":39},"Frameworks","\u002Fexamples\u002Fframeworks","examples\u002F1.frameworks",[14,19,24,29,34],{"title":15,"path":16,"stem":17,"icon":18},"Astro","\u002Fexamples\u002Fframeworks\u002Fastro","examples\u002F1.frameworks\u002Fastro\u002FREADME","i-simple-icons:astro",{"title":20,"path":21,"stem":22,"icon":23},"Next.js","\u002Fexamples\u002Fframeworks\u002Fnextjs","examples\u002F1.frameworks\u002Fnextjs\u002FREADME","i-simple-icons:nextdotjs",{"title":25,"path":26,"stem":27,"icon":28},"Nuxt","\u002Fexamples\u002Fframeworks\u002Fnuxt-ui","examples\u002F1.frameworks\u002Fnuxt\u002FREADME","i-simple-icons-nuxt",{"title":30,"path":31,"stem":32,"icon":33},"SvelteKit","\u002Fexamples\u002Fframeworks\u002Fsveltekit","examples\u002F1.frameworks\u002Fsveltekit\u002FREADME","i-simple-icons-svelte",{"title":35,"path":36,"stem":37,"icon":38},"VitePress","\u002Fexamples\u002Fframeworks\u002Fvitepress","examples\u002F1.frameworks\u002Fvitepress\u002FREADME","i-simple-icons-vitepress",false,{"title":41,"path":42,"stem":43,"children":44,"page":39},"Vite","\u002Fexamples\u002Fvite","examples\u002F2.vite",[45,50,55,60,64],{"title":46,"path":47,"stem":48,"icon":49},"Angular","\u002Fexamples\u002Fvite\u002Fangular","examples\u002F2.vite\u002Fangular\u002FREADME","i-simple-icons-angular",{"title":51,"path":52,"stem":53,"icon":54},"HTML Preview","\u002Fexamples\u002Fvite\u002Fhtml","examples\u002F2.vite\u002Fhtml\u002FREADME","i-lucide-file-code",{"title":56,"path":57,"stem":58,"icon":59},"React","\u002Fexamples\u002Fvite\u002Freact","examples\u002F2.vite\u002Freact\u002FREADME","i-simple-icons-react",{"title":61,"path":62,"stem":63,"icon":33},"Svelte","\u002Fexamples\u002Fvite\u002Fsvelte","examples\u002F2.vite\u002Fsvelte\u002FREADME",{"title":65,"path":66,"stem":67,"icon":68},"Vue","\u002Fexamples\u002Fvite\u002Fvue","examples\u002F2.vite\u002Fvue\u002FREADME","i-simple-icons-vuedotjs",{"title":70,"path":71,"stem":72,"children":73,"page":39},"Plugins","\u002Fexamples\u002Fplugins","examples\u002F3.plugins",[74,79,84,89,94,99],{"title":75,"path":76,"stem":77,"icon":78},"Binding (frontmatter + data)","\u002Fexamples\u002Fplugins\u002Fvue-vite-binding","examples\u002F3.plugins\u002Fvue-vite-binding\u002FREADME","i-lucide-replace",{"title":80,"path":81,"stem":82,"icon":83},"Syntax Highlighting","\u002Fexamples\u002Fplugins\u002Fvue-vite-highlight","examples\u002F3.plugins\u002Fvue-vite-highlight\u002FREADME","i-lucide-code",{"title":85,"path":86,"stem":87,"icon":88},"JSON Render","\u002Fexamples\u002Fplugins\u002Fvue-vite-json-render","examples\u002F3.plugins\u002Fvue-vite-json-render\u002FREADME","i-lucide-braces",{"title":90,"path":91,"stem":92,"icon":93},"Math formulas","\u002Fexamples\u002Fplugins\u002Fvue-vite-math","examples\u002F3.plugins\u002Fvue-vite-math\u002FREADME","i-lucide-calculator",{"title":95,"path":96,"stem":97,"icon":98},"Mermaid diagrams","\u002Fexamples\u002Fplugins\u002Fvue-vite-mermaid","examples\u002F3.plugins\u002Fvue-vite-mermaid\u002FREADME","i-simple-icons-mermaid",{"title":100,"path":101,"stem":102,"icon":103},"Punctuation","\u002Fexamples\u002Fplugins\u002Fvue-vite-punctuation","examples\u002F3.plugins\u002Fvue-vite-punctuation\u002FREADME","i-lucide-quote",{"title":105,"path":106,"stem":107,"children":108,"page":39},"Ai","\u002Fexamples\u002Fai","examples\u002F4.ai",[109],{"title":110,"path":111,"stem":112,"icon":113},"AI SDK","\u002Fexamples\u002Fai\u002Fnuxt-ai-sdk","examples\u002F4.ai\u002Fnuxt-ai-sdk\u002FREADME","i-simple-icons-vercel",[115,128,149,178,271,292,313],{"title":116,"path":117,"stem":118,"children":119,"page":39},"Getting Started","\u002Fgetting-started","1.getting-started",[120,124],{"title":121,"path":122,"stem":123},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F0.introduction",{"title":125,"path":126,"stem":127},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F1.installation",{"title":129,"path":130,"stem":131,"children":132,"page":39},"Syntax","\u002Fsyntax","2.syntax",[133,137,141,145],{"title":134,"path":135,"stem":136},"Markdown","\u002Fsyntax\u002Fmarkdown","2.syntax\u002F1.markdown",{"title":138,"path":139,"stem":140},"Components","\u002Fsyntax\u002Fcomponents","2.syntax\u002F2.components",{"title":142,"path":143,"stem":144},"Attributes","\u002Fsyntax\u002Fattributes","2.syntax\u002F3.attributes",{"title":146,"path":147,"stem":148},"AST","\u002Fsyntax\u002Fcomark-ast","2.syntax\u002F4.comark-ast",{"title":150,"path":151,"stem":152,"children":153,"page":39},"Rendering","\u002Frendering","3.rendering",[154,158,161,164,167,170,173],{"title":155,"path":156,"stem":157,"icon":54},"HTML","\u002Frendering\u002Fhtml","3.rendering\u002F2.html",{"title":65,"path":159,"stem":160,"icon":68},"\u002Frendering\u002Fvue","3.rendering\u002F3.vue",{"title":25,"path":162,"stem":163,"icon":28},"\u002Frendering\u002Fnuxt","3.rendering\u002F4.nuxt",{"title":56,"path":165,"stem":166,"icon":59},"\u002Frendering\u002Freact","3.rendering\u002F5.react",{"title":61,"path":168,"stem":169,"icon":33},"\u002Frendering\u002Fsvelte","3.rendering\u002F6.svelte",{"title":46,"path":171,"stem":172,"icon":49},"\u002Frendering\u002Fangular","3.rendering\u002F7.angular",{"title":174,"path":175,"stem":176,"icon":177},"ANSI (Terminal)","\u002Frendering\u002Fansi","3.rendering\u002F8.ansi","i-lucide-terminal",{"title":70,"icon":179,"path":180,"stem":181,"children":182,"page":39},"i-lucide-plug","\u002Fplugins","4.plugins",[183,254],{"title":184,"path":185,"stem":186,"children":187,"page":39},"Built-in","\u002Fplugins\u002Fbuilt-in","4.plugins\u002F1.built-in",[188,193,197,202,207,212,217,220,224,228,231,236,241,244,249],{"title":189,"path":190,"stem":191,"icon":192},"Alerts","\u002Fplugins\u002Fbuilt-in\u002Falert","4.plugins\u002F1.built-in\u002Falert","i-lucide-bell",{"title":194,"path":195,"stem":196,"icon":78},"Binding","\u002Fplugins\u002Fbuilt-in\u002Fbinding","4.plugins\u002F1.built-in\u002Fbinding",{"title":198,"path":199,"stem":200,"icon":201},"Breaks","\u002Fplugins\u002Fbuilt-in\u002Fbreaks","4.plugins\u002F1.built-in\u002Fbreaks","i-lucide-corner-down-left",{"title":203,"path":204,"stem":205,"icon":206},"Emoji","\u002Fplugins\u002Fbuilt-in\u002Femoji","4.plugins\u002F1.built-in\u002Femoji","i-lucide-smile",{"title":208,"path":209,"stem":210,"icon":211},"Footnotes","\u002Fplugins\u002Fbuilt-in\u002Ffootnotes","4.plugins\u002F1.built-in\u002Ffootnotes","i-lucide-footprints",{"title":213,"path":214,"stem":215,"icon":216},"Headings","\u002Fplugins\u002Fbuilt-in\u002Fheadings","4.plugins\u002F1.built-in\u002Fheadings","i-lucide-heading",{"title":85,"path":218,"stem":219,"icon":88},"\u002Fplugins\u002Fbuilt-in\u002Fjson-render","4.plugins\u002F1.built-in\u002Fjson-render",{"title":221,"path":222,"stem":223,"icon":93},"Mathematics","\u002Fplugins\u002Fbuilt-in\u002Fmath","4.plugins\u002F1.built-in\u002Fmath",{"title":225,"path":226,"stem":227,"icon":98},"Mermaid Diagrams","\u002Fplugins\u002Fbuilt-in\u002Fmermaid","4.plugins\u002F1.built-in\u002Fmermaid",{"title":100,"path":229,"stem":230,"icon":103},"\u002Fplugins\u002Fbuilt-in\u002Fpunctuation","4.plugins\u002F1.built-in\u002Fpunctuation",{"title":232,"path":233,"stem":234,"icon":235},"Security","\u002Fplugins\u002Fbuilt-in\u002Fsecurity","4.plugins\u002F1.built-in\u002Fsecurity","i-lucide-shield-check",{"title":237,"path":238,"stem":239,"icon":240},"Summary Extraction","\u002Fplugins\u002Fbuilt-in\u002Fsummary","4.plugins\u002F1.built-in\u002Fsummary","i-lucide-file-text",{"title":80,"path":242,"stem":243,"icon":83},"\u002Fplugins\u002Fbuilt-in\u002Fsyntax-highlight","4.plugins\u002F1.built-in\u002Fsyntax-highlight",{"title":245,"path":246,"stem":247,"icon":248},"Task List","\u002Fplugins\u002Fbuilt-in\u002Ftask-list","4.plugins\u002F1.built-in\u002Ftask-list","i-lucide-check-square",{"title":250,"path":251,"stem":252,"icon":253},"Table of Contents","\u002Fplugins\u002Fbuilt-in\u002Ftoc","4.plugins\u002F1.built-in\u002Ftoc","i-lucide-list",{"title":255,"path":256,"stem":257,"children":258,"page":39},"Custom","\u002Fplugins\u002Fcustom","4.plugins\u002F2.custom",[259,263,267],{"title":260,"path":261,"stem":262},"Plugin API","\u002Fplugins\u002Fcustom\u002Fplugin-api","4.plugins\u002F2.custom\u002F1.plugin-api",{"title":264,"path":265,"stem":266},"AST API","\u002Fplugins\u002Fcustom\u002Fast-api","4.plugins\u002F2.custom\u002F2.ast-api",{"title":268,"path":269,"stem":270},"Markdown-it","\u002Fplugins\u002Fcustom\u002Fmarkdown-it","4.plugins\u002F2.custom\u002F3.markdown-it",{"title":272,"path":273,"stem":274,"children":275,"page":39},"API Reference","\u002Fapi","5.api",[276,280,284,288],{"title":277,"path":278,"stem":279},"Render API","\u002Fapi\u002Frender","5.api\u002F0.render",{"title":281,"path":282,"stem":283},"Parse API","\u002Fapi\u002Fparse","5.api\u002F1.parse",{"title":285,"path":286,"stem":287},"Streaming API","\u002Fapi\u002Fauto-close","5.api\u002F2.auto-close",{"title":289,"path":290,"stem":291},"Cheat Sheet","\u002Fapi\u002Freference","5.api\u002F3.reference",{"title":293,"path":294,"stem":295,"children":296,"page":39},"Comparisons","\u002Fcompare","6.compare",[297,301,305,309],{"title":298,"path":299,"stem":300},"Comark vs MDX","\u002Fcompare\u002Fcomark-vs-mdx","6.compare\u002F1.comark-vs-mdx",{"title":302,"path":303,"stem":304},"Comark vs react-markdown","\u002Fcompare\u002Fcomark-vs-react-markdown","6.compare\u002F2.comark-vs-react-markdown",{"title":306,"path":307,"stem":308},"Comark vs Streamdown","\u002Fcompare\u002Fcomark-vs-streamdown","6.compare\u002F3.comark-vs-streamdown",{"title":310,"path":311,"stem":312},"Comark vs Markdoc","\u002Fcompare\u002Fcomark-vs-markdoc","6.compare\u002F4.comark-vs-markdoc",{"title":314,"path":315,"stem":316,"children":317,"page":39},"Knowledge Base","\u002Fkb","7.kb",[318,322,326,330],{"title":319,"path":320,"stem":321},"Why Comark?","\u002Fkb\u002Fwhy-comark","7.kb\u002F0.why-comark",{"title":323,"path":324,"stem":325},"Migration from MDC","\u002Fkb\u002Fmigration-from-mdc","7.kb\u002F2.migration-from-mdc",{"title":327,"path":328,"stem":329},"Migration from MDX","\u002Fkb\u002Fmigration-from-mdx","7.kb\u002F3.migration-from-mdx",{"title":331,"path":332,"stem":333},"Twoslash","\u002Fkb\u002Ftwoslash","7.kb\u002F4.twoslash",{"id":335,"title":298,"body":336,"description":918,"extension":919,"links":920,"meta":930,"navigation":938,"path":299,"seo":939,"stem":300,"__hash__":940},"docs\u002F6.compare\u002F1.comark-vs-mdx.md",{"type":337,"value":338,"toc":907},"minimark",[339,347,352,479,483,490,493,547,558,580,583,587,685,696,699,702,709,792,798,802,805,841,844,848,855,859],[340,341,342,346],"p",{},[343,344,345],"strong",{},"TL;DR",": Both let you use components inside Markdown. MDX compiles your content to JSX at build time, so it is tied to a bundler and (in practice) to React. Comark parses component syntax at runtime into a framework-agnostic AST, so content can come from a database, a CMS, or an AI stream, and render to Vue, React, Svelte, Angular, HTML, or a terminal.",[348,349,351],"h2",{"id":350},"at-a-glance","At a Glance",[353,354,355,370],"table",{},[356,357,358],"thead",{},[359,360,361,364,367],"tr",{},[362,363],"th",{},[362,365,366],{},"Comark",[362,368,369],{},"MDX",[371,372,373,391,402,413,424,435,446,457,468],"tbody",{},[359,374,375,379,385],{},[376,377,378],"td",{},"Component syntax",[376,380,381],{},[382,383,384],"code",{},"::alert{type=\"info\"}",[376,386,387,390],{},[382,388,389],{},"\u003CAlert type=\"info\">"," (JSX)",[359,392,393,396,399],{},[376,394,395],{},"Build step",[376,397,398],{},"Not required, parse at runtime or build time",[376,400,401],{},"Required, compiles to JSX",[359,403,404,407,410],{},[376,405,406],{},"Content source",[376,408,409],{},"Any string: file, database, CMS, API, LLM stream",[376,411,412],{},"Files processed by your bundler",[359,414,415,418,421],{},[376,416,417],{},"Renderers",[376,419,420],{},"Vue, React, Svelte, Angular, Nuxt, HTML, ANSI",[376,422,423],{},"React (other JSX runtimes via pragma)",[359,425,426,429,432],{},[376,427,428],{},"Streaming",[376,430,431],{},"Auto-close renders incomplete input at every frame",[376,433,434],{},"Not supported, expects complete documents",[359,436,437,440,443],{},[376,438,439],{},"Output",[376,441,442],{},"Compact serializable AST",[376,444,445],{},"Compiled JavaScript module",[359,447,448,451,454],{},[376,449,450],{},"Inline JavaScript expressions",[376,452,453],{},"No, values come from frontmatter or app state",[376,455,456],{},"Yes, full JSX expressions",[359,458,459,462,465],{},[376,460,461],{},"Imports\u002Fexports in content",[376,463,464],{},"No, components registered in the renderer",[376,466,467],{},"Yes",[359,469,470,473,476],{},[376,471,472],{},"Plugin ecosystem",[376,474,475],{},"Comark plugins + markdown-it plugins",[376,477,478],{},"remark\u002Frehype plugins",[348,480,482],{"id":481},"the-core-difference-content-vs-code","The Core Difference: Content vs Code",[340,484,485,486,489],{},"An ",[382,487,488],{},".mdx"," file is a JavaScript module. It can import components, export values, and embed arbitrary expressions. That power has a cost: your content must go through a compiler before it can render. Shipping a typo fix means triggering a rebuild and a redeploy, and storing MDX in a database means running a compiler on the server for every document.",[340,491,492],{},"Comark keeps content as plain text:",[494,495,498],"pre",{"language":496,"class":497},"mdc","shiki shiki-themes material-theme-lighter material-theme-palenight",[382,499,501,536,537,536,543],{"class":500},"language-mdc",[502,503,506,510,514,517,521,524,527,531,533],"span",{"class":504,"style":505},"line","display: inline",[502,507,509],{"style":508},"color:#39ADB5;--shiki-dark:#89DDFF","::",[502,511,513],{"style":512},"color:#E53935;--shiki-dark:#F07178","alert",[502,515,516],{"style":508},"{",[502,518,520],{"style":519},"color:#9C3EDA;--shiki-dark:#C792EA","type",[502,522,523],{"style":508},"=",[502,525,526],{"style":508},"\"",[502,528,530],{"style":529},"color:#91B859;--shiki-dark:#C3E88D","warning",[502,532,526],{"style":508},[502,534,535],{"style":508},"}","\n",[502,538,539],{"class":504,"style":505},[502,540,542],{"style":541},"color:#90A4AE;--shiki-dark:#BABED8","This action cannot be undone.",[502,544,545],{"class":504,"style":505},[502,546,509],{"style":508},[340,548,549,550,553,554,557],{},"Because ",[382,551,552],{},"parse(markdown)"," is a pure function returning an ",[555,556,146],"a",{"href":147},", the full CMS pattern works without a build pipeline:",[559,560,561,565,571,574],"ol",{},[562,563,564],"li",{},"Store raw Markdown (components included) in a database or CMS",[562,566,567,568,570],{},"Call ",[382,569,552],{}," on request, on the server or in the browser",[562,572,573],{},"Send the compact AST to the client",[562,575,576,577],{},"Render it with a components map: ",[382,578,579],{},"\u003CComarkRenderer :tree=\"ast\" :components=\"{ Alert }\" \u002F>",[340,581,582],{},"Content is live the moment it is saved.",[348,584,586],{"id":585},"syntax-side-by-side","Syntax Side by Side",[588,589,590,598],"code-group",{},[494,591,594],{"language":592,"filename":369,"class":593},"jsx","shiki",[382,595,597],{"class":596},"language-jsx","import Alert from '.\u002Fcomponents\u002FAlert'\nimport Chart from '.\u002Fcomponents\u002FChart'\n\n# Dashboard\n\n\u003CAlert type=\"info\">\n  Welcome back, with **bold** text inside.\n\u003C\u002FAlert>\n\n\u003CChart data={metrics} \u002F>",[494,599,600],{"language":496,"filename":366,"class":497},[382,601,602,536,611,536,613,536,634,536,652,536,656,536,658,536,681],{"class":500},[502,603,604,607],{"class":504,"style":505},[502,605,606],{"style":508},"# ",[502,608,610],{"style":609},"color:#E2931D;--shiki-dark:#FFCB6B","Dashboard",[502,612],{"class":504,"style":505},[502,614,615,617,619,621,623,625,627,630,632],{"class":504,"style":505},[502,616,509],{"style":508},[502,618,513],{"style":512},[502,620,516],{"style":508},[502,622,520],{"style":519},[502,624,523],{"style":508},[502,626,526],{"style":508},[502,628,629],{"style":529},"info",[502,631,526],{"style":508},[502,633,535],{"style":508},[502,635,636,639,643,647,649],{"class":504,"style":505},[502,637,638],{"style":541},"Welcome back, with ",[502,640,642],{"style":641},"color:#39ADB5;--shiki-light-font-weight:bold;--shiki-dark:#89DDFF;--shiki-dark-font-weight:bold","**",[502,644,646],{"style":645},"color:#E53935;--shiki-light-font-weight:bold;--shiki-dark:#F07178;--shiki-dark-font-weight:bold","bold",[502,648,642],{"style":641},[502,650,651],{"style":541}," text inside.",[502,653,654],{"class":504,"style":505},[502,655,509],{"style":508},[502,657],{"class":504,"style":505},[502,659,660,662,665,667,670,672,674,677,679],{"class":504,"style":505},[502,661,509],{"style":508},[502,663,664],{"style":512},"chart",[502,666,516],{"style":508},[502,668,669],{"style":519},":data",[502,671,523],{"style":508},[502,673,526],{"style":508},[502,675,676],{"style":529},"metrics",[502,678,526],{"style":508},[502,680,535],{"style":508},[502,682,683],{"class":504,"style":505},[502,684,509],{"style":508},[340,686,687,688,691,692,695],{},"Comark components are registered once in the renderer instead of imported per file. Dynamic values use ",[382,689,690],{},":prop=\"expression\""," bindings resolved against frontmatter or application state. See the ",[555,693,694],{"href":328},"migration guide"," for the full mapping.",[348,697,428],{"id":698},"streaming",[340,700,701],{},"LLMs emit Markdown token by token. MDX cannot compile an unterminated document, so streaming MDX means waiting for the full response or accepting compile errors mid-stream.",[340,703,704,705,708],{},"Comark's ",[555,706,707],{"href":286},"auto-close"," parser closes incomplete syntax (unterminated bold, unfinished code fences, half-open components) so every frame renders as valid UI:",[494,710,712],{"language":711,"class":497},"ts",[382,713,715,536,742,536,744,536,767],{"class":714},"language-ts",[502,716,717,721,724,727,730,733,736,739],{"class":504,"style":505},[502,718,720],{"style":719},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[502,722,723],{"style":508}," {",[502,725,726],{"style":541}," autoCloseMarkdown",[502,728,729],{"style":508}," }",[502,731,732],{"style":719}," from",[502,734,735],{"style":508}," '",[502,737,738],{"style":529},"comark",[502,740,741],{"style":508},"'",[502,743],{"class":504,"style":505},[502,745,746,750,753,755,758,760,763],{"class":504,"style":505},[502,747,749],{"style":748},"color:#6182B8;--shiki-dark:#82AAFF","autoCloseMarkdown",[502,751,752],{"style":541},"(",[502,754,741],{"style":508},[502,756,757],{"style":529},"**bold text",[502,759,741],{"style":508},[502,761,762],{"style":541},")      ",[502,764,766],{"style":765},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic","\u002F\u002F '**bold text**'",[502,768,769,771,773,775,778,781,784,786,789],{"class":504,"style":505},[502,770,749],{"style":748},[502,772,752],{"style":541},[502,774,741],{"style":508},[502,776,777],{"style":529},"::alert",[502,779,780],{"style":541},"\\n",[502,782,783],{"style":529},"Content",[502,785,741],{"style":508},[502,787,788],{"style":541},") ",[502,790,791],{"style":765},"\u002F\u002F '::alert\\nContent\\n::'",[340,793,794,795,797],{},"Each framework renderer exposes this as a ",[382,796,698],{}," prop that pipes AI output straight into your component tree, custom components included.",[348,799,801],{"id":800},"what-mdx-does-that-comark-doesnt","What MDX Does That Comark Doesn't",[340,803,804],{},"Be aware of what you give up:",[806,807,808,821,827],"ul",{},[562,809,810,812,813,816,817,820],{},[343,811,450],{},": ",[382,814,815],{},"{2 + 3}"," or ",[382,818,819],{},"{new Date().toLocaleDateString()}"," evaluate in MDX. In Comark, compute values in application code and pass them via frontmatter, bindings, or string interpolation.",[562,822,823,826],{},[343,824,825],{},"Imports and exports in content",": MDX files are modules. Comark content is data; components live in your app.",[562,828,829,832,833,836,837,840],{},[343,830,831],{},"The remark\u002Frehype ecosystem",": MDX plugs into it directly. Comark has its own ",[555,834,835],{"href":261},"plugin API"," and can reuse ",[555,838,839],{"href":269},"markdown-it plugins",", a different but comparable ecosystem.",[340,842,843],{},"If your content is written by developers, versioned in git, and full of bespoke logic, MDX's \"content as code\" model can be the right fit. If your content comes from writers, a CMS, an API, or a model, Comark's \"content as data\" model removes the compiler from the loop.",[348,845,847],{"id":846},"migrating","Migrating",[340,849,850,851,854],{},"The ",[555,852,853],{"href":328},"MDX migration guide"," maps every MDX concept (components, props, expressions, imports, exports, layouts) to its Comark equivalent, with a step-by-step checklist.",[348,856,858],{"id":857},"faq","FAQ",[860,861,862,877,885,896],"accordion",{},[863,864,866,867,869,870,873,874,876],"accordion-item",{"label":865},"Is Comark a drop-in replacement for MDX?","No. The component syntax differs (",[382,868,777],{}," instead of ",[382,871,872],{},"\u003CAlert>","), and inline JavaScript must move into your application code. The ",[555,875,694],{"href":328}," covers every mapping; standard Markdown needs no changes.",[863,878,880,881,884],{"label":879},"Can Comark run at build time like MDX?","Yes. ",[382,882,883],{},"parse()"," runs anywhere JavaScript runs. You can parse at build time and ship the AST, parse on the server per request, or parse in the browser. Same API, your choice.",[863,886,880,888,891,892,895],{"label":887},"Does Comark work with React Server Components?",[382,889,890],{},"@comark\u002Freact"," supports Server Components and Next.js, see ",[555,893,894],{"href":165},"Render Comark in React",".",[863,897,899,900,902,903,906],{"label":898},"Can I keep using remark or rehype plugins?","Not directly. Comark is built on markdown-exit, a TypeScript rewrite of markdown-it, so you can use ",[555,901,839],{"href":269}," or the ",[555,904,905],{"href":261},"Comark plugin API",". Built-in plugins cover the common cases: Shiki highlighting, KaTeX math, Mermaid, TOC, alerts, footnotes, and more.",{"title":908,"searchDepth":909,"depth":909,"links":910},"",2,[911,912,913,914,915,916,917],{"id":350,"depth":909,"text":351},{"id":481,"depth":909,"text":482},{"id":585,"depth":909,"text":586},{"id":698,"depth":909,"text":428},{"id":800,"depth":909,"text":801},{"id":846,"depth":909,"text":847},{"id":857,"depth":909,"text":858},"Comark parses component syntax at runtime with no build step, while MDX compiles Markdown to JSX at build time. Compare syntax, architecture, framework support, and streaming.","md",[921,926],{"label":922,"icon":923,"to":328,"color":924,"variant":925},"Migrate from MDX","i-lucide-arrow-right-left","neutral","soft",{"label":927,"icon":928,"to":929,"color":924,"variant":925},"Playground","i-lucide-play","\u002Fplay",{"data":931},{"title":298,"description":918,"navigation":932,"seo":933,"links":935},{"title":298},{"title":934,"description":918},"Comark vs MDX: Components in Markdown Without a Build Step",[936,937],{"label":922,"icon":923,"to":328,"color":924,"variant":925},{"label":927,"icon":928,"to":929,"color":924,"variant":925},{"title":298},{"title":934,"description":918},"Ifp-867wmC8syS3Kt93KcenvFBzDRCBtLfPXQB0rx6Y",[942,944],{"title":289,"path":290,"stem":291,"description":943,"children":-1},"Quick reference for all Comark exports, types, and APIs across all packages.",{"title":302,"path":303,"stem":304,"description":945,"children":-1},"Comark adds component syntax, streaming auto-close, and multi-framework rendering that react-markdown lacks. Compare architecture, component mapping, and streaming behavior.",1783608768751]