1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><title>Markdoc | Sandbox</title><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" href="/favicon.ico"/><link rel="preload" as="font" href="https://b.stripecdn.com/markdoc-srv/assets/fonts/GT-America-Mono-Regular.otf" crossorigin="" type="font/otf"/><link rel="preload" as="font" href="https://b.stripecdn.com/markdoc-srv/assets/fonts/GT-America-Mono-Medium.otf" crossorigin="" type="font/otf"/><link rel="preload" as="font" href="https://b.stripecdn.com/markdoc-srv/assets/fonts/tiempos-headline-light.woff2" crossorigin="" type="font/woff2"/><link rel="preconnect" href="https://U0FP4K92T1-dsn.algolia.net" crossorigin=""/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="referrer" content="strict-origin"/><meta name="title" content="Sandbox"/><meta name="description" content="A powerful, flexible, Markdown-based authoring framework"/><meta property="og:type" content="website"/><meta property="og:url" content="https://markdoc.dev"/><meta property="og:title" content="Sandbox"/><meta property="og:description" content="A powerful, flexible, Markdown-based authoring framework"/><meta property="og:image" content="https://markdoc.dev/images/share.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://markdoc.dev/images/share.png"/><style> 2 @font-face { 3 font-family: 'GT America Mono'; 4 font-style: normal; 5 font-weight: normal; 6 src: url('https://b.stripecdn.com/markdoc-srv/assets/fonts/GT-America-Mono-Regular.otf') 7 format('opentype'); 8 } 9 10 @font-face { 11 font-family: 'GT America Mono'; 12 font-style: normal; 13 font-weight: 500; 14 src: url('https://b.stripecdn.com/markdoc-srv/assets/fonts/GT-America-Mono-Medium.otf') 15 format('opentype'); 16 } 17 18 @font-face { 19 font-family: 'Tiempos'; 20 font-style: normal; 21 src: url('https://b.stripecdn.com/markdoc-srv/assets/fonts/tiempos-headline-light.woff2'); 22 font-display: block; 23 } 24 </style><meta name="next-head-count" content="20"/><link rel="preload" href="/_next/static/css/6afc871939c50223.css" as="style"/><link rel="stylesheet" href="/_next/static/css/6afc871939c50223.css" data-n-g=""/><noscript data-n-css=""></noscript>
24<script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
24<script src="/_next/static/chunks/webpack-59c5c889f52620d6.js" defer=""></script>
24<script src="/_next/static/chunks/framework-49c6cecf1f6d5795.js" defer=""></script>
24<script src="/_next/static/chunks/main-bc4729e28440d7eb.js" defer=""></script>
24<script src="/_next/static/chunks/pages/_app-86593f94b9f31bc0.js" defer=""></script>
24<script src="/_next/static/chunks/f65a48b9-b14b0feb725f240f.js" defer=""></script>
24<script src="/_next/static/chunks/605040ef-adf4ad57c4ac2805.js" defer=""></script>
24<script src="/_next/static/chunks/60-f4729bca605d151b.js" defer=""></script>
24<script src="/_next/static/chunks/963-97949967745de0d3.js" defer=""></script>
24<script src="/_next/static/chunks/pages/sandbox-8607371be6172e30.js" defer=""></script>
24<script src="/_next/static/K1Cuta1VsHD6dv8AYhLXp/_buildManifest.js" defer=""></script>
24<script src="/_next/static/K1Cuta1VsHD6dv8AYhLXp/_ssgManifest.js" defer=""></script>
24<style id="__jsx-8420dd369508401">.nav-bar.jsx-8420dd369508401{top:0;position:fixed;z-index:100;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;width:100%;background:var(--light)}nav.jsx-8420dd369508401{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:1rem;width:100%;margin:0 auto;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-bottom:1px solid var(--page-border);padding:1rem 2rem 1.1rem;font-size:15px;font-family:var(--sans)}nav.jsx-8420dd369508401 a{text-decoration:none}nav.jsx-8420dd369508401 .DocSearch-Button{background:var(--code-background);height:32px;-webkit-border-radius:32px;-moz-border-radius:32px;border-radius:32px}nav.jsx-8420dd369508401 .DocSearch-Button:hover{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:#e8eef3}.dark nav.jsx-8420dd369508401 .DocSearch-Button:hover{background:#424248}nav.jsx-8420dd369508401 .DocSearch-Search-Icon{color:var(--dark);width:16px}nav.jsx-8420dd369508401 .DocSearch-Button-Placeholder,nav.jsx-8420dd369508401 .DocSearch-Button-Keys{dis
24play:none}section.jsx-8420dd369508401{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;gap:1.3rem;padding:0}button.jsx-8420dd369508401{display:none;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:48px;height:32px;background:var(--gray-light);-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.top-row.jsx-8420dd369508401{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%}@media screen and (max-width:600px){.nav-bar.jsx-8420dd369508401{border-bottom:1px solid var(--dark)}nav.jsx-8420dd369508401{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-moz-box-align:start;-ms-flex-align:start;align-items:flex-start;border-bottom:none}section.jsx-8420dd369508401{display:none;font-size:15px}section.active.jsx-8420dd369508401{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}button.jsx-8420dd369508401{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}}</style><style id="__jsx-19dffb64047ec87f">#hover.jsx-19dffb64047ec87f{top:0;left:0;display:none;position:fixed;color:var(--white);mix-blend-mode:difference;font-family:var(--mono);font-size:13px;font-weight:500;line-height:27px;letter-spacing:-.03em;z-index:999}#hover.jsx-19dffb64047ec87f span{position:fixed;will-change:transform}.preview:hover #hover span{padding-top:7px}.page--landing .sandbox .container:hover #hover.jsx-19dffb64047ec87f{display:block}</style><style id="__jsx-bb9a15bc0967b3eb">a.jsx-bb9a15bc0967b3eb{text-decoration:none}a.jsx-bb9a15bc0967b3eb:hover{opacity:1}div.jsx-bb9a15bc0967b3eb{position:absolute;top:-webkit-calc(-1*(var(--nav-height) + 44px));top:-moz-calc(-1*(var(--nav-height) + 44px));top:calc(-1*(var(--nav-height) + 44px))}</style><style id="__jsx-2276b1d11fc94936">.background.jsx-2276b1d11fc94936{top:2px;left:2px;z-index:1;position:absolute;background:var(--white);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;width:12px;height:12px}</style><style id="__jsx-4111229146">.icon.jsx-4111229146{display:inline-block;position:relative;font-size:inherit;width:1em;height:1em;min-width:16px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;color:var(--black)}.icon.jsx-4111229146 svg{z-index:10;position:relative;display:block;fill:currentcolor;stroke:currentcolor;width:100%;height:100%}</style><style id="__jsx-f5942a5fa6301fb4">.callout.jsx-f5942a5fa6301fb4{padding:.5rem 0 2rem}.content.jsx-f5942a5fa6301fb4{color:var(--dark);background:var(--code-background);border:1px solid var(--code-border);line-height:20px;padding:12px 20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon.jsx-f5942a5fa6301fb4{padding-right:8px;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center}.callout.jsx-f5942a5fa6301fb4 p:first-of-type{padding:0}</style><style id="__jsx-3753682032">.sandbox.jsx-3753682032{width:100%;height:calc(100vh - var(--nav-height));display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-flow:column;flex-flow:column;-webkit-box-flex:1;-webkit-flex-grow:1;-moz-box-flex:1;-ms-flex-positive:1;flex-grow:1;border:1px solid var(--black)}nav.jsx-3753682032{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;
24-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:0;-webkit-flex:0 1 auto;-moz-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;padding:.5rem;background:var(--contrast-dark)}button.jsx-3753682032{cursor:pointer;color:var(--white);background:var(--black-medium);border:1px solid var(--black-light);padding:.25rem .5rem;font-size:13px;-webkit-transition:color 300ms ease;-moz-transition:color 300ms ease;-o-transition:color 300ms ease;transition:color 300ms ease}button.active.jsx-3753682032,button.jsx-3753682032:hover{color:var(--theme)}.dark button.jsx-3753682032{background:var(--black)}.btn-group.jsx-3753682032:after{content:"";clear:both;display:table}.btn-group.jsx-3753682032 button.jsx-3753682032:not(:last-child){border-right:none}.container.jsx-3753682032{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;min-height:0}section.jsx-3753682032{position:relative;overflow:auto;width:50%;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:0}.preview.jsx-3753682032{color:var(--black);height:100%;padding:1.5rem}.left.jsx-3753682032 .CodeMirror{border-top:1px solid rgba(255,255,255,.22)}.left.jsx-3753682032 .CodeMirror,.left.jsx-3753682032 .react-codemirror2{color:white;background:var(--contrast-dark)}.left.jsx-3753682032 .CodeMirror-lines{padding-top:1.5rem;padding-bottom:1.5rem}.left.jsx-3753682032 .CodeMirror-line{padding-left:1.5rem;padding-right:1.5rem}.right.jsx-3753682032{background: var(--white);.sandbox.jsx-3753682032 .preview.jsx-3753682032 h1{--font-size-jumbo:29px;--line-height-jumbo:52px;font-size:29px;line-height:52px;margin-top:0rem}.sandbox.jsx-3753682032 .preview.jsx-3753682032 h2{font-size:18px;line-height:26px;margin-top:1rem}.sandbox.jsx-3753682032 .preview.jsx-3753682032 p{font-size:var(--font-size-3);line-height:var(--line-height-3);font-weight:400}.sandbox.jsx-3753682032 .preview.jsx-3753682032 .callout p{font-size:14px;line-height:20px}.sandbox.jsx-3753682032 .preview.jsx-3753682032 .cursor{width:4px}</style><style id="__jsx-3989626654">.container.jsx-3989626654{position:fixed;top:0;left:100vw;z-index:999;width:100vw;height:100vh;-webkit-transition:-webkit-transform 300ms ease;-moz-transition:-moz-transform 300ms ease;-o-transition:-o-transform 300ms ease;transition:-webkit-transform 300ms ease;transition:-moz-transform 300ms ease;transition:-o-transform 300ms ease;transition:transform 300ms ease;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}.click-away.jsx-3989626654{width:45%;height:100%}section.jsx-3989626654{width:55%;height:100%;border-left:1px solid rgba(255,255,255,.22)}section.jsx-3989626654 .CodeMirror,section.jsx-3989626654 .react-codemirror2,kbd.jsx-3989626654{color:white;background:var(--contrast-dark)}button.jsx-3989626654{position:absolute;top:.8rem;right:1rem}kbd.jsx-3989626654{color:var(--white)}@media screen and (max-width:1e3px){section.jsx-3989626654{display:none}.live-edit{display:none}}</style><style id="__jsx-bbed09f4a18e595f">.disclaimer.jsx-bbed09f4a18e595f{color:rgba(24,24,27,.5);padding-left:2rem;font-size:15px;font-weight:400;line-height:27px}.disclaimer.jsx-bbed09f4a18e595f button.jsx-bbed09f4a18e595f{display:inline-block;padding:0;color:inherit;text-decoration:underline;font-weight:regular}body.dark .disclaimer.jsx-bbed09f4a18e595f{color:var(--white)}@media screen and (max-width:1e3px){.disclaimer.jsx-bbed09f4a18e595f{display:none}}</style><style id="__jsx-a916debf5e95c656">button.jsx-a916debf5e95c656{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;
24-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;width:120px;font-size:15px;line-height:27px;font-weight:400;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:nowrap}.dark.jsx-a916debf5e95c656{background:var(--contrast-dark);color:var(--white)}.light.jsx-a916debf5e95c656{background:var(--gray-light);color:var(--black)}button.jsx-a916debf5e95c656:active svg{-webkit-animation:rotate 150ms linear forwards;-moz-animation:rotate 150ms linear forwards;-o-animation:rotate 150ms linear forwards;animation:rotate 150ms linear forwards}button.jsx-a916debf5e95c656 .sun{-webkit-animation:sun 400ms ease both;-moz-animation:sun 400ms ease both;-o-animation:sun 400ms ease both;animation:sun 400ms ease both}button.jsx-a916debf5e95c656 .moon{-webkit-animation:moon 400ms ease both;-moz-animation:moon 400ms ease both;-o-animation:moon 400ms ease both;animation:moon 400ms ease both}button.jsx-a916debf5e95c656 circle.ray{-webkit-transform-origin:center;-moz-transform-origin:center;-ms-transform-origin:center;-o-transform-origin:center;transform-origin:center;-webkit-animation:rays 400ms ease both;-moz-animation:rays 400ms ease both;-o-animation:rays 400ms ease both;animation:rays 400ms ease both}@-webkit-keyframes rotate{from{-webkit-transform:initial;transform:initial}to{-webkit-transform:scale(.95)rotate(20deg);transform:scale(.95)rotate(20deg)}}@-moz-keyframes rotate{from{-moz-transform:initial;transform:initial}to{-moz-transform:scale(.95)rotate(20deg);transform:scale(.95)rotate(20deg)}}@-o-keyframes rotate{from{-o-transform:initial;transform:initial}to{-o-transform:scale(.95)rotate(20deg);transform:scale(.95)rotate(20deg)}}@keyframes rotate{from{-webkit-transform:initial;-moz-transform:initial;-o-transform:initial;transform:initial}to{-webkit-transform:scale(.95)rotate(20deg);-moz-transform:scale(.95)rotate(20deg);-o-transform:scale(.95)rotate(20deg);transform:scale(.95)rotate(20deg)}}@-webkit-keyframes sun{from{-webkit-transform:scale(1.5);transform:scale(1.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes sun{from{-moz-transform:scale(1.5);transform:scale(1.5)}to{-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes sun{from{-o-transform:scale(1.5);transform:scale(1.5)}to{-o-transform:scale(1);transform:scale(1)}}@keyframes sun{from{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}to{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}@-webkit-keyframes rays{from{-webkit-transform:rotate(45deg);transform:rotate(45deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-moz-keyframes rays{from{-moz-transform:rotate(45deg);transform:rotate(45deg)}to{-moz-transform:rotate(0deg);transform:rotate(0deg)}}@-o-keyframes rays{from{-o-transform:rotate(45deg);transform:rotate(45deg)}to{-o-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes rays{from{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}to{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes moon{from{-webkit-transform:scale(.6)rotate(90deg);transform:scale(.6)rotate(90deg)}to{-webkit-transform:scale(1)rotate(0deg);transform:scale(1)rotate(0deg)}}@-moz-keyframes moon{from{-moz-transform:scale(.6)rotate(90deg);transform:scale(.6)rotate(90deg)}to{-moz-transform:scale(1)rotate(0deg);transform:scale(1)rotate(0deg)}}@-o-keyframes moon{from{-o-transform:scale(.6)rotate(90deg);transform:scale(.6)rotate(90deg)}to{-o-transform:scale(1)rotate(0deg);transform:scale(1)rotate(0deg)}}@keyframes moon{from{-webkit-transform:scale(.6)rotate(90deg);-moz-transform:scale(.6)rotate(90deg);-o-transform:scale(.6)rotate(90deg);transform:scale(.6)rotate(90deg)}to{-webkit-transform:scale(1)rotate(0deg);-moz-transform:scale(1)rotate(0deg);-o-transform:scale(1)rotate(0deg);transform:scale(1)rotate(0deg)}}@media screen and (max-width:600px){button.jsx-a916debf5e95c656{width:130px}}</style><style id="__jsx-fedc8df44ce807b5">.gap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;gap:1.5rem}footer.jsx-fedc8df44ce807b5{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;z-index:100;width:100%;color:var(--dark);padding:1rem 0}footer.desktop.jsx-fedc8df44ce807b5{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}footer.mobile.jsx-fedc8df44ce807b5{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0}.right.jsx-fedc8df44ce807b5{margin-left:auto}@media screen and (max-width:600px){footer.mobile.jsx-fedc8df44ce807b5{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}footer.desktop.jsx-fedc8df44ce807b5{display:none}}</style></head><body><div id="__next"><div class=" "><a href="#skip-nav" class="skip-nav">Skip to content</a><div class="jsx-8420dd369508401 nav-bar"><nav class="jsx-8420dd369508401">
24<div class="jsx-8420dd369508401 flex top-row"><a class="flex" href="/"><svg title="Markdoc" width="112" height="37" viewBox="0 0 112 37" fill="none" xmlns="http://www.w3.org/2000/svg" class="jsx-8420dd369508401"><rect x="58.8" y="4.66669" width="53.2" height="28" rx="1.86667" fill="var(--theme)" class="jsx-8420dd369508401"></rect><path d="M66.6732 11.0502V26H71.4108C75.2009 26 77.6223 22.8837 77.6223 18.4198C77.6223 14.0402 75.3904 11.0502 71.4529 11.0502H66.6732ZM71.2424 23.9365H69.2631V13.1137H71.2845C73.748 13.1137 74.9693 15.3036 74.9693 18.4198C74.9693 21.5993 73.6638 23.9365 71.2424 23.9365ZM85.4366 26.358C89.1845 26.358 91.0164 23.6838 91.0164 19.2831V17.7671C91.0164 13.3664 89.1845 10.6923 85.4366 10.6923C81.6886 10.6923 79.8567 13.3664 79.8567 17.7671V19.2831C79.8567 23.6838 81.6886 26.358 85.4366 26.358ZM85.4366 24.2313C83.4152 24.2313 82.5098 22.7153 82.5098 19.3463V17.7039C82.5098 14.335 83.4152 12.8189 85.4366 12.8189C87.4579 12.8189 88.3634 14.335 88.3634 17.7039V19.3463C88.3634 22.7153 87.4579 24.2313 85.4366 24.2313ZM98.8938 26.358C102.347 26.358 104.221 24.1681 104.432 21.0097L101.863 20.5254C101.736 22.9258 100.768 24.2102 98.9991 24.2102C97.0198 24.2102 96.0513 22.4626 96.0513 19.1989V17.7039C96.0513 14.4192 96.9777 12.84 98.9991 12.84C100.747 12.84 101.736 14.1455 101.863 16.5037L104.453 16.1037C104.179 12.4189 102.221 10.6923 99.0202 10.6923C95.2722
2410.6923 93.3982 13.3875 93.3982 17.746V19.3042C93.3982 23.6628 95.209 26.358 98.8938 26.358Z" fill="var(--black)" class="jsx-8420dd369508401"></path><path d="M7.53805 22.3573L8.6119 17.0512C8.80141 16.1879 9.07514 14.6298 9.18042 13.6822H9.32781C9.26464 14.9035 9.22253 16.7354 9.22253 17.9145V26H11.5387V11.0502H8.27501L6.86426 17.8092C6.75898 18.4409 6.63264 19.2621 6.59053 19.7043H6.46419C6.42208 19.2621 6.29575 18.4409 6.19046 17.8092L4.77971 11.0502H1.51603V26H3.83219V17.9145C3.83219 16.7354 3.79008 14.9035 3.72691 13.6822H3.8743C4.00064 14.6298 4.25331 16.1879 4.44282 17.0512L5.51667 22.3573H7.53805ZM22.3639 22.1889L23.4589 26H26.0066L21.5006 11.0502H18.5107L14.0047 26H16.5525L17.6263 22.1889H22.3639ZM19.9636 13.198H20.0478C20.3847 15.0298 20.9321 17.2618 21.7744 20.1043H18.2159C19.0581 17.2618 19.6267 15.0298 19.9636 13.198ZM33.4419 19.8727L36.4529 26H39.2954L35.9686 19.4305C37.7794 18.8199 38.8111 17.4092 38.8111 15.5141C38.8111 12.6716 36.9372 11.0502 33.6524 11.0502H28.5569V26H31.1468V19.8727H33.4419ZM31.1468 18.0198V13.0506H33.4208C35.1685 13.0506 36.0949 13.9349 36.0949 15.5352C36.0949 17.1354 35.1685 18.0198 33.4208 18.0198H31.1468ZM46.6675 18.7567L50.2681 26H53.258L48.5836 16.967L52.8159 11.0502H49.8259L45.0041 18.0829V11.0502H42.4142V26H45.0041V21.0729L46.6675 18.7567Z" fill="var(--dark)" class="jsx-8420dd369508401"></path></svg></a><button class="jsx-8420dd369508401 hamburger"><svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="jsx-8420dd369508401"><rect width="16" height="2" fill="var(--black)" class="jsx-8420dd369508401"></rect><rect y="4" width="16" height="2" fill="var(--black)" class="jsx-8420dd369508401"></rect><rect y="8" width="16" height="2" fill="var(--black)" class="jsx-8420dd369508401"></rect></svg></button></div><section class="jsx-8420dd369508401 "><a href="/docs/getting-started">Docs</a><a target="_blank" href="https://github.com/markdoc/markdoc">GitHub</a><a target="_blank" href="https://github.com/markdoc/markdoc/discussions">Community</a><a target="_blank" href="https://twitter.com/StripeDev">Twitter</a><span class="primary no-mobile"><a href="/sandbox">Try</a></span><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></section></nav></div><div class="page"><main class="flex column"><div id="skip-nav"></div><article><div class="jsx-3753682032 sandbox"><nav class="jsx-3753682032"><div class="jsx-3753682032 btn-group"><button class="jsx-3753682032">Reset</button></div><div class="jsx-3753682032 btn-group"><button class="jsx-3753682032 active">React</button><button class="jsx-3753682032 ">Renderable tree</button><button class="jsx-3753682032 ">AST</button></div></nav><div class="jsx-3753682032 flex container"><section class="jsx-3753682032 left"></section><section class="jsx-3753682032 right dark"><div class="jsx-3753682032 preview light"><div id="hover" class="jsx-19dffb64047ec87f"><span style="transition:transform 50ms linear 0ms">T</span><span style="transition:transform 50ms linear 1ms">r</span><span style="transition:transform 50ms linear 2ms">y</span><span style="transition:transform 50ms linear 3ms"> </span><span style="transition:transform 50ms linear 4ms">i</span><span style="transition:transform 50ms linear 5ms">t</span><span style="transition:transform 50ms linear 6ms"> </span><span style="transition:transform 50ms linear 7ms">o</span><span style="transition:transform 50ms linear 8ms">u</span><span style="transition:transform 50ms linear 9ms">t</span></div><article><h1 class="jsx-bb9a15bc0967b3eb heading"><div id="overview" class="jsx-bb9a15bc0967b3eb"></div>What is Markdoc?<!-- --> </h1><p>Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites. Stripe created Markdoc to power <a target="_blank" href="http://stripe.com/docs">our public docs</a>.</p><div class="jsx-f5942a5fa6301fb4 callout"><div class="jsx-f5942a5fa6301fb4 flex content"><div class="jsx-f5942a5fa6301fb4 flex icon"><span class="jsx-4111229146 icon"><div class="jsx-2276b1d11fc94936 relative"><div class="jsx-2276b1d11fc94936 background"></div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="jsx-2276b1d11fc94936"><title class="jsx-2276b1d11fc94936">Checkmark Circle</title><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-2
2408S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z" class="jsx-2276b1d11fc94936"></path></svg></div></span></div><div class="jsx-f5942a5fa6301fb4 flex column"><strong class="jsx-f5942a5fa6301fb4"></strong><span class="jsx-f5942a5fa6301fb4"><p>Markdoc is open-sourceâcheck out its <a target="_blank" href="http://github.com/markdoc/markdoc">source</a> to see how it works.</p></span></div></div></div><h2 class="jsx-bb9a15bc0967b3eb heading"><div id="how-is-markdoc-different" class="jsx-bb9a15bc0967b3eb"></div>How is Markdoc different?</h2><p>Markdoc uses a fully declarative approach to composition and flow control, where other solutions⦠<a href="/docs/overview">Read more</a>.</p><h2 class="jsx-bb9a15bc0967b3eb heading"><div id="next-steps" class="jsx-bb9a15bc0967b3eb"></div>Next steps</h2><ul><li><a href="/docs/getting-started">Install Markdoc</a></li><li><a href="/docs/syntax">Explore the syntax</a></li></ul></article></div></section></div></div><div class="jsx-3989626654 flex container"><div class="jsx-3989626654 click-away"></div><section class="jsx-3989626654 sandbox"><button class="jsx-3989626654"><kbd class="jsx-3989626654">CMD + J / Esc</kbd></button></section></div></article></main></div><div class="footer-bar"><footer class="jsx-fedc8df44ce807b5 desktop"><div class="jsx-fedc8df44ce807b5 flex"><div class="jsx-fedc8df44ce807b5 left gap"><a target="_blank" href="https://stripe.com"><svg title="Built by Stripe" width="99" height="28" viewBox="0 0 99 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.98432 20H6.27432C8.44932 20 9.81432 18.905 9.81432 17.03C9.81432 15.665 9.00432 14.72 7.78932 14.39C8.61432 14.105 9.45432 13.415 9.45432 12.035C9.45432 10.235 8.23932 9.23 5.95932 9.23H1.98432V20ZM3.37932 13.85V10.445H5.83932C7.27932 10.445 8.07432 11 8.07432 12.155C8.07432 13.295 7.27932 13.85 5.83932 13.85H3.37932ZM3.37932 15.08H6.21432C7.65432 15.08 8.43432 15.83 8.43432 16.925C8.43432 18.035 7.65432 18.785 6.21432 18.785H3.37932V15.08ZM18.0294 12.155H16.6794V16.88C16.6794 18.185 15.6894 18.92 14.7144 18.92C13.5594 18.92 13.0794 18.17 13.0794 17.06V12.155H11.7294V17.345C11.7294 19.01 12.6744 20.165 14.3544 20.165C15.4644 20.165 16.2294 19.58 16.6794 18.92V20H18.0294V12.155ZM20.5112 10.79H21.9812V9.23H20.5112V10.79ZM21.9212 12.155H20.5712V20H21.9212V12.155ZM25.8247 9.23H24.4747V20H25.8247V9.23ZM28.5882 18.125C28.5882 19.625 29.3532 20.075 30.6882 20.075C31.1382 20.075 31.5282 20.03 31.8732 19.955V18.8C31.5582 18.875 31.3332 18.89 31.0182 18.89C30.3282 18.89 29.9232 18.74 29.9232 17.915V13.31H31.7082V12.155H29.9232V9.86H28.5882V12.155H27.3732V13.31H28.5882V18.125ZM41.0199 20.165C43.1949 20.165 44.4399 18.305 44.4399 16.085C44.4399 13.85 43.1949 12.005 41.0199 12.005C39.9249 12.005 39.0549 12.53 38.5899 13.295V9.23H37.2399V20H38.5899V18.86C39.0549 19.64 39.9249 20.165 41.0199 20.165ZM38.5599 15.815C38.5599 13.985 39.6699 13.19 40.7799 13.19C42.2499 13.19 43.0749 14.39 43.0749 16.085C43.0749 17.765 42.2499 18.98 40.7799 18.98C39.6699 18.98 38.5599 18.17 38.5599 16.37V15.815ZM49.1804 20.855L52.5554 12.155H51.1454L48.9704 18.155L46.7654 12.155H45.3404L48.2504 19.715L47.8754 20.645C47.5604 21.425 47.2454 21.635 46.6604 21.635C46.4354 21.635 46.2704 21.62 46.0154 21.56V22.73C46.2554 22.775 46.4204 22.79 46.7504 22.79C48.1154 22.79 48.7304 22.04 49.1804 20.855Z" fill="var(--dark)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M98.7993 15.7837C98.7993 12.8784 97.3871 10.5861 94.688 10.5861C91.9774 10.5861 90.3374 12.8784 90.3374 15.761C90.3374 19.1768 92.2735 20.9018 95.0524 20.9018C96.4077 20.9018 97.4327 20.5954 98.2071 20.1642V17.8945C97.4327 18.2803 96.5443 18.5186 95.4168 18.5186C94.3121 18.5186 93.3327 18.1328 93.2074 16.7937H98.7766C98.7766 16.6461 98.7993 16.056 98.7993 15.7837ZM93.1732 14.7056C93.1732 13.4232 93.9591 12.8898 94.6766 12.8898C95.3713 12.8898 96.1116 13.4232 96.1116 14.7056H93.1732Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M85.9413 10.5861C84.8251 10.5861 84.1076 11.1081 83.709 11.4712L83.561 10.7676H81.0554V23.9999L83.9026 23.3985L83.914 20.1869C84.324 20.4819 84.9276 20.9018 85.9299 20.9018C87.9685 20.9018 89.8249 19.2676 89.8249 15.6702C89.8135 12.3791 87.9343 10.5861 85.9413 10.5861ZM85.2579 18.4052C84.586 18.4052 84.1874 18.1668 83.914 17.8718L83.9026 13.6615C84.1988 13.3324 84.6088 13.1054 85.2579 13.1054C86.2943 13.1054 87.0118 14.263 87.0118 15.7496C87.0118 17.2703 86.3057 18.4052 85.2579 18.4052Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M77.1377 9.91656L79.9963 9.30374V7L77.1377 7.60147V9.91656Z" fill="var(--stripe)"></path><path d="M79.9963 10.7791H77.1377V20.709H79.9963V10.7791Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M74.074 11.6188L73.8918 10.779H71.4318V20.709H74.279V13.9793C74.9509 13.1055 76.0898 13.2644 76.4429 13.3892V10.779C76.0784 10.6429 74.7459 10.3932 74.074 11.6188Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M68.3796 8.31641L65.6007 8.90653L65.5894 17.9966C65.5894 19.6762 66.8535 20.9132 68.5391 20.9132C69.473 20.9132 70.1563 20.743 70.5321 20.5387V18.235C70.1677 18.3825 68.3682 18.9045 68.3682 17.225V13.1962H70.5321V10.779H68.3682L68.3796 8.31641Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M60.6807 13.6615C60.6807 13.2189 61.0452 13.0487 61.6488 13.0487C62.5143 13.0487 63.6076 13.3097 64.4732 13.775V11.1081C63.5279 10.7336 62.594 10.5861 61.6488 10.5861C59.3368 10.5861 57.7993 11.789 57.7993 13.7977C57.7993 16.9299 62.1271 16.4305 62.1271 17.781C62.1271 18.303 61.6715 18.4732 61.0338 18.4732C60.0885 18.4732 58.8813 18.0874 57.9246 17.5654V20.2663C58.9838 20.7202 60.0543 20.9132 61.0338 20.9132C63.4026 20.9132 65.0313 19.7443 65.0313 17.7129C65.0199 14.3311 60.6807 14.9325 60.6807 13.6615Z" fill="var(--stripe)"></path></svg></a></div><div class="jsx-fedc8df44ce807b5 right gap"><span class="jsx-bbed09f4a18e595f disclaimer">
24This site was<!-- --> <a href="" class="jsx-bbed09f4a18e595f live-edit">built using Markdoc</a></span><div class="jsx-a916debf5e95c656 theme-toggle"><button class="jsx-a916debf5e95c656 light"><svg class="sun" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8.79932" cy="8" r="4" fill="currentColor"></circle><circle class="ray" cx="8.79932" cy="1" r="1" fill="currentColor"></circle><circle class="ray" cx="8.79932" cy="15" r="1" fill="currentColor"></circle><circle class="ray" cx="1.79932" cy="8" r="1" transform="rotate(-90 1.79932 8)" fill="currentColor"></circle><circle class="ray" cx="15.7993" cy="8" r="1" transform="rotate(-90 15.7993 8)" fill="currentColor"></circle><circle class="ray" cx="3.84927" cy="3.05078" r="1" transform="rotate(-45 3.84927 3.05078)" fill="currentColor"></circle><circle class="ray" cx="13.7487" cy="12.9503" r="1" transform="rotate(-45 13.7487 12.9503)" fill="currentColor"></circle><circle class="ray" cx="3.84961" cy="12.9491" r="1" transform="rotate(-135 3.84961 12.9491)" fill="currentColor"></circle><circle class="ray" cx="13.749" cy="3.04957" r="1" transform="rotate(-135 13.749 3.04957)" fill="currentColor"></circle></svg><span class="jsx-a916debf5e95c656">Light mode</span></button></div></div></div></footer><footer class="jsx-fedc8df44ce807b5 mobile gap"><a target="_blank" href="https://stripe.com"><svg title="Built by Stripe" width="99" height="28" viewBox="0 0 99 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.98432 20H6.27432C8.44932 20 9.81432 18.905 9.81432 17.03C9.81432 15.665 9.00432 14.72 7.78932 14.39C8.61432 14.105 9.45432 13.415 9.45432 12.035C9.45432 10.235 8.23932 9.23 5.95932 9.23H1.98432V20ZM3.37932 13.85V10.445H5.83932C7.27932 10.445 8.07432 11 8.07432 12.155C8.07432 13.295 7.27932 13.85 5.83932 13.85H3.37932ZM3.37932 15.08H6.21432C7.65432 15.08 8.43432 15.83 8.43432 16.925C8.43432 18.035 7.65432 18.785 6.21432 18.785H3.37932V15.08ZM18.0294 12.155H16.6794V16.88C16.6794 18.185 15.6894 18.92 14.7144 18.92C13.5594 18.92 13.0794 18.17 13.0794 17.06V12.155H11.7294V17.345C11.7294 19.01 12.6744 20.165 14.3544 20.165C15.4644 20.165 16.2294 19.58 16.6794 18.92V20H18.0294V12.155ZM20.5112 10.79H21.9812V9.23H20.5112V10.79ZM21.9212 12.155H20.5712V20H21.9212V12.155ZM25.8247 9.23H24.4747V20H25.8247V9.23ZM28.5882 18.125C28.5882 19.625 29.3532 20.075 30.6882 20.075C31.1382 20.075 31.5282 20.03 31.8732 19.955V18.8C31.5582 18.875 31.3332 18.89 31.0182 18.89C30.3282 18.89 29.9232 18.74 29.9232 17.915V13.31H31.7082V12.155H29.9232V9.86H28.5882V12.155H27.3732V13.31H28.5882V18.125ZM41.0199 20.165C43.1949 20.165 44.4399 18.305 44.4399 16.085C44.4399 13.85 43.1949 12.005 41.0199 12.005C39.9249 12.005 39.0549 12.53 38.5899 13.295V9.23H37.2399V20H38.5899V18.86C39.0549 19.64 39.9249 20.165 41.0199 20.165ZM38.5599 15.815C38.5599 13.985 39.6699 13.19 40.7799 13.19C42.2499 13.19 43.0749 14.39 43.0749 16.085C43.0749 17.765 42.2499 18.98 40.7799 18.98C39.6699 18.98 38.5599 18.17 38.5599 16.37V15.815ZM49.1804 20.855L52.5554 12.155H51.1454L48.9704 18.155L46.7654 12.155H45.3404L48.2504 19.715L47.8754 20.645C47.5604 21.425 47.2454 21.635 46.6604 21.635C46.4354 21.635 46.2704 21.62 46.0154 21.56V22.73C46.2554 22.775 46.4204 22.79 46.7504 22.79C48.1154 22.79 48.7304 22.04 49.1804 20.855Z" fill="var(--dark)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M98.7993 15.7837C98.7993 12.8784 97.3871 10.5861 94.688 10.5861C91.9774 10.5861 90.3374 12.8784 90.3374 15.761C90.3374 19.1768 92.2735 20.9018 95.0524 20.9018C96.4077 20.9018 97.4327 20.5954 98.2071 20.1642V17.8945C97.4327 18.2803 96.5443 18.5186 95.4168 18.5186C94.3121 18.5186 93.3327 18.1328 93.2074 16.7937H98.7766C98.7766 16.6461 98.7993 16.056 98.7993 15.7837ZM93.1732 14.7056C93.1732 13.4232 93.9591 12.8898 94.6766 12.8898C95.3713 12.8898 96.1116 13.4232 96.1116 14.7056H93.1732Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M85.9413 10.5861C84.8251 10.5861 84.1076 11.1081 83.709 11.4712L83.561 10.7676H81.0554V23.9999L83.9026 23.3985L83.914 20.1869C84.324 20.4819 84.9276 20.9018 85.9299 20.9018C87.9685 20.9018 89.8249 19.2676 89.8249 15.6702C89.8135 12.3791 87.9343 10.5861 85.9413 10.5861ZM85.2579 18.4052C84.586 18.4052 84.1874 18.1668 83.914 17.8718L83.9026 13.6615C84.1988 13.3324 84.6088 13.1054 85.2579 13.1054C86.2943 13.1054 87.0118 14.263 87.0118 15.7496C87.0118 17.2703 86.3057 18.4052 85.2579 18.4052Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M77.1377 9.91656L79.9963 9.30374V7L77.1377 7.60147V9.91656Z" fill="var(--stripe)"></path><path d="M79.9963 10.7791H77.1377V20.709H79.9963V10.7791Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M74.074 11.6188L73.8918 10.779H71.4318V20.709H74.279V13.9793C74.9509 13.1055 76.0898 13.2644 76.4429 13.3892V10.779C76.0784 10.6429 74.7459 10.3932 74.074 11.6188Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M68.3796 8.31641L65.6007 8.90653L65.5894 17.9966C65.5894 19.6762 66.8535 20.9132 68.5391 20.9132C69.473 20.9132 70.1563 20.743 70.5321 20.5387V18.235C70.1677 18.3825 68.3682 18.9045 68.3682 17.225V13.1962H70.5321V10.779H68.3682L68.3796 8.31641Z" fill="var(--stripe)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M60.6807 13.6615C60.6807 13.2189 61.0452 13.0487 61.6488 13.0487C62.5143 13.0487 63.6076 13.3097 64.4732 13.775V11.1081C63.5279 10.7336 62.594 10.5861 61.6488 10.5861C59.3368 10.5861 57.7993 11.789 57.7993 13.7977C57.7993 16.9299 62.1271 16.4305 62.1271 17.781C62.1271 18.303 61.6715 18.4732 61.0338 18.4732C60.0885 18.4732 58.8813 18.0874 57.9246 17.5654V20.2663C58.9838 20.7202 60.0543 20.9132 61.0338 20.9132C63.4026 20.9132 65.0313 19.7443 65.0313 17.7129C65.0199 14.3311 60.6807 14.9325 60.6807 13.6615Z" fill="var(--stripe)"></path></svg></a><div class="jsx-a916debf5e95c656 theme-toggle"><button class="jsx-a916debf5e95c656 light">
24<svg class="sun" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8.79932" cy="8" r="4" fill="currentColor"></circle><circle class="ray" cx="8.79932" cy="1" r="1" fill="currentColor"></circle><circle class="ray" cx="8.79932" cy="15" r="1" fill="currentColor"></circle><circle class="ray" cx="1.79932" cy="8" r="1" transform="rotate(-90 1.79932 8)" fill="currentColor"></circle><circle class="ray" cx="15.7993" cy="8" r="1" transform="rotate(-90 15.7993 8)" fill="currentColor"></circle><circle class="ray" cx="3.84927" cy="3.05078" r="1" transform="rotate(-45 3.84927 3.05078)" fill="currentColor"></circle><circle class="ray" cx="13.7487" cy="12.9503" r="1" transform="rotate(-45 13.7487 12.9503)" fill="currentColor"></circle><circle class="ray" cx="3.84961" cy="12.9491" r="1" transform="rotate(-135 3.84961 12.9491)" fill="currentColor"></circle><circle class="ray" cx="13.749" cy="3.04957" r="1" transform="rotate(-135 13.749 3.04957)" fill="currentColor"></circle></svg><span class="jsx-a916debf5e95c656">Light mode</span></button></div><span class="jsx-bbed09f4a18e595f disclaimer">This site was<!-- --> <a href="" class="jsx-bbed09f4a18e595f live-edit">built using Markdoc</a></span></footer></div></div></div>
24<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"markdoc":{"content":{"$$mdtype":"Tag","name":"Document","attributes":{"source":"---\ntitle: Sandbox\n---\n\n{% sandbox height=\"calc(100vh - var(--nav-height))\" /%}\n"},"children":[{"$$mdtype":"Tag","name":"Sandbox","attributes":{"height":"calc(100vh - var(--nav-height))"},"children":[]}]},"frontmatter":{"title":"Sandbox"},"file":{"path":"/sandbox.md"}}},"__N_SSG":true},"page":"/sandbox","query":{},"buildId":"K1Cuta1VsHD6dv8AYhLXp","isFallback":false,"gsp":true,"locale":"en","locales":["en"],"defaultLocale":"en","scriptLoader":[]}</script>
24</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.