javascript Tag

The javascript tag wraps inline JavaScript code in <script> tags. It’s useful for embedding small scripts directly in your templates.

Syntax

{% javascript %}
  // Your JavaScript code here
{% endjavascript %}

Output

The tag wraps your code in a <script> element:

Input

{% javascript %}
  console.log('Hello from Liquid!');
{% endjavascript %}

Output

<script>
  console.log('Hello from Liquid!');
</script>

Example Usage

Block-specific initialization:

{# In a carousel block #}
<div id="carousel-{{ block.id }}" class="carousel">
  {% for slide in block.slides %}
    <div class="carousel__slide">{{ slide.content_html }}</div>
  {% endfor %}
</div>

{% javascript %}
  document.addEventListener('DOMContentLoaded', function() {
    new Carousel('#carousel-{{ block.id }}', {
      autoplay: {{ block.autoplay | default: false }},
      interval: {{ block.interval | default: 5000 }}
    });
  });
{% endjavascript %}

Conditional scripts:

{% if page.has_map %}
  {% javascript %}
    function initMap() {
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: {{ venue.latitude }}, lng: {{ venue.longitude }} },
        zoom: 15
      });
    }
  {% endjavascript %}
{% endif %}

Passing data to JavaScript:

{% javascript %}
  window.eventData = {
    id: '{{ event.id }}',
    title: '{{ event.title | escape }}',
    startDate: '{{ event.startDate }}'
  };
{% endjavascript %}

Tip

For larger scripts, consider using external JavaScript files loaded with the script_tag filter instead of inline code.

Caution

Be careful when outputting user-generated content in JavaScript. Always escape strings to prevent XSS vulnerabilities:

{% javascript %}
  const title = '{{ event.title | escape | replace: "'", "\\'" }}';
{% endjavascript %}