Style Inline Apps

Version 0.55.0 of Textual added support for running apps inline (below the prompt). Running an inline app is as simple as adding inline=True to run().

Your apps will typically run inline without modification, but you may want to make some tweaks for inline mode, which you can do with a little CSS. This How-To will explain how.

Let's look at an inline app. The following app displays the the current time (and keeps it up to date).

from datetime import datetime

from textual.app import App, ComposeResult
from textual.widgets import Digits


class ClockApp(App):
    CSS = """
    Screen {
        align: center middle;
    }
    #clock {
        width: auto;
    }
    """

    def compose(self) -> ComposeResult:
        yield Digits("", id="clock")

    def on_ready(self) -> None:
        self.update_clock()
        self.set_interval(1, self.update_clock)

    def update_clock(self) -> None:
        clock = datetime.now().time()
        self.query_one(Digits).update(f"{clock:%T}")