> ## 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.

# Draft a Template

> Learn how to prepare template and create a document from it.

## Set up your account

Before using components from the React SDK, see the [First document use case](/usecase/firstdoc) to set up your
platform account and get the API key.

## Create your template

SFS provides you with two ways of creating templates: by using an API request (API way) or via our React UI (visual way).
Let's create a simple template using our React Components.

Navigate to your SFS account and proceed to the Components tab, find the Template editor component
and press the 'Live Demo' button.

<Frame caption="Components">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/usecase/img/2.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=f40ee1c63ef7ebb537433dbd27f6281a" width="2516" height="798" data-path="usecase/img/2.png" />
</Frame>

Now you're ready to draft your first template. To do this, use your API and Client keys to make the component functional.

<Frame caption="Template editor">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/usecase/img/3.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=0aeea8aaea4ea7d7ee4623acefa20ced" width="2186" height="578" data-path="usecase/img/3.png" />
</Frame>

## Draft your template

Upload a Word file, a PDF file, or create a template from scratch.

<Frame caption="Template editor">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/usecase/img/4.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=9b55e2fcaa4c7cc69b3ed1382f2fadf5" width="1748" height="938" data-path="usecase/img/4.png" />
</Frame>

## Add content

Now, add content. Highlight text to see options.

<Frame caption="Template editor">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/usecase/img/5.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=ec79133635f2e4d7f3822ccab64e683e" width="2144" height="470" data-path="usecase/img/5.png" />
</Frame>

## Add placeholders

If you need reusable parts of text that you will be using throughout the template content,
add placeholders and paste them into the text. Your template is ready to be used!

<Frame caption="Placeholders">
  <img src="https://mintcdn.com/sendforsign/bDeZDTsZ_41-V2Bk/usecase/img/6.png?fit=max&auto=format&n=bDeZDTsZ_41-V2Bk&q=85&s=b89e2f83d3eb97758c86878b66b7f43f" width="2848" height="724" data-path="usecase/img/6.png" />
</Frame>

## Create a document from this template

Now you have the ability to create as many documents from this template as you need. When creating a
contract from a template, the content, placeholders, and recipients from the template will be
copied to the brand new contract. [Learn more here.](/api-reference/contract/create-fill)

```bash cURL theme={null}
curl -X POST 'https://api.sendforsign.com/api/contract' \
     -H 'X-Sendforsign-Key: YOUR_API_KEY' \
     -H 'Content-Type: application/json' \
     -d '{
    "data": {
        "action": "create",
        "clientKey": "CLIENT_KEY",
        "contract": {
            "name": "New contract",
            "templateKey": "TEMPLATE_KEY"
        },
        "placeholders": [
            {
                "placeholderKey": "PLACEHOLDER_KEY",
                "value": "Placeholder value"
            },
            {
                "name": "Placeholder name",
                "value": "Placeholder value"
            }
        ]
    }
}'
```

Take a look at the placeholders array. By using this, you can immediately fill in the placeholders,
so the contract will have all the necessary data in the locations specified by you. To do this, you simply
need to provide the call with the placeholder key from the template. This way, the system will identify this
placeholder and fill it with the value you need.