Template Editor

Template Editor

The Template Editor is where you write and manage your Crodox grammar definitions.

---

Opening the Template Editor

To edit a template:

1. Go to the Templates tab from the sidebar
2. Find your template in the list (e.g., my_first_template)
3. Click on the template name or row to open it
4. The Template Editor will open with your grammar code

---

Template Information

In the template list, you can see for each template:

• Template Name - The name you created (e.g., my_first_template)
• Owner - Who created the template (e.g., your username)
• Repository - The GitHub repository linked to test the template (optional)
• Test Repository - The specific repository used for validation
• Source - Where the template came from (e.g., GITHUB)
• Template ID - Unique identifier for the template

---

Template Menu

The Template menu (top-left of the editor) provides the following actions:

Action	Description
Save Template	Save your current grammar (Ctrl+S / Strg+S)
Export Template to Local File	Download the template as a local file
Export Text-Only Local File	Download a plain-text version
Export Template to Repository	Push the template to a GitHub repository
Import Template from Local File	Load a grammar from a file on your machine
Import Template from Repository	Load a grammar from a GitHub repository's .crodox.json

Importing from a Repository

When you select Import Template from Repository, a panel opens where you can:

1. Choose a source repository from the dropdown (e.g., material_template (github), myCRM (github))
2. Click Import to load that repository's .crodox.json into the editor

This overwrites the current grammar with the imported content. It is the recommended starting point for new templates.

---

Template Editor Interface

The template editor displays five sections arranged left to right:

Left to Right Layout

1. Grammar Editor (left) - Text area where you write and edit your Crodox grammar syntax
2. Project Explorer (center-left) - Select repositories and folders for test extraction and slicing
3. Trial Extraction Field (center) - View extracted components identified by your grammar
4. Patch Maker (center-right) - View and manage patches generated from your template
5. Preview Window (right) - Real-time preview of extracted results and patch applications

Top Controls

• Tabs - Navigation between Template, Repository, Workbench sections
• Format Button - Auto-format your grammar code

Project Explorer Actions

• GitHub Link - Shows the linked GitHub repository (e.g., github/myCRM)
• Select a folder - Load files from your repository for testing
• Navigate the folder tree to drill into subdirectories (e.g., app → dashboard)
• Click a file to load it into the editor and run the grammar against it

Extracted Components

• Lists every component the grammar successfully extracted from the selected file
• Each entry shows the component type (e.g., component, function), its ID, and its source path
• "No components extracted yet" until a file is selected and the grammar matches

Patch Maker

• Template Repository - Dropdown to select the template repository that defines patch conditions (e.g., github/material_template)
• Conditions appear as rows (e.g., title==="service"*, title==="module"*)
• Each condition shows how many modifications apply (1 mod, 2 mods)
• Click + Add Root Condition to define a new patch rule

Condition Details

When you click on a condition, the Condition Details panel opens on the right:

• Condition Name - The condition expression (e.g., title==="service")
• Selector - CSS/path selector targeting the component in the source (e.g., service)
• Target File - The file path where the patch will be written (e.g., src/app/environment/environment.module.ts)
• + Add Child / Delete - Extend or remove the condition
• + Add Modification - Add a transformation step to this condition
• Modifications - List of code changes to apply (e.g., src/app/env...)

Patch Preview

• Shows the final diff output for the selected condition and file
• Displays line-by-line additions and removals (@@ unified diff format)
• Updates live as you select different conditions and modifications

---

Working Through a Test Slice

The following walkthrough shows how to validate a grammar against a real repository before building a Workbench:

1. Load the Grammar

Import the grammar from your template repository via Template > Import Template from Repository. Select the repository containing your .crodox.json (e.g., material_template). The grammar loads into the Grammar Editor on the left.

2. Select the Trial Repository

In the Project Explorer, open the repository dropdown and select your trial repository (e.g., github/myCRM). This is the repo you want to test the grammar against.

3. Navigate to a Source File

Drill into the file tree:

1. Click app to expand the folder
2. Click dashboard to expand the subfolder
3. Click a component file (e.g., dashboard.component.ts) to select it

The file opens in the right-hand preview panel, and the grammar runs against it automatically.

4. Review Extracted Components

The Extracted Components section updates to show every object the grammar matched in that file. For example:

• #262 component - object at src/app/dashboard/dashboard.component.ts
• #261 function - object at src/app/dashboard/dashboard.component.ts
• #260 function - object at src/app/dashboard/dashboard.component.ts

If this section is empty, the grammar did not match the file. Review your grammar syntax or try a different file.

5. Select a Patch Template Repository

In the Patch Maker, open the Template Repository dropdown and select the repository that holds your patch definitions (e.g., github/material_template). The patch conditions load below.

6. Inspect a Condition and Modification

Click on a condition row (e.g., title==="service"*) to open the Condition Details panel. Then click on a modification entry to see:

• The Selector used to target the component
• The Target File the patch writes to
• The full Patch Content diff in the Preview window

If the selector and file path match your expectations, the template is correctly configured.

7. Build a Workbench

Once the extracted components and patch preview look correct, you are ready to run this template at scale. Go to Creating a Workbench to analyze your repositories and generate patches across the codebase.

---

Writing Your Grammar

In the left editor area, write your grammar using Crodox syntax:

<~ file.py ~>
<: import :> <<name>>
<: class :> <<name>> <- function, variable ->
  <: function :> <<name>> <- variable ->
    <: parameter :> <<name>>

Key Elements:

• <~ file.xy ~> - File type definition
• <: name :> - Visible object
• <<name>> - Variable reference
• <- type1, type2 -> - Allowed children (sub-body)
• <? ... ?> - Optional/repeat blocks
• <* name *> - Hidden objects

---

Saving Your Template

1. Write or edit your grammar in the editor
2. Click Save
3. Crodox validates the grammar syntax
4. If valid - Template is saved and ready to use
5. If error - Check the error message and fix your grammar

Tip: See Syntax Overview for complete grammar reference.

---

Template Actions

From the template list, you can:

• Click to Edit - Open the template in the editor
• Export - Download the template as a .crodox file
• Delete - Remove the template permanently (cannot be undone)
• More Options - Access additional template actions (three dots menu)

---

Next Steps

1. Write your grammar definition in the editor
2. Click Save to validate and store it
3. Create a Workbench to test your template against a repository

---

See also: App-Template - Full template documentation · Syntax Overview - Grammar syntax reference · Creating Your First Template - Step-by-step guide