[{"data":1,"prerenderedAt":1220},["ShallowReactive",2],{"navigation_examples":3,"navigation_docs":114,"-compare-comark-vs-react-markdown":334,"-compare-comark-vs-react-markdown-surround":1215},[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":302,"body":336,"description":1192,"extension":1193,"links":1194,"meta":1204,"navigation":1212,"path":303,"seo":1213,"stem":304,"__hash__":1214},"docs\u002F6.compare\u002F2.comark-vs-react-markdown.md",{"type":337,"value":338,"toc":1181},"minimark",[339,352,357,492,496,499,737,741,748,751,836,843,847,853,863,990,994,997,1048,1102,1112,1116,1140,1143,1147],[340,341,342,346,347,351],"p",{},[343,344,345],"strong",{},"TL;DR",": ",[348,349,350],"code",{},"react-markdown"," renders standard Markdown to React elements and lets you remap HTML tags to components. Comark does that too, and adds what react-markdown was never designed for: component syntax authors can write in the content itself, auto-close for token-by-token streaming, a serializable AST you can parse on the server, and renderers beyond React.",[353,354,356],"h2",{"id":355},"at-a-glance","At a Glance",[358,359,360,374],"table",{},[361,362,363],"thead",{},[364,365,366,369,372],"tr",{},[367,368],"th",{},[367,370,371],{},"Comark",[367,373,350],{},[375,376,377,388,415,428,439,449,460,471,481],"tbody",{},[364,378,379,383,386],{},[380,381,382],"td",{},"Runtime parsing",[380,384,385],{},"Yes",[380,387,385],{},[364,389,390,403,410],{},[380,391,392,393,396,397,396,400,402],{},"Remap ",[348,394,395],{},"h1",", ",[348,398,399],{},"a",[348,401,348],{},"… to components",[380,404,405,406,409],{},"Yes, ",[348,407,408],{},"components"," map",[380,411,405,412,414],{},[348,413,408],{}," prop",[364,416,417,420,425],{},[380,418,419],{},"Custom components in the content",[380,421,405,422],{},[348,423,424],{},"::alert{type=\"info\"}",[380,426,427],{},"No, element remapping only",[364,429,430,433,436],{},[380,431,432],{},"Streaming incomplete Markdown",[380,434,435],{},"Auto-close renders every frame correctly",[380,437,438],{},"Broken formatting until syntax completes",[364,440,441,443,446],{},[380,442,10],{},[380,444,445],{},"Vue, React, Svelte, Angular, Nuxt, HTML, ANSI",[380,447,448],{},"React only",[364,450,451,454,457],{},[380,452,453],{},"Parse\u002Frender split",[380,455,456],{},"Decoupled, parse on server and render on client",[380,458,459],{},"Coupled, parsing happens inside the component",[364,461,462,465,468],{},[380,463,464],{},"Underlying parser",[380,466,467],{},"markdown-exit (markdown-it compatible)",[380,469,470],{},"remark (unified)",[364,472,473,475,478],{},[380,474,70],{},[380,476,477],{},"Comark plugins + markdown-it plugins",[380,479,480],{},"remark\u002Frehype plugins",[364,482,483,486,489],{},[380,484,485],{},"Frontmatter",[380,487,488],{},"Parsed out of the box",[380,490,491],{},"Needs remark-frontmatter + custom handling",[353,493,495],{"id":494},"element-mapping-works-the-same-way","Element Mapping Works the Same Way",[340,497,498],{},"If you use react-markdown only to restyle elements, the model transfers directly:",[500,501,502,648],"code-group",{},[503,504,507],"pre",{"language":505,"filename":350,"class":506},"tsx","shiki shiki-themes material-theme-lighter material-theme-palenight",[348,508,510,536,537,536,539,536,547,536,556,536,592,536,618,536,623,536,628,536,639],{"class":509},"language-tsx",[511,512,515,519,523,526,530,533],"span",{"class":513,"style":514},"line","display: inline",[511,516,518],{"style":517},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[511,520,522],{"style":521},"color:#90A4AE;--shiki-dark:#BABED8"," Markdown ",[511,524,525],{"style":517},"from",[511,527,529],{"style":528},"color:#39ADB5;--shiki-dark:#89DDFF"," '",[511,531,350],{"style":532},"color:#91B859;--shiki-dark:#C3E88D",[511,534,535],{"style":528},"'","\n",[511,538],{"class":513,"style":514},[511,540,541,544],{"class":513,"style":514},[511,542,543],{"style":528},"\u003C",[511,545,134],{"style":546},"color:#E2931D;--shiki-dark:#FFCB6B",[511,548,549,553],{"class":513,"style":514},[511,550,552],{"style":551},"color:#9C3EDA;--shiki-dark:#C792EA","  components",[511,554,555],{"style":528},"={{",[511,557,558,562,565,568,572,575,578,581,584,587,589],{"class":513,"style":514},[511,559,561],{"style":560},"color:#6182B8;--shiki-dark:#82AAFF","    a",[511,563,564],{"style":528},":",[511,566,567],{"style":528}," (",[511,569,571],{"style":570},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic","props",[511,573,574],{"style":528},")",[511,576,577],{"style":551}," =>",[511,579,580],{"style":528}," \u003C",[511,582,583],{"style":546},"Link",[511,585,586],{"style":528}," {...",[511,588,571],{"style":521},[511,590,591],{"style":528},"} \u002F>,",[511,593,594,597,599,601,603,605,607,609,612,614,616],{"class":513,"style":514},[511,595,596],{"style":560},"    code",[511,598,564],{"style":528},[511,600,567],{"style":528},[511,602,571],{"style":570},[511,604,574],{"style":528},[511,606,577],{"style":551},[511,608,580],{"style":528},[511,610,611],{"style":546},"CodeBlock",[511,613,586],{"style":528},[511,615,571],{"style":521},[511,617,591],{"style":528},[511,619,620],{"class":513,"style":514},[511,621,622],{"style":528},"  }}",[511,624,625],{"class":513,"style":514},[511,626,627],{"style":528},">",[511,629,630,633,636],{"class":513,"style":514},[511,631,632],{"style":528},"  {",[511,634,635],{"style":521},"markdown",[511,637,638],{"style":528},"}",[511,640,641,644,646],{"class":513,"style":514},[511,642,643],{"style":528},"\u003C\u002F",[511,645,134],{"style":546},[511,647,627],{"style":528},[503,649,650],{"language":505,"filename":371,"class":506},[348,651,652,536,675,536,677,536,683,536,689,536,702,536,713,536,717,536,721,536,729],{"class":509},[511,653,654,656,659,662,665,668,670,673],{"class":513,"style":514},[511,655,518],{"style":517},[511,657,658],{"style":528}," {",[511,660,661],{"style":521}," Comark",[511,663,664],{"style":528}," }",[511,666,667],{"style":517}," from",[511,669,529],{"style":528},[511,671,672],{"style":532},"@comark\u002Freact",[511,674,535],{"style":528},[511,676],{"class":513,"style":514},[511,678,679,681],{"class":513,"style":514},[511,680,543],{"style":528},[511,682,371],{"style":546},[511,684,685,687],{"class":513,"style":514},[511,686,552],{"style":551},[511,688,555],{"style":528},[511,690,691,694,696,699],{"class":513,"style":514},[511,692,561],{"style":693},"color:#E53935;--shiki-dark:#F07178",[511,695,564],{"style":528},[511,697,698],{"style":521}," Link",[511,700,701],{"style":528},",",[511,703,704,706,708,711],{"class":513,"style":514},[511,705,596],{"style":693},[511,707,564],{"style":528},[511,709,710],{"style":521}," CodeBlock",[511,712,701],{"style":528},[511,714,715],{"class":513,"style":514},[511,716,622],{"style":528},[511,718,719],{"class":513,"style":514},[511,720,627],{"style":528},[511,722,723,725,727],{"class":513,"style":514},[511,724,632],{"style":528},[511,726,635],{"style":521},[511,728,638],{"style":528},[511,730,731,733,735],{"class":513,"style":514},[511,732,643],{"style":528},[511,734,371],{"style":546},[511,736,627],{"style":528},[353,738,740],{"id":739},"what-react-markdown-cant-express","What react-markdown Can't Express",[340,742,743,744,747],{},"react-markdown maps existing HTML elements to components. It has no syntax for components that aren't HTML elements: a callout, a tabbed code group, a video embed. The usual workaround is raw HTML plus ",[348,745,746],{},"rehype-raw",", which reintroduces the verbosity and XSS surface Markdown was meant to avoid.",[340,749,750],{},"Comark makes components part of the syntax:",[503,752,754],{"language":753,"class":506},"mdc",[348,755,757,536,784,536,801,536,805,536,807],{"class":756},"language-mdc",[511,758,759,762,765,768,771,774,777,780,782],{"class":513,"style":514},[511,760,761],{"style":528},"::",[511,763,764],{"style":693},"alert",[511,766,767],{"style":528},"{",[511,769,770],{"style":551},"type",[511,772,773],{"style":528},"=",[511,775,776],{"style":528},"\"",[511,778,779],{"style":532},"warning",[511,781,776],{"style":528},[511,783,638],{"style":528},[511,785,786,789,793,796,798],{"class":513,"style":514},[511,787,788],{"style":521},"This is ",[511,790,792],{"style":791},"color:#39ADB5;--shiki-light-font-weight:bold;--shiki-dark:#89DDFF;--shiki-dark-font-weight:bold","**",[511,794,134],{"style":795},"color:#E53935;--shiki-light-font-weight:bold;--shiki-dark:#F07178;--shiki-dark-font-weight:bold",[511,797,792],{"style":791},[511,799,800],{"style":521}," inside a component, with full nesting support.",[511,802,803],{"class":513,"style":514},[511,804,761],{"style":528},[511,806],{"class":513,"style":514},[511,808,809,812,814,817,820,822,825,827,829,832,834],{"class":513,"style":514},[511,810,811],{"style":521},"Status: ",[511,813,564],{"style":528},[511,815,816],{"style":693},"badge",[511,818,819],{"style":521},"[Active]",[511,821,767],{"style":528},[511,823,824],{"style":551},"color",[511,826,773],{"style":528},[511,828,776],{"style":528},[511,830,831],{"style":532},"green",[511,833,776],{"style":528},[511,835,638],{"style":528},[340,837,838,839,842],{},"Writers, CMS editors, and LLMs can produce these components as plain text. No JSX, no HTML. See ",[399,840,841],{"href":139},"component syntax",".",[353,844,846],{"id":845},"streaming","Streaming",[340,848,849,850,842],{},"react-markdown assumes a complete document. Feed it a stream mid-token and you get flashing asterisks, broken lists, and half-rendered code fences until the closing syntax arrives. This is the exact problem that led Vercel to build ",[399,851,852],{"href":307},"Streamdown",[340,854,855,856,859,860,862],{},"Comark treats incomplete input as a first-class case. ",[399,857,858],{"href":286},"Auto-close"," completes unterminated syntax at every frame, and the ",[348,861,845],{}," prop handles it end to end:",[503,864,865],{"language":505,"class":506},[348,866,867,536,885,536,905,536,907,536,955,536,986],{"class":509},[511,868,869,871,873,875,877,879,881,883],{"class":513,"style":514},[511,870,518],{"style":517},[511,872,658],{"style":528},[511,874,661],{"style":521},[511,876,664],{"style":528},[511,878,667],{"style":517},[511,880,529],{"style":528},[511,882,672],{"style":532},[511,884,535],{"style":528},[511,886,887,889,891,894,896,898,900,903],{"class":513,"style":514},[511,888,518],{"style":517},[511,890,658],{"style":528},[511,892,893],{"style":521}," useChat",[511,895,664],{"style":528},[511,897,667],{"style":517},[511,899,529],{"style":528},[511,901,902],{"style":532},"@ai-sdk\u002Freact",[511,904,535],{"style":528},[511,906],{"class":513,"style":514},[511,908,909,912,915,918,921,924,926,929,932,934,936,938,941,943,945,947,950,953],{"class":513,"style":514},[511,910,911],{"style":517},"export",[511,913,914],{"style":551}," function",[511,916,917],{"style":560}," Message",[511,919,920],{"style":528},"({",[511,922,923],{"style":570}," text",[511,925,701],{"style":528},[511,927,928],{"style":570}," isStreaming",[511,930,931],{"style":528}," }:",[511,933,658],{"style":528},[511,935,923],{"style":693},[511,937,564],{"style":528},[511,939,940],{"style":546}," string",[511,942,701],{"style":528},[511,944,928],{"style":693},[511,946,564],{"style":528},[511,948,949],{"style":546}," boolean",[511,951,952],{"style":528}," })",[511,954,658],{"style":528},[511,956,957,960,962,964,967,970,973,976,979,982,984],{"class":513,"style":514},[511,958,959],{"style":517},"  return",[511,961,580],{"style":528},[511,963,371],{"style":546},[511,965,966],{"style":551}," streaming",[511,968,969],{"style":528},"={",[511,971,972],{"style":521},"isStreaming",[511,974,975],{"style":528},"}>{",[511,977,978],{"style":521},"text",[511,980,981],{"style":528},"}\u003C\u002F",[511,983,371],{"style":546},[511,985,627],{"style":528},[511,987,988],{"class":513,"style":514},[511,989,638],{"style":528},[353,991,993],{"id":992},"decoupled-parsing","Decoupled Parsing",[340,995,996],{},"react-markdown parses inside the React component, on every client that renders it. Comark separates the two: parse once (on the server, at build time, or in a worker) and render the compact AST anywhere:",[503,998,1001],{"language":999,"filename":1000,"class":506},"ts","server.ts",[348,1002,1004,536,1024,536,1026],{"class":1003},"language-ts",[511,1005,1006,1008,1010,1013,1015,1017,1019,1022],{"class":513,"style":514},[511,1007,518],{"style":517},[511,1009,658],{"style":528},[511,1011,1012],{"style":521}," parse",[511,1014,664],{"style":528},[511,1016,667],{"style":517},[511,1018,529],{"style":528},[511,1020,1021],{"style":532},"comark",[511,1023,535],{"style":528},[511,1025],{"class":513,"style":514},[511,1027,1028,1031,1034,1036,1039,1041,1044],{"class":513,"style":514},[511,1029,1030],{"style":551},"const",[511,1032,1033],{"style":521}," tree ",[511,1035,773],{"style":528},[511,1037,1038],{"style":517}," await",[511,1040,1012],{"style":560},[511,1042,1043],{"style":521},"(markdown) ",[511,1045,1047],{"style":1046},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic","\u002F\u002F cache it, store it, send it",[503,1049,1051],{"language":505,"filename":1050,"class":506},"client.tsx",[348,1052,1053,536,1072,536,1074],{"class":509},[511,1054,1055,1057,1059,1062,1064,1066,1068,1070],{"class":513,"style":514},[511,1056,518],{"style":517},[511,1058,658],{"style":528},[511,1060,1061],{"style":521}," ComarkRenderer",[511,1063,664],{"style":528},[511,1065,667],{"style":517},[511,1067,529],{"style":528},[511,1069,672],{"style":532},[511,1071,535],{"style":528},[511,1073],{"class":513,"style":514},[511,1075,1076,1078,1081,1084,1086,1089,1092,1094,1096,1099],{"class":513,"style":514},[511,1077,543],{"style":528},[511,1079,1080],{"style":546},"ComarkRenderer",[511,1082,1083],{"style":551}," tree",[511,1085,969],{"style":528},[511,1087,1088],{"style":521},"tree",[511,1090,1091],{"style":528},"} ",[511,1093,408],{"style":551},[511,1095,555],{"style":528},[511,1097,1098],{"style":521}," Alert ",[511,1100,1101],{"style":528},"}} \u002F>",[340,1103,1104,1105,1108,1109,842],{},"The AST is plain arrays like ",[348,1106,1107],{},"['h1', { id: 'hello' }, 'Hello']",", cheap to serialize and cache. See the ",[399,1110,1111],{"href":147},"AST reference",[353,1113,1115],{"id":1114},"what-react-markdown-does-well","What react-markdown Does Well",[1117,1118,1119,1134],"ul",{},[1120,1121,1122,1125,1126,1129,1130,1133],"li",{},[343,1123,1124],{},"The unified ecosystem",": hundreds of remark\u002Frehype plugins. Comark's answer is its own ",[399,1127,1128],{"href":261},"plugin API"," plus compatibility with ",[399,1131,1132],{"href":269},"markdown-it plugins","; check that your must-have plugins have an equivalent before switching.",[1120,1135,1136,1139],{},[343,1137,1138],{},"Maturity",": react-markdown has been battle-tested for years across a huge install base.",[340,1141,1142],{},"If you render trusted, complete, standard Markdown in a React-only app and rely on specific remark plugins, react-markdown remains a solid choice.",[353,1144,1146],{"id":1145},"faq","FAQ",[1148,1149,1150,1155,1166,1174],"accordion",{},[1151,1152,1154],"accordion-item",{"label":1153},"Is Comark heavier than react-markdown?","Comark's parser is built on markdown-exit (a TypeScript rewrite of markdown-it) and ships as a separate package from the renderers, so the client can receive a pre-parsed AST and skip the parser bundle entirely, an option react-markdown doesn't have.",[1151,1156,1158,1159,1161,1162,1165],{"label":1157},"Can I migrate incrementally?","Yes. Standard Markdown parses identically, and the ",[348,1160,408],{}," mapping concept carries over. Swap the component first, then adopt ",[348,1163,1164],{},"::component"," syntax where you need it.",[1151,1167,1169,1170,1173],{"label":1168},"Does Comark sanitize HTML like react-markdown?","Comark doesn't render raw HTML as HTML by default, and the ",[399,1171,1172],{"href":233},"security plugin"," sanitizes the AST by removing dangerous elements and blocking malicious protocols.",[1151,1175,1177,1178,842],{"label":1176},"Does Comark support GitHub Flavored Markdown?","Yes, without extra plugins: tables, task lists, strikethrough, autolinks, and footnotes. See ",[399,1179,1180],{"href":135},"Markdown syntax",{"title":1182,"searchDepth":1183,"depth":1183,"links":1184},"",2,[1185,1186,1187,1188,1189,1190,1191],{"id":355,"depth":1183,"text":356},{"id":494,"depth":1183,"text":495},{"id":739,"depth":1183,"text":740},{"id":845,"depth":1183,"text":846},{"id":992,"depth":1183,"text":993},{"id":1114,"depth":1183,"text":1115},{"id":1145,"depth":1183,"text":1146},"Comark adds component syntax, streaming auto-close, and multi-framework rendering that react-markdown lacks. Compare architecture, component mapping, and streaming behavior.","md",[1195,1200],{"label":1196,"icon":1197,"to":165,"color":1198,"variant":1199},"Render in React","i-logos-react","neutral","soft",{"label":1201,"icon":1202,"to":1203,"color":1198,"variant":1199},"Playground","i-lucide-play","\u002Fplay",{"data":1205},{"title":302,"description":1192,"navigation":1206,"seo":1207,"links":1209},{"title":302},{"title":1208,"description":1192},"Comark vs react-markdown: Streaming and Component Syntax Compared",[1210,1211],{"label":1196,"icon":1197,"to":165,"color":1198,"variant":1199},{"label":1201,"icon":1202,"to":1203,"color":1198,"variant":1199},{"title":302},{"title":1208,"description":1192},"MPfvXwqWhSkG7H14KjyreDQ31QM7OuiVWYaMT0Y8Ki0",[1216,1218],{"title":298,"path":299,"stem":300,"description":1217,"children":-1},"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.",{"title":306,"path":307,"stem":308,"description":1219,"children":-1},"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.",1783608771583]