Other Integrations

This guide will walk you through the process of integrating the Ludic framework with other projects (aside from Starlette integration, which is covered in the Web Framework section of the documentation). Here is the list of currently supported integrations:

• Django

This guide wil walk you through integration of the Ludic framework with a Django project. We will cover the necessary setup steps, how to configure middleware, and provide examples of how to use Ludic in your Django views.

First, you need to install Ludic. You can do this using pip:

pip install "ludic[django]"

To use Ludic with Django, you need to add the Ludic middleware to your Django settings. This middleware helps manage the Ludic elements during the request-response cycle, clean up cache, and so on.

1. Open your settings.py file.
2. Add LudicMiddleware to the MIDDLEWARE list:

MIDDLEWARE = [
    # other middlewares...
    "ludic.contrib.django.LudicMiddleware",
]

Let's create a simple HTML page using Ludic elements in a Django view. Here is the content of the views.py file rendering a valid HTML page:

from django.http import HttpRequest
from ludic.contrib.django import LudicResponse
from ludic.html import html, head, body, div, h1, p, title, b


def index(request: HttpRequest) -> LudicResponse:
    return LudicResponse(
        html(
            head(
                title("My Page"),
            ),
            body(
                div(
                    h1("My Homepage"),
                    p(f"Hello {b("World!")}"),
                    id="container",
                )
            )
        )
    )

However, you are not limited to ludic.html module. You can build your own components or use the ones available in the catalog. Here is a simple example creating a page component and using it in a view:

import json

from django.http import HttpRequest
from ludic.attrs import GlobalAttrs
from ludic.catalog.layouts import Center, Stack
from ludic.catalog.pages import HtmlPage, Head, Body
from ludic.catalog.headers import H1
from ludic.catalog.typography import Code, CodeBlock, Link, Paragraph
from ludic.components import Component
from ludic.contrib.django import LudicResponse
from ludic.types import AnyChildren


class MyPage(Component[AnyChildren, GlobalAttrs]):
    def render(self) -> HtmlPage:
        return HtmlPage(
            Head(title="My Page"),
            Body(
                Center(
                    Stack(*self.children, **self.attrs),
                    style={"padding-block": self.theme.sizes.xxl},
                ),
                htmx_version="2.0.0",
            ),
        )


def index_with_components(request: HttpRequest) -> LudicResponse:
    return LudicResponse(
        MyPage(
            H1("Demo Using The Catalog"),
            Paragraph(
                "This page is using components from "
                f"{Link("Ludic framework.", to="https://getludic.dev")}"
            ),
            Paragraph(f"Here is the content of {Code("request.GET")}:"),
            CodeBlock(
                json.dumps(request.GET.dict(), indent=4),
                language="json",
            ),
        )
    )