The complete frontend stack for Python.

card = StatusCard(
    complete=18,
    total=25,
)

# Rendering is where the component's inputs are checked
str(card)

card = StatusCard(
    titel="Deploy preview",
    complete=18,
    total=25,
)

str(card)

class Greeting(Component):
    class Kwargs:
        name: str

    def template_data(self, kwargs, slots):
        return {"name": kwargs.name}

    template = "<p>Hello, {{ naem }}!</p>"

str(Greeting(name="Ada"))

class Child(Component):
    template = "<span>{{ user_name }}</span>"

class Parent(Component):
    def template_data(self, kwargs, slots):
        return {"user_name": "Ada"}

    template = "<div>{{ user_name }}<c-child /></div>"

str(Parent())

class Page(Component):
    template = """
      <c-StatusCrad title="Deploy preview" />
    """

str(Page())

class Broken(Component):
    template = "<div><span>Deploy preview</div>"

str(Broken())

class Danger(Component):
    template = "<i>{{ __import__('os').system('ls') }}</i>"

str(Danger())

class ProductCard(Component):
    class Kwargs:
        product_id: int

    class Slots:
        pass

    # Cache every time this component is called
    class Cache:
        enabled = True
        ttl = 300
        version = 1

    template = """
      <div>
        {# Cache only this region #}
        <c-cache key="expensive">
          <c-ExpensiveUI />
        </c-cache>
      </div>
    """

from citry import Citry, Extension

class TimingExtension(Extension):
    name = "timing"

    def on_component_rendered(self, ctx):
        record(type(ctx.component).__name__)
        return None  # keep the original render

app = Citry(extensions=[TimingExtension])

from citry import Component
from citry.ext.i18n import make_context

class AccountCard(Component):
    class Kwargs:
        name: str

    template = """
      <h2>{{ tr("account-greeting", name=name) }}</h2>
    """

    messages = """
      # @param {str} $name - User name.
      account-greeting = Welcome, { $name }.
    """

context = make_context(app, locale=request.locale)
AccountCard(name=user.name).render(
    provides={"citry_i18n": context},
)

class Profile(Component):
    class Events:
        # Optional for hosts with a custom token scheme.
        # Django's CsrfViewMiddleware needs no Citry setup.
        _csrf = check_csrf

        def save(self, data: ProfileIn):
            update_profile(data)

app = Citry(
    security_csp="strict",
    security_script_integrity="citry",
)

# Generate a new value for every response.
nonce = new_response_nonce()
result = Page().render().serialize_result(csp_nonce=nonce)

response = HTMLResponse(result.html)
response.headers["Content-Security-Policy"] = (
    f"script-src 'self' 'nonce-{nonce}'; "
    f"style-src 'self' 'nonce-{nonce}'"
)

card = Card(title="Welcome")

# The browser gets the markup and whatever JS and CSS it still needs
card.render().serialize(deps_strategy="fragment")

from citry import (
    ComponentLibrary,
    LibraryComponent,
    SlotInput,
    citry,
)

# Define library components
class AcmeBadge(LibraryComponent):
    class Kwargs:
        tone: str = "neutral"

    class Slots:
        default: SlotInput | None = None

# Create Library
acme_library = ComponentLibrary(
    name="acme",
    components=[AcmeBadge],
)

# Register library with Citry
citry.register_library(acme_library)

from citry import Const

# The parts that never vary are rendered once and reused
Card(cols=Const(3))