Skip to main content

How to Edit RenderDoc Templates with AI

You can use AI tools to modify existing RenderDoc templates based on your requirements. Whether you need to add new components, change styling, add conditional logic, or restructure your template, AI can help.

RenderDoc supports two editing modes:

  • Full Document Editing - Update the entire template (variables + all pages)
  • Page-Level Editing - Update just a single page (great for multi-page documents)

Prerequisites​

  1. An AI Chat Account: ChatGPT Plus, Claude, Gemini Advanced, or similar.
  2. Your Existing Template: Export both the Variables JSON and Template Schema from RenderDoc.
  3. The RenderDoc Schema Reference: Use one of these options:
info

For best results, provide the AI with both your existing template AND the schema reference so it understands the valid structure.

Quick Start: Using the Built-in AI Dialog​

The easiest way to edit templates with AI is using the built-in Generate with AI dialog in the Template Designer.

Full Document Editing​

  1. Open your template in the Template Designer
  2. Click the AI button in the toolbar
  3. Keep Generation Scope set to "Full Document (all pages)"
  4. Describe what you want to change
  5. Click Open ChatGPT or Open Claude
  6. Apply the generated JSON to your template

Page-Level Editing (Multi-Page Documents)​

For PDF/Excel templates with multiple pages, you can edit just one page at a time:

  1. Open your template in the Template Designer
  2. Click the AI button in the toolbar
  3. In Generation Scope, select the specific page you want to edit (e.g., "Page 2: Summary")
  4. Describe your changes for that page
  5. Click Open ChatGPT or Open Claude
  6. The AI will generate JSON for only that page
  7. Click the Code button (</>) on the page tab to apply the result
Page-Level Benefits
  • Faster AI responses (smaller context)
  • No risk of accidentally changing other pages
  • Easier to review changes
  • Great for iterative refinements

Manual Export: How to Get Your Current Template JSON​

If you prefer to manually construct prompts, you'll need to export both the variables and schema.

Export Variables​

  1. Open your template in the Template Designer
  2. Click Manage Variables in the toolbar
  3. Switch to the Raw JSON tab
  4. Copy the entire JSON array

Export Full Schema​

  1. Click the code icon (</>) in the toolbar to open Raw Schema Editor
  2. Copy the entire JSON schema

Export Single Page Schema​

  1. Click the code icon (</>) on the specific page tab (not the toolbar)
  2. Copy the page JSON schema

The Edit Prompt Template​

Copy this prompt and customize it for your specific edit request:

I am providing you with an existing RenderDoc template that I need to modify. Please read the RenderDoc schema documentation first to understand the valid structure.

**EXISTING VARIABLES (Plain JSON Array):**
```json
[PASTE YOUR VARIABLES JSON HERE]

EXISTING TEMPLATE SCHEMA:

[PASTE YOUR SCHEMA JSON HERE]

MY EDIT REQUEST: [DESCRIBE WHAT YOU WANT TO CHANGE]

STRICT REQUIREMENTS:

  1. Variables Format:

    • Output variables as a PLAIN JSON ARRAY [...].
    • Do NOT wrap variables in an object like { "variables": [...] }.
    • Preserve ALL existing variables unless explicitly asked to remove them.
    • Add defaultValue for any NEW variables.

  2. Schema Changes:

    • Preserve existing component IDs unless they need to change.
    • Use descriptive, kebab-case IDs for new components.
    • Use rich-text for all text content (NOT the deprecated text component).

  3. Output Format:

    • Provide EXACTLY two separate JSON code blocks:
      • Block 1: The Updated Variables JSON (Plain Array)
      • Block 2: The Updated Template JSON (Schema)
    • Clearly indicate what changed with comments or explanations.

---

## Page-Level Edit Prompt Template

For editing a single page in a multi-page document, use this prompt:

```text
First, fetch and read the RenderDoc Template Schema Reference from: https://docs.renderdoc.dev/llms-templates.txt

I am providing you with a SINGLE PAGE from an existing RenderDoc document template that I need to modify. Please read the RenderDoc schema documentation first to understand the valid structure.

**IMPORTANT:** I am only updating **[PAGE NAME]** (Page [PAGE NUMBER]). Do NOT generate the full document - only this page's schema.

**EXISTING VARIABLES (for reference - these are shared across all pages):**
```json
[PASTE YOUR VARIABLES JSON HERE]

CURRENT PAGE SCHEMA ([PAGE NAME]):

[PASTE THE PAGE JSON HERE]

MY EDIT REQUEST: [DESCRIBE WHAT YOU WANT TO CHANGE ON THIS PAGE]

STRICT REQUIREMENTS:

  1. Output Scope:

    • Generate ONLY the page schema for "[PAGE NAME]".
    • Do NOT generate the full document with all pages.
    • Do NOT include variables in your output (they are managed separately).

  2. Page Schema Format:

    • Output a SINGLE JSON object representing this page.
    • Include: id, pageName, sections array, and settings (optional).
    • Preserve the existing page id.

  3. Schema Changes:

    • Preserve existing component IDs unless they need to change.
    • Use descriptive, kebab-case IDs for new components.
    • Use heading for headings and text for styled paragraphs.
    • Use table for data-driven tables from arrays.

  4. Excel-Specific Features:

    • Use tableName on tables to create Excel Named Tables.
    • Use tableStyle for Excel table formatting (e.g., "TableStyleMedium2").
    • Add name prop to components for Excel Named Ranges.
    • Use excelFormula in columns for native Excel formulas.

  5. Output Format: Provide EXACTLY ONE JSON code block:

    • The Updated Page Schema (single page object with id, pageName, sections)

    Example structure:

    {
      "id": "page-1",
      "pageName": "Invoice",
      "sections": [...],
      "settings": { ... }
    }

### Applying Page-Level Changes

After the AI generates the updated page JSON:

1. Navigate to the page you want to update in the Template Designer
2. Click the **Code** button (`</>`) on the **page tab** (not the main toolbar)
3. Paste the updated page JSON
4. Click **Apply Changes**

:::warning[Important]
When editing a single page, make sure you:
- Apply the result using the **page-level** Code button (on the page tab)
- NOT the document-level Code button (in the toolbar)

The document-level Code button expects the full schema with all pages.
:::

---

## Common Edit Requests

Here are prompts for common template modifications:

### Add a New Section

```text
Add a new section to my document template that displays a promotional banner.
The banner should:
- Have a colored background (#f0f9ff)
- Display a heading "Special Offer!"
- Show promotional text with a variable {{promoMessage}}
- Include a CTA button linking to {{promoUrl}}

Add Conditional Content​

Add conditional logic to show a "Past Due" warning banner only when
the variable {{paymentStatus}} equals "overdue".

The banner should:
- Have a red background (#fef2f2)
- Display warning text "Payment is past due"
- Only appear when the condition is true

Add a Data Table​

Add a table component to display line items from my {{items}} array variable.

The table should have columns for:
- Item Name (from item.name)
- Quantity (from item.quantity)
- Unit Price (from item.price, formatted as currency)
- Total (from item.total, formatted as currency)

Include a footer row showing the grand total from {{orderTotal}}.

Change Styling​

Update the styling of my template:
- Change the header background color from #ffffff to #1e40af
- Make the header text white
- Increase the padding around the main content to 40px
- Add rounded corners (8px) to the main container

Add a Calculated Variable​

Add a calculated variable called "subtotal" that:
- Sums up all item.price * item.quantity from the {{items}} array
- Uses the expression: items.reduce((sum, item) => sum + (item.price * item.quantity), 0)
- Has type "number" and isCalculated: true

Add a Loop Component​

Replace the static list with a loop component that iterates over {{features}} array.
Each feature should display:
- A checkmark icon (use a green checkmark emoji or HTML entity)
- The feature text from {{feature.name}}
- A description from {{feature.description}}

Edit a Single Page (Page-Level)​

I want to update the "Summary" page (Page 2) to:
- Add a pie chart showing expense breakdown by category
- Replace the current text summary with a key-value list
- Add a conditional section that shows "On Budget" or "Over Budget" based on {{budgetStatus}}

Add an Image​

Add a company logo image at the top of the template:
- Use the variable {{companyLogo}} for the image source
- Set width to 150px
- Center the image
- Add 20px margin below

Convert to Excel Format​

Convert this PDF template to an Excel template:
- Change outputFormats to ["xlsx"]
- Ensure tables work with Excel column formatting
- Preserve calculated columns
- Add appropriate cell styling

Merging Changes Back to RenderDoc​

After the AI generates updated JSON:

Step 1: Validate Variables​

  1. Open Manage Variables in the Template Designer
  2. Switch to Raw JSON tab
  3. Paste the updated variables array
  4. Click Validate to check for errors
  5. Review the changes - ensure no variables were accidentally removed
  6. Click Apply Changes

Step 2: Validate Schema​

  1. Open the Raw Schema Editor (</> icon)
  2. Paste the updated schema JSON
  3. Click Validate to check for errors
  4. Review the visual preview to ensure it looks correct
  5. Click Apply Changes

Step 3: Test the Template​

  1. Click Preview to see the template with sample data
  2. Test any conditional logic by changing variable values
  3. Verify loops render correctly with array data
  4. Generate a test document to verify the final output

Pro Tips for Better Edits​

TipExample
Be SpecificInstead of "make it look better", say "add 16px padding and #f3f4f6 background"
Reference Component IDs"Update the component with id 'header-text' to use font-size 24px"
Preserve StructureAsk AI to "add to" rather than "replace" when you want incremental changes
Request ExplanationsAdd "Explain what you changed and why" to understand the modifications
Iterate IncrementallyMake one change at a time for complex templates

Troubleshooting​

warning

Issue: AI removes existing variables or components

Solution: Explicitly state "Preserve ALL existing variables and components. Only add/modify what I requested."

warning

Issue: AI changes component IDs unnecessarily

Solution: Add "Keep all existing component IDs unchanged unless the component itself needs to change."

warning

Issue: Validation fails after applying changes

Solution: Check for:

  • Missing required fields (name, type for variables)
  • Invalid component types
  • Malformed JSON (missing commas, brackets)
  • Variables referenced in template but not defined
warning

Issue: AI uses deprecated text component

Solution: Remind the AI: "Use rich-text instead of text - the text component is deprecated."

See Also​