Reactive Django,
Powered by Rust

from djust import LiveView
from .models import Product

class ProductListView(LiveView):
    template_name = "products.html"

    def mount(self, request):
        self.search = ""
        self.products = Product.objects.all()

    def on_search(self, value):
        self.search = value
        if value:
            self.products = Product.objects.filter(
                name__icontains=value
            )
        else:
            self.products = Product.objects.all()

# That's it! Direct database access.

<input @input="on_search"
       placeholder="Search...">

{% for product in products %}
  <div>{{ product.name }} - ${{ product.price }}</div>
{% endfor %}

from rest_framework import serializers

class ProductSerializer(serializers.ModelSerializer):
    class Meta:
        model = Product
        fields = ['id', 'name', 'price']

from rest_framework import viewsets

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer

    def get_queryset(self):
        search = self.request.query_params.get('search')
        if search:
            return Product.objects.filter(
                name__icontains=search
            )
        return Product.objects.all()

import { useState, useEffect } from 'react';

export default function ProductList() {
  const [products, setProducts] = useState([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/products/?search=${search}`)
      .then(res => res.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      });
  }, [search]);

  return (
    <div>
      <input onChange={e => setSearch(e.target.value)} />
      {loading ? 'Loading...' :
        products.map(p => <div>{p.name} - ${p.price}</div>)
      }
    </div>
  );
}