Intro to Spark and Datastar

Datas­tar brings togeth­er htmx and Alpine.js. Spark brings togeth­er Datas­tar and Craft CMS. Andrew Welch recre­at­ed a live search fea­ture as an exam­ple project while giv­ing a gen­tle intro­duc­tion to Spark and Datas­tar use in Twig templates.

Here are some of his code examples:

        <section data-store="{ search: ''}">
            <h3>Spark search</h3>

            <input
                data-model="search"
                data-on-input.debounce_500ms="{{ spark.get('spark/_fragments/search-results.twig') }}"
                placeholder="Search..."
                type="text"
            />
            <div id="search-results">
                <p>hello</p>
            </div>
        </section>

{% fragment %}
    <div id="search-results">
        {% set results = [] %}
        {% if search is not empty %}
            {% set results = craft.entries()
                .section(['demo'])
                .limit(9)
                .search(search)
                .orderBy('score')
                .all() %}
        {% endif %}
        <ul>
            {% for result in results %}
                <li><a href="{{ result.url }}">{{ result.title }}</a></li>
            {% else %}
                <p>No results</p>
            {% endfor %}
        </ul>
    </div>
{% endfragment %}