Render Liquid templates within Directus flows.
npm install @directus-labs/liquidjs-operation
The Liquid Template Rendering Operation allows you to dynamically generate content using the powerful LiquidJS templating language. This operation is perfect for creating personalized emails, generating dynamic content, or any scenario where you need to combine data with templates within a flow.
- Support for both custom and saved templates
- Single and batch processing modes
- Ability to return specific fields from the input data alongside rendered content
- Secure template fetching with optional authentication
Important Note: This extension uses custom delimiters for output tags {# #} instead of the original {{ }} . This is to avoid conflicts with the mustache syntax that Directus uses to populate values from other steps inside a Flow.
---
Sample Saved Template Configuration
!Sample Saved Template Configuration
Sample Custom Template Configuration
!Sample Custom Template Configuration
Choose how to provide the Liquid template:
- Custom: Write the template inline within the operation.
- Saved: Use a template stored in a Directus collection.
Select the processing mode:
- Single: Render one template with a single data object.
- Batch: Render the template multiple times, once for each item in an array of data objects.
- (Custom Mode Only)
Enter your Liquid template here. Use {# #} for output tags instead of {{ }}. All other Liquid tags remain unchanged.
Example: Hello, {# user.name #}! {% if user.admin %}Admin area{% endif %}
- (Saved Mode Only)
Select the collection containing your saved Liquid templates.
- (Saved Mode Only)
Choose the specific template to render from the selected collection.
- (Saved Mode Only)
Select the fields from the template item to include in the rendering process.
JSON data to populate the template. Format: object for single mode, array of objects for batch mode. Supports mustache syntax for dynamic values, e.g., {"user": "{{$trigger.user}}"}
- (Saved Mode Only)
Required for accessing private template collections. Ensure the token has read permissions for the template collection.
The public URL of your Directus instance. Used for fetching saved templates.
- (Batch Mode Only)
Choose fields from your input data to include in each output object. Useful for maintaining context or identification (e.g., "id", "name"). These fields will be added alongside the rendered template for each item in batch mode.
---
- Template Mode: Custom
- Operation Mode: Single
Template
`` Hi {# first_name #}! Thanks for registering for XYZ! Here's your confirmation code: The Teamjsx`{# confirmation_code #} p
Data
`json`
{
"first_name": "Bryant",
"confirmation_code": "ABCDEFG",
"ticket": {
"slug": "test"
}
}
Output
` Hi Bryant! Thanks for registering for XYZ! Here's your confirmation code: The Teamjson`
{
"template": "\n"ABCDEFG
p\n\n
\n
}
- Template Mode: Custom
- Operation Mode: Batch
- Return Fields From Data: [”first_name”]
Template
` Hi {# first_name #}! Thanks for registering for XYZ! Here's your confirmation code: The Teamjson`{# confirmation_code #} p
Data
`json`
[
{
"first_name": "Bryant",
"confirmation_code": "ABCDEFG",
"ticket": {
"slug": "test"
}
},
{
"first_name": "John",
"confirmation_code": "HIJKLM",
"ticket": {
"slug": "test"
}
}
]
Output
` Hi Bryant! Thanks for registering for XYZ! Here's your confirmation code: The Team Hi John! Thanks for registering for XYZ! Here's your confirmation code: The Teamjson``
[
{
"first_name": "Bryant",
"template": "\n"ABCDEFG
p\n\n
\n
},
{
"first_name": "John",
"template": "\n"HIJKLM
p\n\n
\n
}
]
---
- When using saved templates, ensure that the access token has the minimum necessary permissions.
- Be cautious when using user-provided data in templates to avoid potential security risks.
- Consider using Directus roles and permissions to control access to sensitive templates or data.