Variables & Transforms
Variables allow you to create dynamic, reusable schemas. This guide covers variable syntax and available transformations.
Variable Syntax
Variables use the %VARIABLE_NAME% format:
<folder name="%PROJECT_NAME%">
<file name="%COMPONENT_NAME%.tsx" />
</folder>
Naming Conventions
- Use UPPERCASE with underscores:
PROJECT_NAME,AUTHOR_EMAIL - Names can contain letters, numbers, and underscores
- Names must start with a letter
Variable Detection
Structure Creator automatically detects variables in your schema and displays them in the Variables panel. Enter values before creating your structure.
Variable Definitions
Use the <variables> block to provide context for each variable. This helps users understand what values to enter by showing descriptions, placeholders, and examples.
<structure>
<variables>
<variable name="CLIENT_NAME"
description="The client's company name"
placeholder="Enter client name"
example="Acme Corp"
required="true" />
<variable name="PROJECT_TYPE"
description="Type of project (e.g., website, api)"
placeholder="Enter project type"
example="website"
pattern="^[a-z-]+$"
minLength="3"
maxLength="30" />
</variables>
<folder name="%CLIENT_NAME%-%PROJECT_TYPE%">
<file name="README.md" />
</folder>
</structure>
Available Attributes
| Attribute | Description |
|---|---|
name | Variable name without % delimiters (required) |
description | Help text shown below the input field |
placeholder | Placeholder text shown in empty inputs |
example | Example value displayed as "Example: value" |
required | Whether the variable must have a value (true/false) |
pattern | Regex pattern for validation |
minLength | Minimum character length |
maxLength | Maximum character length |
How It Works
When you define variables in the <variables> block:
- Placeholder text appears in the input field when empty
- Description displays below the input to explain what the variable is for
- Example shows a concrete value the user can reference
- Validation rules (
required,pattern,minLength,maxLength) are automatically applied
This is especially useful for templates shared with others, as it provides self-documenting schemas.
Transforms
Apply transformations to format variable values:
%VARIABLE:transform%
Available Transforms
| Transform | Input | Output |
|---|---|---|
uppercase | hello world | HELLO WORLD |
lowercase | HELLO WORLD | hello world |
camelCase | hello world | helloWorld |
PascalCase | hello world | HelloWorld |
kebab-case | HelloWorld | hello-world |
snake_case | HelloWorld | hello_world |
plural | cat | cats |
length | hello | 5 |
Examples
<!-- Package name in kebab-case -->
<file name="package.json">
{
"name": "%PROJECT_NAME:kebab-case%"
}
</file>
<!-- Component name in PascalCase -->
<file name="%COMPONENT:PascalCase%.tsx" />
<!-- Class name in snake_case -->
<file name="%MODEL:snake_case%.py" />
Built-in Variables
Structure Creator provides built-in variables that are automatically available without needing to define them:
| Variable | Description | Example |
|---|---|---|
%PROJECT_NAME% | The project name from the UI | my-awesome-project |
%DATE% | Current date (ISO) | 2024-01-15 |
%DATE:format(FORMAT)% | Formatted date | See below |
%YEAR% | Current year | 2024 |
%MONTH% | Current month (01-12) | 01 |
%DAY% | Current day (01-31) | 15 |
Project Name Variable
The %PROJECT_NAME% variable is special—it's automatically set from the "Project Name" field in the UI. This is the recommended way to name your root folder:
<folder name="%PROJECT_NAME%">
<file name="README.md">
# %PROJECT_NAME%
Welcome to %PROJECT_NAME%!
</file>
</folder>
When you enter "my-awesome-project" in the Project Name field, the folder will be created with that name, and all references to %PROJECT_NAME% in your schema will be replaced.
You can also apply transforms to the project name:
<file name="package.json">
{
"name": "%PROJECT_NAME:kebab-case%",
"displayName": "%PROJECT_NAME:PascalCase%"
}
</file>
Note: If you define %PROJECT_NAME% as a custom variable, your value will override the built-in project name.
Date Formats
Format dates with %DATE:format(FORMAT)%:
<file name="log-%DATE:format(YYYY-MM-DD)%.txt" />
<file name="report-%DATE:format(MMM D, YYYY)%.md" />
Available tokens:
YYYY- 4-digit year (2024)YY- 2-digit year (24)MMMM- Full month (January)MMM- Short month (Jan)MM- 2-digit month (01)DD- 2-digit day (15)D- Day without padding (5)
Variable Validation
Add validation rules to variables in templates:
{
"variable_validation": {
"PROJECT_NAME": {
"required": true,
"pattern": "^[a-z][a-z0-9-]*$",
"minLength": 3,
"maxLength": 50
},
"AUTHOR_EMAIL": {
"required": true,
"pattern": "^[^@]+@[^@]+\\.[^@]+$"
}
}
}
Validation is enforced in the UI before structure creation.
Conditional Variables
Use variables with conditionals:
<if var="INCLUDE_DOCKER">
<file name="Dockerfile" />
<file name="docker-compose.yml" />
</if>
Boolean variables are truthy when:
- Set to "true", "yes", "1", or "on"
- Non-empty string
Variables are falsy when:
- Empty or not set
- Set to "false", "no", "0", or "off"