Modern PHP Framework for Drupal
Wire Drupal
Component-based dynamic interfaces for Drupal
Build interactive, reactive UIs without writing JavaScript.
Wire brings the power of modern frontend frameworks to Drupal with familiar PHP syntax and Twig.
No JavaScript Required
Real-time Updates
Native Drupal Integration
See Wire in Action
This real-time search component demonstrates Wire's two-way data binding with wire:model
The article list updates automatically as you type—no JavaScript required!
PHP Component
use Drupal\wire\View;
use Drupal\wire\WireComponent;
#[WireComponent(id: 'articles_demo_search')]
class ArticlesDemoSearch extends WireComponent {
public string $search = '';
public function render(): ?View {
return View::fromTpl('articles_demo_search', [
'items' => $this->getArticles(),
]);
}
private function getArticles(): array {
$nodeStorage = \Drupal::entityTypeManager()->getStorage('node');
$query = $nodeStorage->getQuery()->accessCheck(TRUE)
->condition('type', 'article')
->condition('status', 1)
->condition('title', '%' . addcslashes($this->search, '\\%_') . '%', 'LIKE')
->range(0, 5);
return array_map(function ($article) {
return $article->toLink();
}, $nodeStorage->loadMultiple($query->execute()));
}
}Twig Template
<div>
<input
wire:model="search"
type="search"
placeholder="Search articles..."
>
<ul>
{% for item in items %}
<li>
{{ item }}
</li>
{% endfor %}
</ul>
{% if items is empty and search %}
<p>No articles found.</p>
{% endif %}
</div>That's it! Wire handles all the AJAX, DOM updates, and state management automatically.
Learn how to build your first component