diff --git a/docs/TurboDocx Templating/How to Build a Template in the Browser.md b/docs/TurboDocx Templating/How to Build a Template in the Browser.md new file mode 100644 index 0000000..f1573b9 --- /dev/null +++ b/docs/TurboDocx Templating/How to Build a Template in the Browser.md @@ -0,0 +1,110 @@ +--- +title: How to Build a Template in the Browser +sidebar_position: 4 +description: Build a TurboDocx template without Word or Google Docs. Write your document in the browser, add headings and tables, and generate documents from it. +keywords: + - build template in browser + - block editor + - browser template editor + - add heading + - add table + - turbodocx template + - document automation + - no word needed +--- + +Most TurboDocx templates start life in Word or Google Docs. You do not have to work that way. You can write a template directly in your browser and save it as a template — no other application involved. + +This guide walks you through building one from scratch. + +:::note When to use this +Building in the browser suits short, text-based documents: statements of work, cover letters, engagement summaries, simple agreements. + +If you already have a polished `.docx` or `.pptx` file — or your document depends on complex Word formatting — upload it instead. See [How to Create a Template](./How%20to%20Create%20a%20Template.md). +::: + +## Step 1: Start a New Template + +1. Open the **Templates** page from the left sidebar. +2. Click the **New Template** button in the top-right corner. + +![Templates page with the New Template button highlighted in the top-right corner](/img/block_template_editor/step_1_new_template.png) + +## Step 2: Choose "Build in browser" + +A short menu appears under the button with two choices. + +1. Click **Build in browser**. + +![New Template menu open, showing Build in browser above Upload a file, with Build in browser highlighted](/img/block_template_editor/step_2_build_in_browser.png) + +The editor opens with an empty page. Type your document into it exactly as you would in any word processor. + +## Step 3: Add Blocks with the + Button + +Headings, tables, lists and images are all added the same way — with the **+** button that appears beside each line. + +1. Move your pointer over the line where you want the new block. A **+** appears to its left. +2. Click the **+**. + +![Block editor with the pointer over an empty line, showing the + add-block button highlighted to the left of the line](/img/block_template_editor/step_3_add_block_button.png) + +A menu opens with everything you can add: + +| Group | Blocks | +|---|---| +| Headings | Heading 1, Heading 2, Heading 3 | +| Basic blocks | Numbered List, Bullet List, Paragraph | +| Advanced | Table | +| Media | Image | + +## Step 4: Add a Heading + +1. Click the **+** button on the line where the heading belongs. +2. Click **Heading 2** in the menu. +3. Type the heading text, for example `Pricing`. + +![Add block menu open with Heading 2 highlighted](/img/block_template_editor/step_4_choose_heading.png) + +:::tip +**Heading 1** is for the document title, **Heading 2** for main sections, and **Heading 3** for subsections beneath them. +::: + +## Step 5: Add a Table + +1. Press **Enter** to start a new line below your heading. +2. Click the **+** button again. +3. Click **Table** under **Advanced**. + +![Add block menu open with Table highlighted under the Advanced group](/img/block_template_editor/step_5_choose_table.png) + +A table appears in your document. Click any cell and type to fill it in, then press **Tab** to move to the next cell. + +![Document showing a Pricing heading above a completed table of services and rates, with the table highlighted](/img/block_template_editor/step_6_heading_and_table.png) + +## Step 6: Name and Create the Template + +1. Click **Untitled** at the top of the page and type a name for your template. +2. Click **Create Template** in the top-right corner. + +![Block editor containing a Statement of Work heading, with the Create Template button highlighted](/img/block_template_editor/step_7_create_template.png) + +## Step 7: Generate a Document + +Your new template opens ready to use. + +1. Fill in any variables in the **Template Variables** panel on the right. The document preview updates to show your values. +2. Click **Generate Deliverable** in the top-right corner. + +![Generate page showing the finished document with the Generate Deliverable button highlighted](/img/block_template_editor/step_8_generate_deliverable.png) + +Your document is created and appears under **Deliverables**, where you can download it as a Word file or PDF, or send it for signature. + +:::tip Editing the template later +Open the template and click **Edit Template** to reopen it in the browser editor. Changes there apply to documents you create from that point on — documents you have already generated are not affected. +::: + +## What's Next + +- [How to Create a Deliverable](./How%20to%20Create%20a%20Deliverable.md) — generating documents from any template +- [How to Create a Knowledgebase Entry](./How%20to%20Create%20a%20Knowledgebase%20Entry.md) — reusable default values for your variables diff --git a/static/img/block_template_editor/step_1_new_template.png b/static/img/block_template_editor/step_1_new_template.png new file mode 100644 index 0000000..9245002 Binary files /dev/null and b/static/img/block_template_editor/step_1_new_template.png differ diff --git a/static/img/block_template_editor/step_2_build_in_browser.png b/static/img/block_template_editor/step_2_build_in_browser.png new file mode 100644 index 0000000..59be2cc Binary files /dev/null and b/static/img/block_template_editor/step_2_build_in_browser.png differ diff --git a/static/img/block_template_editor/step_3_add_block_button.png b/static/img/block_template_editor/step_3_add_block_button.png new file mode 100644 index 0000000..9f4b7b5 Binary files /dev/null and b/static/img/block_template_editor/step_3_add_block_button.png differ diff --git a/static/img/block_template_editor/step_4_choose_heading.png b/static/img/block_template_editor/step_4_choose_heading.png new file mode 100644 index 0000000..0691c79 Binary files /dev/null and b/static/img/block_template_editor/step_4_choose_heading.png differ diff --git a/static/img/block_template_editor/step_5_choose_table.png b/static/img/block_template_editor/step_5_choose_table.png new file mode 100644 index 0000000..128ef02 Binary files /dev/null and b/static/img/block_template_editor/step_5_choose_table.png differ diff --git a/static/img/block_template_editor/step_6_heading_and_table.png b/static/img/block_template_editor/step_6_heading_and_table.png new file mode 100644 index 0000000..0dd44a4 Binary files /dev/null and b/static/img/block_template_editor/step_6_heading_and_table.png differ diff --git a/static/img/block_template_editor/step_7_create_template.png b/static/img/block_template_editor/step_7_create_template.png new file mode 100644 index 0000000..7d6170a Binary files /dev/null and b/static/img/block_template_editor/step_7_create_template.png differ diff --git a/static/img/block_template_editor/step_8_generate_deliverable.png b/static/img/block_template_editor/step_8_generate_deliverable.png new file mode 100644 index 0000000..d42b2e1 Binary files /dev/null and b/static/img/block_template_editor/step_8_generate_deliverable.png differ