> ## Documentation Index
> Fetch the complete documentation index at: https://about.sendforsign.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Template Editor

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.

### Preview

<Frame caption="Template component">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/sdk/img/template.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=618468b73bd31ec4260035f21fc0c800" width="1428" height="532" data-path="sdk/img/template.png" />
</Frame>

## Usage

First, install [Sendforsign components.](/sdk/introsdk#installation)
After that:

<CodeGroup>
  ```typescript App.tsx theme={null}
  import { TemplateEditor } from 'sendforsign';

  <TemplateEditor
    token='YourClientToken'
    documentPreview={true}
  />
  ```
</CodeGroup>

## Props

| Prop              | Type                                      | Default | Description                                                                                                                                                                                                     |
| ----------------- | ----------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `apiKey`          | `string`                                  |         | 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](/api-reference/implementation_server#generate-client-tokens).                                         |
| `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.                                            |