[{"data":1,"prerenderedAt":531},["ShallowReactive",2],{"blog-json-render":3},{"path":4,"data":5,"meta":10,"nodes":18},"\u002Fblog\u002Fjson-render",{"title":6,"description":7,"date":8,"badge":9},"Rendering a json-render spec","Describe a whole component tree as JSON and render it with MarkdownDocument.","2026-07-09","json-render",{"key":11,"source":12,"stem":13,"extension":14,"kind":15,"type":16,"partial":17},"default\u002Fblog\u002Fjson-render.md","default","blog\u002Fjson-render",".md","document","text\u002Fmarkdown",false,[19,23,54,59,82,251,269,273,284,394,516],[20,21,6],"h1",{"id":22},"rendering-a-json-render-spec",[24,25,26,27,31,32,36,37,41,42,48,49,53],"p",{},"Sometimes the data ",[28,29,30],"em",{},"is"," the layout: a CMS, a form builder, or an AI agent emits a\n",[33,34,9],"a",{"href":35},"https:\u002F\u002Fjson-render.dev\u002F"," description of the UI to render. For that,\n",[33,38,40],{"href":39},"https:\u002F\u002Fcomark.dev","comark"," ships the\n",[33,43,45],{"href":44},"https:\u002F\u002Fcomark.dev\u002Fplugins\u002Fbuilt-in\u002Fjson-render",[46,47,9],"code",{}," plugin. It\nturns a ",[33,50,51],{"href":35},[46,52,9],{}," code block into a component tree at\nparse time, bridging plain data and rendered components.",[55,56,58],"h2",{"id":57},"the-spec","The spec",[24,60,61,62,65,66,69,70,73,74,77,78,81],{},"A spec is a map of named ",[46,63,64],{},"elements"," plus a ",[46,67,68],{},"root"," entry point. Each element has a\n",[46,71,72],{},"type"," (the component tag), optional ",[46,75,76],{},"props",", and optional ",[46,79,80],{},"children",":",[83,84,88],"pre",{"language":85,"filename":86,"class":87},"md","content\u002Flanding.md","shiki shiki-themes material-theme-lighter material-theme-palenight",[46,89,91,103,104,103,110,103,134,103,147,103,161,103,182,103,232,103,237,103,242,103,247],{"class":90},"language-md",[92,93,96,100],"span",{"class":94,"style":95},"line","display: inline",[92,97,99],{"style":98},"color:#91B859;--shiki-dark:#C3E88D","```",[92,101,9],{"style":102},"color:#90A4AE90;--shiki-dark:#BABED890","\n",[92,105,106],{"class":94,"style":95},[92,107,109],{"style":108},"color:#39ADB5;--shiki-dark:#89DDFF","{",[92,111,112,115,118,121,123,126,129,131],{"class":94,"style":95},[92,113,114],{"style":108},"  \"",[92,116,68],{"style":117},"color:#9C3EDA;--shiki-dark:#C792EA",[92,119,120],{"style":108},"\"",[92,122,81],{"style":108},[92,124,125],{"style":108}," \"",[92,127,128],{"style":98},"hero",[92,130,120],{"style":108},[92,132,133],{"style":108},",",[92,135,136,138,140,142,144],{"class":94,"style":95},[92,137,114],{"style":108},[92,139,64],{"style":117},[92,141,120],{"style":108},[92,143,81],{"style":108},[92,145,146],{"style":108}," {",[92,148,149,152,155,157,159],{"class":94,"style":95},[92,150,151],{"style":108},"    \"",[92,153,128],{"style":154},"color:#E2931D;--shiki-dark:#FFCB6B",[92,156,120],{"style":108},[92,158,81],{"style":108},[92,160,146],{"style":108},[92,162,163,166,169,171,173,175,178,180],{"class":94,"style":95},[92,164,165],{"style":108},"      \"",[92,167,72],{"style":168},"color:#F76D47;--shiki-dark:#F78C6C",[92,170,120],{"style":108},[92,172,81],{"style":108},[92,174,125],{"style":108},[92,176,177],{"style":98},"page-hero",[92,179,120],{"style":108},[92,181,133],{"style":108},[92,183,184,186,188,190,192,194,196,200,202,204,206,209,211,213,215,218,220,222,224,227,229],{"class":94,"style":95},[92,185,165],{"style":108},[92,187,76],{"style":168},[92,189,120],{"style":108},[92,191,81],{"style":108},[92,193,146],{"style":108},[92,195,125],{"style":108},[92,197,199],{"style":198},"color:#E53935;--shiki-dark:#F07178","title",[92,201,120],{"style":108},[92,203,81],{"style":108},[92,205,125],{"style":108},[92,207,208],{"style":98},"Built from JSON",[92,210,120],{"style":108},[92,212,133],{"style":108},[92,214,125],{"style":108},[92,216,217],{"style":198},"description",[92,219,120],{"style":108},[92,221,81],{"style":108},[92,223,125],{"style":108},[92,225,226],{"style":98},"No template required.",[92,228,120],{"style":108},[92,230,231],{"style":108}," }",[92,233,234],{"class":94,"style":95},[92,235,236],{"style":108},"    }",[92,238,239],{"class":94,"style":95},[92,240,241],{"style":108},"  }",[92,243,244],{"class":94,"style":95},[92,245,246],{"style":108},"}",[92,248,249],{"class":94,"style":95},[92,250,99],{"style":98},[24,252,253,256,257,259,260,262,263,265,266,268],{},[46,254,255],{},"Text"," elements become plain text nodes; every other ",[46,258,72],{}," becomes an element\nnode with its ",[46,261,76],{}," as attributes. A single element can skip ",[46,264,68],{},"\u002F",[46,267,64],{},"\nand be written inline.",[55,270,272],{"id":271},"rendering-it","Rendering it",[24,274,275,276,280,281,283],{},"Register the plugin on the parser, then render the resulting nodes just like any\nother ",[33,277,279],{"href":278},"https:\u002F\u002Fcomark-content-docs.vercel.app\u002F","Comark Content"," document, mapping each\n",[46,282,72],{}," to a component:",[83,285,288],{"language":286,"filename":287,"class":87},"ts","server\u002Fcontent.ts",[46,289,291,103,313,103,315,103,338,103,362,103,388],{"class":290},"language-ts",[92,292,293,297,301,304,307,310],{"class":94,"style":95},[92,294,296],{"style":295},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic","import",[92,298,300],{"style":299},"color:#90A4AE;--shiki-dark:#BABED8"," jsonRender ",[92,302,303],{"style":295},"from",[92,305,306],{"style":108}," '",[92,308,309],{"style":98},"comark\u002Fplugins\u002Fjson-render",[92,311,312],{"style":108},"'",[92,314],{"class":94,"style":95},[92,316,317,320,323,326,329,333,336],{"class":94,"style":95},[92,318,319],{"style":295},"export",[92,321,322],{"style":117}," const",[92,324,325],{"style":299}," content ",[92,327,328],{"style":108},"=",[92,330,332],{"style":331},"color:#6182B8;--shiki-dark:#82AAFF"," comarkContent",[92,334,335],{"style":299},"(",[92,337,109],{"style":108},[92,339,340,343,345,348,350,352,355,357,360],{"class":94,"style":95},[92,341,342],{"style":198},"  source",[92,344,81],{"style":108},[92,346,347],{"style":331}," fs",[92,349,335],{"style":299},[92,351,312],{"style":108},[92,353,354],{"style":98},".\u002Fcontent",[92,356,312],{"style":108},[92,358,359],{"style":299},")",[92,361,133],{"style":108},[92,363,364,367,369,371,374,376,379,382,385],{"class":94,"style":95},[92,365,366],{"style":198},"  markdown",[92,368,81],{"style":108},[92,370,146],{"style":108},[92,372,373],{"style":198}," plugins",[92,375,81],{"style":108},[92,377,378],{"style":299}," [",[92,380,381],{"style":331},"jsonRender",[92,383,384],{"style":299},"()] ",[92,386,387],{"style":108},"},",[92,389,390,392],{"class":94,"style":95},[92,391,246],{"style":108},[92,393,359],{"style":299},[83,395,398],{"language":396,"filename":397,"class":87},"vue","pages\u002F[slug].vue",[46,399,401,103,426,103,453,103,462,103,464,103,473,103,508],{"class":400},"language-vue",[92,402,403,406,409,412,415,417,419,421,423],{"class":94,"style":95},[92,404,405],{"style":108},"\u003C",[92,407,408],{"style":198},"script",[92,410,411],{"style":117}," setup",[92,413,414],{"style":117}," lang",[92,416,328],{"style":108},[92,418,120],{"style":108},[92,420,286],{"style":98},[92,422,120],{"style":108},[92,424,425],{"style":108},">",[92,427,428,430,432,435,438,441,443,446,448,451],{"class":94,"style":95},[92,429,296],{"style":295},[92,431,146],{"style":108},[92,433,434],{"style":299}," UPageHero",[92,436,437],{"style":295}," as",[92,439,440],{"style":299}," PageHero",[92,442,231],{"style":108},[92,444,445],{"style":295}," from",[92,447,306],{"style":108},[92,449,450],{"style":98},"#components",[92,452,312],{"style":108},[92,454,455,458,460],{"class":94,"style":95},[92,456,457],{"style":108},"\u003C\u002F",[92,459,408],{"style":198},[92,461,425],{"style":108},[92,463],{"class":94,"style":95},[92,465,466,468,471],{"class":94,"style":95},[92,467,405],{"style":108},[92,469,470],{"style":198},"template",[92,472,425],{"style":108},[92,474,475,478,481,484,486,488,491,493,496,498,500,503,505],{"class":94,"style":95},[92,476,477],{"style":108},"  \u003C",[92,479,480],{"style":198},"MarkdownDocument",[92,482,483],{"style":117}," :value",[92,485,328],{"style":108},[92,487,120],{"style":108},[92,489,490],{"style":98},"page",[92,492,120],{"style":108},[92,494,495],{"style":117}," :components",[92,497,328],{"style":108},[92,499,120],{"style":108},[92,501,502],{"style":98},"{ PageHero }",[92,504,120],{"style":108},[92,506,507],{"style":108}," \u002F>",[92,509,510,512,514],{"class":94,"style":95},[92,511,457],{"style":108},[92,513,470],{"style":198},[92,515,425],{"style":108},[517,518,519,520,522,523,526,527,530],"note",{},"Reach for ",[33,521,9],{"href":35}," when a layout is generated rather than authored: the file\ndescribes ",[28,524,525],{},"what"," to render, and your component map decides ",[28,528,529],{},"how",".",1785963366616]