diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 54ba8f4..a068490 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -10,7 +10,7 @@ default_stages:
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.5.0
+    rev: v6.0.0
     hooks:
       - id: trailing-whitespace
       - id: end-of-file-fixer
@@ -21,18 +21,14 @@ repos:
       - id: detect-private-key
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.4.5
+    rev: v0.14.4
     hooks:
       - id: ruff-format
-
-  - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.4.5
-    hooks:
       - id: ruff
         args: ["--fix", "--exit-non-zero-on-fix", "--config", "pyproject.toml"]
 
   - repo: https://github.com/pre-commit/mirrors-mypy
-    rev: v1.10.1
+    rev: v1.18.2
     hooks:
       - id: mypy
         args: ["--ignore-missing-imports"]
diff --git a/pyproject.toml b/pyproject.toml
index 6b7820b..a6d14ae 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -44,6 +44,9 @@ dev = [
 line-length = 88
 target-version = "py312"
 
+[tool.ruff.format]
+quote-style = "double"
+
 [tool.ruff.lint]
 select = [
     "E",    # flake8 rules
diff --git a/web/components.py b/web/components.py
index f7e955b..9abe042 100644
--- a/web/components.py
+++ b/web/components.py
@@ -260,11 +260,11 @@ class Footer(Component[NoChildren, NoAttrs]):
     @override
     def render(self) -> Box:
         return Box(
-            f"Made with {b(Link("Ludic", to=config.GITHUB_REPO_URL))} "
-            f"and {b(Link("HTMX", to="https://htmx.org"))} and 🐍 "
-            f"• {b(Link("Discord", to=config.DISCORD_INVITE_URL))} "
-            f"• {b(Link("GitHub", to=config.GITHUB_REPO_URL))} "
-            f"• Running on {b(Link("Leapcell", to="https://leapcell.io"))} "
+            f"Made with {b(Link('Ludic', to=config.GITHUB_REPO_URL))} "
+            f"and {b(Link('HTMX', to='https://htmx.org'))} and 🐍 "
+            f"• {b(Link('Discord', to=config.DISCORD_INVITE_URL))} "
+            f"• {b(Link('GitHub', to=config.GITHUB_REPO_URL))} "
+            f"• Running on {b(Link('Leapcell', to='https://leapcell.io'))} "
         )
 
 
@@ -365,9 +365,9 @@ class EditOnGithub(Component[AnyChildren, EditOnGithubAttrs]):
     @override
     def render(self) -> div:
         file_path = (
-            f"{self.attrs["base_url"].replace("-", "_")}index.py"
+            f"{self.attrs['base_url'].replace('-', '_')}index.py"
             if self.attrs["base_url"].endswith("/")
-            else f"{self.attrs["base_url"].replace("-", "_")}.py"
+            else f"{self.attrs['base_url'].replace('-', '_')}.py"
         )
         url = f"{config.GITHUB_REPO_WEB_URL}/blob/main/web/endpoints{file_path}"
         return div(
@@ -407,6 +407,6 @@ def render(self) -> blockquote:
         return blockquote(
             div(
                 p(i('"', *self.children, '"')),
-                p(b(f"– {self.attrs["source"]}")),
+                p(b(f"– {self.attrs['source']}")),
             ),
         )
diff --git a/web/endpoints/catalog/buttons.py b/web/endpoints/catalog/buttons.py
index b207cc0..20da99f 100644
--- a/web/endpoints/catalog/buttons.py
+++ b/web/endpoints/catalog/buttons.py
@@ -20,7 +20,7 @@ def buttons(request: Request) -> Page:
     return Page(
         H1("Buttons"),
         Paragraph(
-            f"The module {Code("ludic.catalog.buttons")} contains the following "
+            f"The module {Code('ludic.catalog.buttons')} contains the following "
             "buttons:"
         ),
         Box(
@@ -61,8 +61,8 @@ def buttons(request: Request) -> Page:
             language="python",
         ),
         Paragraph(
-            f"The {Code("ButtonLink")} component can be styled like any other "
-            f"button using the {Code("classes")} attribute:"
+            f"The {Code('ButtonLink')} component can be styled like any other "
+            f"button using the {Code('classes')} attribute:"
         ),
         CodeBlock(
             """
@@ -72,7 +72,7 @@ def buttons(request: Request) -> Page:
             """,
             language="python",
         ),
-        Paragraph(f"You can disable a button using the {Code("disabled")} attribute:"),
+        Paragraph(f"You can disable a button using the {Code('disabled')} attribute:"),
         Box(
             Cluster(
                 Button("Button", disabled=True),
@@ -96,7 +96,7 @@ def buttons(request: Request) -> Page:
         H2("Button Sizes"),
         Paragraph(
             "You can also change the size of the button appending the "
-            f"{Code("small")} or {Code("large")} class:"
+            f"{Code('small')} or {Code('large')} class:"
         ),
         Box(
             Cluster(
diff --git a/web/endpoints/catalog/forms.py b/web/endpoints/catalog/forms.py
index 8482001..cee76ef 100644
--- a/web/endpoints/catalog/forms.py
+++ b/web/endpoints/catalog/forms.py
@@ -29,15 +29,15 @@ def forms(request: Request) -> Page:
     return Page(
         H1("Forms"),
         Paragraph(
-            f"These components located in {Code("ludic.catalog.forms")} are in an "
+            f"These components located in {Code('ludic.catalog.forms')} are in an "
             "experimental mode. There is the possibility to automatically create form "
-            f"{Link("fields from annotations", to="#generating-form-fields")}, but it "
+            f"{Link('fields from annotations', to='#generating-form-fields')}, but it "
             "is far from production-ready."
         ),
         H2("Input Field"),
         Paragraph(
-            f"The {Code("InputField")} component is the most basic form field. It "
-            f"is a wrapper around the {Code("input")} HTML element which also "
+            f"The {Code('InputField')} component is the most basic form field. It "
+            f"is a wrapper around the {Code('input')} HTML element which also "
             "generates a label if not disabled. Here is what it looks like:"
         ),
         InputField(
@@ -59,7 +59,7 @@ def forms(request: Request) -> Page:
         ),
         Paragraph(
             "You can also create the input field without the label by not passing "
-            f"the {Code("label")} attribute:"
+            f"the {Code('label')} attribute:"
         ),
         InputField(name="sample-input-field"),
         CodeBlock(
@@ -74,8 +74,8 @@ def forms(request: Request) -> Page:
         ),
         H2("Select Field"),
         Paragraph(
-            f"The {Code("SelectField")} component is a wrapper around the "
-            f"{Code("select")} HTML element. It also generates a label if not "
+            f"The {Code('SelectField')} component is a wrapper around the "
+            f"{Code('select')} HTML element. It also generates a label if not "
             "disabled. Here is what it looks like:"
         ),
         SelectField(
@@ -101,8 +101,8 @@ def forms(request: Request) -> Page:
         ),
         H2("Text Area"),
         Paragraph(
-            f"The {Code("TextAreaField")} component is a wrapper around the "
-            f"{Code("textarea")} HTML element. It also generates a label if not "
+            f"The {Code('TextAreaField')} component is a wrapper around the "
+            f"{Code('textarea')} HTML element. It also generates a label if not "
             "disabled. Here is what it looks like:"
         ),
         TextAreaField(
@@ -126,7 +126,7 @@ def forms(request: Request) -> Page:
         ),
         H2("Choices"),
         Paragraph(
-            f"The {Code("ChoiceField")} component is a wrapper around the "
+            f"The {Code('ChoiceField')} component is a wrapper around the "
             f"{Code("<input type='radio'>")} HTML element. It also generates a label "
             "if not disabled. Here is what it looks like:"
         ),
@@ -151,7 +151,7 @@ def forms(request: Request) -> Page:
         ),
         H2("Form"),
         Paragraph(
-            f"The {Code("Form")} component is a wrapper around the {Code("form")} "
+            f"The {Code('Form')} component is a wrapper around the {Code('form')} "
             "HTML element. Here is a sample form:"
         ),
         Form(
@@ -188,9 +188,10 @@ def forms(request: Request) -> Page:
             language="python",
         ),
         Paragraph(
-            f"We use the {Code("Cluster")} component to create a form with multiple "
-            f"input fields and buttons. this component is described in the {Link(
-                "Layouts section", to=request.url_for("catalog:layouts").path)}. "
+            f"We use the {Code('Cluster')} component to create a form with multiple "
+            f"input fields and buttons. this component is described in the {
+                Link('Layouts section', to=request.url_for('catalog:layouts').path)
+            }. "
             "You can also have the input field and the button aligned horizontally "
             "using this layout component:"
         ),
@@ -229,7 +230,7 @@ def forms(request: Request) -> Page:
         Paragraph(
             "In some cases, the attributes of a component or class-based endpoint "
             "can be used to create form fields automatically using the "
-            f"{Code("create_fields")} function. Here is an example:"
+            f"{Code('create_fields')} function. Here is an example:"
         ),
         Form(
             *create_fields(
@@ -253,9 +254,9 @@ class PersonAttrs(Attrs):
             language="python",
         ),
         Paragraph(
-            f"The {Code("create_fields")} function generates form fields from "
+            f"The {Code('create_fields')} function generates form fields from "
             "annotations. It generates only fields that are annotated with the "
-            f"{Code("FieldMeta")} dataclass, which looks like this:"
+            f"{Code('FieldMeta')} dataclass, which looks like this:"
         ),
         CodeBlock(
             """
@@ -270,7 +271,7 @@ class FieldMeta:
             language="python",
         ),
         Paragraph(
-            f"The {Code("parser")} attribute validates and parses the field. Here is "
+            f"The {Code('parser')} attribute validates and parses the field. Here is "
             "how you would use it:"
         ),
         CodeBlock(
@@ -296,10 +297,13 @@ class CustomerAttrs(Attrs):
             language="python",
         ),
         Paragraph(
-            f"Fields created with the {Code("create_fields")} function can be than "
-            f"extracted from submitted form data using the {Link(
-                "Parser class",
-                to=f"{request.url_for("docs:web_framework").path}#parsers")}."
+            f"Fields created with the {Code('create_fields')} function can be than "
+            f"extracted from submitted form data using the {
+                Link(
+                    'Parser class',
+                    to=f'{request.url_for("docs:web_framework").path}#parsers',
+                )
+            }."
         ),
         request=request,
         active_item="forms",
diff --git a/web/endpoints/catalog/index.py b/web/endpoints/catalog/index.py
index e7eeea1..bf6ffb1 100644
--- a/web/endpoints/catalog/index.py
+++ b/web/endpoints/catalog/index.py
@@ -15,7 +15,7 @@ def index(request: Request) -> Page:
     return Page(
         H1("Catalog"),
         Paragraph(
-            f"The {Code("ludic.catalog")} module is a collection of components "
+            f"The {Code('ludic.catalog')} module is a collection of components "
             "designed to help build applications using the Ludic framework. It "
             "serves as both a resource for building new web applications and also "
             "as a showcase of ways to implement components."
@@ -23,14 +23,14 @@ def index(request: Request) -> Page:
         Paragraph(
             "Each item in the catalog is a reusable component that generates HTML "
             "code and registers its own CSS styles.. The registered CSS are loaded "
-            f"using the {Code("style.load()")} method, as detailed in the "
-            f"{Link("Styles and Themes", to=request.url_path_for("docs:styles"))} "
+            f"using the {Code('style.load()')} method, as detailed in the "
+            f"{Link('Styles and Themes', to=request.url_path_for('docs:styles'))} "
             "section of the documentation."
         ),
         Paragraph(
-            f"The catalog components are like {b("Lego pieces")} you can assemble "
-            f"together to build interactive and beautiful {b("HTML documents")} "
-            f"with {b("minimalistic")} approach:"
+            f"The catalog components are like {b('Lego pieces')} you can assemble "
+            f"together to build interactive and beautiful {b('HTML documents')} "
+            f"with {b('minimalistic')} approach:"
         ),
         List(
             Item(
@@ -41,13 +41,13 @@ def index(request: Request) -> Page:
                 "The generated CSS is simple, extensible, and easy to understand. "
                 "The layouts you can use for building your pages are responsive, "
                 "reusable, and robust. They are based on the amazing "
-                f"{Link("Every Layout Book", to="https://every-layout.dev/")}."
+                f"{Link('Every Layout Book', to='https://every-layout.dev/')}."
             ),
         ),
         H2("How Do You Use The Catalog?"),
         Paragraph(
             f"In order for everything to work correctly, the first thing you usually "
-            f"need to do is to create a {Code("Page")} component. This component is "
+            f"need to do is to create a {Code('Page')} component. This component is "
             "important for two reasons:"
         ),
         List(
@@ -62,37 +62,37 @@ def index(request: Request) -> Page:
         Message(
             Title("How does CSS loading work?"),
             f"The CSS styles for components are loaded when the component is imported "
-            f"anywhere in your application. The {Code("style.load()")} method iterates "
+            f"anywhere in your application. The {Code('style.load()')} method iterates "
             "over all imported components and checks if the components have any styles "
             "defined.",
         ),
         Paragraph(
             "All rendered HTML documents will have this component as a base similar to "
-            f"how all HTML pages in template engines like Jinja2 use the {i("base")} "
+            f"how all HTML pages in template engines like Jinja2 use the {i('base')} "
             "template."
         ),
         Message(
             Title(
-                f"How does a {Code("Page")} component differ from a regular component?"
+                f"How does a {Code('Page')} component differ from a regular component?"
             ),
             "The only difference is that it renders as a valid HTML5 document starting "
-            f"with the {Code("<!doctype html>")} declaration. You usually need only "
-            f"one {Code("Page")} component in the whole application.",
+            f"with the {Code('<!doctype html>')} declaration. You usually need only "
+            f"one {Code('Page')} component in the whole application.",
         ),
         Paragraph(
-            f"After you are done with setting up your {Code("Page")} component, you "
+            f"After you are done with setting up your {Code('Page')} component, you "
             "can use it along with all the other components in the catalog."
         ),
         H3("HtmlPage Component"),
         Paragraph(
             "This component has already been mentioned throughout the documentation "
-            f"and can be used to create your {Code("Page")} component. The "
-            f"{Code("HtmlPage")} component is just for convenience so that you can "
+            f"and can be used to create your {Code('Page')} component. The "
+            f"{Code('HtmlPage')} component is just for convenience so that you can "
             "quickly start and not worry about how to load e.g. CSS styles or HTMX. "
         ),
         Paragraph(
-            f"Here is how you would use the {Code("HtmlPage")} component to "
-            f"create your own {Code("Page")} component:"
+            f"Here is how you would use the {Code('HtmlPage')} component to "
+            f"create your own {Code('Page')} component:"
         ),
         CodeBlock(
             """
@@ -143,7 +143,7 @@ def render(self) -> HtmlPage:
             Item(Code('htmx_version="latest"')),
         ),
         Paragraph(
-            f"Now that you prepared your {Code("Page")} component, you can use it in "
+            f"Now that you prepared your {Code('Page')} component, you can use it in "
             "your code like here:"
         ),
         CodeBlock(
@@ -171,9 +171,9 @@ def clicked(request: Request) -> Paragraph:
             language="python",
         ),
         Paragraph(
-            f"The {Code("HtmlPage")} component comes also with default "
-            f"{Code("styles")}. In fact, the following list of styles are "
-            f"auto-loaded whenever you import anything from the {Code("ludic.catalog")}"
+            f"The {Code('HtmlPage')} component comes also with default "
+            f"{Code('styles')}. In fact, the following list of styles are "
+            f"auto-loaded whenever you import anything from the {Code('ludic.catalog')}"
             " module:"
         ),
         List(
diff --git a/web/endpoints/catalog/layouts.py b/web/endpoints/catalog/layouts.py
index ef2bfbf..305441e 100644
--- a/web/endpoints/catalog/layouts.py
+++ b/web/endpoints/catalog/layouts.py
@@ -27,7 +27,7 @@ def layouts(request: Request) -> Page:
         H1("Layouts"),
         Paragraph(
             "Layouts create a flexible structure for your user interface. "
-            f"The layouts in this module are based on the {b("Every Layout Book")}. "
+            f"The layouts in this module are based on the {b('Every Layout Book')}. "
             "If you haven't read the book, go read it now: "
         ),
         List(Item(Link("Every Layout Book", to="https://every-layout.dev/"))),
@@ -37,7 +37,7 @@ def layouts(request: Request) -> Page:
             "The layouts can be combined together."
         ),
         Paragraph(
-            f"All layouts are located in the {Code("ludic.catalog.layouts")} module."
+            f"All layouts are located in the {Code('ludic.catalog.layouts')} module."
         ),
         Message(
             Title("Viewing this page on mobile devices"),
@@ -51,7 +51,7 @@ def layouts(request: Request) -> Page:
             "you can easily combine to create responsive, readable, and maintainable "
             "user interfaces. Instead of starting from scratch with basic HTML "
             "elements and manually writing CSS, you use these layouts as your "
-            f"{b("foundational building blocks")}. This approach allows you to compose "
+            f"{b('foundational building blocks')}. This approach allows you to compose "
             "and arrange them in various ways to design your desired user interface, "
             "making your code more organized and easier to manage."
         ),
@@ -59,7 +59,7 @@ def layouts(request: Request) -> Page:
         Paragraph(
             "When writing CSS, you might be tempted to apply e.g. specific spacing, "
             "colors, or font styles to an HTML element like a button. The idea of "
-            f"using the layout classes here is to define {b("context")} which "
+            f"using the layout classes here is to define {b('context')} which "
             "determines how an HTML element should be displayed. So for example, we "
             "might want to have a couple of buttons on one line, so we wrap them in "
             "a Cluster class which inserts a margin between all its children and puts "
diff --git a/web/endpoints/catalog/messages.py b/web/endpoints/catalog/messages.py
index 4df8ae8..6daf84c 100644
--- a/web/endpoints/catalog/messages.py
+++ b/web/endpoints/catalog/messages.py
@@ -17,7 +17,7 @@ def messages(request: Request) -> Page:
     return Page(
         H1("Messages"),
         Paragraph(
-            f"The module {Code("ludic.catalog.messages")} contains the following "
+            f"The module {Code('ludic.catalog.messages')} contains the following "
             "components:"
         ),
         Message(
@@ -70,7 +70,7 @@ def messages(request: Request) -> Page:
             language="python",
         ),
         Paragraph(
-            f"Note that you don't need to specify the {Code("Title")} component. "
+            f"Note that you don't need to specify the {Code('Title')} component. "
             "Here is how the message renders without the title:"
         ),
         Message(
diff --git a/web/endpoints/catalog/tables.py b/web/endpoints/catalog/tables.py
index 8da16d5..9580c7b 100644
--- a/web/endpoints/catalog/tables.py
+++ b/web/endpoints/catalog/tables.py
@@ -38,15 +38,15 @@ def tables(request: Request) -> Page:
     return Page(
         H1("Tables"),
         Paragraph(
-            f"These components located in {Code("ludic.catalog.tables")} are in an "
+            f"These components located in {Code('ludic.catalog.tables')} are in an "
             "experimental mode. There is the possibility to automatically create "
             "tables even containing form fields and actions from annotations, but "
             "it is far from production-ready."
         ),
         H2("Creating a Table"),
         Paragraph(
-            f"The {Code("Table")} component accepts a {Code("TableHead")} as the first "
-            f"item and any number of {Code("TableRow")} items."
+            f"The {Code('Table')} component accepts a {Code('TableHead')} as the first "
+            f"item and any number of {Code('TableRow')} items."
         ),
         Table(
             TableHead("First Name", "Last Name", "Age"),
@@ -91,7 +91,7 @@ def tables(request: Request) -> Page:
         ),
         H2("Generating Table Rows"),
         Paragraph(
-            f"The {Code("create_rows")} function can be used to generate rows in the "
+            f"The {Code('create_rows')} function can be used to generate rows in the "
             "table based on given specification. Here is an example:"
         ),
         CodeBlock(
@@ -125,7 +125,7 @@ class PersonAttrs(Attrs):
         Paragraph(
             "There is also an experimental support for tables containing form fields."
             "The way it works is that you wrap your table in a form and use the "
-            f"{Code("create_rows")} function to generate the rows. Here is an example:"
+            f"{Code('create_rows')} function to generate the rows. Here is an example:"
         ),
         Form(
             Table(*create_rows(contacts_attrs_list, spec=SampleContactAttrs)),
@@ -161,10 +161,12 @@ class ContactAttrs(Attrs):
         ),
         Paragraph(
             "The role of the identifier column is to be able to parse the form data "
-            f"using the {Code("ListParser")} function as documented in the {Link(
-                "Parsers section",
-                to=f"{request.url_for("docs:web_framework").path}#parsing-collections"
-            )} of the documentation."
+            f"using the {Code('ListParser')} function as documented in the {
+                Link(
+                    'Parsers section',
+                    to=f'{request.url_for("docs:web_framework").path}#parsing-collections',
+                )
+            } of the documentation."
         ),
         request=request,
         active_item="tables",
diff --git a/web/endpoints/catalog/typography.py b/web/endpoints/catalog/typography.py
index 32f2d4e..b691b18 100644
--- a/web/endpoints/catalog/typography.py
+++ b/web/endpoints/catalog/typography.py
@@ -11,13 +11,14 @@ def typography(request: Request) -> Page:
     return Page(
         H1("Typography"),
         Paragraph(
-            f"The module {Code("ludic.catalog.typography")} contains the following "
+            f"The module {Code('ludic.catalog.typography')} contains the following "
             "components:"
         ),
         H4("Link"),
         Paragraph(
-            f"This text contains a {Link(
-                "link", to=str(request.url_for("catalog:index")))}.",
+            f"This text contains a {
+                Link('link', to=str(request.url_for('catalog:index')))
+            }.",
         ),
         CodeBlock(
             """
@@ -39,7 +40,7 @@ def typography(request: Request) -> Page:
             language="python",
         ),
         H4("Code"),
-        Paragraph(f"This text contains code: {Code("let mut x = 0;")}"),
+        Paragraph(f"This text contains code: {Code('let mut x = 0;')}"),
         CodeBlock(
             """
             from ludic.catalog.typography import Code
@@ -134,7 +135,7 @@ def typography(request: Request) -> Page:
         ),
         H2("Headers"),
         Paragraph(
-            f"The module {Code("ludic.catalog.headers")} contains components "
+            f"The module {Code('ludic.catalog.headers')} contains components "
             "rendering as HTML headers (h1-h4)."
         ),
         H1("H1", anchor=False),
@@ -153,7 +154,7 @@ def typography(request: Request) -> Page:
             language="python",
         ),
         Paragraph(
-            f"The module also contains the {Code("Anchor")} component, which can be "
+            f"The module also contains the {Code('Anchor')} component, which can be "
             "used to create an anchor link next to the header."
         ),
         H4("H4 With Anchor", anchor=Anchor("#", target="h4-with-anchor")),
@@ -167,7 +168,7 @@ def typography(request: Request) -> Page:
         ),
         Paragraph(
             "It is possible to generate the anchor automatically using the "
-            f"{Code("anchor=True")} attribute:"
+            f"{Code('anchor=True')} attribute:"
         ),
         H3("H3 With Anchor", anchor=True),
         CodeBlock(
diff --git a/web/endpoints/docs/components.py b/web/endpoints/docs/components.py
index 370b142..756d012 100644
--- a/web/endpoints/docs/components.py
+++ b/web/endpoints/docs/components.py
@@ -19,26 +19,26 @@ def components(request: Request) -> Page:
         H2("Key Concepts"),
         List(
             Item(
-                f"{b("Components")}: a component is a reusable chunk of code that "
+                f"{b('Components')}: a component is a reusable chunk of code that "
                 "defines a piece of your user interface. Think of it like a blueprint "
                 "for an HTML element, but more powerful."
             ),
             Item(
-                f"{b("Elements")}: these represent the individual HTML tags (like "
-                f"{Code("<a>")}, {Code("<div>")}, {Code("<h1>")}, etc.) that make up "
+                f"{b('Elements')}: these represent the individual HTML tags (like "
+                f"{Code('<a>')}, {Code('<div>')}, {Code('<h1>')}, etc.) that make up "
                 "the structure of your page."
             ),
             Item(
-                f"{b("Attributes")}: These help define the properties on your "
+                f"{b('Attributes')}: These help define the properties on your "
                 "components and elements. They let you modify things like a link's "
                 "destination, text color, or an element's size."
             ),
             Item(
-                f"{b("Hierarchy")}: Components can contain other components or "
+                f"{b('Hierarchy')}: Components can contain other components or "
                 "elements, creating a tree-like structure."
             ),
             Item(
-                f"{b("Types")}: A safety net to help you write correct code, "
+                f"{b('Types')}: A safety net to help you write correct code, "
                 "preventing errors just like making sure LEGO pieces fit together "
                 "properly."
             ),
@@ -46,18 +46,18 @@ def components(request: Request) -> Page:
         H2("Types of Components"),
         List(
             Item(
-                f"{b("Regular")}: These are flexible, letting you have multiple "
+                f"{b('Regular')}: These are flexible, letting you have multiple "
                 "children of any type."
             ),
             Item(
-                f"{b("Strict")}: Perfect for when you need precise control over the "
+                f"{b('Strict')}: Perfect for when you need precise control over the "
                 "structure of your component – like a table where you must have a head "
                 "and a body."
             ),
         ),
         H2("Regular Components"),
         Paragraph(
-            f"Let's break down a simplified version of the {Code("Link")} component:"
+            f"Let's break down a simplified version of the {Code('Link')} component:"
         ),
         CodeBlock(
             """
@@ -80,27 +80,27 @@ def render(self):
         ),
         List(
             Item(
-                f"{i("HTML Rendering")}: This component renders as the following HTML "
+                f"{i('HTML Rendering')}: This component renders as the following HTML "
                 f"element:",
                 List(Item(Code('<a href="..." style="color:#abc">...</a>'))),
             ),
             Item(
-                f"{i("Type Hints")}: {Code("Component[str, LinkAttrs]")} provides type "
+                f"{i('Type Hints')}: {Code('Component[str, LinkAttrs]')} provides type "
                 f"safety:",
                 List(
                     Item(
-                        f"{i("str")}: Enforces that all children of the component "
+                        f"{i('str')}: Enforces that all children of the component "
                         "must be strings"
                     ),
                     Item(
-                        f"{i("LinkAttrs")}: Ensures the required to attribute is "
+                        f"{i('LinkAttrs')}: Ensures the required to attribute is "
                         "present"
                     ),
                 ),
             ),
             Item(
-                f"{i("Attributes")}: {Code("LinkAttrs")} inherits from "
-                f"{Code("Attrs")}, which is a {Code("TypedDict")} "
+                f"{i('Attributes')}: {Code('LinkAttrs')} inherits from "
+                f"{Code('Attrs')}, which is a {Code('TypedDict')} "
                 f"(a dictionary with defined types for its keys)",
             ),
         ),
@@ -115,14 +115,14 @@ def render(self):
             "The current definition doesn't strictly enforce a single child. "
             "This means you could technically pass multiple strings "
             f"({Code('Link("a", "b")')}). To create a stricter component, inherit "
-            f"from {Code("ComponentStrict")}: This subclass of Component allows for "
+            f"from {Code('ComponentStrict')}: This subclass of Component allows for "
             "finer control over children. More about this in the next section."
         ),
         H2("Strict Components"),
         Paragraph(
             "Strict components offer more precise control over the types and "
             "structures of their children compared to regular components. Let's "
-            f"illustrate this with a simplified {Code("Table")} component:"
+            f"illustrate this with a simplified {Code('Table')} component:"
         ),
         CodeBlock(
             """
@@ -153,29 +153,29 @@ def render(self) -> table:
         b("Explanation"),
         List(
             Item(
-                f"{i("Strictness")}: The {Code("ComponentStrict")} class allows you to "
+                f"{i('Strictness')}: The {Code('ComponentStrict')} class allows you to "
                 "enforce the exact types and order of children."
             ),
             Item(
-                f"{i("Table Structure")}:",
+                f"{i('Table Structure')}:",
                 List(
                     Item(
-                        f"{Code("Table")}: Expects precisely two children: a "
-                        f"{Code("TableHead")} followed by a {Code("TableBody")}."
+                        f"{Code('Table')}: Expects precisely two children: a "
+                        f"{Code('TableHead')} followed by a {Code('TableBody')}."
                     ),
                     Item(
-                        f"{Code("TableHead")}: Accepts only a single {Code("tr")} "
+                        f"{Code('TableHead')}: Accepts only a single {Code('tr')} "
                         "(table row) element as its child."
                     ),
                     Item(
-                        f"{Code("TableBody")}: Accepts a variable number of "
-                        f"{Code("tr")} elements as children."
+                        f"{Code('TableBody')}: Accepts a variable number of "
+                        f"{Code('tr')} elements as children."
                     ),
                 ),
             ),
             Item(
-                f"{i("Type Hints")}: The {Code("*tuple[tr, ...]")} syntax indicates "
-                f"that {Code("TableBody")} accepts zero or more tr elements."
+                f"{i('Type Hints')}: The {Code('*tuple[tr, ...]')} syntax indicates "
+                f"that {Code('TableBody')} accepts zero or more tr elements."
             ),
         ),
         b("Valid Usage (Passes Type Checking)"),
@@ -191,18 +191,18 @@ def render(self) -> table:
         b("Key Benefits"),
         List(
             Item(
-                f"{i("Enforce Structure")}: Prevent incorrect usage that could break "
+                f"{i('Enforce Structure')}: Prevent incorrect usage that could break "
                 "your component's layout or functionality."
             ),
             Item(
-                f"{i("Type Safety")}: Static type checkers ensure you're building "
+                f"{i('Type Safety')}: Static type checkers ensure you're building "
                 "valid component hierarchies."
             ),
         ),
         H2("Attributes"),
         Paragraph(
             "To ensure type safety and clarity, define your component attributes using "
-            f"a subclass of the {Code("Attrs")} class. Here's how:"
+            f"a subclass of the {Code('Attrs')} class. Here's how:"
         ),
         CodeBlock(
             """
@@ -216,13 +216,13 @@ class PersonAttrs(Attrs):
             """,
             language="python",
         ),
-        b(f"Understanding {Code("Attrs")} and {Code("TypedDict")}"),
+        b(f"Understanding {Code('Attrs')} and {Code('TypedDict')}"),
         List(
             Item(
-                f"The {Code("Attrs")} class is built upon Python's {Code("TypedDict")} "
-                f"concept (see {Link(
-                    "PEP-589", to="https://peps.python.org/pep-0589/"
-                )}) for details). This provides type hints for dictionary-like data "
+                f"The {Code('Attrs')} class is built upon Python's {Code('TypedDict')} "
+                f"concept (see {
+                    Link('PEP-589', to='https://peps.python.org/pep-0589/')
+                }) for details). This provides type hints for dictionary-like data "
                 "structures."
             ),
         ),
@@ -230,7 +230,7 @@ class PersonAttrs(Attrs):
         Paragraph(
             "In the above case, all attributes except for {Code('is_active')} are "
             "required. If you want to make all attributes NOT required by default, "
-            f"you can pass the {Code("total=False")} keyword argument to the class "
+            f"you can pass the {Code('total=False')} keyword argument to the class "
             "definition:"
         ),
         CodeBlock(
@@ -246,20 +246,20 @@ class PersonAttrs(Attrs, total=False):
             language="python",
         ),
         Paragraph(
-            f"In this case, all attributes are optional except for the {Code("id")} "
+            f"In this case, all attributes are optional except for the {Code('id')} "
             "attribute."
         ),
         Message(
             Title(
-                f"The {Code("Attrs")} declaration is an information for type checkers"
+                f"The {Code('Attrs')} declaration is an information for type checkers"
             ),
-            f"The {Code("Attrs")} class just provides typing information for static "
+            f"The {Code('Attrs')} class just provides typing information for static "
             "type checkers. Your code will work even if you pass key-word arguments to "
             "components without declaring them first.",
         ),
         Paragraph(
             "All attributes can also subclass from other classes, for example, you can "
-            f"extend the attributes for the {Code("<button>")} HTML element:"
+            f"extend the attributes for the {Code('<button>')} HTML element:"
         ),
         CodeBlock(
             """
@@ -272,8 +272,8 @@ class TableCellAttrs(TdAttrs):
             language="python",
         ),
         Paragraph(
-            f"When implementing the component's {Code("render()")} method, you might "
-            f"find the {Code("attrs_for(...)")} helper useful too:"
+            f"When implementing the component's {Code('render()')} method, you might "
+            f"find the {Code('attrs_for(...)')} helper useful too:"
         ),
         CodeBlock(
             """
@@ -285,60 +285,60 @@ def render(self) -> td:
             language="python",
         ),
         Paragraph(
-            f"The method passes only the attributes registered for the {Code("<td>")} "
+            f"The method passes only the attributes registered for the {Code('<td>')} "
             "element."
         ),
         H3("Pre-defined Attributes"),
         Paragraph(
-            f"The {Code("ludic.attrs")} module contains many attribute definitions "
+            f"The {Code('ludic.attrs')} module contains many attribute definitions "
             "that you can reuse in your components, here are the most used ones:"
         ),
         List(
             Item(
-                f"{Code("HtmlAttrs")} – Global HTML attributes available in all "
+                f"{Code('HtmlAttrs')} – Global HTML attributes available in all "
                 "elements",
                 List(
                     Item(
-                        f"The {Code("class")} and {Code("for")} attributes have the "
-                        f"aliases {Code("class_")} and {Code("for_")}"
+                        f"The {Code('class')} and {Code('for')} attributes have the "
+                        f"aliases {Code('class_')} and {Code('for_')}"
                     )
                 ),
             ),
             Item(
-                f"{Code("EventAttrs")} – Event HTML attributes like "
-                f"{Code("on_click")}, {Code("on_key")}, and so on."
+                f"{Code('EventAttrs')} – Event HTML attributes like "
+                f"{Code('on_click')}, {Code('on_key')}, and so on."
             ),
             Item(
-                f"{Code("HtmxAttrs")} – All {Link(
-                    "HTMX attributes", to="https://htmx.org/reference/"
-                )} available.",
+                f"{Code('HtmxAttrs')} – All {
+                    Link('HTMX attributes', to='https://htmx.org/reference/')
+                } available.",
                 List(
                     Item(
                         "All HTMX attributes have aliases with an underscore, e.g. "
-                        f"{Code("hx_target")}"
+                        f"{Code('hx_target')}"
                     )
                 ),
             ),
             Item(
-                f"{Code("GlobalAttrs")} subclasses {Code("HtmlAttrs")}, "
-                f"{Code("EventAttrs")}, and {Code("HtmxAttrs")}"
+                f"{Code('GlobalAttrs')} subclasses {Code('HtmlAttrs')}, "
+                f"{Code('EventAttrs')}, and {Code('HtmxAttrs')}"
             ),
             Item(
-                f"{Code("[HtmlElementName]Attrs")} – e.g. {Code("ButtonAttrs")}, "
-                f"{Code("TdAttrs")}, and so on."
+                f"{Code('[HtmlElementName]Attrs')} – e.g. {Code('ButtonAttrs')}, "
+                f"{Code('TdAttrs')}, and so on."
             ),
         ),
         H2("HTML Elements"),
         Paragraph(
-            f"All available HTML elements can be found in the {Code("ludic.html")} "
-            f"module. The corresponding attributes are located in the {Code(
-                "ludic.attrs"
-            )} module."
+            f"All available HTML elements can be found in the {Code('ludic.html')} "
+            f"module. The corresponding attributes are located in the {
+                Code('ludic.attrs')
+            } module."
         ),
         H3("Rendering"),
         Paragraph(
             "To check how an element or component instance renders in HTML, you can "
-            f"use the {Code(".to_html()")} method:"
+            f"use the {Code('.to_html()')} method:"
         ),
         CodeBlock(
             """
@@ -357,8 +357,8 @@ def render(self) -> td:
         ),
         H3("Dataset Attributes"),
         Paragraph(
-            f"Ludic supports HTML {Code("data-*")} attributes through the special "
-            f"{Code("dataset")} attribute. This feature allows you to add custom data "
+            f"Ludic supports HTML {Code('data-*')} attributes through the special "
+            f"{Code('dataset')} attribute. This feature allows you to add custom data "
             "attributes to HTML elements in a type-safe way."
         ),
         CodeBlock(
@@ -376,15 +376,15 @@ def render(self) -> td:
         b("Key Features:"),
         List(
             Item(
-                f"{i("Automatic conversion")}: The {Code("dataset")} dictionary keys "
-                f"are automatically prefixed with {Code("data-")} in the HTML output."
+                f"{i('Automatic conversion')}: The {Code('dataset')} dictionary keys "
+                f"are automatically prefixed with {Code('data-')} in the HTML output."
             ),
             Item(
-                f"{i("Hyphen handling")}: Underscores in dataset keys are converted to "
-                f"hyphens in HTML: {Code("user_id")} becomes {Code("data-user-id")}."
+                f"{i('Hyphen handling')}: Underscores in dataset keys are converted to "
+                f"hyphens in HTML: {Code('user_id')} becomes {Code('data-user-id')}."
             ),
             Item(
-                f"{i("Type safety")}: Values are automatically converted to strings "
+                f"{i('Type safety')}: Values are automatically converted to strings "
                 "and properly escaped for HTML."
             ),
         ),
@@ -410,12 +410,12 @@ def render(self) -> td:
             """,
             language="python",
         ),
-        H3("Using f-strings"),
+        H3("Using t-strings"),
         Paragraph(
-            "In Ludic, f-strings offer a bit more readable way to construct component "
+            "In Ludic, t-strings offer a bit more readable way to construct component "
             "content, especially if you need to do a lot of formatting with "
-            f"{Code("<b>")}, {Code("<i>")}, and other elements for improving "
-            "typography. Let's modify the previous example using f-strings:"
+            f"{Code('<b>')}, {Code('<i>')}, and other elements for improving "
+            "typography. Let's modify the previous example using t-strings:"
         ),
         CodeBlock(
             """
@@ -428,33 +428,32 @@ def render(self) -> td:
         ),
         b("Important Note: Memory Considerations"),
         Paragraph(
-            f"{i("Temporary Dictionaries")}: to make f-strings safely work, they "
+            f"{i('Temporary Dictionaries')}: to make t-strings safely work, they "
             "internally create temporary dictionaries to hold the component "
             "instances. To avoid memory leaks, these dictionaries need to be "
             "consumed by a component."
         ),
         Paragraph("There are two cases it can create hanging objects (memory leaks):"),
         NumberedList(
-            Item("Component initialization with the f-string fails."),
+            Item("Component initialization with the t-string fails."),
             Item(
-                "You store an f-string in a variable but don't pass it to a "
-                "component."
+                "You store a t-string in a variable but don't pass it to a component."
             ),
         ),
         MessageWarning(
             Title("Possible memory leak"),
-            "The implementation of f-strings requires the creation of a temporary dict "
+            "The implementation of t-strings requires the creation of a temporary dict "
             "which can result in hanging objects in memory. To avoid memory leaks, "
             f"there is the {Code('BaseElement.formatter')} attribute which is a "
             "context manager clearing the temporary dict on exit.",
         ),
-        b(f"The {Code("BaseElement.formatter")} Context Manager"),
+        b(f"The {Code('BaseElement.formatter')} Context Manager"),
         CodeBlock(
             """
             from ludic.base import BaseElement
 
             with BaseElement.formatter:
-                # you can do anything with f-strings here, no memory leak
+                # you can do anything with t-strings here, no memory leak
                 # is created since formatter dict is cleared on exit
             """,
             language="python",
@@ -462,12 +461,12 @@ def render(self) -> td:
         b("Web Framework Request Handlers"),
         Paragraph(
             "The Ludic Web Framework (built on Starlette) automatically wraps request "
-            f"handlers with {Code("BaseElement.formatter")}, providing a safe "
-            "environment for f-strings.",
+            f"handlers with {Code('BaseElement.formatter')}, providing a safe "
+            "environment for t-strings.",
         ),
         b("Key Takeaways"),
         Paragraph(
-            "While f-strings are convenient, exercise caution to prevent memory leaks. "
+            "While t-strings are convenient, exercise caution to prevent memory leaks. "
             "Use them within the provided safety mechanisms. In contexts like task "
             "queues or other web frameworks, you can use a similar mechanism of "
             "wrapping to achieve memory safety."
@@ -475,36 +474,36 @@ def render(self) -> td:
         H2("Available Methods"),
         Paragraph(
             "All components (and elements too) inherit the following properties and "
-            f"methods from the {Code("BaseElement")} class:"
+            f"methods from the {Code('BaseElement')} class:"
         ),
         List(
             Item(
-                f"{Code("BaseElement")}",
+                f"{Code('BaseElement')}",
                 List(
-                    Item(f"{Code("children")} – children of the component"),
-                    Item(f"{Code("attrs")} – a dictionary containing attributes"),
+                    Item(f"{Code('children')} – children of the component"),
+                    Item(f"{Code('attrs')} – a dictionary containing attributes"),
                     Item(
-                        f"{Code("to_html()")} – converts the component to an HTML "
+                        f"{Code('to_html()')} – converts the component to an HTML "
                         "document"
                     ),
                     Item(
-                        f"{Code("to_string()")} – converts the component to a string "
+                        f"{Code('to_string()')} – converts the component to a string "
                         "representation of the tree"
                     ),
                     Item(
-                        f"{Code("attrs_for(...)")} – filter attributes to return only "
+                        f"{Code('attrs_for(...)')} – filter attributes to return only "
                         "those valid for a given element or component"
                     ),
                     Item(
-                        f"{Code("has_attributes()")} – whether the component has any "
+                        f"{Code('has_attributes()')} – whether the component has any "
                         "attributes"
                     ),
                     Item(
-                        f"{Code("is_simple()")} – whether the component contains one "
+                        f"{Code('is_simple()')} – whether the component contains one "
                         "primitive child"
                     ),
                     Item(
-                        f"{Code("render()")} (*abstract method*) – render the component"
+                        f"{Code('render()')} (*abstract method*) – render the component"
                     ),
                 ),
             ),
@@ -514,56 +513,56 @@ def render(self) -> td:
             "The following is a list of all the other parts that can be used to type "
             "and build your application."
         ),
-        H4(f"{Code("ludic.elements")}"),
+        H4(f"{Code('ludic.elements')}"),
         List(
-            Item(f"{Code("Element")} – base for HTML elements"),
-            Item(f"{Code("ElementStrict")} – base for strict HTML elements"),
+            Item(f"{Code('Element')} – base for HTML elements"),
+            Item(f"{Code('ElementStrict')} – base for strict HTML elements"),
             Item(
-                f"{Code("Blank")} – represents a blank component which is not "
+                f"{Code('Blank')} – represents a blank component which is not "
                 f"rendered, only its children"
             ),
         ),
-        H4(f"{Code("ludic.components")}"),
+        H4(f"{Code('ludic.components')}"),
         List(
-            Item(f"{Code("Component")} – abstract class for components"),
-            Item(f"{Code("ComponentStrict")} – abstract class for strict components"),
-            Item(f"{Code("Block")} – component rendering as a div"),
-            Item(f"{Code("Inline")} – component rendering as a span"),
+            Item(f"{Code('Component')} – abstract class for components"),
+            Item(f"{Code('ComponentStrict')} – abstract class for strict components"),
+            Item(f"{Code('Block')} – component rendering as a div"),
+            Item(f"{Code('Inline')} – component rendering as a span"),
         ),
-        H4(f"{Code("ludic.types")}"),
+        H4(f"{Code('ludic.types')}"),
         List(
-            Item(f"{Code("NoChildren")} – Makes a component accept no children"),
+            Item(f"{Code('NoChildren')} – Makes a component accept no children"),
             Item(
-                f"{Code("PrimitiveChildren")} – Makes a component accept only "
-                f"{Code("str")}, {Code("int")}, {Code("float")} or {Code("bool")}"
+                f"{Code('PrimitiveChildren')} – Makes a component accept only "
+                f"{Code('str')}, {Code('int')}, {Code('float')} or {Code('bool')}"
             ),
             Item(
-                f"{Code("ComplexChildren")} – Makes a component accept only "
+                f"{Code('ComplexChildren')} – Makes a component accept only "
                 "non-primitive types"
             ),
             Item(
-                f"{Code("AnyChildren")} – Makes a component accept any children types"
+                f"{Code('AnyChildren')} – Makes a component accept any children types"
             ),
-            Item(f"{Code("TAttrs")} – type variable for attributes"),
-            Item(f"{Code("TChildren")} – type variable for children of components"),
+            Item(f"{Code('TAttrs')} – type variable for attributes"),
+            Item(f"{Code('TChildren')} – type variable for children of components"),
             Item(
-                f"{Code("TChildrenArgs")} – type variable for children of strict "
+                f"{Code('TChildrenArgs')} – type variable for children of strict "
                 "components"
             ),
-            Item(f"{Code("Attrs")} – base for attributes"),
-            Item(f"{Code("Safe")} – marker for a safe string which is not escaped"),
+            Item(f"{Code('Attrs')} – base for attributes"),
+            Item(f"{Code('Safe')} – marker for a safe string which is not escaped"),
             Item(
-                f"{Code("JavaScript")} – a marker for javascript, subclasses "
-                f"{Code("Safe")}"
+                f"{Code('JavaScript')} – a marker for javascript, subclasses "
+                f"{Code('Safe')}"
             ),
         ),
-        H4(f"{Code("ludic.styles")}"),
+        H4(f"{Code('ludic.styles')}"),
         List(
             Item(
-                f"{Code("GlobalStyles")} – type for HTML classes and their CSS "
+                f"{Code('GlobalStyles')} – type for HTML classes and their CSS "
                 "properties"
             ),
-            Item(f"{Code("CSSProperties")} – type for CSS properties only"),
+            Item(f"{Code('CSSProperties')} – type for CSS properties only"),
         ),
         request=request,
         active_item="components",
diff --git a/web/endpoints/docs/getting_started.py b/web/endpoints/docs/getting_started.py
index 9b90223..d742ed1 100644
--- a/web/endpoints/docs/getting_started.py
+++ b/web/endpoints/docs/getting_started.py
@@ -12,11 +12,24 @@ def getting_started(request: Request) -> Page:
         H1("Getting Started"),
         Paragraph(
             "The fastest way to get started with a Ludic project is to use the "
-            f"{Link(
-               "Cookiecutter template",
-               to="https://github.com/getludic/template")}. Follow the steps "
+            f"{
+                Link('Cookiecutter template', to='https://github.com/getludic/template')
+            }. Follow the steps "
             "below to set up your project quickly."
         ),
+        Paragraph(
+            f"{b('Note')}: This guide covers Ludic 1.0 which requires Python 3.14+ and "
+            "uses t-strings. If you're using Python 3.12 or 3.13, use Ludic 0.5.x with "
+            f"f-strings instead. Install with {Code('--python 3.13')} and use "
+            "f-strings in your code.",
+            style={
+                "font-size": "0.9em",
+                "color": "#666",
+                "padding": "1em",
+                "background": "#f5f5f5",
+                "border-radius": "4px",
+            },
+        ),
         H2("Installation Steps"),
         NumberedList(
             Item(
@@ -44,7 +57,7 @@ def getting_started(request: Request) -> Page:
                     "Navigate to the new project's directory and install the required "
                     "dependencies using UV:"
                 ),
-                CodeBlock("uv sync --python 3.13"),
+                CodeBlock("uv sync --python 3.14"),
             ),
             Item(
                 b("Run the Project"),
@@ -56,8 +69,9 @@ def getting_started(request: Request) -> Page:
             Item(
                 b("Access the Application"),
                 Paragraph(
-                    f"Open your browser and visit {Link(
-                        "http://localhost:8000", to="http://localhost:8000")} to "
+                    f"Open your browser and visit {
+                        Link('http://localhost:8000', to='http://localhost:8000')
+                    } to "
                     "see your running application."
                 ),
             ),
@@ -98,7 +112,7 @@ def getting_started(request: Request) -> Page:
         h4(Code("pages.py")),
         Paragraph(
             "The idea is to create a few pages (regular components) that render as "
-            f"valid HTML documents using the {Code("<html>")} root tag."
+            f"valid HTML documents using the {Code('<html>')} root tag."
         ),
         h4(Code("endpoints")),
         Paragraph(
@@ -110,13 +124,13 @@ def getting_started(request: Request) -> Page:
         h4(Code("components.py")),
         Paragraph(
             "Any component you want to use in your application should be registered "
-            f"here. For example, a {Code("Navigation")} component and its attributes "
-            f"could be registered in the {Code("components.py")} file."
+            f"here. For example, a {Code('Navigation')} component and its attributes "
+            f"could be registered in the {Code('components.py')} file."
         ),
         h4(Code("main.py")),
         Paragraph(
-            f"The module instantiates the {Code("LudicApp")} class and registers "
-            f"routes by importing the {Code("endpoints")} module."
+            f"The module instantiates the {Code('LudicApp')} class and registers "
+            f"routes by importing the {Code('endpoints')} module."
         ),
         H2("What's Next?"),
         Paragraph(
diff --git a/web/endpoints/docs/htmx.py b/web/endpoints/docs/htmx.py
index ff53955..44442d9 100644
--- a/web/endpoints/docs/htmx.py
+++ b/web/endpoints/docs/htmx.py
@@ -14,7 +14,7 @@ def htmx(request: Request) -> Page:
     return Page(
         H1("Using HTMX with Ludic"),
         Paragraph(
-            f"{Link("HTMX", to="https://htmx.org")} is a powerful library that "
+            f"{Link('HTMX', to='https://htmx.org')} is a powerful library that "
             "simplifies the creation of dynamic, interactive web pages. It lets you "
             "achieve the responsiveness of single-page applications without the "
             "complexity of writing extensive JavaScript code. HTMX works by extending "
@@ -24,8 +24,9 @@ def htmx(request: Request) -> Page:
         Paragraph(
             "The most typical example is when you want to fetch content from a server "
             "on a button click event and append or replace content on your page with "
-            f"the response. You can examine a similar example {Link(
-                "bellow", to="#sample-swap-operation")}."
+            f"the response. You can examine a similar example {
+                Link('bellow', to='#sample-swap-operation')
+            }."
         ),
         Paragraph(
             "Here is a couple of HTMX attributes that allow you to add dynamic ",
@@ -47,12 +48,13 @@ def htmx(request: Request) -> Page:
         ),
         Message(
             Title("HTMX Attributes Reference"),
-            f"Check all the available attributes in the {Link(
-                "HTMX documentation", to="https://htmx.org/reference/")}.",
+            f"Check all the available attributes in the {
+                Link('HTMX documentation', to='https://htmx.org/reference/')
+            }.",
         ),
         H2("HTMX Integration in Ludic"),
         Paragraph(
-            f"The {Code("ludic.html")} module seamlessly supports HTMX attributes, "
+            f"The {Code('ludic.html')} module seamlessly supports HTMX attributes, "
             "making it easy to add dynamic functionality to your pages. Let's see "
             "a simple example:"
         ),
@@ -74,7 +76,7 @@ def htmx(request: Request) -> Page:
             language="html",
         ),
         Paragraph(
-            f"Please note that HTMX uses a special attribute, {Code("hx-on*")}, which "
+            f"Please note that HTMX uses a special attribute, {Code('hx-on*')}, which "
             "cannot currently be type-checked. However, it can still be used in the "
             "following way:"
         ),
@@ -89,13 +91,13 @@ def htmx(request: Request) -> Page:
             language="python",
         ),
         Paragraph(
-            f"This would render the attribute as {Code("hx-on--before-request")}"
-            f"which is {Link("fine with htmx", to="https://htmx.org/attributes/hx-on/")}."
+            f"This would render the attribute as {Code('hx-on--before-request')}"
+            f"which is {Link('fine with htmx', to='https://htmx.org/attributes/hx-on/')}."
         ),
         H2("Setting up an HTMX-Enabled Page"),
         NumberedList(
             Item(
-                f"{b("Include the HTMX library")}: Add the HTMX script to your base "
+                f"{b('Include the HTMX library')}: Add the HTMX script to your base "
                 "HTML component",
                 CodeBlock(
                     """
@@ -119,16 +121,16 @@ def render(self) -> HtmlPage:
                 ),
             ),
             Item(
-                f"{b(f"Use the {Code("Page")} component")}: Employ the Page component "
+                f"{b(f'Use the {Code("Page")} component')}: Employ the Page component "
                 "as the foundation for your HTML documents to ensure they load the "
                 "necessary HTMX script."
             ),
         ),
         MessageWarning(
-            Title(f"Default {Code("hx-swap")} Operation"),
-            f"The default HTMX swap operation is set to {Code("outerHTML")} in all "
-            f"pages based on the {Code("HtmlPage")} component. This is different "
-            f"than HTMX default which is {Code("innerHTML")}.",
+            Title(f"Default {Code('hx-swap')} Operation"),
+            f"The default HTMX swap operation is set to {Code('outerHTML')} in all "
+            f"pages based on the {Code('HtmlPage')} component. This is different "
+            f"than HTMX default which is {Code('innerHTML')}.",
         ),
         H2("Sample Swap Operation"),
         Paragraph("Let's illustrate how to create a dynamic page with HTMX and Ludic:"),
@@ -162,16 +164,17 @@ def content() -> p:
         H3("Explanation"),
         List(
             Item(
-                f"{b("Button Behavior")}: Clicking the button triggers an HTTP GET "
-                f"request to {Code("/content")}. The response replaces the original "
-                f"button with the content returned from the {Code("/content")} "
+                f"{b('Button Behavior')}: Clicking the button triggers an HTTP GET "
+                f"request to {Code('/content')}. The response replaces the original "
+                f"button with the content returned from the {Code('/content')} "
                 "endpoint."
             ),
             Item(
-                f"{b("Web Framework")}: Ludic acts as a web framework (built on "
-                f"{Link("Starlette", to="https://www.starlette.io/")}), empowering you "
-                f"to define endpoints and handle requests. Explore the {Link(
-                    "Web Framework", to=request.url_for("docs:web_framework").path)} "
+                f"{b('Web Framework')}: Ludic acts as a web framework (built on "
+                f"{Link('Starlette', to='https://www.starlette.io/')}), empowering you "
+                f"to define endpoints and handle requests. Explore the {
+                    Link('Web Framework', to=request.url_for('docs:web_framework').path)
+                } "
                 "section of the documentation for in-depth information."
             ),
         ),
@@ -194,14 +197,15 @@ def index() -> tuple[p, types.HXHeaders]:
             language="python",
         ),
         Paragraph(
-            f"You can also change the return type of your endpoint with {Code(
-                "tuple[div, types.Headers]")} which allows arbitrary headers, not just "
+            f"You can also change the return type of your endpoint with {
+                Code('tuple[div, types.Headers]')
+            } which allows arbitrary headers, not just "
             "HTMX-specific ones."
         ),
         H2("Rendering JavaScript"),
         Paragraph(
             "In some cases, HTMX components require some JavaScript code. For that "
-            f"purpose, there is the {Code("ludic.types.JavaScript")} class:"
+            f"purpose, there is the {Code('ludic.types.JavaScript')} class:"
         ),
         CodeBlock(
             """
@@ -230,7 +234,7 @@ def htmx_example(request: Request) -> Stack:
     return Stack(
         Paragraph(
             "This is a simple example with one button performing the "
-            f"{Code("hx-swap")} operation."
+            f"{Code('hx-swap')} operation."
         ),
         Cluster(
             Button("Show Hidden Content", hx_get=request.url_for("docs:htmx_content")),
diff --git a/web/endpoints/docs/index.py b/web/endpoints/docs/index.py
index 16d2eb9..c2c0310 100644
--- a/web/endpoints/docs/index.py
+++ b/web/endpoints/docs/index.py
@@ -31,9 +31,9 @@ def index(request: Request) -> Page:
                 title="Code Coverage",
             ),
             Badge(
-                url="https://www.python.org/downloads/release/python-3130/",
-                img_url="https://img.shields.io/badge/Python-3.12%20%7C%203.13-blue.svg",
-                title="Python 3.12 and 3.13",
+                url="https://www.python.org/downloads/release/python-3140/",
+                img_url="https://img.shields.io/badge/Python-3.14%2B-blue.svg",
+                title="Python 3.14+",
             ),
             Badge(
                 url="https://mypy-lang.org/",
@@ -63,7 +63,7 @@ def index(request: Request) -> Page:
             f"wrapper around the powerful {
                 Link('Starlette', to='https://www.starlette.io/')
             } framework. It is built "
-            "with the latest Python 3.12 features heavily incorporating typing."
+            "with the latest Python 3.14 features heavily incorporating typing."
         ),
         H2("Features"),
         List(
@@ -76,7 +76,7 @@ def index(request: Request) -> Page:
                 f"Uses the power of {b('Starlette')} and {b('Async')} for "
                 "high-performance web development"
             ),
-            Item(f"Build HTML with the ease and power of Python {b('f-strings')}"),
+            Item(f"Build HTML with the ease and power of Python {b('t-strings')}"),
             Item(f"Add CSS styling to your components with {b('Themes')}"),
             Item(
                 "Create simple, responsive layouts adopted from the "
@@ -208,14 +208,20 @@ def Counter(number: int) -> Cluster:
             language="python",
         ),
         H2("Requirements"),
-        Paragraph("Python 3.12+"),
+        Paragraph("Python 3.14+"),
+        Paragraph(
+            f"{b('Note')}: Ludic 0.5.x supports Python 3.12+ with f-strings. "
+            "For Python 3.12 or 3.13, use Ludic 0.5.x and f-strings instead of "
+            "t-strings.",
+            style={"font-size": "0.9em", "color": "#666"},
+        ),
         H2("Installation"),
         Paragraph(
             "The following command installs Ludic with Starlette as ASGI framework. "
             f"If you want to use FastAPI or Django, check the {
                 Link(
                     'Other Integrations guide',
-                    to=request.url_path_for("docs:web_framework"),
+                    to=request.url_path_for('docs:web_framework'),
                 )
             }:"
         ),
diff --git a/web/endpoints/docs/styles.py b/web/endpoints/docs/styles.py
index 1f9ff0b..ff050cb 100644
--- a/web/endpoints/docs/styles.py
+++ b/web/endpoints/docs/styles.py
@@ -22,8 +22,7 @@ def styles(request: Request) -> Page:
             ),
             Item(
                 Link("Themes", to="#themes"),
-                " – you can change the colors, widths, fonts, etc. of your "
-                "components.",
+                " – you can change the colors, widths, fonts, etc. of your components.",
             ),
         ),
         H2("CSS Styling"),
@@ -32,14 +31,14 @@ def styles(request: Request) -> Page:
             "your application:"
         ),
         NumberedList(
-            Item(f"The {Code("style")} HTML Attribute"),
-            Item(f"The {Code("styles")} Class Property"),
-            Item(f"The {Code("style")} HTML Element"),
+            Item(f"The {Code('style')} HTML Attribute"),
+            Item(f"The {Code('styles')} Class Property"),
+            Item(f"The {Code('style')} HTML Element"),
         ),
-        H3(f"The {Code("style")} HTML Attribute"),
+        H3(f"The {Code('style')} HTML Attribute"),
         Paragraph(
             "You can directly embed styles within an HTML element using the "
-            f"{Code("style")} attribute. Here's an example:"
+            f"{Code('style')} attribute. Here's an example:"
         ),
         CodeBlock(
             """
@@ -52,7 +51,7 @@ def styles(request: Request) -> Page:
         ),
         List(
             Item(
-                f"The {Code("CSSProperties")} class is a {Code("TypedDict")} for "
+                f"The {Code('CSSProperties')} class is a {Code('TypedDict')} for "
                 "convenience since type checkers can highlight unknown or incorrect "
                 "usage."
             ),
@@ -67,15 +66,15 @@ def styles(request: Request) -> Page:
         ),
         Paragraph(
             "Note that you probably want to specify the color using a theme as you can "
-            f"read more about {Link("bellow", to="#themes")}."
+            f"read more about {Link('bellow', to='#themes')}."
         ),
         CodeBlock(
             """form(..., style={"background-color": theme.colors.white})""",
             language="python",
         ),
-        H3(f"The {Code("styles")} Class Property"),
+        H3(f"The {Code('styles')} Class Property"),
         Paragraph(
-            f"Define CSS properties within your component using the {Code("styles")} "
+            f"Define CSS properties within your component using the {Code('styles')} "
             "class property. Example:"
         ),
         CodeBlock(
@@ -103,22 +102,26 @@ def render(self) -> button:
             language="python",
         ),
         Message(
-            Title(f"Notice the {Code("classes")} attribute"),
-            f"The {Code("classes")} attribute contains the list of classes that will ",
+            Title(f"Notice the {Code('classes')} attribute"),
+            f"The {Code('classes')} attribute contains the list of classes that will ",
             "be applied to the component when rendered (they will be appended if ",
-            f"there are any other classes specified by the {Code("class_")} ",
+            f"there are any other classes specified by the {Code('class_')} ",
             "attribute).",
         ),
         Paragraph(
             "In this case, you need to make sure you collect and render the styles. "
-            f"See {Link("Collecting The Styles", to="#collecting-the-styles")} and "
-            f"{Link("Integration In a Page Component",
-                    to="#integration-in-a-page-component")}."
+            f"See {Link('Collecting The Styles', to='#collecting-the-styles')} and "
+            f"{
+                Link(
+                    'Integration In a Page Component',
+                    to='#integration-in-a-page-component',
+                )
+            }."
         ),
         Paragraph(
             "It is also possible to nest styles similar to how you would nest them in "
             "SCSS. The only problem is that you might get typing errors if you are "
-            f"using {Code("mypy")} or {Code("pyright")}:"
+            f"using {Code('mypy')} or {Code('pyright')}:"
         ),
         CodeBlock(
             """
@@ -137,8 +140,8 @@ class Button(ComponentStrict[str, ButtonAttrs]):
             language="python",
         ),
         Paragraph(
-            f"Again, you probably want to use {i("themes")} to assign colors "
-            f"(we'll talk about {i("themes")} later):"
+            f"Again, you probably want to use {i('themes')} to assign colors "
+            f"(we'll talk about {i('themes')} later):"
         ),
         CodeBlock(
             """
@@ -161,8 +164,8 @@ class Button(ComponentStrict[str, ButtonAttrs]):
             Item(
                 Paragraph(
                     b("Load Styles: "),
-                    f"Use the {Code("style.load()")} method to gather styles from all ",
-                    f"components in your project. This generates a {Code("<style>")} ",
+                    f"Use the {Code('style.load()')} method to gather styles from all ",
+                    f"components in your project. This generates a {Code('<style>')} ",
                     "element:",
                 ),
                 CodeBlock(
@@ -174,7 +177,7 @@ class Button(ComponentStrict[str, ButtonAttrs]):
                     language="python",
                 ),
                 Paragraph(
-                    f"The {Code("styles")} variable now renders as a {Code("<style>")}",
+                    f"The {Code('styles')} variable now renders as a {Code('<style>')}",
                     " element with the content similar to this:",
                 ),
                 CodeBlock(
@@ -186,14 +189,14 @@ class Button(ComponentStrict[str, ButtonAttrs]):
                     language="html",
                 ),
                 Paragraph(
-                    f"You can also pass {Code("styles.load(cache=True)")} to cache "
+                    f"You can also pass {Code('styles.load(cache=True)')} to cache "
                     "the styles"
                 ),
             ),
             Item(
                 Paragraph(
                     b("Targeted Loading: "),
-                    f"For more control, use {Code("style.from_components(...)")} to ",
+                    f"For more control, use {Code('style.from_components(...)')} to ",
                     "load styles from specific components:",
                 ),
                 CodeBlock(
@@ -215,18 +218,21 @@ class Button(ComponentStrict[str, ButtonAttrs]):
         ),
         NumberedList(
             Item(
-                f"Use the {Code("ludic.catalog.pages.HtmlPage")} component which loads "
+                f"Use the {Code('ludic.catalog.pages.HtmlPage')} component which loads "
                 "the styles automatically."
             ),
             Item(
-                f"Create a new {i("Page")} component and use the "
-                f"{Code("style.load()")} method manually."
+                f"Create a new {i('Page')} component and use the "
+                f"{Code('style.load()')} method manually."
             ),
         ),
         Paragraph(
-            f"The first method is described in the {Link(
-                "catalog section",
-                to=f"{request.url_for("catalog:index").path}#htmlpage-component")} "
+            f"The first method is described in the {
+                Link(
+                    'catalog section',
+                    to=f'{request.url_for("catalog:index").path}#htmlpage-component',
+                )
+            } "
             "of the documentation. Here is the second method: "
         ),
         CodeBlock(
@@ -255,12 +261,12 @@ def render(self) -> html:
         ),
         H4("Caching The Styles"),
         Paragraph(
-            f"As mentioned before, passing {Code("cache=True")} to {Code("style.load")}"
+            f"As mentioned before, passing {Code('cache=True')} to {Code('style.load')}"
             " caches loaded elements' styles during the first render. The problem is "
             "that the first request to your application renders the styles without the "
             "cache, so the response is a bit slower. If you want to cache the styles "
             "before your component even renders for the first time, you can use the "
-            f"{Code("lifespan")} argument of the {Code("LudicApp")} class:"
+            f"{Code('lifespan')} argument of the {Code('LudicApp')} class:"
         ),
         CodeBlock(
             """
@@ -281,13 +287,16 @@ async def lifespan(_: LudicApp) -> AsyncIterator[None]:
             language="python",
         ),
         Paragraph(
-            f"You can read more about {Code("Lifespan")} in {Link(
-                "Starlette's documentation", to="https://www.starlette.io/lifespan/")}."
+            f"You can read more about {Code('Lifespan')} in {
+                Link(
+                    "Starlette's documentation", to='https://www.starlette.io/lifespan/'
+                )
+            }."
         ),
-        H3(f"The {Code("style")} HTML Element"),
+        H3(f"The {Code('style')} HTML Element"),
         Paragraph(
-            f"You can also directly embed styles within a {Code("Page")} component "
-            f"using the {Code("style")} element. Here's an example:"
+            f"You can also directly embed styles within a {Code('Page')} component "
+            f"using the {Code('style')} element. Here's an example:"
         ),
         CodeBlock(
             """
@@ -350,13 +359,13 @@ async def lifespan(_: LudicApp) -> AsyncIterator[None]:
             Item(
                 b("Accessing the Theme: "),
                 "Components can access the current theme through a special ",
-                f"{Code("theme")} attribute. This gives you direct access to your ",
+                f"{Code('theme')} attribute. This gives you direct access to your ",
                 "theme's values.",
             ),
             Item(
                 b("Switching Theme: "),
                 "Components can switch to a different theme by passing the component",
-                f"to the {Code("theme.use()")} method. You can also switch theme ",
+                f"to the {Code('theme.use()')} method. You can also switch theme ",
                 "globally.",
             ),
         ),
@@ -364,7 +373,7 @@ async def lifespan(_: LudicApp) -> AsyncIterator[None]:
         Paragraph("You have two options how to create a new theme:"),
         NumberedList(
             Item(
-                f"subclass {Code("Theme")} base class and define the theme's attributes"
+                f"subclass {Code('Theme')} base class and define the theme's attributes"
             ),
             Item("instantiate an existing theme and override its attributes"),
         ),
@@ -411,10 +420,10 @@ class MyTheme(Theme):
         H3("Accessing The Theme"),
         Paragraph("There are two ways to access the theme:"),
         NumberedList(
-            Item(f"use the component's {Code("theme")} attribute"),
+            Item(f"use the component's {Code('theme')} attribute"),
             Item(
-                f"call {Code("style.use(lambda theme: { ... })")} on the component's "
-                f"{Code("styles")} class attribute"
+                f"call {Code('style.use(lambda theme: { ... })')} on the component's "
+                f"{Code('styles')} class attribute"
             ),
         ),
         Paragraph("Here is an example combining both approaches:"),
@@ -451,13 +460,13 @@ def render(self) -> button:
         Paragraph("You can switch the theme globally or for a specific component:"),
         NumberedList(
             Item(
-                f"use the {Code("theme.use()")} method to switch theme in a component"
+                f"use the {Code('theme.use()')} method to switch theme in a component"
             ),
             Item(
-                f"use the {Code("set_default_theme()")} method to switch theme globally"
+                f"use the {Code('set_default_theme()')} method to switch theme globally"
             ),
             Item(
-                f"use the {Code("style.load()")} to render styles from loaded "
+                f"use the {Code('style.load()')} to render styles from loaded "
                 "components with a different theme"
             ),
         ),
diff --git a/web/endpoints/docs/web_framework.py b/web/endpoints/docs/web_framework.py
index 9190752..f09b127 100644
--- a/web/endpoints/docs/web_framework.py
+++ b/web/endpoints/docs/web_framework.py
@@ -12,13 +12,14 @@ def web_framework(request: Request) -> Page:
     return Page(
         H1("Web Framework"),
         Paragraph(
-            f"The Ludic library provides wrappers around {Link(
-                "Starlette", to="https://www.starlette.io/")} framework to make it "
+            f"The Ludic library provides wrappers around {
+                Link('Starlette', to='https://www.starlette.io/')
+            } framework to make it "
             "easy to write asynchronous web applications based on HTMX and "
             "Ludic Components."
         ),
         Paragraph(
-            f"Ludic includes an application class {Code("LudicApp")} that tight "
+            f"Ludic includes an application class {Code('LudicApp')} that tight "
             "together all other functionality. Here is how you can create an instance "
             "of the class:"
         ),
@@ -31,13 +32,13 @@ def web_framework(request: Request) -> Page:
             language="python",
         ),
         Paragraph(
-            f"The {Code("LudicApp")} class supports the same parameters as the "
-            f"{Code("Starlette")} class from the {i("Starlette")} framework."
+            f"The {Code('LudicApp')} class supports the same parameters as the "
+            f"{Code('Starlette')} class from the {i('Starlette')} framework."
         ),
         H2("Routing"),
         Paragraph(
-            f"To register handlers in your app, you can use the {Code("routes")} "
-            f"arguments of the {Code("LudicApp")} class like this:"
+            f"To register handlers in your app, you can use the {Code('routes')} "
+            f"arguments of the {Code('LudicApp')} class like this:"
         ),
         CodeBlock(
             """
@@ -84,9 +85,12 @@ def homepage(request: Request) -> p:
         Paragraph("Creates an application instance."),
         H4("Parameters"),
         Paragraph(
-            f"The list of parameters can be found in the {Link(
-                "Starlette documentation",
-                to="https://www.starlette.io/applications/#instantiating-the-application")}."
+            f"The list of parameters can be found in the {
+                Link(
+                    'Starlette documentation',
+                    to='https://www.starlette.io/applications/#instantiating-the-application',
+                )
+            }."
         ),
         H4("Methods"),
         List(
@@ -151,7 +155,7 @@ def homepage(request: Request) -> p:
         H3("Function-Based"),
         Paragraph(
             "These are functions returning Ludic components, a tuple or the "
-            f"{Link("Starlette's Response class", to="https://www.starlette.io/responses/")}."
+            f"{Link("Starlette's Response class", to='https://www.starlette.io/responses/')}."
         ),
         Paragraph("Here are some examples of function handlers registered in Ludic:"),
         CodeBlock(
@@ -190,7 +194,7 @@ async def register_person(data: FormData) -> Page:
             "While it is possible to use function-based handlers everywhere, in the "
             "case of HTMX-based web applications, we want to also create a lot of "
             "endpoints rendering only sole form elements, tables, and so on. We don't "
-            f"need to always return the whole HTML document in {Code("<html>")} tag. "
+            f"need to always return the whole HTML document in {Code('<html>')} tag. "
             "We could use function-based handlers for that, however, it is often "
             "better to think of endpoints as just another components."
         ),
@@ -267,7 +271,7 @@ def render(self) -> Form:
         Paragraph(
             "One benefit of this approach is that you can create components that "
             "generate the URL path for other component-based endpoints with the "
-            f"{Code("url_for")} method. More about that in the next section."
+            f"{Code('url_for')} method. More about that in the next section."
         ),
         H3("Reverse URL Lookups"),
         Paragraph(
@@ -280,24 +284,24 @@ def render(self) -> Form:
         ),
         b(Code("Request.url_for(endpoint: Callable[..., Any] | str, ...)")),
         Paragraph(
-            f"This method is available on the {Code("ludic.web.requests.Request")} "
-            f"object. It generates and {Code("URLPath")} object for a given endpoint."
+            f"This method is available on the {Code('ludic.web.requests.Request')} "
+            f"object. It generates and {Code('URLPath')} object for a given endpoint."
         ),
         b(Code("Endpoint.url_for(endpoint: type[RoutedProtocol] | str, ...)")),
         Paragraph(
             "This method is available on a component-based endpoint. It has one small "
-            f"advantage over the {Code("request")}'s method – if the destination "
+            f"advantage over the {Code('request')}'s method – if the destination "
             "component defines the same attributes, the path parameters are "
             "automatically extracted so you don't need to pass them via key-word "
             "arguments. Here are examples:"
         ),
         List(
             Item(
-                f"{Code("ContactForm(...).url_for(Contact)")}"
-                f" – Even though the {Code("ContactForm")} endpoint requires the "
-                f"{Code("id")} path parameter, it is automatically extracted from "
-                f"{Code("ContactForm(...).attrs")} since the {Code("ContactForm")} and "
-                f"{Code("Contact")} share the same attributes – {Code("ContactAttrs")}."
+                f"{Code('ContactForm(...).url_for(Contact)')}"
+                f" – Even though the {Code('ContactForm')} endpoint requires the "
+                f"{Code('id')} path parameter, it is automatically extracted from "
+                f"{Code('ContactForm(...).attrs')} since the {Code('ContactForm')} and "
+                f"{Code('Contact')} share the same attributes – {Code('ContactAttrs')}."
             ),
             Item(
                 "If these attribute types are not equal, you need to specify the URL "
@@ -305,7 +309,7 @@ def render(self) -> Form:
                 f"{Code('ContactForm(...).url_for(Foo, id=self.attrs["foo_id"])')}.",
             ),
             Item(
-                f"If the first argument to {Code("url_for")} is the name of the "
+                f"If the first argument to {Code('url_for')} is the name of the "
                 "endpoint, you need to always specify the URL path parameters "
                 "explicitly."
             ),
@@ -314,7 +318,7 @@ def render(self) -> Form:
         Paragraph(
             "Your handler is not required to return only a valid element or component, "
             "you can also modify headers, status code, or return a "
-            f"{Code("JSONResponse")}:"
+            f"{Code('JSONResponse')}:"
         ),
         CodeBlock(
             """
@@ -347,7 +351,7 @@ def index() -> tuple[div, types.Headers]:
             ),
             Item(
                 Code("starlette.responses.Response"),
-                f" – valid Starlette {Code("Response")} object",
+                f" – valid Starlette {Code('Response')} object",
             ),
         ),
         H3("Handler Arguments"),
@@ -363,8 +367,8 @@ def index() -> tuple[div, types.Headers]:
             ),
             Item(
                 Code("request: Request"),
-                f" the Ludic's slightly modified {Code("ludic.web.requests.Request")} ",
-                f"class based on {Link("Starlette's one", to="https://www.starlette.io/requests/")}",
+                f" the Ludic's slightly modified {Code('ludic.web.requests.Request')} ",
+                f"class based on {Link("Starlette's one", to='https://www.starlette.io/requests/')}",
             ),
             Item(
                 Code("params: QueryParams"),
@@ -388,9 +392,9 @@ def index() -> tuple[div, types.Headers]:
             "future.",
         ),
         Paragraph(
-            f"The {Code("ludic.parsers")} module contains helpers for parsing "
-            f"{Code("FormData")}. The way it works is that you define {Code("Attrs")} "
-            f"class with {Code("Annotated")} arguments like here:"
+            f"The {Code('ludic.parsers')} module contains helpers for parsing "
+            f"{Code('FormData')}. The way it works is that you define {Code('Attrs')} "
+            f"class with {Code('Annotated')} arguments like here:"
         ),
         CodeBlock(
             """
@@ -402,10 +406,10 @@ class PersonAttrs(Attrs):
             language="python",
         ),
         Paragraph(
-            f"Now you can use the {Code("Parser")} class to annotate arguments of your "
+            f"Now you can use the {Code('Parser')} class to annotate arguments of your "
             "handler. The parser will attempt to parse form data if any "
-            f"{Code("Callable")} is found in the metadata argument of "
-            f"{Code("Annotated")}:"
+            f"{Code('Callable')} is found in the metadata argument of "
+            f"{Code('Annotated')}:"
         ),
         CodeBlock(
             """
@@ -420,19 +424,20 @@ async def update_person(cls, id: str, data: Parser[PersonAttrs]) -> div:
             language="python",
         ),
         Paragraph(
-            f"The {Code("Parser.validate()")} uses {Link(
-                "typeguard", to="https://typeguard.readthedocs.io/")} to validate the "
+            f"The {Code('Parser.validate()')} uses {
+                Link('typeguard', to='https://typeguard.readthedocs.io/')
+            } to validate the "
             "form data. If the validation fails, the method raises "
-            f"{Code("ludic.parsers.ValidationError")} if the request's form data are "
-            f"not valid. If unhandled, this results in {Code("403")} status code."
+            f"{Code('ludic.parsers.ValidationError')} if the request's form data are "
+            f"not valid. If unhandled, this results in {Code('403')} status code."
         ),
         H3("Parsing Collections"),
         Paragraph(
-            f"You can also use the {Code("ListParser")} class to parse a list of data. "
-            f"It parses form data in a way similar to the {Code("Parser")} class, "
+            f"You can also use the {Code('ListParser')} class to parse a list of data. "
+            f"It parses form data in a way similar to the {Code('Parser')} class, "
             "however, it expects the form data to have the identifier column as key. "
             "For example, we want to parse a first and last name columns from a list "
-            f"of people, here are the example form data the {Code("ListParser")} is "
+            f"of people, here are the example form data the {Code('ListParser')} is "
             "able to handle:"
         ),
         CodeBlock(
@@ -454,7 +459,7 @@ async def update_person(cls, id: str, data: Parser[PersonAttrs]) -> div:
             language="python",
         ),
         Paragraph(
-            f"This is how you could use the {Code("ListParser")} to parse a list of "
+            f"This is how you could use the {Code('ListParser')} to parse a list of "
             "this kind of data from your view:"
         ),
         CodeBlock(
@@ -471,7 +476,7 @@ async def update_people(cls, id: str, data: ListParser[PersonAttrs]) -> div:
         H2("Error Handlers"),
         Paragraph(
             "You can use error handlers for custom pages for non-ok HTTP status codes. "
-            f"You can register a handler with the {Code("app.exception_handler")} "
+            f"You can register a handler with the {Code('app.exception_handler')} "
             "decorator:"
         ),
         CodeBlock(
@@ -497,8 +502,8 @@ async def server_error() -> Page:
             language="python",
         ),
         Paragraph(
-            f"Optionally, you can use the {Code("request: Request")} and "
-            f"{Code("exc: Exception")} arguments for the handler:"
+            f"Optionally, you can use the {Code('request: Request')} and "
+            f"{Code('exc: Exception')} arguments for the handler:"
         ),
         CodeBlock(
             """
@@ -509,65 +514,65 @@ async def server_error(request: Request, exc: Exception) -> Page: ...
         ),
         H2("Exceptions"),
         Paragraph(
-            f"The {Code("ludic.web.exceptions")} contains a lot of useful exceptions "
+            f"The {Code('ludic.web.exceptions')} contains a lot of useful exceptions "
             "that can be raised in your views and caught in your custom error handlers:"
         ),
         List(
             Item(
                 Code("ClientError(HTTPException)"),
-                f" – default status code {Code("400")}",
+                f" – default status code {Code('400')}",
             ),
             Item(
                 Code("BadRequestError(ClientError)"),
-                f" – default status code {Code("400")}",
+                f" – default status code {Code('400')}",
             ),
             Item(
                 Code("UnauthorizedError(ClientError)"),
-                f" – default status code {Code("401")}",
+                f" – default status code {Code('401')}",
             ),
             Item(
                 Code("PaymentRequiredError(ClientError)"),
-                f" – default status code {Code("402")}",
+                f" – default status code {Code('402')}",
             ),
             Item(
                 Code("ForbiddenError(ClientError)"),
-                f" – default status code {Code("403")}",
+                f" – default status code {Code('403')}",
             ),
             Item(
                 Code("NotFoundError(ClientError)"),
-                f" – default status code {Code("404")}",
+                f" – default status code {Code('404')}",
             ),
             Item(
                 Code("MethodNotAllowedError(ClientError)"),
-                f" – default status code {Code("405")}",
+                f" – default status code {Code('405')}",
             ),
             Item(
                 Code("TooManyRequestsError(ClientError)"),
-                f" – default status code {Code("429")}",
+                f" – default status code {Code('429')}",
             ),
             Item(
                 Code("ServerError(HTTPException)"),
-                f" – default status code {Code("500")}",
+                f" – default status code {Code('500')}",
             ),
             Item(
                 Code("InternalServerError(ServerError)"),
-                f" – default status code {Code("500")}",
+                f" – default status code {Code('500')}",
             ),
             Item(
                 Code("NotImplementedError(ServerError)"),
-                f" – default status code {Code("501")}",
+                f" – default status code {Code('501')}",
             ),
             Item(
                 Code("BadGatewayError(ServerError)"),
-                f" – default status code {Code("502")}",
+                f" – default status code {Code('502')}",
             ),
             Item(
                 Code("ServiceUnavailableError(ServerError)"),
-                f" – default status code {Code("503")}",
+                f" – default status code {Code('503')}",
             ),
             Item(
                 Code("GatewayTimeoutError(ServerError)"),
-                f" – default status code {Code("504")}",
+                f" – default status code {Code('504')}",
             ),
         ),
         H2("WebSockets"),
@@ -579,9 +584,12 @@ async def server_error(request: Request, exc: Exception) -> Page: ...
         H2("Testing"),
         Paragraph(
             "Testing Ludic Web Apps is the same as testing Starlette apps which use a "
-            f"{Code("TestClient")} class exposing the same interface as {Code("httpx")}"
-            f" library. Read more about testing in the {Link(
-                "Starlette documentation",to="https://www.starlette.io/testclient/")}."
+            f"{Code('TestClient')} class exposing the same interface as {Code('httpx')}"
+            f" library. Read more about testing in the {
+                Link(
+                    'Starlette documentation', to='https://www.starlette.io/testclient/'
+                )
+            }."
         ),
         request=request,
         active_item="web_framework",
diff --git a/web/endpoints/examples/bulk_update.py b/web/endpoints/examples/bulk_update.py
index 8de4ac6..1573e3b 100644
--- a/web/endpoints/examples/bulk_update.py
+++ b/web/endpoints/examples/bulk_update.py
@@ -33,7 +33,7 @@ async def bulk_update(request: Request) -> Page:
         H2("Implementation"),
         Paragraph(
             "The first thing we need to do is create the table. For this task, we use "
-            f"a class-based endpoint called {Code("PeopleTable")} which will contain "
+            f"a class-based endpoint called {Code('PeopleTable')} which will contain "
             "the list of people. This list of people is going to be the endpoint's "
             "attributes, so we create them first:"
         ),
@@ -60,15 +60,15 @@ class PeopleAttrs(Attrs):
             language="python",
         ),
         Paragraph(
-            f"Each field in the {Code("PersonAttrs")} definition is marked by the"
-            f"{Code("Annotated")} class containing the {Code("ColumnMeta")} "
+            f"Each field in the {Code('PersonAttrs')} definition is marked by the"
+            f"{Code('Annotated')} class containing the {Code('ColumnMeta')} "
             "marker. This marker helps generating the table using the "
-            f"{Code("create_rows")} function as we'll see bellow."
+            f"{Code('create_rows')} function as we'll see bellow."
         ),
         Paragraph(
             "Now we know what kind of data we need to store and what columns to "
             "create. Here is the endpoint implementation rendering the attributes "
-            f"as a table as well as handling the {Code("GET")} and {Code("POST")} "
+            f"as a table as well as handling the {Code('GET')} and {Code('POST')} "
             "HTTP methods:"
         ),
         CodeBlock(
@@ -102,8 +102,8 @@ async def post(cls, data: ListParser[PersonAttrs]) -> Toast:
                             activations[active] += 1
 
                     return Toast(
-                        f"Activated {activations[True]}, "
-                        f"deactivated {activations[False]}"
+                        t"Activated {activations[True]}, "
+                        t"deactivated {activations[False]}"
                     )
 
                 @classmethod
@@ -130,11 +130,11 @@ def render(self) -> Form:
             Item(
                 Code("post"),
                 " – handles the POST request which contains form data. Since we "
-                f"used the {Code("create_rows")} method, it is possible to use a "
+                f"used the {Code('create_rows')} method, it is possible to use a "
                 "parser to automatically convert the form data in a dictionary. "
                 "In fact, we are handling a list of people, so we use the "
-                f"{Code("ListParser")}. Next, we update our database and return "
-                f"the number of activated and deactivated people as a {Code("Toast")} "
+                f"{Code('ListParser')}. Next, we update our database and return "
+                f"the number of activated and deactivated people as a {Code('Toast')} "
                 "component that we cover bellow.",
             ),
             Item(
@@ -148,15 +148,15 @@ def render(self) -> Form:
                 " – handles rendering of the table. The table is wrapped in a form "
                 "so that it is possible to issue a POST request updating the list of "
                 "active or inactive people. The form is wrapping the table having the "
-                f"columns created according the the {Code("PersonAttrs")} "
+                f"columns created according the the {Code('PersonAttrs')} "
                 "specification. We also need a button to submit the form and a "
-                f"{Code("Toast")} component which displays a message about activated "
+                f"{Code('Toast')} component which displays a message about activated "
                 "and deactivated people. The form is submitted via HTMX.",
             ),
         ),
         Paragraph(
-            f"Here is the implementation of the {Code("Toast")} component displaying "
-            f"the small message next to the {Code("Bulk Update")} button:"
+            f"Here is the implementation of the {Code('Toast')} component displaying "
+            f"the small message next to the {Code('Bulk Update')} button:"
         ),
         CodeBlock(
             """
diff --git a/web/endpoints/examples/cascading_selects.py b/web/endpoints/examples/cascading_selects.py
index 0f126cc..6d76aee 100644
--- a/web/endpoints/examples/cascading_selects.py
+++ b/web/endpoints/examples/cascading_selects.py
@@ -13,7 +13,7 @@ async def cascading_selects(request: Request) -> Page:
     return Page(
         H1("Cascading Selects (FastAPI)"),
         Paragraph(
-            f"The cascading selects example uses {b("FastAPI")} to implement two "
+            f"The cascading selects example uses {b('FastAPI')} to implement two "
             "selects. First one is a simple select of a car's manufacturer. Second "
             "select's values are based on the option chosen by the first one."
         ),
diff --git a/web/endpoints/examples/click_to_edit.py b/web/endpoints/examples/click_to_edit.py
index e8723b6..997ab4d 100644
--- a/web/endpoints/examples/click_to_edit.py
+++ b/web/endpoints/examples/click_to_edit.py
@@ -35,7 +35,7 @@ async def click_to_edit(request: Request) -> Page:
         Paragraph(
             "Before we start implementing the endpoint rendering the HTML form, we "
             "also want to display the data of the customer. The task can be achieved "
-            f"by implementing the {Code("Contact")} endpoint which renders the data as "
+            f"by implementing the {Code('Contact')} endpoint which renders the data as "
             "a description list. The endpoint also requires the contact's attributes "
             "which we describe like this:"
         ),
@@ -57,9 +57,9 @@ class ContactAttrs(Attrs):
             language="python",
         ),
         Paragraph(
-            f"You may have noticed we used the {Code("Annotated")} marker. The reason "
+            f"You may have noticed we used the {Code('Annotated')} marker. The reason "
             "for that is that we want to automatically create a form based on this "
-            f"specification later. There is also the {Code("email_validator")} parser "
+            f"specification later. There is also the {Code('email_validator')} parser "
             "which can parse and validate email of the customer. The parser could be "
             "as simple as this:"
         ),
@@ -75,8 +75,8 @@ def email_validator(email: str) -> str:
             language="python",
         ),
         Paragraph(
-            f"The {Code("contact")} endpoint handles rendering of the customer data "
-            f"as well as the {Code("GET")} and {Code("PUT")} HTTP methods:"
+            f"The {Code('contact')} endpoint handles rendering of the customer data "
+            f"as well as the {Code('GET')} and {Code('PUT')} HTTP methods:"
         ),
         CodeBlock(
             """
@@ -137,18 +137,18 @@ def render(self) -> Stack:
             Item(
                 Code("get"),
                 " – handles the GET request which fetches information about the "
-                f"contact from the database, and returns them as the {Code("Contact")} "
+                f"contact from the database, and returns them as the {Code('Contact')} "
                 "component to be rendered as HTML.",
             ),
             Item(
                 Code("put"),
                 " – handles the PUT request which contains form data. Since we "
-                f"later use the {Code("create_rows")} method, it is possible to use a "
+                f"later use the {Code('create_rows')} method, it is possible to use a "
                 "parser to automatically convert the form data into a dictionary. "
                 "First, we check that we have the contact in our database, than "
                 "we validate the data submitted by the user and update the contact in "
                 "our database, and finally, we return the updated contact as the "
-                f"{Code("Contact")} component.",
+                f"{Code('Contact')} component.",
             ),
             Item(
                 Code("render"),
@@ -156,7 +156,7 @@ def render(self) -> Stack:
                 "HTMX swap operation replacing the content with an editable form.",
             ),
         ),
-        Paragraph(f"The last remaining piece is the {Code("ContactForm")} component:"),
+        Paragraph(f"The last remaining piece is the {Code('ContactForm')} component:"),
         CodeBlock(
             """
             @app.endpoint("/contacts/{id}/form/")
@@ -195,7 +195,7 @@ def render(self) -> Form:
                 Code("render"),
                 " – handles rendering of the contact form, a button to submit the "
                 "form, and also a button to cancel the edit operation. We use the "
-                f"HTMX swap operation to replace the form with the {Code("Contact")} "
+                f"HTMX swap operation to replace the form with the {Code('Contact')} "
                 "component on submit or cancel.",
             ),
         ),
diff --git a/web/endpoints/examples/click_to_load.py b/web/endpoints/examples/click_to_load.py
index 1043bb4..67aaec2 100644
--- a/web/endpoints/examples/click_to_load.py
+++ b/web/endpoints/examples/click_to_load.py
@@ -120,12 +120,12 @@ def render(self) -> Table[TableHead, ContactsSlice]:
         ),
         Paragraph(
             "First endpoint is function-based and is rendering the initial table "
-            f"of contacts. We use the {Code("ContactsSlice.get()")} method to load "
+            f"of contacts. We use the {Code('ContactsSlice.get()')} method to load "
             "the first page. It would probably be better to separate this loading "
             "to some handler function."
         ),
         Paragraph(
-            f"The {Code("ContactsSlice")} endpoint-based component is loading the "
+            f"The {Code('ContactsSlice')} endpoint-based component is loading the "
             "table rows and implements two methods:"
         ),
         List(
@@ -136,20 +136,20 @@ def render(self) -> Table[TableHead, ContactsSlice]:
             ),
             Item(
                 Code("render"),
-                f" – handles rendering of the table rows and the {Code("Load More")} "
+                f" – handles rendering of the table rows and the {Code('Load More')} "
                 "button. In order for everything to work properly, we render only "
-                f"the table's rows while wrapping them in the {Code("Blank")} "
+                f"the table's rows while wrapping them in the {Code('Blank')} "
                 "component. This component does not render any HTML element, it's just "
                 "a wrapper when we want to render a list of elements.",
             ),
         ),
         Paragraph(
-            f"Last, the {Code("ContactsTable")} class is a regular component that "
+            f"Last, the {Code('ContactsTable')} class is a regular component that "
             "renders the table's columns."
         ),
         Paragraph(
-            f"The last remaining piece is the {Code("LoadMoreButton")} component which "
-            f"triggers the {Code("GET")} request calling the {Code("ContactsSlice")} "
+            f"The last remaining piece is the {Code('LoadMoreButton')} component which "
+            f"triggers the {Code('GET')} request calling the {Code('ContactsSlice')} "
             "method to load more contact data:"
         ),
         CodeBlock(
@@ -178,9 +178,9 @@ def render(self) -> ButtonPrimary:
         ),
         Paragraph(
             "We use the HTMX swap operation to replace the button itself with a new "
-            f"slice of contacts rendered by the {Code("ContactsSlice")} endpoint. "
+            f"slice of contacts rendered by the {Code('ContactsSlice')} endpoint. "
             "That is, the next page of rows as well as the button itself running the "
-            f"HTMX operation. Since the {Code("ContactsSlice")} always bumps the "
+            f"HTMX operation. Since the {Code('ContactsSlice')} always bumps the "
             "button link's page, we get the next page of contacts on every click."
         ),
         request=request,
diff --git a/web/endpoints/examples/complex_layout.py b/web/endpoints/examples/complex_layout.py
index 353fb0a..1ed9cc3 100644
--- a/web/endpoints/examples/complex_layout.py
+++ b/web/endpoints/examples/complex_layout.py
@@ -12,7 +12,7 @@ def complex_layout(request: Request) -> Page:
         H2("Layout Example"),
         Paragraph(
             "You are free to combine layouts and components together as described in "
-            f"the {Link("Layouts", to=request.url_for("catalog:layouts").path)} "
+            f"the {Link('Layouts', to=request.url_for('catalog:layouts').path)} "
             "section. The following is an example of a more complex layout consisting "
             "of multiple nested components using CSS utilities to tweak final design."
         ),
diff --git a/web/endpoints/examples/delete_row.py b/web/endpoints/examples/delete_row.py
index 97ae70c..ee1cf69 100644
--- a/web/endpoints/examples/delete_row.py
+++ b/web/endpoints/examples/delete_row.py
@@ -102,7 +102,7 @@ def render(self) -> TableRow:
                 Code("render"),
                 " – handles rendering of the table. Apart from the textual columns, "
                 "we also render an action button to delete a row which is hooked to "
-                f"the {Code("PersonRow.delete()")} method.",
+                f"the {Code('PersonRow.delete()')} method.",
             ),
         ),
         Paragraph(
@@ -156,14 +156,14 @@ def render(self) -> Table[TableHead, PersonRow]:
             Item(
                 Code("get"),
                 " – handles the GET request which returns an instance of the "
-                f"{Code("PeopleTable")} filled with a list of people fetched "
+                f"{Code('PeopleTable')} filled with a list of people fetched "
                 "from database.",
             ),
             Item(
                 Code("render"),
                 " – handles rendering of the table of people. We use a special "
-                f"{Code("body_attrs")} attribute to configure HTMX operations on "
-                f"the {Code("tbody")} element.",
+                f"{Code('body_attrs')} attribute to configure HTMX operations on "
+                f"the {Code('tbody')} element.",
             ),
         ),
         request=request,
diff --git a/web/endpoints/examples/edit_row.py b/web/endpoints/examples/edit_row.py
index 84b0416..da2fc4b 100644
--- a/web/endpoints/examples/edit_row.py
+++ b/web/endpoints/examples/edit_row.py
@@ -62,7 +62,7 @@ class PeopleAttrs(Attrs):
             language="python",
         ),
         Paragraph(
-            f"Now we create the {Code("PersonRow")} endpoint for displaying the "
+            f"Now we create the {Code('PersonRow')} endpoint for displaying the "
             "person's information in a row:"
         ),
         CodeBlock(
@@ -150,7 +150,7 @@ def render(self) -> TableRow:
             Item(
                 Code("get"),
                 " – handles the GET request which returns an instance of the "
-                f"{Code("PeopleRow")} of the requested person.",
+                f"{Code('PeopleRow')} of the requested person.",
             ),
             Item(
                 Code("render"),
@@ -261,14 +261,14 @@ def render(self) -> Table[TableHead, PersonRow]:
             Item(
                 Code("get"),
                 " – handles the GET request which returns an instance of the "
-                f"{Code("PeopleTable")} filled with a list of people fetched "
+                f"{Code('PeopleTable')} filled with a list of people fetched "
                 "from database.",
             ),
             Item(
                 Code("render"),
                 " – handles rendering of the table of people. We use a special "
-                f"{Code("body_attrs")} attribute to configure HTMX operations on "
-                f"the {Code("tbody")} element.",
+                f"{Code('body_attrs')} attribute to configure HTMX operations on "
+                f"the {Code('tbody')} element.",
             ),
         ),
         request=request,
diff --git a/web/endpoints/examples/index.py b/web/endpoints/examples/index.py
index 2aa85c6..bfdfd32 100644
--- a/web/endpoints/examples/index.py
+++ b/web/endpoints/examples/index.py
@@ -75,7 +75,7 @@ async def index(request: Request) -> Page:
         H2("Link"),
         Paragraph(
             "A simple component simulating a link. The component only accepts one "
-            f"string child and a {Code("to")} attribute."
+            f"string child and a {Code('to')} attribute."
         ),
         CodeBlock(
             """
@@ -141,8 +141,12 @@ def render(self) -> Box:
         ),
         Paragraph(
             "Note that you need to use this navigation in the context of the "
-            f"{Link("HtmlPage",
-                    to=f"{request.url_path_for("catalog:index")}#htmlpage-component")} "
+            f"{
+                Link(
+                    'HtmlPage',
+                    to=f'{request.url_path_for("catalog:index")}#htmlpage-component',
+                )
+            } "
             "component, otherwise there won't be the necessary CSS loaded. Or you can "
             "define your own styles for the component."
         ),
diff --git a/web/endpoints/examples/infinite_scroll.py b/web/endpoints/examples/infinite_scroll.py
index ac5b474..73a4059 100644
--- a/web/endpoints/examples/infinite_scroll.py
+++ b/web/endpoints/examples/infinite_scroll.py
@@ -14,8 +14,9 @@ async def infinite_scroll(request: Request) -> Page:
         Paragraph(
             "The infinite scroll pattern provides a way to load content dynamically"
             "on user scrolling action. This example is almost identical the the "
-            f"{Link(
-                "Click To Load", to=request.url_for("examples:click_to_load").path)}. "
+            f"{
+                Link('Click To Load', to=request.url_for('examples:click_to_load').path)
+            }. "
         ),
         List(
             Item(
@@ -33,14 +34,14 @@ async def infinite_scroll(request: Request) -> Page:
         ),
         H2("Implementation"),
         Paragraph(
-            f"Check the {Link(
-                "Click To Load",
-                to=request.url_for("examples:click_to_load").path)} example. "
-            f"The only difference is the {Code("render()")} implementation with the "
-            f"introduction of the {Code("hx_trigger")} and {Code("hx_swap")} "
+            f"Check the {
+                Link('Click To Load', to=request.url_for('examples:click_to_load').path)
+            } example. "
+            f"The only difference is the {Code('render()')} implementation with the "
+            f"introduction of the {Code('hx_trigger')} and {Code('hx_swap')} "
             "attributes. In the Click To Load example, we used the "
-            f"{Code("LoadMoreButton")} to trigger the load action. Here is the "
-            f"updated {Code("render()")} method:"
+            f"{Code('LoadMoreButton')} to trigger the load action. Here is the "
+            f"updated {Code('render()')} method:"
         ),
         CodeBlock(
             """
diff --git a/web/endpoints/examples/lazy_loading.py b/web/endpoints/examples/lazy_loading.py
index 09e30e0..6861125 100644
--- a/web/endpoints/examples/lazy_loading.py
+++ b/web/endpoints/examples/lazy_loading.py
@@ -30,7 +30,7 @@ async def lazy_loading(request: Request) -> Page:
         Paragraph(
             "The lazy loading functionality is super simple to implement "
             "in Ludic. You can create just two function-based endpoints "
-            f"and use the {Code("LazyLoader")} component from the catalog: "
+            f"and use the {Code('LazyLoader')} component from the catalog: "
         ),
         CodeBlock(
             """
diff --git a/web/endpoints/index.py b/web/endpoints/index.py
index 4917bf9..04e9baa 100644
--- a/web/endpoints/index.py
+++ b/web/endpoints/index.py
@@ -28,7 +28,7 @@
     async def index() -> Box:
         """Homepage endpoint greeting visitors."""
         return Box(
-            f"Welcome to {Link("Ludic", to="/")}!",
+            t"Welcome to {Link("Ludic", to="/")}!",
         )
     ''',
     '''
@@ -108,8 +108,8 @@ def index() -> Page:
         return Page(
             H1("HTML Page in Pure Python"),
             Paragraph(
-                f"A sample on how to use {b("Ludic")} to build"
-                f"static {Code("HTML")} page in pure Python."
+                t"A sample on how to use {b("Ludic")} to build"
+                t"static {Code("HTML")} page in pure Python."
             ),
         )
     """,
@@ -185,8 +185,8 @@ def index(request: Request) -> HomePage:
                 id="main-heading",
             ),
             Paragraph(
-                f"A {b("type-safe HTML template engine")} for Python. Build dynamic "
-                f"web pages using {b("Python components")} with a React-like approach "
+                f"A {b('type-safe HTML template engine')} for Python. Build dynamic "
+                f"web pages using {b('Python components')} with a React-like approach "
                 f"- no template syntax required.",
                 style={"font-size": request.state.theme.headers.h4.size * 0.8},
             ),
diff --git a/web/search/index.py b/web/search/index.py
index 9a1732f..8ddd1c7 100644
--- a/web/search/index.py
+++ b/web/search/index.py
@@ -164,7 +164,7 @@ async def build_index(app: LudicApp) -> Index:
             if isinstance(child, H1 | H2):
                 data.append(
                     (
-                        f"{app.url_path_for(f"{mount_name}:{route_name}")}#{text_to_kebab(child.text)}",
+                        f"{app.url_path_for(f'{mount_name}:{route_name}')}#{text_to_kebab(child.text)}",
                         H3(child.text, anchor=False),
                         [],
                     )