[{"data":1,"prerenderedAt":26},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fgetting-started\u002Finstallation":3},{"html":4,"toc":5,"description":22,"hero":23,"list":24,"socialImage":25},"\u003Ch1 id=\"installation\">Installation\u003C\u002Fh1>\n\u003Cp>Clay is published on npm as \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fclay-doc\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ccode>clay-doc\u003C\u002Fcode>\u003C\u002Fa>. It needs \u003Cstrong>Node.js 20.19 or newer\u003C\u002Fstrong>, which comes with \u003Ccode>npm\u003C\u002Fcode> and \u003Ccode>npx\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">node\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --version\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">   # v20.19.0 or newer\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ch2 id=\"add-clay-to-a-project\">\u003Ca class=\"heading-anchor\" href=\"#add-clay-to-a-project\" aria-label=\"Link to this section\" data-route=\"#add-clay-to-a-project\">#\u003C\u002Fa>Add Clay to a project\u003C\u002Fh2>\n\u003Cp>Install Clay as a development dependency of the project you want to document:\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> install\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --save-dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>This adds Clay to \u003Ccode>package.json\u003C\u002Fcode> and pins the exact version in \u003Ccode>package-lock.json\u003C\u002Fcode>, so every build, on your machine or in CI, uses the same version.\u003C\u002Fp>\n\u003Cp>Add scripts to \u003Ccode>package.json\u003C\u002Fcode> so nobody has to remember the commands:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#9CDCFE\">  \"scripts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#9CDCFE\">    \"docs:dev\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"clay dev\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#9CDCFE\">    \"docs:build\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"clay build\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#0451A5;--shiki-dark:#9CDCFE\">    \"docs:preview\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">\"clay preview\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>Then \u003Ccode>npm run docs:dev\u003C\u002Fcode> starts the live preview.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tip\u003C\u002Fp>\n\u003Cp>Clay installs two commands, \u003Ccode>clay\u003C\u002Fcode> and \u003Ccode>clay-doc\u003C\u002Fcode>. They do the same; use whichever reads better in your scripts.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"try-clay-without-installing\">\u003Ca class=\"heading-anchor\" href=\"#try-clay-without-installing\" aria-label=\"Link to this section\" data-route=\"#try-clay-without-installing\">#\u003C\u002Fa>Try Clay without installing\u003C\u002Fh2>\n\u003Cp>In any folder with a \u003Ccode>clay.yaml\u003C\u002Fcode> and a \u003Ccode>docs\u002F\u003C\u002Fcode> folder, \u003Ccode>npx\u003C\u002Fcode> runs Clay straight from npm:\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> dev\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>This is handy for a first look. For builds in CI, use a fixed version, either through \u003Ccode>package.json\u003C\u002Fcode> or with an explicit version:\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc@2.1.0\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> build\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --strict\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Ch2 id=\"projects-without-packagejson\">\u003Ca class=\"heading-anchor\" href=\"#projects-without-packagejson\" aria-label=\"Link to this section\" data-route=\"#projects-without-packagejson\">#\u003C\u002Fa>Projects without package.json\u003C\u002Fh2>\n\u003Cp>Documentation often lives in repositories written in Go, Python, Java or other languages. You do not need a \u003Ccode>package.json\u003C\u002Fcode> there: run Clay with \u003Ccode>npx clay-doc@<version>\u003C\u002Fcode> locally and in CI. The trade-off is that tools like Dependabot cannot update a version written into a command, so you update it yourself.\u003C\u002Fp>\n\u003Ch2 id=\"updating-clay\">\u003Ca class=\"heading-anchor\" href=\"#updating-clay\" aria-label=\"Link to this section\" data-route=\"#updating-clay\">#\u003C\u002Fa>Updating Clay\u003C\u002Fh2>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npm\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> install\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#0000FF;--shiki-dark:#569CD6\"> --save-dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay-doc@latest\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Copy code\" aria-label=\"Copy code\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cp>Clay follows \u003Ca href=\"https:\u002F\u002Fsemver.org\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>semantic versioning\u003C\u002Fa>: minor and patch releases add features and fix bugs without breaking your docs. The \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fclay-doc\u002Fclay\u002Fblob\u002Fmain\u002FCHANGELOG.md\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>changelog\u003C\u002Fa> lists every change.\u003C\u002Fp>\n\u003Ch2 id=\"next-steps\">\u003Ca class=\"heading-anchor\" href=\"#next-steps\" aria-label=\"Link to this section\" data-route=\"#next-steps\">#\u003C\u002Fa>Next steps\u003C\u002Fh2>\n\u003Cp>Continue with the \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F3.x\u002Fgetting-started\u002Fquick-start\">quick start\u003C\u002Fa> to build your first site.\u003C\u002Fp>\n",[6,10,13,16,19],{"id":7,"text":8,"level":9},"add-clay-to-a-project","Add Clay to a project",2,{"id":11,"text":12,"level":9},"try-clay-without-installing","Try Clay without installing",{"id":14,"text":15,"level":9},"projects-without-packagejson","Projects without package.json",{"id":17,"text":18,"level":9},"updating-clay","Updating Clay",{"id":20,"text":21,"level":9},"next-steps","Next steps","Install Clay into a project with npm, or try it without installing anything.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fgetting-started\u002Finstallation.png",1792666368814]