Section Anatomy & Block System

Detailed technical documentation and implementation guide for Section Anatomy & Block System.

Section Anatomy Template #

A standard JoonWeb section consists of a `.jw` template and a `{% rules %}` JSON schema:

```jw
{# 1. SET VARIABLES #}
{% set bg_color = section.settings.bg_color | default("#ffffff") %}
{% set padding_t = section.settings.padding_top | default(60) %}

{# 2. SECTION WRAPPER #}
<section id="jw-section-{{ section.id }}" 
         style="background: {{ bg_color }}; padding: {{ padding_t }}px 0;">
    
    {# 3. CONTAINER #}
    <div class="jw-container" data-id="{{ section.id }}">
        
        {# 4. CONTENT & BLOCKS LOOP #}
        {% if section.blocks is defined and section.blocks | length > 0 %}
            {% for block in section.blocks %}
                {% switch block.type %}
                    {% case "heading" %}
                        <h2 {{ jw_attributes(block) }}>{{ block.settings.title }}</h2>
                    {% default %}
                        {{ render_block(block) }}
                {% endswitch %}
            {% endfor %}
        {% else %}
            <p>Add content blocks.</p>
        {% endif %}
        
    </div>
</section>

{# 5. SCHEMA #}
{% rules %}
{
  "name": "Section Name",
  "settings": [],
  "blocks": [
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [{ "name": "Default", "settings": {} }]
}
{% endrules %}
```

Essential Attributes & Functions #

Defining & Rendering Custom Blocks #

Last modified: Aug 25, 2026

Section Anatomy & Block System

Section Anatomy Template #

Essential Attributes & Functions #

Defining & Rendering Custom Blocks #

Endpoint Title