[{"data":1,"prerenderedAt":699},["ShallowReactive",2],{"content-en-\u002Fapi\u002Frender-client":3},{"id":4,"title":5,"body":6,"description":692,"extension":693,"meta":694,"navigation":56,"path":695,"seo":696,"stem":697,"__hash__":698},"content_en\u002Fapi\u002Frender-client.md","renderClient",{"type":7,"value":8,"toc":685},"minimark",[9,13,22,149,154,166,343,346,350,353,425,429,455,466,470,655,659,681],[10,11,5],"h1",{"id":12},"renderclient",[14,15,16,17,21],"p",{},"Renders hyogen.md in the browser. Import from ",[18,19,20],"code",{},"@b4moss\u002Fhyogen-md\u002Fclient"," — this entry excludes Node file-system code.",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-ts shiki shiki-themes github-light github-dark","import { renderClient } from '@b4moss\u002Fhyogen-md\u002Fclient'\n\nfunction renderClient(\n  input: string | { path: string },\n  context?: HyogenContext,\n  options?: RenderOptions,\n): Promise\u003CRenderResult>\n","ts","",[18,30,31,51,58,71,101,116,129],{"__ignoreMap":28},[32,33,36,40,44,47],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"szBVR","import",[32,41,43],{"class":42},"sVt8B"," { renderClient } ",[32,45,46],{"class":38},"from",[32,48,50],{"class":49},"sZZnC"," '@b4moss\u002Fhyogen-md\u002Fclient'\n",[32,52,54],{"class":34,"line":53},2,[32,55,57],{"emptyLinePlaceholder":56},true,"\n",[32,59,61,64,68],{"class":34,"line":60},3,[32,62,63],{"class":38},"function",[32,65,67],{"class":66},"sScJk"," renderClient",[32,69,70],{"class":42},"(\n",[32,72,74,78,81,85,88,91,94,96,98],{"class":34,"line":73},4,[32,75,77],{"class":76},"s4XuR","  input",[32,79,80],{"class":38},":",[32,82,84],{"class":83},"sj4cs"," string",[32,86,87],{"class":38}," |",[32,89,90],{"class":42}," { ",[32,92,93],{"class":76},"path",[32,95,80],{"class":38},[32,97,84],{"class":83},[32,99,100],{"class":42}," },\n",[32,102,104,107,110,113],{"class":34,"line":103},5,[32,105,106],{"class":76},"  context",[32,108,109],{"class":38},"?:",[32,111,112],{"class":66}," HyogenContext",[32,114,115],{"class":42},",\n",[32,117,119,122,124,127],{"class":34,"line":118},6,[32,120,121],{"class":76},"  options",[32,123,109],{"class":38},[32,125,126],{"class":66}," RenderOptions",[32,128,115],{"class":42},[32,130,132,135,137,140,143,146],{"class":34,"line":131},7,[32,133,134],{"class":42},")",[32,136,80],{"class":38},[32,138,139],{"class":66}," Promise",[32,141,142],{"class":42},"\u003C",[32,144,145],{"class":66},"RenderResult",[32,147,148],{"class":42},">\n",[150,151,153],"h2",{"id":152},"loader-required","Loader required",[14,155,156,157,161,162,165],{},"The library does not read the file system or fetch URLs in the browser. You ",[158,159,160],"strong",{},"must"," pass ",[18,163,164],{},"options.loader",".",[23,167,169],{"className":25,"code":168,"language":27,"meta":28,"style":28},"const loader = async (path: string) => {\n  const res = await fetch(`\u002Ftemplates\u002F${path}`)\n  if (!res.ok) throw new Error(`not found: ${path}`)\n  return res.text()\n}\n\nconst { markdown } = await renderClient(\n  { path: 'page.md' },\n  { title: 'Home' },\n  { loader },\n)\n",[18,170,171,203,233,266,280,285,289,310,321,332,338],{"__ignoreMap":28},[32,172,173,176,179,182,185,188,190,192,194,197,200],{"class":34,"line":35},[32,174,175],{"class":38},"const",[32,177,178],{"class":66}," loader",[32,180,181],{"class":38}," =",[32,183,184],{"class":38}," async",[32,186,187],{"class":42}," (",[32,189,93],{"class":76},[32,191,80],{"class":38},[32,193,84],{"class":83},[32,195,196],{"class":42},") ",[32,198,199],{"class":38},"=>",[32,201,202],{"class":42}," {\n",[32,204,205,208,211,213,216,219,222,225,227,230],{"class":34,"line":53},[32,206,207],{"class":38},"  const",[32,209,210],{"class":83}," res",[32,212,181],{"class":38},[32,214,215],{"class":38}," await",[32,217,218],{"class":66}," fetch",[32,220,221],{"class":42},"(",[32,223,224],{"class":49},"`\u002Ftemplates\u002F${",[32,226,93],{"class":42},[32,228,229],{"class":49},"}`",[32,231,232],{"class":42},")\n",[32,234,235,238,240,243,246,249,252,255,257,260,262,264],{"class":34,"line":60},[32,236,237],{"class":38},"  if",[32,239,187],{"class":42},[32,241,242],{"class":38},"!",[32,244,245],{"class":42},"res.ok) ",[32,247,248],{"class":38},"throw",[32,250,251],{"class":38}," new",[32,253,254],{"class":66}," Error",[32,256,221],{"class":42},[32,258,259],{"class":49},"`not found: ${",[32,261,93],{"class":42},[32,263,229],{"class":49},[32,265,232],{"class":42},[32,267,268,271,274,277],{"class":34,"line":73},[32,269,270],{"class":38},"  return",[32,272,273],{"class":42}," res.",[32,275,276],{"class":66},"text",[32,278,279],{"class":42},"()\n",[32,281,282],{"class":34,"line":103},[32,283,284],{"class":42},"}\n",[32,286,287],{"class":34,"line":118},[32,288,57],{"emptyLinePlaceholder":56},[32,290,291,293,295,298,301,304,306,308],{"class":34,"line":131},[32,292,175],{"class":38},[32,294,90],{"class":42},[32,296,297],{"class":83},"markdown",[32,299,300],{"class":42}," } ",[32,302,303],{"class":38},"=",[32,305,215],{"class":38},[32,307,67],{"class":66},[32,309,70],{"class":42},[32,311,313,316,319],{"class":34,"line":312},8,[32,314,315],{"class":42},"  { path: ",[32,317,318],{"class":49},"'page.md'",[32,320,100],{"class":42},[32,322,324,327,330],{"class":34,"line":323},9,[32,325,326],{"class":42},"  { title: ",[32,328,329],{"class":49},"'Home'",[32,331,100],{"class":42},[32,333,335],{"class":34,"line":334},10,[32,336,337],{"class":42},"  { loader },\n",[32,339,341],{"class":34,"line":340},11,[32,342,232],{"class":42},[14,344,345],{},"Cross-origin fetches are not supported by the library itself — your loader must serve same-origin paths.",[150,347,349],{"id":348},"inline-source","Inline source",[14,351,352],{},"Pass a string directly when you already have the source:",[23,354,356],{"className":25,"code":355,"language":27,"meta":28,"style":28},"const { markdown } = await renderClient(\n  '# {{ title }}',\n  { title: 'Preview' },\n  { loader: async () => '' }, \u002F\u002F still required, unused for string input\n)\n",[18,357,358,376,383,392,421],{"__ignoreMap":28},[32,359,360,362,364,366,368,370,372,374],{"class":34,"line":35},[32,361,175],{"class":38},[32,363,90],{"class":42},[32,365,297],{"class":83},[32,367,300],{"class":42},[32,369,303],{"class":38},[32,371,215],{"class":38},[32,373,67],{"class":66},[32,375,70],{"class":42},[32,377,378,381],{"class":34,"line":53},[32,379,380],{"class":49},"  '# {{ title }}'",[32,382,115],{"class":42},[32,384,385,387,390],{"class":34,"line":60},[32,386,326],{"class":42},[32,388,389],{"class":49},"'Preview'",[32,391,100],{"class":42},[32,393,394,397,400,403,406,409,411,414,417],{"class":34,"line":73},[32,395,396],{"class":42},"  { ",[32,398,399],{"class":66},"loader",[32,401,402],{"class":42},": ",[32,404,405],{"class":38},"async",[32,407,408],{"class":42}," () ",[32,410,199],{"class":38},[32,412,413],{"class":49}," ''",[32,415,416],{"class":42}," }, ",[32,418,420],{"class":419},"sJ8bj","\u002F\u002F still required, unused for string input\n",[32,422,423],{"class":34,"line":103},[32,424,232],{"class":42},[150,426,428],{"id":427},"servercontext-is-rejected","serverContext is rejected",[23,430,432],{"className":25,"code":431,"language":27,"meta":28,"style":28},"\u002F\u002F throws HyogenError { code: 'server_context_on_client' }\nawait renderClient(source, {}, { serverContext: { secret: 'x' } })\n",[18,433,434,439],{"__ignoreMap":28},[32,435,436],{"class":34,"line":35},[32,437,438],{"class":419},"\u002F\u002F throws HyogenError { code: 'server_context_on_client' }\n",[32,440,441,444,446,449,452],{"class":34,"line":53},[32,442,443],{"class":38},"await",[32,445,67],{"class":66},[32,447,448],{"class":42},"(source, {}, { serverContext: { secret: ",[32,450,451],{"class":49},"'x'",[32,453,454],{"class":42}," } })\n",[14,456,457,458,461,462,465],{},"Use ",[18,459,460],{},"renderServer"," or ",[18,463,464],{},"build"," for server-only context.",[150,467,469],{"id":468},"example-virtual-file-map","Example (virtual file map)",[23,471,473],{"className":25,"code":472,"language":27,"meta":28,"style":28},"import { renderClient } from '@b4moss\u002Fhyogen-md\u002Fclient'\n\nconst vfs: Record\u003Cstring, string> = {\n  'index.md': '# {{ greeting }}',\n  '_partials\u002Fheader.md': '## Site header',\n}\n\nconst loader = async (path: string) => {\n  const text = vfs[path]\n  if (text === undefined) throw new Error(path)\n  return text\n}\n\nconst result = await renderClient('index.md', { greeting: 'Hi' }, { loader })\n",[18,474,475,485,489,518,530,542,546,550,574,586,610,617,622,627],{"__ignoreMap":28},[32,476,477,479,481,483],{"class":34,"line":35},[32,478,39],{"class":38},[32,480,43],{"class":42},[32,482,46],{"class":38},[32,484,50],{"class":49},[32,486,487],{"class":34,"line":53},[32,488,57],{"emptyLinePlaceholder":56},[32,490,491,493,496,498,501,503,506,509,511,514,516],{"class":34,"line":60},[32,492,175],{"class":38},[32,494,495],{"class":83}," vfs",[32,497,80],{"class":38},[32,499,500],{"class":66}," Record",[32,502,142],{"class":42},[32,504,505],{"class":83},"string",[32,507,508],{"class":42},", ",[32,510,505],{"class":83},[32,512,513],{"class":42},"> ",[32,515,303],{"class":38},[32,517,202],{"class":42},[32,519,520,523,525,528],{"class":34,"line":73},[32,521,522],{"class":49},"  'index.md'",[32,524,402],{"class":42},[32,526,527],{"class":49},"'# {{ greeting }}'",[32,529,115],{"class":42},[32,531,532,535,537,540],{"class":34,"line":103},[32,533,534],{"class":49},"  '_partials\u002Fheader.md'",[32,536,402],{"class":42},[32,538,539],{"class":49},"'## Site header'",[32,541,115],{"class":42},[32,543,544],{"class":34,"line":118},[32,545,284],{"class":42},[32,547,548],{"class":34,"line":131},[32,549,57],{"emptyLinePlaceholder":56},[32,551,552,554,556,558,560,562,564,566,568,570,572],{"class":34,"line":312},[32,553,175],{"class":38},[32,555,178],{"class":66},[32,557,181],{"class":38},[32,559,184],{"class":38},[32,561,187],{"class":42},[32,563,93],{"class":76},[32,565,80],{"class":38},[32,567,84],{"class":83},[32,569,196],{"class":42},[32,571,199],{"class":38},[32,573,202],{"class":42},[32,575,576,578,581,583],{"class":34,"line":323},[32,577,207],{"class":38},[32,579,580],{"class":83}," text",[32,582,181],{"class":38},[32,584,585],{"class":42}," vfs[path]\n",[32,587,588,590,593,596,599,601,603,605,607],{"class":34,"line":334},[32,589,237],{"class":38},[32,591,592],{"class":42}," (text ",[32,594,595],{"class":38},"===",[32,597,598],{"class":83}," undefined",[32,600,196],{"class":42},[32,602,248],{"class":38},[32,604,251],{"class":38},[32,606,254],{"class":66},[32,608,609],{"class":42},"(path)\n",[32,611,612,614],{"class":34,"line":340},[32,613,270],{"class":38},[32,615,616],{"class":42}," text\n",[32,618,620],{"class":34,"line":619},12,[32,621,284],{"class":42},[32,623,625],{"class":34,"line":624},13,[32,626,57],{"emptyLinePlaceholder":56},[32,628,630,632,635,637,639,641,643,646,649,652],{"class":34,"line":629},14,[32,631,175],{"class":38},[32,633,634],{"class":83}," result",[32,636,181],{"class":38},[32,638,215],{"class":38},[32,640,67],{"class":66},[32,642,221],{"class":42},[32,644,645],{"class":49},"'index.md'",[32,647,648],{"class":42},", { greeting: ",[32,650,651],{"class":49},"'Hi'",[32,653,654],{"class":42}," }, { loader })\n",[150,656,658],{"id":657},"related","Related",[660,661,662,669,675],"ul",{},[663,664,665],"li",{},[666,667,460],"a",{"href":668},"\u002Fen\u002Fapi\u002Frender-server",[663,670,671],{},[666,672,674],{"href":673},"\u002Fen\u002Fapi\u002Floader","Loader",[663,676,677],{},[666,678,680],{"href":679},"\u002Fen\u002Fsyntax\u002Fpaths-and-security","Paths and security",[682,683,684],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":28,"searchDepth":53,"depth":53,"links":686},[687,688,689,690,691],{"id":152,"depth":53,"text":153},{"id":348,"depth":53,"text":349},{"id":427,"depth":53,"text":428},{"id":468,"depth":53,"text":469},{"id":657,"depth":53,"text":658},"Client-side rendering entry for CSR with a custom loader.","md",{},"\u002Fapi\u002Frender-client",{"title":5,"description":692},"api\u002Frender-client","YOvn8zOG0a9slzhMg4uLxfQ8k1mQCt3mzwWdSaZnQKc",1787223114246]