Join us for a Live Demo & Q&A Session
Directus Logo
  • Use Cases and Features
    • Headless CMS
      Manage and deliver content with ease
    • Backend-as-a-Service
      Build and ship applications faster
    • Headless Commerce
      A single source of truth for products
    • 100+ More Use Cases
      Build anything (or everything)
    • Instant APIs
      Connect a database, get REST + GraphQL APIs
    • Granular Policy-Based Auth
      Provide secure, autonomous data access
    • Visual Automation Builder
      Automate content and data workflows with ease
    • 50+ More Features
      Get everything you need out-of-the-box
    Project Showcase
    Built With Directus

    Built With Directus

    See what everyone's been building with Directus

  • Learn More
    • Blog
      Read our latest articles and guides
    • Case Studies
      Case studies and success stories
    • Community
      Join our new community forum.
    • Agency Directory
      Browse our list of agency partners
    • About Us
      Learn more about Directus and the team
    • Wall of Love
      See what others are saying about us
    • Contact
      Have a general inquiry or question for us?
    • Support
      Reach out to Directus support
    Watch Directus TV
    Directus TV
    Video

    Directus TV

    Go down the rabbit hole with hours of original video content from our team.

  • Developers
  • Enterprise
  • Pricing
Book a DemoCloud Login
GitHub logo32,278
Directus Marketplace
Marketplace
  1. Extensions
  2. Integrations
  3. Templates
Back to Extensions
operation

Liquidjs Operation

Render Liquid templates within Directus flows.

Liquid Template Operation

Liquid Template 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.

Features

  • 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.


Configuration Options

Sample Saved Template Configuration Sample Saved Template Configuration

Sample Custom Template Configuration Sample Custom Template Configuration

Template Mode

Choose how to provide the Liquid template:

  • Custom: Write the template inline within the operation.
  • Saved: Use a template stored in a Directus collection.

Operation Mode

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.

Template

  • (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 %}

Collection

  • (Saved Mode Only)

Select the collection containing your saved Liquid templates.

Template Item

  • (Saved Mode Only)

Choose the specific template to render from the selected collection.

Fields to Render

  • (Saved Mode Only)

Select the fields from the template item to include in the rendering process.

Data

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}}"}

Access Token

  • (Saved Mode Only)

Required for accessing private template collections. Ensure the token has read permissions for the template collection.

Public URL

The public URL of your Directus instance. Used for fetching saved templates.

Data Fields to Return

  • (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.


Samples

Single Mode Example

  • Template Mode: Custom
  • Operation Mode: Single

Template

<div>
<p>Hi {# first_name #}!</p>
<p><strong>Thanks for registering for XYZ!</strong></p>
<p>Here's your confirmation code:</p>
<pre>{# confirmation_code #}</pre> p
<p><strong><a href="https://yoururlhere.com/t/{# ticket.slug #}" target="_blank" rel="noopener">Your Ticket</a></strong></p>
<hr>
<p>The Team</p>
</div>

Data

{
    "first_name": "Bryant",
    "confirmation_code": "ABCDEFG",
    "ticket": {
        "slug": "test"
    }
}

Output

{
  "template": "<div>\n<p>Hi Bryant!</p>\n<p><strong>Thanks for registering for XYZ!</strong></p>\n<p>Here's your confirmation code:</p>\n<pre>ABCDEFG</pre> p\n<p><strong><a href=\"https://yoururlhere.com/t/test\" target=\"_blank\" rel=\"noopener\">Your Ticket</a></strong></p>\n<hr>\n<p>The Team</p>\n</div>"
}

Batch Mode Example

  • Template Mode: Custom
  • Operation Mode: Batch
  • Return Fields From Data: [”first_name”]

Template

<div>
<p>Hi {# first_name #}!</p>
<p><strong>Thanks for registering for XYZ!</strong></p>
<p>Here's your confirmation code:</p>
<pre>{# confirmation_code #}</pre> p
<p><strong><a href="https://yoururlhere.com/t/{# ticket.slug #}" target="_blank" rel="noopener">Your Ticket</a></strong></p>
<hr>
<p>The Team</p>
</div>

Data

[
    {
        "first_name": "Bryant",
        "confirmation_code": "ABCDEFG",
        "ticket": {
            "slug": "test"
        }
    },
    {
        "first_name": "John",
        "confirmation_code": "HIJKLM",
        "ticket": {
            "slug": "test"
        }
    }
]

Output

[
  {
    "first_name": "Bryant",
    "template": "<div>\n<p>Hi Bryant!</p>\n<p><strong>Thanks for registering for XYZ!</strong></p>\n<p>Here's your confirmation code:</p>\n<pre>ABCDEFG</pre> p\n<p><strong><a href=\"https://yoururlhere.com/t/test\" target=\"_blank\" rel=\"noopener\">Your Ticket</a></strong></p>\n<hr>\n<p>The Team</p>\n</div>"
  },
  {
    "first_name": "John",
    "template": "<div>\n<p>Hi John!</p>\n<p><strong>Thanks for registering for XYZ!</strong></p>\n<p>Here's your confirmation code:</p>\n<pre>HIJKLM</pre> p\n<p><strong><a href=\"https://yoururlhere.com/t/test\" target=\"_blank\" rel=\"noopener\">Your Ticket</a></strong></p>\n<hr>\n<p>The Team</p>\n</div>"
  }
]

Security Considerations

  • 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.

@directus-labs/liquidjs-operation

npm i @directus-labs/liquidjs-operation
This extension is sandboxed and can be installed through the Directus Marketplace. Learn more.
Bryant Gillespie
Bryant Gillespie
Verified
11.6k Total Downloads
1.0.1
Works with v10.10.0+
Updated 3 months ago
MIT License
133.0 KiB (4 files)
npm
  • Directus LogoDirectus Logo

    A composable backend to build your Headless CMS, BaaS, and more. 

  • Solutions
    • Headless CMS
    • Backend-as-a-Service
    • Product Information
    • 100+ Things to Build
  • Resources
    • Documentation
    • Guides
    • Community
    • Release Notes
  • Support
    • Issue Tracker
    • Feature Requests
    • Community Chat
    • Cloud Dashboard
  • Organization
    • About
    • Careers
    • Brand Assets
    • Contact
©2025 Monospace Inc
  • Cloud Policies
  • License
  • Terms
  • Privacy