JSON Rules Schema & Setting Types

Detailed technical documentation and implementation guide for JSON Rules Schema & Setting Types.

Overview of {% rules %} Schema #

The `{% rules %}` block placed at the bottom of any `.jw` file defines the settings UI rendered in the JoonWeb Site Builder sidebar, as well as the backend data-binding engine for that section.

### Schema Blueprint & Key Properties

```jw
{% rules %}
{
  "name": "Featured Products Grid",
  "type": "ProductFeed",
  "tag": "section",
  "class": "featured-products-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Section Heading",
      "default": "Trending Products"
    },
    {
      "type": "number",
      "id": "limit",
      "label": "Number of Products",
      "default": 8
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Top Spacing",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "px",
      "default": 40
    }
  ],
  "blocks": [
    {
      "type": "badge",
      "name": "Offer Badge",
      "settings": [
        { "type": "text", "id": "badge_text", "label": "Text", "default": "Save 20%" }
      ]
    },
    { "type": "themes" },
    { "type": "apps" }
  ],
  "presets": [
    {
      "name": "Featured Products Grid",
      "category": "Products"
    }
  ]
}
{% endrules %}
```

### Root Configuration Keys

| Key | Type | Description |
|---|---|---|
| `name` | `string` | Human-readable section name displayed in the Site Builder |
| `type` | `string` | **Data Binding Trigger**: Binds backend objects (`"ProductFeed"`, `"CollectionFeed"`, `"catalogue"`, `"cart"`, `"BlogFeed"`, `"blog"`, `"pricing"`) |
| `tag` | `string` | Outer wrapping HTML element (`"section"`, `"header"`, `"footer"`, `"div"`) |
| `class` | `string` | Default CSS class names appended to the section wrapper |
| `settings` | `array` | Configurable input controls displayed in the customizer sidebar |
| `blocks` | `array` | Child components that can be added, sorted, or removed inside this section |
| `presets` | `array` | Default templates enabling the section to appear in the "Add Section" modal |

Complete Input Setting Types Reference #

JoonWeb provides 16 specialized input setting types for theme customizers:

| Type | UI Control | Purpose & Example |
|---|---|---|
| `text` | Single-line text input | `{"type": "text", "id": "title", "label": "Heading", "default": "Title"}` |
| `quickEditor` | Inline text editor | `{"type": "quickEditor", "id": "heading", "label": "Heading"}` |
| `richtext` | Rich text WYSIWYG editor | `{"type": "richtext", "id": "body", "label": "Body Copy"}` |
| `textarea` | Multi-line text field | `{"type": "textarea", "id": "desc", "label": "Description"}` |
| `number` | Numeric stepper | `{"type": "number", "id": "limit", "label": "Count", "default": 8}` |
| `checkbox` | Boolean switch | `{"type": "checkbox", "id": "show_badge", "label": "Show Badge", "default": true}` |
| `select` | Dropdown menu | `{"type": "select", "id": "align", "label": "Alignment", "options": [{"label": "Left", "value": "left"}, {"label": "Center", "value": "center"}]}` |
| `radio` | Radio button group | `{"type": "radio", "id": "style", "label": "Card Style", "options": [...]}` |
| `color` | Hex color picker | `{"type": "color", "id": "accent", "label": "Accent Color", "default": "#2563eb"}` |
| `color_background` | Background picker | `{"type": "color_background", "id": "bg_color", "label": "Background"}` |
| `range` | Slider with step & unit | `{"type": "range", "id": "radius", "label": "Radius", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 12}` |
| `image_picker` | Store media gallery picker | `{"type": "image_picker", "id": "cover", "label": "Cover Image"}` |
| `url` | Link picker object | `{"type": "url", "id": "button_link", "label": "Button Link", "default": {"url": "#", "label": "Shop Now", "target": "_self"}}` |
| `collection` | Store collections picker | `{"type": "collection", "id": "featured_col", "label": "Select Collection"}` |
| `product` | Product picker | `{"type": "product", "id": "featured_pro", "label": "Featured Product"}` |
| `socialicon` | Social profile links | `{"type": "socialicon", "id": "social", "label": "Social Channels"}` |
| `header` | Visual divider in sidebar | `{"type": "header", "content": "Typography & Spacing"}` |

Last modified: Oct 12, 2026

JSON Rules Schema & Setting Types

Overview of {% rules %} Schema #

Complete Input Setting Types Reference #

Endpoint Title