Django Bridge

Build your application logic in Django

Build your backend like a regular Django app using Django views, forms and URL routing.

You can put as much logic as you like into views, as it stays on the server it won't add bloat to your application and you also have direct access to the database.

Most Django extensions work without changes (for example, you can use the amazing Django allauth extension to implement federated authentication).

Instead of HTML, the views return JSON describing what the frontend should render. Anything JSON-serialisable can be returned. You can register JavaScript adapters to convert non-JSON serialisable objects, such as forms.

from django_bridge import Response

def form(request):
    form = MyForm(request.POST or None)

    if form.is_valid():
        # Form submission logic here

    return Response(request, "FormView", {
        "action_url": reverse("form"),
        "form": form,
    })
  

Render the frontend with React

The JSON response from the server is fed into the props of a React component to render it.

Global context providers can be created to make global data such as URLs, CSRF Tokens or info about the user available as React contexts.

It's unopinionated about how you build your frontend, so you can use any React component library or styling framework that you like.

Supports Vite.js, and Storybook. Next.js support coming soon!

function FormView({ action_url, form }) {
    const { csrfToken } = useContext(CSRFTokenContext);

    return (
      <Layout>
        <h1>A Django form rendered with React</h1>

        <Form action={action_url} method="post">
          <input
            type="hidden"
            name="csrfmiddlewaretoken"
            value={csrf_token} />

          {form.render()}

          <button type="submit">Submit</button>
        </Form>
      </Layout>
    );
  }

Ready for action

Familiar and compatible

Lightweight and fast

Build your application logic in Django

Render the frontend with React