CINXE.COM

<!DOCTYPE html><html lang="en" dir="ltr" data-has-toc data-has-sidebar data-theme="dark" class="astro-2yxxy2tc"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Create a new extension | 2.23.3</title><link rel="canonical" href="https://www.netlify.com/sdk/get-started/create-a-new-extension/"/><link rel="sitemap" href="/sitemap-index.xml"/><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Roboto+Mono:400"/><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NMKKF2M');</script><link rel="sitemap" href="/sitemap-index.xml"/><link rel="shortcut icon" href="/sdk/favicon.svg" type="image/svg+xml"/><meta name="generator" content="Astro v4.16.18"/><meta name="generator" content="Starlight v0.28.1"/><meta property="og:title" content="Create a new extension"/><meta property="og:type" content="article"/><meta property="og:url" content="https://www.netlify.com/sdk/get-started/create-a-new-extension/"/><meta property="og:locale" content="en"/><meta property="og:description" content="Quickstart for the Netlify SDK. Install and generate the boilerplate files for an extension, test it locally, and then publish it."/><meta property="og:site_name" content="2.23.3"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="Quickstart for the Netlify SDK. Install and generate the boilerplate files for an extension, test it locally, and then publish it."/><meta property="og:image" content="https://www.netlify.com/sdk/sdk-og.png"/><meta name="twitter:image" content="https://www.netlify.com/sdk/sdk-og.png"/><meta name="slack-app-id" content="A05P27DR8C8"/><script> window.StarlightThemeProvider = (() => { const storedTheme = typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme'); const theme = storedTheme || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark'; return { updatePickers(theme = storedTheme || 'auto') { document.querySelectorAll('starlight-theme-select').forEach((picker) => { const select = picker.querySelector('select'); if (select) select.value = theme; /** @type {HTMLTemplateElement | null} */ const tmpl = document.querySelector(`#theme-icons`); const newIcon = tmpl && tmpl.content.querySelector('.' + theme); if (newIcon) { const oldIcon = picker.querySelector('svg.label-icon'); if (oldIcon) { oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes); } } }); }, }; })(); </script><template id="theme-icons"><svg aria-hidden="true" class="light astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/></svg> <svg aria-hidden="true" class="dark astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/></svg> <svg aria-hidden="true" class="auto astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> </template><link rel="stylesheet" href="/_astro/index.DiUrxZYH.css"> <style>:root{--sl-badge-default-border: var(--sl-color-accent);--sl-badge-default-bg: var(--sl-color-accent-low);--sl-badge-default-text: #fff;--sl-badge-note-border: var(--sl-color-blue);--sl-badge-note-bg: var(--sl-color-blue-low);--sl-badge-note-text: #fff;--sl-badge-danger-border: var(--sl-color-red);--sl-badge-danger-bg: var(--sl-color-red-low);--sl-badge-danger-text: #fff;--sl-badge-success-border: var(--sl-color-green);--sl-badge-success-bg: var(--sl-color-green-low);--sl-badge-success-text: #fff;--sl-badge-caution-border: var(--sl-color-orange);--sl-badge-caution-bg: var(--sl-color-orange-low);--sl-badge-caution-text: #fff;--sl-badge-tip-border: var(--sl-color-purple);--sl-badge-tip-bg: var(--sl-color-purple-low);--sl-badge-tip-text: #fff}[data-theme=light]:root{--sl-badge-default-bg: var(--sl-color-accent-high);--sl-badge-note-bg: var(--sl-color-blue-high);--sl-badge-danger-bg: var(--sl-color-red-high);--sl-badge-success-bg: var(--sl-color-green-high);--sl-badge-caution-bg: var(--sl-color-orange-high);--sl-badge-tip-bg: var(--sl-color-purple-high)}.sl-badge:where(.astro-fnxivpkf){display:inline-block;border:1px solid var(--sl-color-border-badge);border-radius:.25rem;font-family:var(--sl-font-system-mono);line-height:normal;color:var(--sl-color-text-badge);background-color:var(--sl-color-bg-badge);overflow-wrap:anywhere}.sidebar-content .sl-badge:where(.astro-fnxivpkf){line-height:1;font-size:var(--sl-text-xs);padding:.125rem .375rem}.sidebar-content a[aria-current=page]>.sl-badge:where(.astro-fnxivpkf){--sl-color-bg-badge: transparent;--sl-color-border-badge: currentColor;color:inherit}.default:where(.astro-fnxivpkf){--sl-color-bg-badge: var(--sl-badge-default-bg);--sl-color-border-badge: var(--sl-badge-default-border);--sl-color-text-badge: var(--sl-badge-default-text)}.note:where(.astro-fnxivpkf){--sl-color-bg-badge: var(--sl-badge-note-bg);--sl-color-border-badge: var(--sl-badge-note-border);--sl-color-text-badge: var(--sl-badge-note-text)}.danger:where(.astro-fnxivpkf){--sl-color-bg-badge: var(--sl-badge-danger-bg);--sl-color-border-badge: var(--sl-badge-danger-border);--sl-color-text-badge: var(--sl-badge-danger-text)}.success:where(.astro-fnxivpkf){--sl-color-bg-badge: var(--sl-badge-success-bg);--sl-color-border-badge: var(--sl-badge-success-border);--sl-color-text-badge: var(--sl-badge-success-text)}.tip:where(.astro-fnxivpkf){--sl-color-bg-badge: var(--sl-badge-tip-bg);--sl-color-border-badge: var(--sl-badge-tip-border);--sl-color-text-badge: var(--sl-badge-tip-text)}.caution:where(.astro-fnxivpkf){--sl-color-bg-badge: var(--sl-badge-caution-bg);--sl-color-border-badge: var(--sl-badge-caution-border);--sl-color-text-badge: var(--sl-badge-caution-text)}.small:where(.astro-fnxivpkf){font-size:var(--sl-text-xs);padding:.125rem .25rem}.medium:where(.astro-fnxivpkf){font-size:var(--sl-text-sm);padding:.175rem .35rem}.large:where(.astro-fnxivpkf){font-size:var(--sl-text-base);padding:.225rem .45rem}.sl-markdown-content :is(h1,h2,h3,h4,h5,h6) .sl-badge:where(.astro-fnxivpkf){vertical-align:middle} svg:where(.astro-2nn42ynm){color:var(--sl-icon-color);font-size:var(--sl-icon-size, 1em);width:1em;height:1em} starlight-tabs:where(.astro-fgycviln){display:block}.tablist-wrapper:where(.astro-fgycviln){overflow-x:auto}:where(.astro-fgycviln)[role=tablist]{display:flex;list-style:none;border-bottom:2px solid var(--sl-color-gray-5);padding:0}.tab:where(.astro-fgycviln){margin-bottom:-2px}.tab:where(.astro-fgycviln)>:where(.astro-fgycviln)[role=tab]{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem;text-decoration:none;border-bottom:2px solid var(--sl-color-gray-5);color:var(--sl-color-gray-3);outline-offset:var(--sl-outline-offset-inside);overflow-wrap:initial}.tab:where(.astro-fgycviln) :where(.astro-fgycviln)[role=tab][aria-selected=true]{color:var(--sl-color-white);border-color:var(--sl-color-text-accent);font-weight:600}.tablist-wrapper:where(.astro-fgycviln)~[role=tabpanel]{margin-top:1rem} .sl-steps{--bullet-size: calc(var(--sl-line-height) * 1rem);--bullet-margin: .375rem;list-style:none;counter-reset:steps-counter var(--sl-steps-start, 0);padding-inline-start:0}.sl-steps>li{counter-increment:steps-counter;position:relative;padding-inline-start:calc(var(--bullet-size) + 1rem);padding-bottom:1px;min-height:calc(var(--bullet-size) + var(--bullet-margin))}.sl-steps>li+li{margin-top:0}.sl-steps>li:before{content:counter(steps-counter);position:absolute;top:0;inset-inline-start:0;width:var(--bullet-size);height:var(--bullet-size);line-height:var(--bullet-size);font-size:var(--sl-text-xs);font-weight:600;text-align:center;color:var(--sl-color-white);background-color:var(--sl-color-gray-6);border-radius:99rem;box-shadow:inset 0 0 0 1px var(--sl-color-gray-5)}.sl-steps>li:after{--guide-width: 1px;content:"";position:absolute;top:calc(var(--bullet-size) + var(--bullet-margin));bottom:var(--bullet-margin);inset-inline-start:calc((var(--bullet-size) - var(--guide-width)) / 2);width:var(--guide-width);background-color:var(--sl-color-hairline-light)}.sl-steps>li>:first-child{--lh: calc(1em * var(--sl-line-height));--shift-y: calc(.5 * (var(--bullet-size) - var(--lh)));transform:translateY(var(--shift-y));margin-bottom:var(--shift-y)}.sl-steps>li>:first-child:where(h1,h2,h3,h4,h5,h6){--lh: calc(1em * var(--sl-line-height-headings))}@supports (--prop: 1lh){.sl-steps>li>:first-child{--lh: 1lh}} .sl-link-button:where(.astro-zen7zwuc){align-items:center;border:1px solid transparent;border-radius:999rem;display:inline-flex;font-size:var(--sl-text-sm);gap:.5em;line-height:1.1875;outline-offset:.25rem;padding:.4375rem 1.125rem;text-decoration:none}.sl-link-button:where(.astro-zen7zwuc).primary{background:var(--sl-color-text-accent);border-color:var(--sl-color-text-accent);color:var(--sl-color-black)}.sl-link-button:where(.astro-zen7zwuc).primary:hover{color:var(--sl-color-black)}.sl-link-button:where(.astro-zen7zwuc).secondary{border-color:inherit;color:var(--sl-color-white)}.sl-link-button:where(.astro-zen7zwuc).minimal{color:var(--sl-color-white);padding-inline:0}.sl-link-button:where(.astro-zen7zwuc) svg{flex-shrink:0}@media (min-width: 50rem){.sl-link-button:where(.astro-zen7zwuc){font-size:var(--sl-text-base);padding:.9375rem 1.25rem}}.sl-markdown-content .sl-link-button:where(.astro-zen7zwuc){margin-inline-end:1rem}.sl-markdown-content .sl-link-button:where(.astro-zen7zwuc):not(:where(p *)){margin-block:1rem} </style><script type="module" src="/_astro/hoisted.DNXxk2ll.js"></script> <script type="module" src="/_astro/page.7qqag-5g.js"></script><style>div:where(.astro-fr5qezfu){border:1px solid var(--colorGrayLight);color:var(--colorTextMutedInverse);border-radius:var(--bigRadius);box-shadow:0 2px 4px #0e1e251f;padding:.4rem .6rem;margin-top:.8rem;width:-moz-fit-content;width:fit-content;[data-theme=dark] &{border-color:var(--colorGray)}}:root div:where(.astro-fr5qezfu){font-size:var(--defaultText)}:root .beta-badge:where(.astro-fr5qezfu){color:var(--colorWarningText);background-color:var(--colorWarningLight);padding-left:6px;padding-right:6px;border-radius:40px;text-decoration:none;font-weight:var(--bold);[data-theme=dark] &{color:var(--facetsGold200)}}:root .beta-badge:where(.astro-fr5qezfu):hover{color:var(--colorWarning);text-decoration:underline} </style><style>div:where(.astro-taqzzmlm){border:1px solid var(--colorGrayLight);border-radius:var(--bigRadius);box-shadow:0 2px 4px #0e1e251f;padding:.4rem .6rem;margin-top:.8rem;width:-moz-fit-content;width:fit-content}:root div:where(.astro-taqzzmlm){font-size:var(--defaultText)}:root .beta-badge:where(.astro-taqzzmlm){color:var(--colorWarningText);background-color:var(--colorWarningLight);padding-left:6px;padding-right:6px;border-radius:40px;text-decoration:none;font-weight:var(--bold)}:root .beta-badge:where(.astro-taqzzmlm):hover{color:var(--colorWarning);text-decoration:underline} </style><style>:root[data-theme=dark] #svg-downvote circle{fill:var(--facetsRed900)}:root[data-theme=dark] #svg-downvote circle:hover{fill:var(--facetsRed800)}:root[data-theme=dark] #svg-downvote path{color:var(--facetsRed400)}:root[data-theme=dark] #downvote:checked+label #svg-downvote circle{fill:var(--facetsRed800)}#svg-downvote path{color:#6b2120}#svg-downvote circle{fill:var(--facetsRed000)}#svg-downvote circle:hover{fill:var(--facetsRed100)}#downvote:checked+label #svg-downvote circle{fill:var(--facetsRed400)} </style><style>#none:where(.astro-77rygnu7){display:none}#upvote:where(.astro-77rygnu7),#downvote:where(.astro-77rygnu7){height:0;opacity:0;position:absolute;width:0}#upvote:where(.astro-77rygnu7),#downvote:where(.astro-77rygnu7)+svg:where(.astro-77rygnu7){cursor:pointer}.vote-button:where(.astro-77rygnu7){align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:100%;justify-content:center;margin:10px;padding:0;width:100%}form:where(.astro-77rygnu7)[name=feedback] .votes:where(.astro-77rygnu7){display:flex;margin-top:0}.feedback:where(.astro-77rygnu7){align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}textarea:where(.astro-77rygnu7){background-color:var(--colorBg);border:1px solid var(--colorBorder);border-radius:var(--bigRadius);margin:1.25rem 0;min-height:130px;padding:.5rem 1rem;transition:box-shadow ease-in-out var(--transitionDuration);width:100%}textarea:where(.astro-77rygnu7):focus{box-shadow:0 0 0 2px var(--colorTeal),0 0 1px 0 var(--colorGrayDarkest);outline:2px solid transparent}form:where(.astro-77rygnu7)[name=feedback] .form-submit:where(.astro-77rygnu7){background-color:var(--colorButtonSecondary);border:none;border-radius:var(--smallRadius);color:var(--colorButtonSecondaryText);cursor:pointer;font-family:var(--fontFamilyHeading);font-size:var(--defaultText);font-weight:600;line-height:1;margin:0;min-width:20%;padding:.75rem 1.5rem;transition:all var(--transitionDurationShort)}form:where(.astro-77rygnu7)[name=feedback] .form-submit:where(.astro-77rygnu7):hover{background-color:var(--colorButtonSecondaryHover)}form:where(.astro-77rygnu7)[name=feedback] .form-submit:where(.astro-77rygnu7):disabled{background-color:var(--colorButtonTertiary);color:var(--colorTextNeutral);cursor:not-allowed}form:where(.astro-77rygnu7)[name=feedback],.success-message:where(.astro-77rygnu7){border-top:1px solid var(--sl-color-hairline);margin-top:3rem;padding:1.5rem 0}form:where(.astro-77rygnu7)[name=feedback] .feedback:where(.astro-77rygnu7) h4:where(.astro-77rygnu7),.success-message:where(.astro-77rygnu7) h4:where(.astro-77rygnu7){font-family:var(--sl-font-system);font-size:1.25rem;font-weight:600;margin:1em 0}form:where(.astro-77rygnu7)[name=feedback] .feedback:where(.astro-77rygnu7) p:where(.astro-77rygnu7),.success-message:where(.astro-77rygnu7) p:where(.astro-77rygnu7){margin:0 0 .75rem}.hidden:where(.astro-77rygnu7){visibility:hidden}.success-message:where(.astro-77rygnu7){display:none} </style><style>footer:where(.astro-sz7xmlte){border-top:1px solid var(--sl-color-hairline);padding:1rem 0}.footer_nav:where(.astro-sz7xmlte){list-style-type:none;display:flex;padding-inline-start:0;justify-content:center}.footer_nav:where(.astro-sz7xmlte) li:where(.astro-sz7xmlte){margin:.25rem 1rem 1rem 0;font-size:15px}.footer_nav:where(.astro-sz7xmlte) li:where(.astro-sz7xmlte) a:where(.astro-sz7xmlte){color:var(--sl-color-text);text-decoration:none}.footer_copyright:where(.astro-sz7xmlte){font-size:15px;text-align:center} </style><style>.netlify-panel:where(.astro-vweeohgf){line-height:1.15;border-left-style:solid;border-left-width:var(--micro);margin:var(--tiny) 0;padding:var(--tiny) var(--small) var(--micro);border-radius:8px;&.warning{background-color:var(--colorWarningLight);border-color:var(--colorWarning);.title,.panel-content,#question-icon{color:var(--colorWarningText)}& p a{color:var(--colorWarningText)}}&.note{background-color:var(--colorNoteLight);border-color:var(--colorNote);.title,.panel-content,#question-icon{color:var(--colorNoteText)}& p a{color:var(--colorNoteText)}}&.tip{background-color:var(--colorTipLight);border-color:var(--colorTip);.title,.panel-content,#question-icon{color:var(--colorTipText)}& p a{color:var(--colorTipText)}}&.danger{background-color:var(--colorDangerLight);border-color:var(--colorDanger);.title,.panel-content,#question-icon{color:var(--colorDangerText)}& p a{color:var(--colorDangerText)}}}.title:where(.astro-vweeohgf){display:flex;font-weight:var(--semibold);font-size:var(--defaultText)}.panel-content:where(.astro-vweeohgf){line-height:1.67;margin-top:var(--micro);margin-bottom:var(--micro);word-wrap:break-word;font-size:var(--smallText)}#icon:where(.astro-vweeohgf){margin-right:.5rem;height:1.3rem;width:1.3rem} </style><style>:root[data-theme=dark] #svg-upvote circle{fill:var(--facetsTeal900)}:root[data-theme=dark] #svg-upvote path{color:var(--facetsTeal200)}:root[data-theme=dark] #svg-upvote circle:hover{fill:var(--facetsTeal700)}:root[data-theme=dark] #upvote:checked+label #svg-upvote circle{fill:var(--facetsTeal700)}#svg-upvote path{color:#145f69}#svg-upvote circle{fill:var(--facetsTeal000)}#svg-upvote circle:hover{fill:var(--facetsTeal100)}#upvote:checked+label #svg-upvote circle{fill:var(--facetsTeal400)} </style><script src="/_astro/FeedbackForm.astro_astro_type_script_index_0_lang.CxPg6FTE.js" type="module"></script><script src="/_astro/Tabs.astro_astro_type_script_index_0_lang.3nBd5krW.js" type="module"></script></head> <body class="astro-2yxxy2tc"> <a href="#_top" class="astro-un6n26nc">Skip to content</a> <div class="page sl-flex astro-orpkluty"> <header class="header astro-orpkluty"><div class="header sl-flex astro-escs5d3c"> <div class="title-wrapper sl-flex astro-escs5d3c"> <a href="/" class="site-title sl-flex astro-qqwfsgyo"> <img class="light:sl-hidden astro-qqwfsgyo" alt="Netlify SDK Docs" src="/_astro/logo-dark.CGIhDU-N.svg" width="133" height="40"> <img class="dark:sl-hidden astro-qqwfsgyo" alt="Netlify SDK Docs" src="/_astro/logo-light.Dzqm5Mvw.svg" width="133" height="40"> <span class="astro-qqwfsgyo"> 2.23.3 </span> </a> </div> <div class="sl-flex astro-escs5d3c"> <site-search data-translations="{"placeholder":"Search"}" class="astro-otpdt6jm"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-otpdt6jm"> <svg aria-hidden="true" class="astro-otpdt6jm astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg> <span class="sl-hidden md:sl-block astro-otpdt6jm" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-otpdt6jm" style="display: none;"> <kbd class="astro-otpdt6jm">Ctrl</kbd><kbd class="astro-otpdt6jm">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-otpdt6jm"> <div class="dialog-frame sl-flex astro-otpdt6jm"> <button data-close-modal class="sl-flex md:sl-hidden astro-otpdt6jm"> Cancel </button> <div class="search-container astro-otpdt6jm"> <div id="starlight__search" class="astro-otpdt6jm"></div> </div> </div> </dialog> </site-search> <script> (() => { const openBtn = document.querySelector("button[data-open-modal]"); const shortcut = openBtn?.querySelector("kbd"); if (!openBtn || !(shortcut instanceof HTMLElement)) return; const platformKey = shortcut.querySelector("kbd"); if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { platformKey.textContent = "⌘"; openBtn.setAttribute("aria-keyshortcuts", "Meta+K"); } shortcut.style.display = ""; })(); </script> </div> <div class="sl-hidden md:sl-flex right-group astro-escs5d3c"> <div class="sl-flex social-icons astro-escs5d3c"> <a href="https://developers.netlify.com/feed/tag/sdk" class="external-link astro-aycwkagb" target="_blank">Changelog</a> </div> <starlight-theme-select> <label style="--sl-select-width: 6.25em" class="astro-t62vsnnj"> <span class="sr-only astro-t62vsnnj">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-t62vsnnj astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> <select value="auto" class="astro-t62vsnnj"> <option value="dark" class="astro-t62vsnnj">Dark</option><option value="light" class="astro-t62vsnnj">Light</option><option value="auto" selected class="astro-t62vsnnj">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-t62vsnnj astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-theme-select> <script> StarlightThemeProvider.updatePickers(); </script> </div> </div> </header> <nav class="sidebar astro-orpkluty" aria-label="Main"> <starlight-menu-button class="astro-jlihn6fg"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-jlihn6fg"> <svg aria-hidden="true" class="astro-jlihn6fg astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg> </button> </starlight-menu-button> <div id="starlight__sidebar" class="sidebar-pane astro-orpkluty"> <div class="sidebar-content sl-flex astro-orpkluty"> <sl-sidebar-state-persist data-hash="0zy4z1g" class="astro-gw3ex3m2"> <script> (() => { try { if (!matchMedia('(min-width: 50em)').matches) return; /** @type {HTMLElement | null} */ const target = document.querySelector('sl-sidebar-state-persist'); const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0'); if (!target || !state || target.dataset.hash !== state.hash) return; window._starlightScrollRestore = state.scroll; customElements.define( 'sl-sidebar-restore', class SidebarRestore extends HTMLElement { connectedCallback() { try { const idx = parseInt(this.dataset.index || ''); const details = this.closest('details'); if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx]; } catch {} } } ); } catch {} })(); </script> <ul class="top-level astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="https://docs.netlify.com/" class="large external-link astro-a4avwkba" target="_blank" class="external-link"> <span class="astro-a4avwkba">Netlify user docs</span> </a> </li><li class="astro-a4avwkba"> <details open class="astro-a4avwkba"> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Get started</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/get-started/introduction" class="astro-a4avwkba"> <span class="astro-a4avwkba">Introduction</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/get-started/create-a-new-extension" aria-current="page" class="astro-a4avwkba"> <span class="astro-a4avwkba">Create a new extension</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/get-started/anatomy-of-an-extension" class="astro-a4avwkba"> <span class="astro-a4avwkba">Anatomy of an extension</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/get-started/installation-flow" class="astro-a4avwkba"> <span class="astro-a4avwkba">Installation flow</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/get-started/environment-variables" class="astro-a4avwkba"> <span class="astro-a4avwkba">Environment variables</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/get-started/requirements-and-limitations" class="astro-a4avwkba"> <span class="astro-a4avwkba">Requirements & limitations</span> </a> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="10"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Migration guide</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/get-started/migration-guide/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/get-started/migration-guide/migration-steps/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Step-by-step instructions</span> </a> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Connectors</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/connectors/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="11"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Develop</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/define-data-model/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Data model</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/sync-data/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Sync data</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/configuration-options/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Configuration options</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/check-permissions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Check permissions</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/write-data/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Write data</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/manage-assets/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Manage assets</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/localization/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Localization</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/scheduled-publishing/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Scheduled publishing</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/develop/dynamic-connectors/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Dynamic connectors</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/build/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Build</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/connectors/debug-and-test/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Debug & test</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="2"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Build event handlers</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/build-event-handlers/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/build-event-handlers/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/build-event-handlers/hook-into-events/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Hook into build events</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/build-event-handlers/values-and-methods/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Values & methods</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/build-event-handlers/debug-and-test/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Debug & test</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/build-event-handlers/migrate-build-plugins/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Migrate Build Plugins</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="3"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/functions/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/functions/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/functions/debug-and-test/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Debug & test</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="4"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Edge Functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/edge-functions/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/edge-functions/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/edge-functions/debug-and-test/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Debug & test</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="5"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Endpoints</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/endpoints/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/endpoints/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/endpoints/values-and-methods/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Values & methods</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/endpoints/debug-and-test/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Debug & test</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/endpoints/use-cases/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Use cases</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/endpoints/trpc/" class="astro-a4avwkba"> <span class="astro-a4avwkba">tRPC integration</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="6"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Extension UI</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/extension-ui/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/extension-ui/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/extension-ui/develop-locally/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Develop locally</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/extension-ui/add-a-new-surface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Add a new surface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/extension-ui/call-endpoints/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Call endpoints</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="7"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">OAuth</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/oauth/overview/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/oauth/get-started/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Get started</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/oauth/best-practices/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Best practices</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="8"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Publish and manage</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/publish/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/publish/publish-extensions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Publish extensions</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/publish/manage-extensions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Manage extensions</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/publish/partner-extensions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Partner extensions</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/publish/deploy-to-netlify-button/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Deploy to Netlify button</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="9"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Reference docs</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/reference/overview" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <details open class="astro-a4avwkba"> <sl-sidebar-restore data-index="12"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">SDK</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="15"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Classes</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="20"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">NetlifyConnector</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Overview</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/assets/" class="astro-a4avwkba"> <span class="astro-a4avwkba">assets</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/documents/" class="astro-a4avwkba"> <span class="astro-a4avwkba">documents</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/hasaccess/" class="astro-a4avwkba"> <span class="astro-a4avwkba">hasAccess</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/init/" class="astro-a4avwkba"> <span class="astro-a4avwkba">init</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/model/" class="astro-a4avwkba"> <span class="astro-a4avwkba">model</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/proxyschema/" class="astro-a4avwkba"> <span class="astro-a4avwkba">proxySchema</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/scheduledactions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">scheduledActions</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyconnector/sync/" class="astro-a4avwkba"> <span class="astro-a4avwkba">sync</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyextension/" class="astro-a4avwkba"> <span class="astro-a4avwkba">NetlifyExtension</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/classes/netlifyextensionclient/" class="astro-a4avwkba"> <span class="astro-a4avwkba">NetlifyExtensionClient</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/interfaces" class="astro-a4avwkba"> <span class="astro-a4avwkba">Interfaces</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/reference/commands" class="astro-a4avwkba"> <span class="astro-a4avwkba">Commands</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details open class="astro-a4avwkba"> <sl-sidebar-restore data-index="13"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">UI Endpoints</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="16"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">@netlify/sdk/ui/functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="21"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Type Aliases</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/type-aliases/netlifysdkcontext/" class="astro-a4avwkba"> <span class="astro-a4avwkba">NetlifySDKContext</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/type-aliases/netlifysdkhandler/" class="astro-a4avwkba"> <span class="astro-a4avwkba">NetlifySDKHandler</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="22"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/functions/withnetlifysdkcontext/" class="astro-a4avwkba"> <span class="astro-a4avwkba">withNetlifySDKContext</span> </a> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="17"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">@netlify/sdk/ui/functions/trpc</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="23"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Type Aliases</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/trpc/type-aliases/connectrouter/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ConnectRouter</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/trpc/type-aliases/context/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Context</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/trpc/type-aliases/createconnectrouteroptions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CreateConnectRouterOptions</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/trpc/type-aliases/createnetlifytrpchandleroptions/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CreateNetlifyTRPCHandlerOptions</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="24"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/trpc/functions/createconnectrouter/" class="astro-a4avwkba"> <span class="astro-a4avwkba">createConnectRouter</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api-endpoints/netlify/sdk/ui/functions/trpc/functions/createnetlifytrpchandler/" class="astro-a4avwkba"> <span class="astro-a4avwkba">createNetlifyTRPCHandler</span> </a> </li> </ul> </details> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details open class="astro-a4avwkba"> <sl-sidebar-restore data-index="14"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">React</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="18"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">@netlify/sdk/ui/react</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="25"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Enumerations</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/enumerations/surfaces/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Surfaces</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="26"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/functions/usenetlifyextensionuifetch/" class="astro-a4avwkba"> <span class="astro-a4avwkba">useNetlifyExtensionUIFetch</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/functions/usenetlifysdk/" class="astro-a4avwkba"> <span class="astro-a4avwkba">useNetlifySDK</span> </a> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="19"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">@netlify/sdk/ui/react/components</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="27"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Type Aliases</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/alertprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">AlertProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/buttongroupprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ButtonGroupProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/buttonprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ButtonProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/cardfooterprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CardFooterProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/cardprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CardProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/cardtitleprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CardTitleProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/checkboxprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CheckboxProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/clipboardbuttonprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ClipboardButtonProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/codeblockprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CodeBlockProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/connectconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ConnectConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/connectedconnectformprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ConnectedConnectFormProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/decorativeiconprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">DecorativeIconProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/dropdownprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">DropdownProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/extensionsettingsprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ExtensionSettingsProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/formerrorprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">FormErrorProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/linkprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">LinkProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/listloaderprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ListLoaderProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/netlifyextensionuiprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">NetlifyExtensionUIProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/selectprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SelectProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/settingscardprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SettingsCardProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/siteaccessconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteAccessConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/sitebuilddeployconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteBuildDeployConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/siteconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/sitedeploysurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteDeploySurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/sitegeneralconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteGeneralConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/sitelogssurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteLogsSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/sitemetricssurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteMetricsSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/sitenotificationsconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteNotificationsConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/smartformfieldmetadata/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SmartFormFieldMetadata</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/smartformfieldsmetadata/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SmartFormFieldsMetadata</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/smartformprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SmartFormProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/surfacerouteprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SurfaceRouteProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/surfacerouterprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SurfaceRouterProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/teamconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">TeamConfigurationSurfaceProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/tooltipprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">TooltipProps</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/type-aliases/visualeditorconfigurationsurfaceprops/" class="astro-a4avwkba"> <span class="astro-a4avwkba">VisualEditorConfigurationSurfaceProps</span> </a> </li> </ul> </details> </li><li class="astro-a4avwkba"> <details class="astro-a4avwkba"> <sl-sidebar-restore data-index="28"></sl-sidebar-restore> <summary class="astro-a4avwkba"> <div class="group-label astro-a4avwkba"> <span class="large astro-a4avwkba">Functions</span> </div> <svg aria-hidden="true" class="caret astro-a4avwkba astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <ul class="astro-a4avwkba"> <li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/alert/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Alert</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/button/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Button</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/buttongroup/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ButtonGroup</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/card/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Card</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/cardfooter/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CardFooter</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/cardloader/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CardLoader</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/cardtitle/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CardTitle</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/checkbox/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Checkbox</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/clipboardbutton/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ClipboardButton</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/cn/" class="astro-a4avwkba"> <span class="astro-a4avwkba">cn</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/codeblock/" class="astro-a4avwkba"> <span class="astro-a4avwkba">CodeBlock</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/connectconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ConnectConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/connectedconnectform/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ConnectedConnectForm</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/decorativeicon/" class="astro-a4avwkba"> <span class="astro-a4avwkba">DecorativeIcon</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/extensionsettings/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ExtensionSettings</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/extensionsettingsheader/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ExtensionSettingsHeader</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/form/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Form</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/formerror/" class="astro-a4avwkba"> <span class="astro-a4avwkba">FormError</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/link/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Link</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/listloader/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ListLoader</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/providerauthcard/" class="astro-a4avwkba"> <span class="astro-a4avwkba">ProviderAuthCard</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/select/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Select</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/siteaccessconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteAccessConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/sitebuilddeployconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteBuildDeployConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/siteconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/sitedeploysurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteDeploySurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/sitegeneralconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteGeneralConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/sitelogssurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteLogsSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/sitemetricssurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteMetricsSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/sitenotificationsconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SiteNotificationsConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/smartform/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SmartForm</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/surfaceroute/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SurfaceRoute</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/surfacerouter/" class="astro-a4avwkba"> <span class="astro-a4avwkba">SurfaceRouter</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/teamconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">TeamConfigurationSurface</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/tooltip/" class="astro-a4avwkba"> <span class="astro-a4avwkba">Tooltip</span> </a> </li><li class="astro-a4avwkba"> <a href="/sdk/api/netlify/sdk/ui/react/components/functions/visualeditorconfigurationsurface/" class="astro-a4avwkba"> <span class="astro-a4avwkba">VisualEditorConfigurationSurface</span> </a> </li> </ul> </details> </li> </ul> </details> </li> </ul> </details> </li> </ul> </details> </li><li class="astro-a4avwkba"> <a href="https://developers.netlify.com/feed/tag/sdk" class="large external-link margin-top astro-a4avwkba" target="_blank" class="external-link margin-top"> <span class="astro-a4avwkba">Changelog</span> </a> </li><li class="astro-a4avwkba"> <a href="https://answers.netlify.com/" class="large text-sm external-link margin-top astro-a4avwkba" target="_blank" class="text-sm external-link margin-top"> <span class="astro-a4avwkba">Forums</span> </a> </li><li class="astro-a4avwkba"> <a href="https://www.netlify.com/support/" class="large text-sm external-link astro-a4avwkba" target="_blank" class="text-sm external-link"> <span class="astro-a4avwkba">Contact support</span> </a> </li> </ul> <script> (() => { const scroller = document.getElementById('starlight__sidebar'); if (!window._starlightScrollRestore || !scroller) return; scroller.scrollTop = window._starlightScrollRestore; delete window._starlightScrollRestore; })(); </script> </sl-sidebar-state-persist> <div class="md:sl-hidden"> <div class="mobile-preferences sl-flex astro-uqshtffl"> <div class="sl-flex social-icons astro-uqshtffl"> <a href="https://developers.netlify.com/feed/tag/sdk" class="external-link astro-aycwkagb" target="_blank">Changelog</a> </div> <starlight-theme-select> <label style="--sl-select-width: 6.25em" class="astro-t62vsnnj"> <span class="sr-only astro-t62vsnnj">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-t62vsnnj astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> <select value="auto" class="astro-t62vsnnj"> <option value="dark" class="astro-t62vsnnj">Dark</option><option value="light" class="astro-t62vsnnj">Light</option><option value="auto" selected class="astro-t62vsnnj">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-t62vsnnj astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-theme-select> <script> StarlightThemeProvider.updatePickers(); </script> </div> </div> </div> </div> </nav> <div class="main-frame astro-orpkluty"> <div class="lg:sl-flex astro-wydqmu3q"> <aside class="right-sidebar-container astro-wydqmu3q"> <div class="right-sidebar astro-wydqmu3q"> <div class="lg:sl-hidden astro-alr624kb"><mobile-starlight-toc data-min-h="2" data-max-h="2" class="astro-uk22uh2y"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-uk22uh2y"><details id="starlight__mobile-toc" class="astro-uk22uh2y"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-uk22uh2y"><div class="toggle sl-flex astro-uk22uh2y">On this page<svg aria-hidden="true" class="caret astro-uk22uh2y astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </div><span class="display-current astro-uk22uh2y"></span></summary><div class="dropdown astro-uk22uh2y"><ul class="isMobile astro-rukuya45" style="--depth: 0;"> <li class="astro-rukuya45" style="--depth: 0;"> <a href="#_top" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">Overview</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#prerequisites" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">Prerequisites</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#1-create-an-extension-with-the-sdk" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">1. Create an extension with the SDK</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#2-set-up-local-development" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">2. Set up local development</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#3-customize-the-extension" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">3. Customize the extension</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#4-test-in-production" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">4. Test in production</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#5-publish-a-public-extension" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">5. Publish a public extension</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#more-resources" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">More resources</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#contact-us-for-support" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">Contact us for support</span> </a> </li> </ul> </div></details></nav></mobile-starlight-toc></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-alr624kb"><div class="sl-container astro-alr624kb"><starlight-toc data-min-h="2" data-max-h="2"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-rukuya45" style="--depth: 0;"> <li class="astro-rukuya45" style="--depth: 0;"> <a href="#_top" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">Overview</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#prerequisites" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">Prerequisites</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#1-create-an-extension-with-the-sdk" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">1. Create an extension with the SDK</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#2-set-up-local-development" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">2. Set up local development</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#3-customize-the-extension" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">3. Customize the extension</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#4-test-in-production" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">4. Test in production</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#5-publish-a-public-extension" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">5. Publish a public extension</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#more-resources" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">More resources</span> </a> </li><li class="astro-rukuya45" style="--depth: 0;"> <a href="#contact-us-for-support" class="astro-rukuya45" style="--depth: 0;"> <span class="astro-rukuya45" style="--depth: 0;">Contact us for support</span> </a> </li> </ul> </nav></starlight-toc></div></div> </div> </aside> <div class="main-pane astro-wydqmu3q"> <main data-pagefind-body lang="en" dir="ltr" class="astro-2yxxy2tc"> <div class="content-panel astro-kwdjkz4j"> <div class="sl-container astro-kwdjkz4j"> <h1 id="_top" class="astro-7qearqpy">Create a new extension</h1> </div> </div> <div class="content-panel astro-kwdjkz4j"> <div class="sl-container astro-kwdjkz4j"> <div class="sl-markdown-content"> <p>Learn the basics of extension development by creating, testing, and publishing an extension using the Netlify SDK.</p> <p>For a complete working example of an extension built with SDK v2, refer to the <a href="https://github.com/netlify/extension-showcase/" class="external-link" rel="noopener noreferrer" target="_blank">Netlify extension showcase repository</a>.</p> <div class="netlify-panel note astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:notes"> <symbol id="ai:uil:notes"><path fill="currentColor" d="M16 14H8a1 1 0 0 0 0 2h8a1 1 0 0 0 0-2m0-4h-6a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2m4-6h-3V3a1 1 0 0 0-2 0v1h-2V3a1 1 0 0 0-2 0v1H9V3a1 1 0 0 0-2 0v1H4a1 1 0 0 0-1 1v14a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V5a1 1 0 0 0-1-1m-1 15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6h2v1a1 1 0 0 0 2 0V6h2v1a1 1 0 0 0 2 0V6h2v1a1 1 0 0 0 2 0V6h2Z"/></symbol><use xlink:href="#ai:uil:notes"></use> </svg></span>Migrating an existing integration to SDK v2? </p> <div class="panel-content astro-vweeohgf"> <p>If you have an existing SDK v1 integration, refer to the <a href="/sdk/get-started/migration-guide/overview/">migration guide</a> for an overview of what’s changed and a detailed guide of how to convert your SDK v1 integration to an SDK v2 extension.</p> </div> </div> <h2 id="prerequisites">Prerequisites</h2> <div class="netlify-panel warning astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:exclamation-triangle"> <use xlink:href="#ai:uil:exclamation-triangle"></use> </svg></span>Windows users should run the Netlify SDK through WSL 2 </p> <div class="panel-content astro-vweeohgf"> <p>Support for using the Netlify SDK on Windows is currently only available through <a href="https://learn.microsoft.com/en-us/windows/wsl/install" class="external-link" rel="noopener noreferrer" target="_blank">WSL 2</a>.</p> </div> </div> <div class="netlify-panel warning astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:exclamation-triangle"> <use xlink:href="#ai:uil:exclamation-triangle"></use> </svg></span>Dev Server is required to use a custom content source in Netlify Visual Editor </p> <div class="panel-content astro-vweeohgf"> <p><a href="https://docs.netlify.com/platform/dev-server/" class="external-link" rel="noopener noreferrer" target="_blank">Dev Server</a> is currently in Private Beta. Please <a href="https://www.netlify.com/support/" class="external-link" rel="noopener noreferrer" target="_blank">contact us</a> to enable it for your team.</p> </div> </div> <ul> <li><a href="https://github.com/nodejs/release#release-schedule" class="external-link" rel="noopener noreferrer" target="_blank">Node.js 18.19.0</a> or later</li> <li><a href="https://docs.netlify.com/cli/get-started/" class="external-link" rel="noopener noreferrer" target="_blank">Netlify CLI</a></li> <li><a href="https://www.typescriptlang.org/" class="external-link" rel="noopener noreferrer" target="_blank">TypeScript</a></li> </ul> <h2 id="1-create-an-extension-with-the-sdk">1. Create an extension with the SDK</h2> <p>To create a new extension with the Netlify SDK, run the <code dir="auto">create</code> command using npm, pnpm, or yarn.</p> <starlight-tabs class="astro-fgycviln"> <div class="tablist-wrapper not-content astro-fgycviln"> <ul role="tablist" class="astro-fgycviln"> <li role="presentation" class="tab astro-fgycviln"> <a role="tab" href="#tab-panel-38" id="tab-38" aria-selected="true" tabindex="0" class="astro-fgycviln"> pnpm </a> </li><li role="presentation" class="tab astro-fgycviln"> <a role="tab" href="#tab-panel-39" id="tab-39" aria-selected="false" tabindex="-1" class="astro-fgycviln"> yarn </a> </li><li role="presentation" class="tab astro-fgycviln"> <a role="tab" href="#tab-panel-40" id="tab-40" aria-selected="false" tabindex="-1" class="astro-fgycviln"> npm </a> </li> </ul> </div> <section id="tab-panel-38" aria-labelledby="tab-38" role="tabpanel"> <div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.cnoz8.css"><script type="module" src="/_astro/ec.8zarh.js"></script><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#91B4D5">pnpm</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">create</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">@netlify/sdk@latest</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="pnpm create @netlify/sdk@latest"><div></div></button></div></figure></div> </section><section id="tab-panel-39" aria-labelledby="tab-39" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#91B4D5">yarn</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">create</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">@netlify/sdk@latest</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="yarn create @netlify/sdk@latest"><div></div></button></div></figure></div> </section><section id="tab-panel-40" aria-labelledby="tab-40" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#91B4D5">npm</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">create</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">@netlify/sdk@latest</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="npm create @netlify/sdk@latest"><div></div></button></div></figure></div> </section> </starlight-tabs> <p>Follow the prompts:</p> <ul> <li>Install the <code dir="auto">@netlify/create-sdk</code> package.</li> <li>Specify where to create the extension.</li> <li>Supply extension information, including: <ul> <li>A slug to use as the unique identifier for your extension and to create the package name. Once you publish an extension with this slug, you can’t change it.</li> </ul> </li> <li>Select the boilerplate code you want to generate. <ul> <li>At minimum, you need to select <code dir="auto">Extension UI</code> because all extensions need to define UI for users to configure their extension.</li> <li>If you prefer not to use a boilerplate, select <code dir="auto">none</code> and follow the prompts to provide the permission <a href="/sdk/get-started/installation-flow/#permission-scopes">scopes</a> that the extension needs to function properly.</li> </ul> </li> <li>Select the package manager you want to use.</li> </ul> <p>For example, you might select the <code dir="auto">Extension UI</code> and <code dir="auto">Edge functions</code> boilerplate to create an extension that will inject an edge function into the user’s site during the build step. The extension UI boilerplate will include a surface that we can customize to request certain information from the user when they configure the extension.</p> <p>When the process completes, your selected directory will have the files you need to start building your extension and will include some example boilerplate code. Learn about the required files in the <a href="/sdk/get-started/anatomy-of-an-extension">anatomy of an extension</a> doc.</p> <h2 id="2-set-up-local-development">2. Set up local development</h2> <p>To set up local development and test your extension locally, you need to first deploy the extension on Netlify and publish it as a private extension on your team. The local development server uses the deployed extension’s configuration file (<code dir="auto">extension.yaml</code>) to determine what surfaces to render in the local version of the Netlify UI.</p> <ol> <li><a href="#push-to-a-git-repository">Push to a Git repository</a></li> <li><a href="#create-a-site-to-host-the-extension">Create a site to host the extension</a></li> <li><a href="#create-a-private-extension">Create a private extension</a></li> <li><a href="#start-the-local-development-server">Start the local development server</a></li> <li><a href="#install-and-check-your-extensions-surfaces">Install and check your extension’s surfaces</a></li> <li><a href="#stop-and-clear-local-development-settings">Stop and clear local development settings</a></li> </ol> <p>For each extension you develop, you only need to complete steps 1-3 once to set up local development. Afterwards, you can jump straight to step 4 to start testing locally.</p> <h3 id="push-to-a-git-repository">Push to a Git repository</h3> <p>If you haven’t already, push your extension code to a Git repository. Netlify will pull code from that repository in the next step.</p> <h3 id="create-a-site-to-host-the-extension">Create a site to host the extension</h3> <p>Deploy your extension as a Netlify site. You will use this site solely for hosting the extension and managing updates to the code.</p> <ol> <li>Log in to the <a href="https://app.netlify.com/" class="external-link" rel="noopener noreferrer" target="_blank">Netlify UI</a>.</li> <li>Go to your team’s <strong>Sites</strong> page, open the <strong>Add new site</strong> menu, and select <strong>Import an existing project</strong>.</li> <li>Select your Git provider and then follow the prompts to log in and authenticate.</li> <li>Find and select the repository that contains your extension code.</li> <li>Deploy the site. You can review the status of the deploy on the <strong>Site overview</strong> page.</li> </ol> <p>Learn more about <a href="https://docs.netlify.com/welcome/add-new-site/#import-from-an-existing-repository" class="external-link" rel="noopener noreferrer" target="_blank">creating a site from an existing repository</a> in the Netlify user docs.</p> <h3 id="create-a-private-extension">Create a private extension</h3> <p>Next, as a Team Owner, publish the extension as a private extension so you can preview it locally and then test it in production. Private extensions are only available to your team.</p> <ol> <li>In the Netlify UI, select the <strong>Extensions</strong> tab for your team. Make sure this is the same team that owns the <a href="#create-a-site-to-host-the-extension">deployed extension site</a>.</li> <li>Select <strong>Created by your team</strong> and then select <strong>Create an extension</strong>.</li> <li>Enter a <strong>Display name</strong>, <strong>Slug</strong>, and <strong>Summary</strong>.</li> <li>Under <strong>Netlify extension site</strong>, select the Netlify site that hosts your extension code. Note that you can only associate a Netlify extension site with one published extension — you can’t publish multiple extensions with the same extension site.</li> <li>Select the <strong>Permission scopes</strong> for your extension.</li> <li>Select <strong>Create</strong>.</li> <li>The last step is to update the slug in your project’s <code dir="auto">extension.yaml</code> to include the nanoid that the Netlify UI added during the publishing flow: <ol> <li>In the Netlify UI, select the <strong>Extensions</strong> tab for your team and select <strong>Created by your team</strong>.</li> <li>Find the extension you just created and select it to go to the extension’s details page.</li> <li>Select <strong>Manage</strong> and find the <strong>Slug</strong> under <strong>Details</strong>.</li> <li>Copy the slug and paste it in your project’s <code dir="auto">extension.yaml</code> file.</li> <li>Commit the update to Git, push the change to your repository, and redeploy the site that hosts your extension code.</li> </ol> </li> </ol> <p>Learn more about <a href="/sdk/publish/">publishing extensions</a> and the <a href="/sdk/publish/#publishing-workflow">publishing workflow</a>.</p> <h3 id="start-the-local-development-server">Start the local development server</h3> <p>The SDK includes support for a local development server that you can run to preview and test your extension UI.</p> <div class="netlify-panel warning astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:exclamation-triangle"> <symbol id="ai:uil:exclamation-triangle"><path fill="currentColor" d="M12 16a1 1 0 1 0 1 1a1 1 0 0 0-1-1m10.67 1.47l-8.05-14a3 3 0 0 0-5.24 0l-8 14A3 3 0 0 0 3.94 22h16.12a3 3 0 0 0 2.61-4.53m-1.73 2a1 1 0 0 1-.88.51H3.94a1 1 0 0 1-.88-.51a1 1 0 0 1 0-1l8-14a1 1 0 0 1 1.78 0l8.05 14a1 1 0 0 1 .05 1.02ZM12 8a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0V9a1 1 0 0 0-1-1"/></symbol><use xlink:href="#ai:uil:exclamation-triangle"></use> </svg></span>Extension surfaces not loading? Make sure you deploy and publish </p> <div class="panel-content astro-vweeohgf"> <p>To run an extension locally, you need to first <a href="#create-a-site-to-host-the-extension">deploy it as a Netlify site</a> and <a href="#create-a-private-extension">publish it as a private extension</a>. If you skip these steps, the local development server won’t render your extension’s surfaces.</p><p>Make sure you also <a href="/sdk/extension-ui/develop-locally/#redeploy-when-adding-or-removing-surfaces">redeploy whenever you update the surfaces</a> in <code dir="auto">extension.yaml</code> to ensure the local development server reflects the latest configuration.</p> </div> </div> <ol> <li> <p>Run the following command to start the local development server:</p> <starlight-tabs class="astro-fgycviln"> <div class="tablist-wrapper not-content astro-fgycviln"> <ul role="tablist" class="astro-fgycviln"> <li role="presentation" class="tab astro-fgycviln"> <a role="tab" href="#tab-panel-41" id="tab-41" aria-selected="true" tabindex="0" class="astro-fgycviln"> pnpm </a> </li><li role="presentation" class="tab astro-fgycviln"> <a role="tab" href="#tab-panel-42" id="tab-42" aria-selected="false" tabindex="-1" class="astro-fgycviln"> yarn </a> </li><li role="presentation" class="tab astro-fgycviln"> <a role="tab" href="#tab-panel-43" id="tab-43" aria-selected="false" tabindex="-1" class="astro-fgycviln"> npm </a> </li> </ul> </div> <section id="tab-panel-41" aria-labelledby="tab-41" role="tabpanel"> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#91B4D5">pnpm</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">run</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">dev</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">--open</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="pnpm run dev --open"><div></div></button></div></figure></div> </section><section id="tab-panel-42" aria-labelledby="tab-42" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#91B4D5">yarn</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">run</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">dev</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">--open</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="yarn run dev --open"><div></div></button></div></figure></div> </section><section id="tab-panel-43" aria-labelledby="tab-43" role="tabpanel" hidden> <div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#91B4D5">npm</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">run</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">dev</span><span style="--0:#A6ACCD"> </span><span style="--0:#ADD7FF">--open</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="npm run dev --open"><div></div></button></div></figure></div> </section> </starlight-tabs> <p>This command will start a local server and automatically open your browser to the extension development settings page in the Netlify UI. Only the authenticated user can access this URL.</p> </li> <li> <p>On the local extension development page, review and save your settings. By default, the settings use the URL of your local server and the extension’s slug from the <code dir="auto">extension.yaml</code> file but you can edit them as needed.</p> <p><img src="/_astro/local-extension-ui-development.DTNENwn9_OfDe3.webp" alt="" width="1326" height="1032" loading="lazy" decoding="async"></p> <p>The Netlify UI saves these settings in your browser’s local storage and will persist them across sessions, so only you will be able to access the local development version of the extension.</p> </li> </ol> <p>Learn more about <a href="/sdk/extension-ui/develop-locally/">developing locally with extension UI</a>.</p> <h3 id="install-and-check-your-extensions-surfaces">Install and check your extension’s surfaces</h3> <p>Now that you have the local development server running, you can install and review your extension surfaces in the Netlify UI:</p> <ol> <li> <p>Select your team name at the top of the Netlify UI, and then select <strong>Extensions</strong>.</p> </li> <li> <p>Select <strong>Created by your team</strong> and find your private extension in the list.</p> </li> <li> <p>Select the extension and then select <strong>Install</strong> on the details page.</p> <p>Note that this will actually install the extension on your team in production and it will remain installed even after you stop the local development server.</p> </li> <li> <p>You can now navigate to the various sections in the Netlify UI that contain your surfaces. For each of these surfaces, the Netlify UI will load the surface using the local development URL instead of the deployed version.</p> </li> </ol> <p>For example, if you selected the <code dir="auto">Extension UI</code> and <code dir="auto">Edge functions</code> boilerplate, you will find a configuration surface rendered:</p> <ul> <li> <p>on the extension’s details page under <strong>Extensions > [your extension’s details page] > Configuration</strong> <img src="/_astro/extension-ui-surface-team-configuration.CHP_Jd3d_Z1wTPUx.webp" alt="" width="1800" height="1200" loading="lazy" decoding="async"></p> </li> <li> <p>in a section listed under the top-level navigation for a site on your team</p> <p><img src="/_astro/extension-ui-surface-site-navigation.Ztwr6x5W_1creys.webp" alt="" width="1800" height="1200" loading="lazy" decoding="async"></p> </li> </ul> <p>Learn more about <a href="/sdk/extension-ui/overview/">extension UI</a> and <a href="/sdk/extension-ui/add-a-new-surface/">adding surfaces</a>.</p> <h3 id="stop-and-clear-local-development-settings">Stop and clear local development settings</h3> <p>Once you’re done testing locally, follow these steps to stop local development and clear the local settings stored in your browser.</p> <ol> <li>Stop the dev command process running in your terminal.</li> <li>In your browser, navigate back to the <a href="https://app.netlify.com/extension-ui/dev" class="external-link" rel="noopener noreferrer" target="_blank">extension UI settings</a> and select <strong>Delete settings</strong>. After you delete these settings, the Netlify UI will stop using the local version of your extension and will render the deployed surfaces from the published extension instead.</li> </ol> <h2 id="3-customize-the-extension">3. Customize the extension</h2> <p>Now that you have generated the boilerplate code and have the extension set up to develop and test locally, you can use the <a href="/sdk/reference/classes/netlifyextension/"><code dir="auto">NetlifyExtension</code></a>, <a href="/sdk/reference/classes/netlifyextensionclient/"><code dir="auto">NetlifyExtensionClient</code></a>, and <a href="/sdk/reference/classes/netlifyconnector/"><code dir="auto">NetlifyConnector</code></a> APIs to add custom logic and functionality as needed.</p> <p>Learn more about how to develop the functionality for your extension in the following docs sections:</p> <ul> <li><a href="/sdk/build-event-handlers/overview/">Build event handlers</a></li> <li><a href="/sdk/connectors/overview/">Connectors</a></li> <li><a href="/sdk/edge-functions/overview/">Edge function injection</a></li> <li><a href="/sdk/endpoints/overview/">Endpoints</a></li> <li><a href="/sdk/extension-ui/overview/">Extension UI</a></li> <li><a href="/sdk/functions/overview/">Functions</a></li> <li><a href="/sdk/oauth/overview/">OAuth</a></li> </ul> <div class="netlify-panel warning astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:exclamation-triangle"> <use xlink:href="#ai:uil:exclamation-triangle"></use> </svg></span>Extensions reliant on build events run on every site on a team </p> <div class="panel-content astro-vweeohgf"> <p>After a user installs your extension, all logic related to build event handlers, function injection, and edge function injection runs during the build step for <strong>every site</strong> the team owns. It is important to be mindful of this and ensure your extension includes logic to early return if specific configuration is missing, for example, to minimize unnecessary impact to user sites and build times.</p> </div> </div> <h2 id="4-test-in-production">4. Test in production</h2> <p>When you’re ready, you can test your extension in production. At this point, you should have already deployed and published your extension as a private extension while <a href="#2-set-up-local-development">setting up local development</a>. You can test the same private extension in production.</p> <div class="netlify-panel warning astro-vweeohgf"> <p class="title astro-vweeohgf"> <span id="icon" class="astro-vweeohgf"><svg width="1em" height="1em" viewBox="0 0 24 24" class="astro-vweeohgf" data-icon="uil:exclamation-triangle"> <use xlink:href="#ai:uil:exclamation-triangle"></use> </svg></span>Make sure to stop and clear your local development settings </p> <div class="panel-content astro-vweeohgf"> <p>Before you test in production, make sure you <a href="#stop-and-clear-local-development-settings">stop and clear your local development settings</a>. Otherwise, the app will render the local version of your extension.</p> </div> </div> <p>To test in production:</p> <ol> <li>In the <a href="https://app.netlify.com/" class="external-link" rel="noopener noreferrer" target="_blank">Netlify UI</a>, navigate to the <strong>Extensions > Installed</strong> section for your team and confirm that your private extension is installed.</li> <li>Navigate to the various sections in the Netlify UI to review your extension UI surfaces and configure your extension as needed.</li> <li>Test the extension on your site.</li> </ol> <h2 id="5-publish-a-public-extension">5. Publish a public extension</h2> <p>In some cases, you may want to keep the extension private for only your team to use. For example, if your extension allows users to sync data from proprietary or bespoke data sources into Netlify Connect or Netlify Visual Editor.</p> <p>But, if you want to make your extension available to others outside of your team, review our <a href="/sdk/publish/">publishing</a> docs to learn more about the publishing workflow. When you’re ready, you can <a href="/sdk/publish/publish-extensions/#publish-a-public-extension">publish it as a public extension</a>.</p> <p>Make sure you update the <code dir="auto">details.md</code> file to add the <a href="/sdk/publish/publish-extensions/#documentation">recommended documentation</a> for your users before you publish.</p> <h2 id="more-resources">More resources</h2> <p>The following related resources may also be helpful to review:</p> <ul> <li><a href="/sdk/get-started/installation-flow/">Installation flow</a></li> <li><a href="/sdk/publish/partner-extensions/">Partner extensions</a></li> <li><a href="/sdk/publish/manage-extensions/">Manage published extensions</a></li> <li><a href="https://github.com/netlify/extension-showcase/" class="external-link" rel="noopener noreferrer" target="_blank">Netlify extension showcase repository</a></li> <li><a href="/sdk/reference/overview/">Reference docs</a>.</li> </ul> <h2 id="contact-us-for-support">Contact us for support</h2> <p>If you have questions or run into issues while creating your extension, please contact us <a href="https://www.netlify.com/support/" class="external-link" rel="noopener noreferrer" target="_blank">through Netlify support</a> or through the <a href="https://www.netlify.com/partners/technology/" class="external-link" rel="noopener noreferrer" target="_blank">technology partner program</a>.</p> <div class="not-content astro-77rygnu7"> <form class='astro-77rygnu7' method='POST' name='feedback'> <div class="feedback astro-77rygnu7"> <div class="astro-77rygnu7"> <h4 class="astro-77rygnu7">Did you find this doc useful?</h4> <p class="astro-77rygnu7">Your feedback helps us improve our docs.</p> </div> <div class="votes astro-77rygnu7"> <input type="radio" name="vote" value="upvote" id="upvote" class="astro-77rygnu7"> <label class="vote-button astro-77rygnu7" for="upvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true" id="svg-upvote"> <g fill="none" fill-rule="evenodd"> <circle cx="32" cy="32" r="32" fill="none" fill-rule="nonzero"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M40 29h-7.645l1.473-3.889c.377-.996.042-2.135-.803-2.73-.963-.679-2.263-.427-2.936.569L26 29v9a4 4 0 0 0 4 4h6.517c1.51 0 2.893-.852 3.573-2.203L42 36v-5a2 2 0 0 0-2-2zM22 29v12"></path> </g> </g> </svg> </label> <input type="radio" name="vote" value="downvote" id="downvote" class="astro-77rygnu7"> <label class="vote-button astro-77rygnu7" for="downvote"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true" id="svg-downvote"> <g fill="none" fill-rule="evenodd"> <circle cx="32" cy="32" r="32"></circle> <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M23 35h7.645l-1.473 3.889c-.377.996-.042 2.135.803 2.73.963.679 2.263.427 2.936-.569l4.09-6.05v-9a4 4 0 0 0-4-4h-6.518c-1.51 0-2.893.852-3.573 2.202L21 28v5a2 2 0 0 0 2 2zM41 35V23"></path> </g> </g> </svg> </label> <input type="radio" name="vote" value="none" id="none" checked class="astro-77rygnu7"> </div> </div> <input type="hidden" name="form-name" value="feedback" class="astro-77rygnu7"> <input type="hidden" name="path" value="/sdk/get-started/create-a-new-extension/" class="astro-77rygnu7"> <textarea name="feedback" placeholder="What else would you like to tell us about this doc?" class="astro-77rygnu7"></textarea> <p class="hidden astro-77rygnu7"> <label class="astro-77rygnu7"> Don’t fill this out if you’re human: <input name="bot-field" class="astro-77rygnu7"> </label> </p> <button class="form-submit astro-77rygnu7" type="submit" disabled>Send</button> </form> <div class="success-message astro-77rygnu7"> <h4 class="astro-77rygnu7">Got it!</h4> <p class="astro-77rygnu7">Your feedback helps us improve our docs.</p> </div> </div> <footer class="astro-sz7xmlte"> <nav aria-label="Footer navigation" class="astro-sz7xmlte"> <ul class="footer_nav astro-sz7xmlte"> <li class="astro-sz7xmlte"> <a href="https://netlify.com/" class="astro-sz7xmlte">Netlify</a> </li> <li class="astro-sz7xmlte"> <a href="https://netlify.com/careers/" class="astro-sz7xmlte">Careers</a> </li> <li class="astro-sz7xmlte"> <a href="https://netlify.com/blog/" class="astro-sz7xmlte">Blog</a> </li> <li class="astro-sz7xmlte"> <a href="https://www.netlify.com/legal/terms-of-use/" class="astro-sz7xmlte">Terms</a> </li> <li class="astro-sz7xmlte"> <a href="https://www.netlify.com/privacy/" class="astro-sz7xmlte">Privacy</a> </li> </ul> </nav> <p class="footer_copyright astro-sz7xmlte">© 2023 Netlify</p> </footer> <script type="astro-raw"> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMKKF2M" height="0" width="0" style="display:none;visibility:hidden" ></iframe> </noscript>; </script> </div> <footer class="sl-flex astro-4ycbworp"> <div class="meta sl-flex astro-4ycbworp"> </div> <div class="pagination-links astro-onttlcsu" dir="ltr"> <a href="/sdk/get-started/introduction" rel="prev" class="astro-onttlcsu"> <svg aria-hidden="true" class="astro-onttlcsu astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17 11H9.41l3.3-3.29a1.004 1.004 0 1 0-1.42-1.42l-5 5a1 1 0 0 0-.21.33 1 1 0 0 0 0 .76 1 1 0 0 0 .21.33l5 5a1.002 1.002 0 0 0 1.639-.325 1 1 0 0 0-.219-1.095L9.41 13H17a1 1 0 0 0 0-2Z"/></svg> <span class="astro-onttlcsu"> Previous <br class="astro-onttlcsu"> <span class="link-title astro-onttlcsu">Introduction</span> </span> </a> <a href="/sdk/get-started/anatomy-of-an-extension" rel="next" class="astro-onttlcsu"> <svg aria-hidden="true" class="astro-onttlcsu astro-2nn42ynm" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.5rem;"><path d="M17.92 11.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.003 1.003 0 1 0-1.42 1.42l3.3 3.29H7a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z"/></svg> <span class="astro-onttlcsu"> Next <br class="astro-onttlcsu"> <span class="link-title astro-onttlcsu">Anatomy of an extension</span> </span> </a> </div> </footer> </div> </div> </main> </div> </div> </div> </div> <script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="35ffcf76-cab5-463d-a2e5-8983dba16a56" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiMzVmZmNmNzYtY2FiNS00NjNkLWEyZTUtODk4M2RiYTE2YTU2IiwiYWNjb3VudF9pZCI6IjU4ZGE4ODkzZDY4NjVkMzVjOTJhNzJiOCIsImRlcGxveV9pZCI6IjY3YjRjNmFmZjA0ODI2MDAwODI3Zjk0MSIsImlzc3VlciI6Im5mc2VydmVyIn0.RSH8lI6GZlz1GhrlIVSXJjlShA3US0qUsqMx2xtYwzs"></script></body></html>