[{"data":1,"prerenderedAt":958},["ShallowReactive",2],{"navigation_examples":3,"navigation_docs":114,"-compare-comark-vs-streamdown":334,"-compare-comark-vs-streamdown-surround":953},[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":306,"body":336,"description":932,"extension":933,"links":934,"meta":942,"navigation":950,"path":307,"seo":951,"stem":308,"__hash__":952},"docs\u002F6.compare\u002F3.comark-vs-streamdown.md",{"type":337,"value":338,"toc":922},"minimark",[339,353,358,494,498,504,507,599,609,613,616,707,713,798,805,809,832,836,859,862,866],[340,341,342,346,347,352],"p",{},[343,344,345],"strong",{},"TL;DR",": ",[348,349,351],"a",{"href":350},"https:\u002F\u002Fgithub.com\u002Fvercel\u002Fstreamdown","Streamdown"," is Vercel's React component for rendering AI-streamed Markdown, built to handle unterminated syntax gracefully. Comark solves the same streaming problem and goes further: authors (and LLMs) can use custom component syntax in the content, the parser is decoupled from rendering, and the same content renders in Vue, React, Svelte, Angular, HTML, and terminals.",[354,355,357],"h2",{"id":356},"at-a-glance","At a Glance",[359,360,361,375],"table",{},[362,363,364],"thead",{},[365,366,367,370,373],"tr",{},[368,369],"th",{},[368,371,372],{},"Comark",[368,374,351],{},[376,377,378,394,409,419,430,441,452,463,476],"tbody",{},[365,379,380,384,391],{},[381,382,383],"td",{},"Streams incomplete Markdown",[381,385,386,387,390],{},"Yes, ",[348,388,389],{"href":286},"auto-close"," at every frame",[381,392,393],{},"Yes, handles unterminated blocks",[365,395,396,399,406],{},[381,397,398],{},"Custom components in content",[381,400,386,401,405],{},[402,403,404],"code",{},"::alert{type=\"info\"}"," syntax",[381,407,408],{},"No, element remapping only",[365,410,411,413,416],{},[381,412,10],{},[381,414,415],{},"Vue, React, Svelte, Angular, Nuxt, HTML, ANSI",[381,417,418],{},"React only",[365,420,421,424,427],{},[381,422,423],{},"Parse\u002Frender split",[381,425,426],{},"Decoupled, AST is serializable",[381,428,429],{},"Coupled, rendering component",[365,431,432,435,438],{},[381,433,434],{},"Syntax highlighting",[381,436,437],{},"Shiki plugin",[381,439,440],{},"Shiki built in",[365,442,443,446,449],{},[381,444,445],{},"Math",[381,447,448],{},"KaTeX plugin",[381,450,451],{},"KaTeX built in",[365,453,454,457,460],{},[381,455,456],{},"Mermaid",[381,458,459],{},"Plugin",[381,461,462],{},"Built in",[365,464,465,468,473],{},[381,466,467],{},"Security hardening",[381,469,470],{},[348,471,472],{"href":233},"Security plugin",[381,474,475],{},"Hardened defaults built in",[365,477,478,481,488],{},[381,479,480],{},"AI SDK integration",[381,482,483,484,487],{},"Works with ",[402,485,486],{},"useChat"," in any framework",[381,489,490,491],{},"Designed around ",[402,492,493],{},"@ai-sdk\u002Freact",[354,495,497],{"id":496},"same-problem-different-scope","Same Problem, Different Scope",[340,499,500,501,503],{},"Streamdown exists because LLMs stream token by token while classic renderers assume complete documents. It validates the exact problem Comark's ",[348,502,389],{"href":286}," parser solves: unterminated bold, half-open code fences, and incomplete links render correctly at every frame in both tools.",[340,505,506],{},"The difference is scope. Streamdown is a React rendering component. Comark is a parser with renderers on top:",[508,509,512],"pre",{"language":510,"class":511},"ts","shiki shiki-themes material-theme-lighter material-theme-palenight",[402,513,515,548,549,548,551,548,557],{"class":514},"language-ts",[516,517,520,524,528,532,535,538,541,545],"span",{"class":518,"style":519},"line","display: inline",[516,521,523],{"style":522},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[516,525,527],{"style":526},"color:#39ADB5;--shiki-dark:#89DDFF"," {",[516,529,531],{"style":530},"color:#90A4AE;--shiki-dark:#BABED8"," parse",[516,533,534],{"style":526}," }",[516,536,537],{"style":522}," from",[516,539,540],{"style":526}," '",[516,542,544],{"style":543},"color:#91B859;--shiki-dark:#C3E88D","comark",[516,546,547],{"style":526},"'","\n",[516,550],{"class":518,"style":519},[516,552,553],{"class":518,"style":519},[516,554,556],{"style":555},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic","\u002F\u002F Runs on the server, in a worker, in the browser. No React required",[516,558,559,563,566,569,572,575,578,581,583,587,590,594,596],{"class":518,"style":519},[516,560,562],{"style":561},"color:#9C3EDA;--shiki-dark:#C792EA","const",[516,564,565],{"style":530}," tree ",[516,567,568],{"style":526},"=",[516,570,571],{"style":522}," await",[516,573,531],{"style":574},"color:#6182B8;--shiki-dark:#82AAFF",[516,576,577],{"style":530},"(partialMarkdown",[516,579,580],{"style":526},",",[516,582,527],{"style":526},[516,584,586],{"style":585},"color:#E53935;--shiki-dark:#F07178"," autoClose",[516,588,589],{"style":526},":",[516,591,593],{"style":592},"color:#FF5370;--shiki-dark:#FF9CAC"," true",[516,595,534],{"style":526},[516,597,598],{"style":530},")",[340,600,601,602,604,605,608],{},"That split means you can parse AI output on the server and stream the AST, cache parsed content, post-process it with the ",[348,603,264],{"href":265},", or render the same stream to a terminal with ",[348,606,607],{"href":175},"@comark\u002Fansi",".",[354,610,612],{"id":611},"components-in-the-stream","Components in the Stream",[340,614,615],{},"The bigger difference is what the model is allowed to say. With Streamdown, output is standard Markdown mapped to styled elements. With Comark, you can give the model component syntax, and it streams as plain text like everything else:",[508,617,619],{"language":618,"class":511},"mdc",[402,620,622,548,627,548,629,548,691,548,696,548,700,548,702],{"class":621},"language-mdc",[516,623,624],{"class":518,"style":519},[516,625,626],{"style":530},"Here are your flight options:",[516,628],{"class":518,"style":519},[516,630,631,634,637,640,643,645,648,651,653,655,657,659,662,664,667,669,671,674,676,679,681,683,686,688],{"class":518,"style":519},[516,632,633],{"style":526},"::",[516,635,636],{"style":585},"flight-card",[516,638,639],{"style":526},"{",[516,641,642],{"style":561},"airline",[516,644,568],{"style":526},[516,646,647],{"style":526},"\"",[516,649,650],{"style":543},"United",[516,652,647],{"style":526},[516,654,537],{"style":561},[516,656,568],{"style":526},[516,658,647],{"style":526},[516,660,661],{"style":543},"SFO",[516,663,647],{"style":526},[516,665,666],{"style":561}," to",[516,668,568],{"style":526},[516,670,647],{"style":526},[516,672,673],{"style":543},"JFK",[516,675,647],{"style":526},[516,677,678],{"style":561}," price",[516,680,568],{"style":526},[516,682,647],{"style":526},[516,684,685],{"style":543},"342",[516,687,647],{"style":526},[516,689,690],{"style":526},"}",[516,692,693],{"class":518,"style":519},[516,694,695],{"style":530},"Departs 8:15 AM, nonstop, 5h 30m.",[516,697,698],{"class":518,"style":519},[516,699,633],{"style":526},[516,701],{"class":518,"style":519},[516,703,704],{"class":518,"style":519},[516,705,706],{"style":530},"Want me to book one of these?",[340,708,709,710,712],{},"The renderer looks up ",[402,711,636],{}," in your components map and renders your component mid-conversation, streaming included:",[508,714,716],{"language":715,"class":511},"tsx",[402,717,719,548,739,548,741,548,773,548,788],{"class":718},"language-tsx",[516,720,721,723,725,728,730,732,734,737],{"class":518,"style":519},[516,722,523],{"style":522},[516,724,527],{"style":526},[516,726,727],{"style":530}," Comark",[516,729,534],{"style":526},[516,731,537],{"style":522},[516,733,540],{"style":526},[516,735,736],{"style":543},"@comark\u002Freact",[516,738,547],{"style":526},[516,740],{"class":518,"style":519},[516,742,743,746,749,752,755,758,761,764,767,770],{"class":518,"style":519},[516,744,745],{"style":526},"\u003C",[516,747,372],{"style":748},"color:#E2931D;--shiki-dark:#FFCB6B",[516,750,751],{"style":561}," streaming",[516,753,754],{"style":526},"={",[516,756,757],{"style":530},"isStreaming",[516,759,760],{"style":526},"} ",[516,762,763],{"style":561},"components",[516,765,766],{"style":526},"={{",[516,768,769],{"style":530}," FlightCard ",[516,771,772],{"style":526},"}}>",[516,774,775,778,781,783,786],{"class":518,"style":519},[516,776,777],{"style":526},"  {",[516,779,780],{"style":530},"message",[516,782,608],{"style":526},[516,784,785],{"style":530},"text",[516,787,690],{"style":526},[516,789,790,793,795],{"class":518,"style":519},[516,791,792],{"style":526},"\u003C\u002F",[516,794,372],{"style":748},[516,796,797],{"style":526},">",[340,799,800,801,804],{},"Because ",[402,802,803],{},"::flight-card"," is text, not JSX, there is no code execution risk in model output. Unknown components are simply skipped or rendered as configured.",[354,806,808],{"id":807},"beyond-react","Beyond React",[340,810,811,812,814,815,814,817,814,819,821,822,824,825,827,828,831],{},"Streamdown is React-only by design. Comark ships the same streaming behavior for ",[348,813,65],{"href":159},", ",[348,816,56],{"href":165},[348,818,61],{"href":168},[348,820,46],{"href":171},", and ",[348,823,25],{"href":162},", plus string renderers for ",[348,826,155],{"href":156}," and ",[348,829,830],{"href":175},"ANSI",". One content pipeline, whatever your stack looks like today or in three years.",[354,833,835],{"id":834},"what-streamdown-does-well","What Streamdown Does Well",[837,838,839,849],"ul",{},[840,841,842,845,846,608],"li",{},[343,843,844],{},"Zero-config for the AI SDK",": highlighting, math, Mermaid, and security hardening are built in rather than opt-in plugins. With Comark you compose the equivalent from ",[348,847,848],{"href":180},"plugins",[840,850,851,854,855,858],{},[343,852,853],{},"Drop-in for react-markdown users",": it mirrors the ",[402,856,857],{},"react-markdown"," API surface.",[340,860,861],{},"If you're building a React-only chat UI on the Vercel AI SDK and don't need custom components in model output, Streamdown gets you there with less setup.",[354,863,865],{"id":864},"faq","FAQ",[867,868,869,886,894,909],"accordion",{},[870,871,873,874,877,878,882,883,608],"accordion-item",{"label":872},"Can Comark render AI responses with interactive components?","Yes. Give the model ",[402,875,876],{},"::component"," syntax in your system prompt, register the components in the renderer, and they render live during streaming. See ",[348,879,881],{"href":880},"\u002Frendering\u002Freact#streaming","streaming in React"," or ",[348,884,65],{"href":885},"\u002Frendering\u002Fvue#streaming",[870,887,889,890,893],{"label":888},"Is component syntax in LLM output safe?","Component syntax is data, not code: the renderer only instantiates components you explicitly registered. Add the ",[348,891,892],{"href":233},"security plugin"," to sanitize links and attributes in untrusted output.",[870,895,897,898,900,901,904,905,608],{"label":896},"Does Comark work with the Vercel AI SDK?","Yes. Pass ",[402,899,486],{}," message text to ",[402,902,903],{},"\u003CComark streaming>"," in React, or the equivalent in Vue, Svelte, and Angular. Try it live in the ",[348,906,908],{"href":907},"\u002Fstream","streaming playground",[870,910,912,913,814,916,821,919,921],{"label":911},"Do I need plugins for code highlighting and math?","Yes. ",[348,914,915],{"href":242},"Shiki highlighting",[348,917,918],{"href":222},"KaTeX math",[348,920,456],{"href":226}," are one-line opt-ins, keeping the core small when you don't need them.",{"title":923,"searchDepth":924,"depth":924,"links":925},"",2,[926,927,928,929,930,931],{"id":356,"depth":924,"text":357},{"id":496,"depth":924,"text":497},{"id":611,"depth":924,"text":612},{"id":807,"depth":924,"text":808},{"id":834,"depth":924,"text":835},{"id":864,"depth":924,"text":865},"Streamdown streams Markdown in React. Comark streams Markdown with custom component syntax in Vue, React, Svelte, and Angular, with a decoupled parser and serializable AST.","md",[935,939],{"label":285,"icon":936,"to":286,"color":937,"variant":938},"i-lucide-radio","neutral","soft",{"label":940,"icon":941,"to":907,"color":937,"variant":938},"Playground","i-lucide-play",{"data":943},{"title":306,"description":932,"navigation":944,"seo":945,"links":947},{"title":306},{"title":946,"description":932},"Comark vs Streamdown: Streaming Markdown Renderers Compared",[948,949],{"label":285,"icon":936,"to":286,"color":937,"variant":938},{"label":940,"icon":941,"to":907,"color":937,"variant":938},{"title":306},{"title":946,"description":932},"fU6prCBXPdI4aoknErM-b_naNxbY0CNeDJyZLBy8yGg",[954,956],{"title":302,"path":303,"stem":304,"description":955,"children":-1},"Comark adds component syntax, streaming auto-close, and multi-framework rendering that react-markdown lacks. Compare architecture, component mapping, and streaming behavior.",{"title":310,"path":311,"stem":312,"description":957,"children":-1},"Comark and Markdoc both treat Markdown as data with runtime parsing. Comark adds streaming auto-close, a more compact AST, and renderers for Vue, Svelte, Angular, and terminals.",1783608771583]