# Data Driven Layouts

> Template-driven layouts require code changes for structural updates:

- Skill: `gabrielmoreira/data-driven-layouts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add gabrielmoreira/data-driven-layouts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gabrielmoreira/data-driven-layouts/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: gabrielmoreira (https://skillmd.com/u/gabrielmoreira)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/gabrielmoreira/data-driven-layouts

---


# Data-Driven Layouts

## The Problem

Template-driven layouts require code changes for structural updates:

```javascript
// Bad: structure embedded in code
function renderDashboard() {
  return `
    <div class="section">
      <h2>Users</h2>
      ${renderUserTable()}
    </div>
    <div class="section">
      <h2>Revenue</h2>
      ${renderRevenueChart()}
    </div>
  `;
}
// Adding a new section = code change
```

## The Solution

Define layout structure as data. Rendering is generic.

```javascript
// layouts/dashboard.json
{
  "sections": [
    { "id": "users", "title": "Users", "component": "userTable" },
    { "id": "revenue", "title": "Revenue", "component": "revenueChart" },
    { "id": "alerts", "title": "Alerts", "component": "alertList" }
  ]
}
```

```javascript
// Generic renderer
const components = {
  userTable: () => renderUserTable(),
  revenueChart: () => renderRevenueChart(),
  alertList: () => renderAlertList()
};

function renderDashboard(layout) {
  return layout.sections.map(section => `
    <div class="section" id="${section.id}">
      <h2>${section.title}</h2>
      ${components[section.component]()}
    </div>
  `).join('');
}

// Usage
const layout = require('./layouts/dashboard.json');
const html = renderDashboard(layout);
```

## Benefits

- Add sections by editing JSON, not code
- Reorder by changing array order
- Non-developers can modify layouts
- Easier to A/B test different layouts

## Schema Example

```json
{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "sections": {
      "type": "array",
      "items": {
        "type": "object",
        "required": ["id", "title", "component"],
        "properties": {
          "id": { "type": "string" },
          "title": { "type": "string" },
          "component": { "type": "string" },
          "props": { "type": "object" }
        }
      }
    }
  }
}
```

## Verification

1. Adding a section = only JSON change
2. Unknown component throws clear error
3. Layout validates against schema

## When to Apply

- Dashboards
- Forms
- Navigation menus
- Any UI with variable structure

## Tags

`build` `architecture` `layouts` `configuration`