Template System Examples | RSL JSON Layout API

How Templates Work

Define a template item once, provide an array of data, and the engine generates one item per data object. Use {{propertyName}} to insert values from each object.

{{key}} — Replace with data[key]
{{index}} — Current item index (0-based)
{{index1}} — Current item index (1-based)

Example 1: Product Grid

Render a product catalog from an array of product data.

// Your data array
const products = [
    { name: "Wireless Headphones", price: "99", image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop", rating: "4.5" },
    { name: "Smart Watch", price: "199", image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&h=400&fit=crop", rating: "4.8" },
    { name: "Laptop Stand", price: "49", image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=400&fit=crop", rating: "4.3" },
    { name: "USB-C Hub", price: "79", image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop", rating: "4.6" }
];

// Template renders one card per product
RSL.JSONLayout.renderLayout('#product-demo', {
    version: 2,
    layoutId: "product-grid",
    breakpoints: { xs: 1, sm: 2, lg: 4 },
    gap: "1.5rem",
    template: {
        data: products,
        item: {
            content: {
                type: "card",
                image: "{{image}}",
                title: "{{name}}",
                text: "Rating: {{rating}}/5",
                price: "${{price}}",
                button: {
                    text: "Add to Cart",
                    variant: "primary",
                    icon: "fa fa-shopping-cart"
                }
            }
        }
    }
});

Example 2: Team Members

Display team member cards with social links from data.

const teamMembers = [
    { name: "Alex Morgan", role: "CEO", bio: "Visionary leader with 15 years experience", photo: "../images/placeholder.png" },
    { name: "Jordan Lee", role: "Lead Developer", bio: "Full-stack expert and architecture guru", photo: "../images/placeholder.png" },
    { name: "Sam Taylor", role: "Designer", bio: "Creating beautiful user experiences", photo: "../images/placeholder.png" },
    { name: "Casey Kim", role: "Marketing", bio: "Growth hacker and brand storyteller", photo: "../images/placeholder.png" }
];

RSL.JSONLayout.renderLayout('#team-demo', {
    version: 2,
    layoutId: "team-grid",
    breakpoints: { xs: 1, sm: 2, lg: 4 },
    gap: "1.5rem",
    template: {
        data: teamMembers,
        item: {
            content: {
                type: "card",
                image: "{{photo}}",
                title: "{{name}}",
                subtitle: "{{role}}",
                text: "{{bio}}",
                variant: "outlined"
            }
        }
    }
});

Example 3: Feature List with Icons

Render feature cards with icons from a data array.

const features = [
    { icon: "fa fa-bolt", title: "Lightning Fast", desc: "Optimized for maximum performance" },
    { icon: "fa fa-mobile-alt", title: "Fully Responsive", desc: "Perfect on any device size" },
    { icon: "fa fa-code", title: "Developer Friendly", desc: "Simple JSON configuration" },
    { icon: "fa fa-shield-alt", title: "Accessible", desc: "WCAG 2.1 AA compliant" },
    { icon: "fa fa-puzzle-piece", title: "Modular", desc: "Use only what you need" },
    { icon: "fa fa-palette", title: "Customizable", desc: "Full CSS variable support" }
];

RSL.JSONLayout.renderLayout('#feature-demo', {
    version: 2,
    layoutId: "feature-list",
    breakpoints: { xs: 1, md: 2, lg: 3 },
    gap: "1.5rem",
    template: {
        data: features,
        item: {
            content: {
                type: "card",
                titleIcon: "{{icon}}",
                title: "{{title}}",
                body: "{{desc}}"
            }
        }
    }
});

Example 4: Using Index Numbers

Use {{index}} (0-based) or {{index1}} (1-based) for numbering.

const steps = [
    { title: "Sign Up", desc: "Create your free account in seconds" },
    { title: "Configure", desc: "Set up your layout with JSON" },
    { title: "Deploy", desc: "Publish to your website instantly" }
];

RSL.JSONLayout.renderLayout('#index-demo', {
    version: 2,
    layoutId: "steps-list",
    breakpoints: { xs: 1, md: 3 },
    gap: "1.5rem",
    template: {
        data: steps,
        item: {
            content: {
                type: "card",
                title: "Step {{index1}}: {{title}}",  // {{index1}} = 1, 2, 3...
                text: "{{desc}}",
                variant: "outlined"
            }
        }
    }
});