TemplateEditor React component: create and edit reusable contract templates inside your app.
The Template Editor component is a React component that renders the entire Editor.
This component provides the ability to create new templates and open existing templates.
Use only for testing purposes. API key for your platform.
clientKey
string
Use only for testing purposes. Client key for the account that is using the infrastructure.
token
string
Client token refers to the client that is using the infrastructure. Learn more about client tokens here.
userKey
string
User key for the user who is creating a template.
templateKey
string
Unique template key of the template that needs to be rendered. If not specified, the component will allow you to create a new template from its interface.
сanReDraft
boolean
false
If true, users can recreate existing templates from scratch.
documentPreview
boolean
false
If true, opens the template in read-only preview mode and hides the actions bar and sidebar.
onStepChange
function(data: {currentStep:string})
Called when component changes states and returns currentStep: 'TypeChooseStep' when the component is in the Type Choose state, currentStep: 'ContractEditorStep' when the component is in the Editor state.
onDocumentSave
function(data: {documentSaved:boolean})
Called when the contract body is being edited, this function returns documentSaved: false if the body is not saved and documentSaved: true if the body is saved.
{"docsConfig":{"$schema":"https://mintlify.com/docs.json","theme":"mint","name":"Sendforsign documentation","colors":{"primary":"#9563FF","light":"#AE87FF","dark":"#0D001D"},"favicon":"https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/favicon.png?fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=6f1820390f91591a0b39203b557d002d","logo":{"light":"https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/logo/light.svg?fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=8164bbc8e8ee371f6818856b17826f6c","dark":"https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/logo/dark.svg?fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=9ab81cd69fe1e1af8ee9afed9312a54e"},"api":{"mdx":{"server":"https://api.sendforsign.com/api","auth":{"method":"key","name":"X-Sendforsign-Key"}}},"appearance":{"default":"light","strict":false},"background":{"decoration":null,"color":{"light":null,"dark":"#090014"}},"navbar":{"links":[{"label":"Feedback","href":"https://airtable.com/app8jiZb9qU4pNdYb/pag9rl2atRJUkFjpS/form"}],"primary":{"type":"button","label":"sendforsign.com","href":"https://sendforsign.com"}},"footer":{"socials":{"linkedin":"https://www.linkedin.com/company/sendforsign/about/","youtube":"https://www.youtube.com/@Sendforsign/videos"}},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"sendforsign","hasAudioNarration":false,"actualSubdomain":"sendforsign","customDomains":["about.sendforsign.com"],"gitSource":{"type":"github","owner":"kaleido-so","repo":"sendforsign-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae0b2a7cdcf99f97c317e62","collectionId":"4bb5ebea-40d0-4543-b4ba-dfc1814b8aef","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae0b2a7cdcf99f97c317e62"},"entitlements":{},"buildId":"6ae0b2a7cdcf99f97c317e62","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"API Reference","count":55},{"language":"default","tag":"Blog","count":16},{"language":"default","tag":"Contract","count":10},{"language":"default","tag":"About","count":8},{"language":"default","tag":"Template","count":8},{"language":"default","tag":"Documentation","count":8},{"language":"default","tag":"Placeholder","count":7},{"language":"default","tag":"Use cases","count":7},{"language":"default","tag":"Webhook","count":6},{"language":"default","tag":"React Components","count":6}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"sdk/components/templateeditor","slug":"/sdk/components/templateeditor","pageMetadata":{"title":"Template Editor","description":"TemplateEditor React component: create and edit reusable contract templates inside your app.","href":"/sdk/components/templateeditor"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"TemplateEditor React component: create and edit reusable contract templates inside your app.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,p:`p`,pre:`pre`,span:`span`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,..._provideComponents(),...props.components},{CodeBlock,CodeGroup,Frame,Heading,OptimizedImage,Table}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!CodeGroup)_missingMdxReference(`CodeGroup`,true);if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Table)_missingMdxReference(`Table`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`The `,_jsx(_components.code,{children:`Template Editor`}),` component is a React component that renders the entire Editor.\nThis component provides the ability to create new templates and open existing templates.`]}),`\n`,_jsx(Heading,{level:`3`,id:`preview`,children:`Preview`}),`\n`,_jsx(Frame,{caption:`Template component`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=618468b73bd31ec4260035f21fc0c800`,\"data-og-width\":`1428`,width:`1428`,\"data-og-height\":`532`,height:`532`,\"data-path\":`sdk/img/template.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?w=280\u0026fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=5e9eec6839c5106214c00c97cf8c747b 280w, https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?w=560\u0026fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=1f958964ef155286ea0d6d569ed969ab 560w, https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?w=840\u0026fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=4bcaacab870097845f4fd3ee0727d940 840w, https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?w=1100\u0026fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=d433f65dc0622dea406ddba5766428ab 1100w, https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?w=1650\u0026fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=340360b69973e0429f6ca5117d1ab9b0 1650w, https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?w=2500\u0026fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=d522c36e5eeb2e0b0a77a9e02f8ca1d5 2500w`})}),`\n`,_jsx(Heading,{level:`2`,id:`usage`,children:`Usage`}),`\n`,_jsxs(_components.p,{children:[`First, install `,_jsx(_components.a,{href:`/sdk/introsdk#installation`,children:`Sendforsign components.`}),`\nAfter that:`]}),`\n`,_jsx(CodeGroup,{children:_jsx(CodeBlock,{filename:`App.tsx`,numberOfLines:`6`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`6`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`import`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` { `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`TemplateEditor`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` } `}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#C586C0`},children:`from`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'sendforsign'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`;`})]}),`\n`,_jsx(_components.span,{className:`line`}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`\u003c`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`TemplateEditor`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` token`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'YourClientToken'`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` documentPreview`}),_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`=`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`{`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`true`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#CF222E`,\"--shiki-dark\":`#D4D4D4`},children:`/>`})}),`\n`]})})})}),`\n`,_jsx(Heading,{level:`2`,id:`props`,children:`Props`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Prop`}),_jsx(_components.th,{children:`Type`}),_jsx(_components.th,{children:`Default`}),_jsx(_components.th,{children:`Description`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`apiKey`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`string`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Use only for testing purposes. API key for your platform.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`clientKey`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`string`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Use only for testing purposes. Client key for the account that is using the infrastructure.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`token`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`string`})}),_jsx(_components.td,{}),_jsxs(_components.td,{children:[`Client token refers to the client that is using the infrastructure. Learn more about client tokens `,_jsx(_components.a,{href:`/api-reference/implementation_server#generate-client-tokens`,children:`here`}),`.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`userKey`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`string`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`User key for the user who is creating a template.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`templateKey`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`string`})}),_jsx(_components.td,{}),_jsx(_components.td,{children:`Unique template key of the template that needs to be rendered. If not specified, the component will allow you to create a new template from its interface.`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`сanReDraft`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`boolean`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`false`})}),_jsxs(_components.td,{children:[`If `,_jsx(_components.code,{children:`true`}),`, users can recreate existing templates from scratch.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`documentPreview`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`boolean`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`false`})}),_jsxs(_components.td,{children:[`If `,_jsx(_components.code,{children:`true`}),`, opens the template in read-only preview mode and hides the actions bar and sidebar.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`onStepChange`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`function(data: {currentStep:string})`})}),_jsx(_components.td,{}),_jsxs(_components.td,{children:[`Called when component changes states and returns `,_jsx(_components.code,{children:`currentStep: 'TypeChooseStep'`}),` when the component is in the Type Choose state, `,_jsx(_components.code,{children:`currentStep: 'ContractEditorStep'`}),` when the component is in the Editor state.`]})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.code,{children:`onDocumentSave`})}),_jsx(_components.td,{children:_jsx(_components.code,{children:`function(data: {documentSaved:boolean})`})}),_jsx(_components.td,{}),_jsxs(_components.td,{children:[`Called when the contract body is being edited, this function returns `,_jsx(_components.code,{children:`documentSaved: false`}),` if the body is not saved and `,_jsx(_components.code,{children:`documentSaved: true`}),` if the body is saved.`]})]})]})]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Template Editor","description":"TemplateEditor React component: create and edit reusable contract templates inside your app.","href":"/sdk/components/templateeditor"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Preview","slug":"preview","depth":3,"children":[]},{"title":"Usage","slug":"usage","depth":2,"children":[]},{"title":"Props","slug":"props","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"sendforsign","siteName":"Sendforsign documentation","title":"Template Editor - Sendforsign documentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-27T14:18:21.814Z","originalFileLocation":"sdk/components/templateeditor.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"light\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"TemplateEditor React component: create and edit reusable contract templates inside your app.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Sendforsign documentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Template Editor - Sendforsign documentation\">\u003cmeta data-mint-head property=\"og:description\" content=\"TemplateEditor React component: create and edit reusable contract templates inside your app.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Sendforsign documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://about.sendforsign.com/sdk/components/templateeditor\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://sendforsign.mintlify.app/_mintlify/api/og/v2?division=Components\u0026amp;title=Template+Editor\u0026amp;description=TemplateEditor+React+component%3A+create+and+edit+reusable+contract+templates+inside+your+app.\u0026amp;theme=e4e4c748bd253b7d0318b58a\u0026amp;signature=7e50d5669caaddaee71e1c6c025fa6d56d2b06df6d88bd42b421d4a76f9de8c3\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Template Editor - Sendforsign documentation\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"TemplateEditor React component: create and edit reusable contract templates inside your app.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://sendforsign.mintlify.app/_mintlify/api/og/v2?division=Components\u0026amp;title=Template+Editor\u0026amp;description=TemplateEditor+React+component%3A+create+and+edit+reusable+contract+templates+inside+your+app.\u0026amp;theme=e4e4c748bd253b7d0318b58a\u0026amp;signature=7e50d5669caaddaee71e1c6c025fa6d56d2b06df6d88bd42b421d4a76f9de8c3\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/sendforsign/ZRijGtN2932N6-gY/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Sendforsign documentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#9563FF\">\u003clink data-mint-head rel=\"canonical\" href=\"https://about.sendforsign.com/sdk/components/templateeditor\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/sdk/components/templateeditor.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://about.sendforsign.com/#organization\",\"name\":\"Sendforsign documentation\",\"url\":\"https://about.sendforsign.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/logo/light.svg?fit=max\u0026auto=format\u0026n=bDeZDTsZ_41-V2Bk\u0026q=85\u0026s=8164bbc8e8ee371f6818856b17826f6c\"}},{\"@type\":\"WebSite\",\"@id\":\"https://about.sendforsign.com#website\",\"name\":\"Sendforsign documentation\",\"url\":\"https://about.sendforsign.com\",\"publisher\":{\"@id\":\"https://about.sendforsign.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://about.sendforsign.com/sdk/components/templateeditor#webpage\",\"url\":\"https://about.sendforsign.com/sdk/components/templateeditor\",\"name\":\"Template Editor\",\"description\":\"TemplateEditor React component: create and edit reusable contract templates inside your app.\",\"dateModified\":\"2026-10-27T14:18:21.814Z\",\"isPartOf\":{\"@id\":\"https://about.sendforsign.com#website\"},\"breadcrumb\":{\"@id\":\"https://about.sendforsign.com/sdk/components/templateeditor#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://about.sendforsign.com/sdk/components/templateeditor#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Components\",\"item\":\"https://about.sendforsign.com/sdk/components/contracteditor\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Template Editor\",\"item\":\"https://about.sendforsign.com/sdk/components/templateeditor\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://about.sendforsign.com/sdk/components/templateeditor#article\",\"headline\":\"Template Editor\",\"name\":\"Template Editor\",\"description\":\"TemplateEditor React component: create and edit reusable contract templates inside your app.\",\"url\":\"https://about.sendforsign.com/sdk/components/templateeditor\",\"mainEntityOfPage\":{\"@id\":\"https://about.sendforsign.com/sdk/components/templateeditor#webpage\"},\"dateModified\":\"2026-10-27T14:18:21.814Z\",\"publisher\":{\"@id\":\"https://about.sendforsign.com/#organization\"},\"isPartOf\":{\"@id\":\"https://about.sendforsign.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Sendforsign documentation\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Sendforsign documentation","nav":{"global":null,"tabs":[{"tab":"Documentation","pages":[{"title":"Documentation","href":"/introduction"}]},{"tab":"API Reference","pages":[{"title":"API Reference","href":"/api-reference/introapi"}]},{"tab":"React Components","groups":[{"group":"Components Documentation","pages":[{"title":"Sendforsign React components","sidebarTitle":"Introduction","href":"/sdk/introsdk"}]},{"group":"Components","pages":[{"title":"Contract Editor","href":"/sdk/components/contracteditor"},{"title":"Contract List","description":"ContractList React component: show the contracts of a client in your app and open them in the Contract Editor.","href":"/sdk/components/contractlist"},{"title":"Template Editor","href":"/sdk/components/templateeditor"},{"title":"Template List","description":"TemplateList React component: show a client's contract templates in your app and open them in the Template Editor.","href":"/sdk/components/templatelist"},{"title":"AI Assistant","href":"/sdk/components/aiassistant"}]}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/changelog/2025"}]},{"tab":"Blog","pages":[{"title":"Blog","href":"/blog/2025"}]},{"tab":"About","pages":[{"title":"About","href":"/about/vision"}]}]},"basePath":"","title":"Template Editor - Sendforsign documentation","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DXXFP6nH.js","DynamicMarkdown-B54_zNBF.js","zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}