{
"event": "PreToolUse",
"tool_name": "mcp__mcp-docs__docs_create",
"tool_input": {
"title": "HTMX Patterns Referenz",
"slug": "patterns",
"parent_id": 145,
"description": "Kopierbare HTMX-Patterns für häufige Use-Cases",
"status": "published",
"sort_order": 1,
"content": "# HTMX Patterns Referenz\n\nKopierbare Patterns für häufige Anwendungsfälle.\n\n## CRUD-Operationen\n\n### Create (POST)\n\n```php\n<form hx-post=\"\/api\/items\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-target=\"#form-message\"\n hx-swap=\"innerHTML\"\n hx-indicator=\"#create-btn\"\n hx-disabled-elt=\"#create-btn\">\n \n <input type=\"text\" name=\"title\" required>\n <textarea name=\"description\"><\/textarea>\n \n <button type=\"submit\" id=\"create-btn\" class=\"btn btn--primary\">\n <span class=\"htmx-content\">Erstellen<\/span>\n <span class=\"htmx-indicator\">Erstelle...<\/span>\n <\/button>\n<\/form>\n<div id=\"form-message\"><\/div>\n```\n\n### Read (GET mit Partial)\n\n```php\n<div hx-get=\"\/api\/items\/<?= $id ?>\/details\"\n hx-trigger=\"revealed\"\n hx-swap=\"innerHTML\">\n Lade Details...\n<\/div>\n```\n\n### Update (PUT)\n\n```php\n<form hx-put=\"\/api\/items\/<?= $id ?>\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-target=\"#form-message\"\n hx-swap=\"innerHTML\"\n hx-indicator=\"#save-btn\"\n hx-disabled-elt=\"#save-btn\">\n \n <input type=\"text\" name=\"title\" value=\"<?= htmlspecialchars($item['title']) ?>\">\n \n <button type=\"submit\" id=\"save-btn\" class=\"btn btn--primary\">\n <span class=\"htmx-content\">Speichern<\/span>\n <span class=\"htmx-indicator\">Speichere...<\/span>\n <\/button>\n<\/form>\n<div id=\"form-message\"><\/div>\n```\n\n### Delete (DELETE)\n\n```php\n<button hx-delete=\"\/api\/items\/<?= $id ?>\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-confirm=\"'<?= htmlspecialchars($item['title']) ?>' wirklich löschen?\"\n hx-target=\"closest tr\"\n hx-swap=\"outerHTML swap:0.3s\"\n class=\"btn btn--danger\">\n Löschen\n<\/button>\n```\n\n## Inline-Editing\n\n### Text-Input mit Auto-Save\n\n```php\n<input type=\"text\" \n name=\"title\"\n value=\"<?= htmlspecialchars($value) ?>\"\n class=\"inline-edit\"\n hx-post=\"\/api\/items\/<?= $id ?>\/title\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-trigger=\"blur changed, keyup[key=='Enter'] changed\"\n hx-swap=\"none\"\n hx-disabled-elt=\"this\"\n hx-on::after-request=\"this.classList.toggle('is-saved', event.detail.successful); setTimeout(() => this.classList.remove('is-saved'), 1000)\">\n```\n\n### Select mit Auto-Save\n\n```php\n<select name=\"status\"\n class=\"inline-select\"\n hx-post=\"\/api\/items\/<?= $id ?>\/status\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-swap=\"none\"\n hx-disabled-elt=\"this\"\n hx-on::after-request=\"this.classList.toggle('is-saved', event.detail.successful); setTimeout(() => this.classList.remove('is-saved'), 1000)\">\n <?php foreach ($statuses as $key => $label): ?>\n <option value=\"<?= $key ?>\" <?= $item['status'] === $key ? 'selected' : '' ?>>\n <?= htmlspecialchars($label) ?>\n <\/option>\n <?php endforeach; ?>\n<\/select>\n```\n\n### Toggle (Checkbox)\n\n```php\n<input type=\"checkbox\"\n name=\"is_active\"\n <?= $item['is_active'] ? 'checked' : '' ?>\n hx-post=\"\/api\/items\/<?= $id ?>\/toggle-active\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-swap=\"none\"\n hx-disabled-elt=\"this\">\n```\n\n## Listen & Tabellen\n\n### Lazy-Load Tabelle\n\n```php\n<table>\n <thead>...<\/thead>\n <tbody hx-get=\"\/api\/items?page=1\"\n hx-trigger=\"revealed\"\n hx-swap=\"innerHTML\">\n <tr><td colspan=\"5\">Lade Daten...<\/td><\/tr>\n <\/tbody>\n<\/table>\n```\n\n### Infinite Scroll\n\n```php\n<div id=\"items-list\">\n <?php foreach ($items as $item): ?>\n <div class=\"item\"><?= htmlspecialchars($item['title']) ?><\/div>\n <?php endforeach; ?>\n \n <?php if ($hasMore): ?>\n <div hx-get=\"\/api\/items?page=<?= $page + 1 ?>\"\n hx-trigger=\"revealed\"\n hx-swap=\"outerHTML\"\n hx-indicator=\"#load-more-spinner\">\n <span id=\"load-more-spinner\" class=\"htmx-indicator\">Lade mehr...<\/span>\n <\/div>\n <?php endif; ?>\n<\/div>\n```\n\n### Sortierbare Spalten\n\n```php\n<th hx-get=\"\/api\/items?sort=title&dir=<?= $sortDir === 'asc' ? 'desc' : 'asc' ?>\"\n hx-target=\"#items-tbody\"\n hx-swap=\"innerHTML\"\n class=\"sortable <?= $sortCol === 'title' ? 'sorted-' . $sortDir : '' ?>\">\n Titel\n<\/th>\n```\n\n## Suche & Filter\n\n### Live-Search\n\n```php\n<input type=\"search\"\n name=\"q\"\n placeholder=\"Suchen...\"\n hx-get=\"\/api\/items\/search\"\n hx-trigger=\"input changed delay:300ms, search\"\n hx-target=\"#search-results\"\n hx-swap=\"innerHTML\"\n hx-indicator=\"#search-spinner\">\n<span id=\"search-spinner\" class=\"htmx-indicator\">🔍<\/span>\n<div id=\"search-results\"><\/div>\n```\n\n### Filter-Form\n\n```php\n<form hx-get=\"\/api\/items\"\n hx-trigger=\"change from:select, change from:input[type='checkbox']\"\n hx-target=\"#items-list\"\n hx-swap=\"innerHTML\"\n hx-indicator=\"#filter-spinner\">\n \n <select name=\"status\">\n <option value=\"\">Alle Status<\/option>\n <option value=\"active\">Aktiv<\/option>\n <option value=\"draft\">Entwurf<\/option>\n <\/select>\n \n <select name=\"category\">\n <option value=\"\">Alle Kategorien<\/option>\n <!-- ... -->\n <\/select>\n \n <span id=\"filter-spinner\" class=\"htmx-indicator\">Filtere...<\/span>\n<\/form>\n```\n\n## Modals & Dialogs\n\n### Modal laden\n\n```php\n<button hx-get=\"\/api\/items\/<?= $id ?>\/edit-modal\"\n hx-target=\"#modal-container\"\n hx-swap=\"innerHTML\"\n hx-on::after-request=\"document.getElementById('modal-container').showModal()\">\n Bearbeiten\n<\/button>\n\n<dialog id=\"modal-container\"><\/dialog>\n```\n\n### Modal-Inhalt (Partial)\n\n```php\n<form hx-put=\"\/api\/items\/<?= $id ?>\"\n hx-headers='{\"X-CSRF-TOKEN\": \"<?= $csrfToken ?>\"}'\n hx-target=\"#modal-container\"\n hx-swap=\"innerHTML\"\n hx-on::after-request=\"if(event.detail.successful) document.getElementById('modal-container').close()\">\n \n <h2>Bearbeiten<\/h2>\n <input type=\"text\" name=\"title\" value=\"<?= htmlspecialchars($item['title']) ?>\">\n \n <button type=\"submit\">Speichern<\/button>\n <button type=\"button\" onclick=\"this.closest('dialog').close()\">Abbrechen<\/button>\n<\/form>\n```\n\n## Polling & Updates\n\n### Auto-Refresh\n\n```php\n<div hx-get=\"\/api\/status\"\n hx-trigger=\"every 5s\"\n hx-swap=\"innerHTML\">\n Status: <?= $status ?>\n<\/div>\n```\n\n### Polling mit Stop-Condition\n\n```php\n<div hx-get=\"\/api\/jobs\/<?= $jobId ?>\/status\"\n hx-trigger=\"<?= $job['status'] === 'running' ? 'every 2s' : 'none' ?>\"\n hx-swap=\"outerHTML\">\n Status: <?= $job['status'] ?>\n <?php if ($job['status'] === 'running'): ?>\n <span class=\"spinner\"><\/span>\n <?php endif; ?>\n<\/div>\n```"
}
}
{
"tool_response": [
{
"type": "text",
"text": "{\n \"success\": true,\n \"doc\": {\n \"id\": 146,\n \"parent_id\": 145,\n \"slug\": \"patterns\",\n \"path\": \"\/frontend\/htmx\/patterns\",\n \"title\": \"HTMX Patterns Referenz\",\n \"description\": \"Kopierbare HTMX-Patterns für häufige Use-Cases\",\n \"content\": \"# HTMX Patterns Referenz\\n\\nKopierbare Patterns für häufige Anwendungsfälle.\\n\\n## CRUD-Operationen\\n\\n### Create (POST)\\n\\n```php\\n<form hx-post=\\\"\/api\/items\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-target=\\\"#form-message\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#create-btn\\\"\\n hx-disabled-elt=\\\"#create-btn\\\">\\n \\n <input type=\\\"text\\\" name=\\\"title\\\" required>\\n <textarea name=\\\"description\\\"><\/textarea>\\n \\n <button type=\\\"submit\\\" id=\\\"create-btn\\\" class=\\\"btn btn--primary\\\">\\n <span class=\\\"htmx-content\\\">Erstellen<\/span>\\n <span class=\\\"htmx-indicator\\\">Erstelle...<\/span>\\n <\/button>\\n<\/form>\\n<div id=\\\"form-message\\\"><\/div>\\n```\\n\\n### Read (GET mit Partial)\\n\\n```php\\n<div hx-get=\\\"\/api\/items\/<?= $id ?>\/details\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"innerHTML\\\">\\n Lade Details...\\n<\/div>\\n```\\n\\n### Update (PUT)\\n\\n```php\\n<form hx-put=\\\"\/api\/items\/<?= $id ?>\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-target=\\\"#form-message\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#save-btn\\\"\\n hx-disabled-elt=\\\"#save-btn\\\">\\n \\n <input type=\\\"text\\\" name=\\\"title\\\" value=\\\"<?= htmlspecialchars($item['title']) ?>\\\">\\n \\n <button type=\\\"submit\\\" id=\\\"save-btn\\\" class=\\\"btn btn--primary\\\">\\n <span class=\\\"htmx-content\\\">Speichern<\/span>\\n <span class=\\\"htmx-indicator\\\">Speichere...<\/span>\\n <\/button>\\n<\/form>\\n<div id=\\\"form-message\\\"><\/div>\\n```\\n\\n### Delete (DELETE)\\n\\n```php\\n<button hx-delete=\\\"\/api\/items\/<?= $id ?>\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-confirm=\\\"'<?= htmlspecialchars($item['title']) ?>' wirklich löschen?\\\"\\n hx-target=\\\"closest tr\\\"\\n hx-swap=\\\"outerHTML swap:0.3s\\\"\\n class=\\\"btn btn--danger\\\">\\n Löschen\\n<\/button>\\n```\\n\\n## Inline-Editing\\n\\n### Text-Input mit Auto-Save\\n\\n```php\\n<input type=\\\"text\\\" \\n name=\\\"title\\\"\\n value=\\\"<?= htmlspecialchars($value) ?>\\\"\\n class=\\\"inline-edit\\\"\\n hx-post=\\\"\/api\/items\/<?= $id ?>\/title\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-trigger=\\\"blur changed, keyup[key=='Enter'] changed\\\"\\n hx-swap=\\\"none\\\"\\n hx-disabled-elt=\\\"this\\\"\\n hx-on::after-request=\\\"this.classList.toggle('is-saved', event.detail.successful); setTimeout(() => this.classList.remove('is-saved'), 1000)\\\">\\n```\\n\\n### Select mit Auto-Save\\n\\n```php\\n<select name=\\\"status\\\"\\n class=\\\"inline-select\\\"\\n hx-post=\\\"\/api\/items\/<?= $id ?>\/status\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-swap=\\\"none\\\"\\n hx-disabled-elt=\\\"this\\\"\\n hx-on::after-request=\\\"this.classList.toggle('is-saved', event.detail.successful); setTimeout(() => this.classList.remove('is-saved'), 1000)\\\">\\n <?php foreach ($statuses as $key => $label): ?>\\n <option value=\\\"<?= $key ?>\\\" <?= $item['status'] === $key ? 'selected' : '' ?>>\\n <?= htmlspecialchars($label) ?>\\n <\/option>\\n <?php endforeach; ?>\\n<\/select>\\n```\\n\\n### Toggle (Checkbox)\\n\\n```php\\n<input type=\\\"checkbox\\\"\\n name=\\\"is_active\\\"\\n <?= $item['is_active'] ? 'checked' : '' ?>\\n hx-post=\\\"\/api\/items\/<?= $id ?>\/toggle-active\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-swap=\\\"none\\\"\\n hx-disabled-elt=\\\"this\\\">\\n```\\n\\n## Listen & Tabellen\\n\\n### Lazy-Load Tabelle\\n\\n```php\\n<table>\\n <thead>...<\/thead>\\n <tbody hx-get=\\\"\/api\/items?page=1\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"innerHTML\\\">\\n <tr><td colspan=\\\"5\\\">Lade Daten...<\/td><\/tr>\\n <\/tbody>\\n<\/table>\\n```\\n\\n### Infinite Scroll\\n\\n```php\\n<div id=\\\"items-list\\\">\\n <?php foreach ($items as $item): ?>\\n <div class=\\\"item\\\"><?= htmlspecialchars($item['title']) ?><\/div>\\n <?php endforeach; ?>\\n \\n <?php if ($hasMore): ?>\\n <div hx-get=\\\"\/api\/items?page=<?= $page + 1 ?>\\\"\\n hx-trigger=\\\"revealed\\\"\\n hx-swap=\\\"outerHTML\\\"\\n hx-indicator=\\\"#load-more-spinner\\\">\\n <span id=\\\"load-more-spinner\\\" class=\\\"htmx-indicator\\\">Lade mehr...<\/span>\\n <\/div>\\n <?php endif; ?>\\n<\/div>\\n```\\n\\n### Sortierbare Spalten\\n\\n```php\\n<th hx-get=\\\"\/api\/items?sort=title&dir=<?= $sortDir === 'asc' ? 'desc' : 'asc' ?>\\\"\\n hx-target=\\\"#items-tbody\\\"\\n hx-swap=\\\"innerHTML\\\"\\n class=\\\"sortable <?= $sortCol === 'title' ? 'sorted-' . $sortDir : '' ?>\\\">\\n Titel\\n<\/th>\\n```\\n\\n## Suche & Filter\\n\\n### Live-Search\\n\\n```php\\n<input type=\\\"search\\\"\\n name=\\\"q\\\"\\n placeholder=\\\"Suchen...\\\"\\n hx-get=\\\"\/api\/items\/search\\\"\\n hx-trigger=\\\"input changed delay:300ms, search\\\"\\n hx-target=\\\"#search-results\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#search-spinner\\\">\\n<span id=\\\"search-spinner\\\" class=\\\"htmx-indicator\\\">🔍<\/span>\\n<div id=\\\"search-results\\\"><\/div>\\n```\\n\\n### Filter-Form\\n\\n```php\\n<form hx-get=\\\"\/api\/items\\\"\\n hx-trigger=\\\"change from:select, change from:input[type='checkbox']\\\"\\n hx-target=\\\"#items-list\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-indicator=\\\"#filter-spinner\\\">\\n \\n <select name=\\\"status\\\">\\n <option value=\\\"\\\">Alle Status<\/option>\\n <option value=\\\"active\\\">Aktiv<\/option>\\n <option value=\\\"draft\\\">Entwurf<\/option>\\n <\/select>\\n \\n <select name=\\\"category\\\">\\n <option value=\\\"\\\">Alle Kategorien<\/option>\\n <!-- ... -->\\n <\/select>\\n \\n <span id=\\\"filter-spinner\\\" class=\\\"htmx-indicator\\\">Filtere...<\/span>\\n<\/form>\\n```\\n\\n## Modals & Dialogs\\n\\n### Modal laden\\n\\n```php\\n<button hx-get=\\\"\/api\/items\/<?= $id ?>\/edit-modal\\\"\\n hx-target=\\\"#modal-container\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-on::after-request=\\\"document.getElementById('modal-container').showModal()\\\">\\n Bearbeiten\\n<\/button>\\n\\n<dialog id=\\\"modal-container\\\"><\/dialog>\\n```\\n\\n### Modal-Inhalt (Partial)\\n\\n```php\\n<form hx-put=\\\"\/api\/items\/<?= $id ?>\\\"\\n hx-headers='{\\\"X-CSRF-TOKEN\\\": \\\"<?= $csrfToken ?>\\\"}'\\n hx-target=\\\"#modal-container\\\"\\n hx-swap=\\\"innerHTML\\\"\\n hx-on::after-request=\\\"if(event.detail.successful) document.getElementById('modal-container').close()\\\">\\n \\n <h2>Bearbeiten<\/h2>\\n <input type=\\\"text\\\" name=\\\"title\\\" value=\\\"<?= htmlspecialchars($item['title']) ?>\\\">\\n \\n <button type=\\\"submit\\\">Speichern<\/button>\\n <button type=\\\"button\\\" onclick=\\\"this.closest('dialog').close()\\\">Abbrechen<\/button>\\n<\/form>\\n```\\n\\n## Polling & Updates\\n\\n### Auto-Refresh\\n\\n```php\\n<div hx-get=\\\"\/api\/status\\\"\\n hx-trigger=\\\"every 5s\\\"\\n hx-swap=\\\"innerHTML\\\">\\n Status: <?= $status ?>\\n<\/div>\\n```\\n\\n### Polling mit Stop-Condition\\n\\n```php\\n<div hx-get=\\\"\/api\/jobs\/<?= $jobId ?>\/status\\\"\\n hx-trigger=\\\"<?= $job['status'] === 'running' ? 'every 2s' : 'none' ?>\\\"\\n hx-swap=\\\"outerHTML\\\">\\n Status: <?= $job['status'] ?>\\n <?php if ($job['status'] === 'running'): ?>\\n <span class=\\\"spinner\\\"><\/span>\\n <?php endif; ?>\\n<\/div>\\n```\",\n \"status\": \"published\",\n \"sort_order\": 1,\n \"depth\": 2,\n \"created_at\": \"2025-12-27T12:25:04\",\n \"updated_at\": \"2025-12-27T12:25:04\"\n },\n \"message\": \"Document 'HTMX Patterns Referenz' created with ID 146\"\n}"
}
]
}