Building UIs in Python with FastUI

Episode Deep Dive

Guest Introduction

Samuel Colvin is the creator of Pydantic and founder of the Pydantic company. He has a deep background in Python and open-source software, having grown Pydantic from an initial release to millions of downloads per month. Samuel’s latest project, FastUI, aims to let Python developers build modern, React-based web UIs—without having to write or manage JavaScript.

What to Know if You're New to Python

• Knowing the basics of Python’s syntax, functions, and typing is helpful for following the ideas in this episode.
• Understanding the fundamentals of building web backends (e.g. routes, JSON, HTML forms) will make the FastAPI + FastUI discussion more meaningful.
• Familiarity with Pydantic for data validation is a plus but not a requirement.

Key Topics & Takeaways

1. Why Build UIs in Python with React?

   • Samuel highlighted the typical web stack (HTML, CSS, JavaScript) versus pure Python-based frameworks.
   • With FastUI, developers get the power of React without having to touch npm or write JavaScript code.
   • Designers and front-end specialists can still treat the UI as a professional React SPA, while Python devs orchestrate everything in familiar code.

2. Pydantic as the Core

   • FastUI heavily leverages Pydantic for data validation and model definitions.
   • Each UI component (e.g., a button, a table) is actually a Pydantic model—leading to consistent validation on both server and client.
   • This approach means your data requirements and UI constraints live together, reducing communication overhead between front-end and back-end teams.

3. Building Forms and Handling Validation

   • FastUI ships with form components that automatically generate form fields from your Pydantic models.
   • Client-side validation is inferred from the model, and server-side validation is always enforced using Pydantic.
   • Complex nested models (like images, dates, and typed fields) are flattened into standard HTML form inputs, then reassembled on the server via Pydantic.

4. FastUI’s Architecture

   • Each UI view in FastUI is defined by returning a list of Pydantic-based “components” (e.g., Page, Heading, Form).
   • Under the hood, these are serialized as JSON. The React front end interprets that JSON into actual UI elements.
   • Rather than re-implementing each HTML tag, FastUI provides higher-level components (tables, modals, or forms) that handle the repetitive details for you.

5. Customization and Styling

   • Bootstrap is used as a default set of CSS classes, but this is pluggable.
   • Samuel demonstrated how to swap out for other systems like Tailwind UI by customizing FastUI’s React code.
   • You can override specific components (for example, how to render a modal) while keeping other parts of FastUI’s defaults.

6. Pagination, Filtering, and Dynamic Updates

   • FastUI has built-in components for common tasks such as pagination (seen in the “cities” table example) and server-side filtering.
   • It also supports SSE (Server-Sent Events) to push dynamic content to the browser—useful for streaming tokens from LLMs or live updates.

7. Comparisons to Other Tools

   • Projects like Anvil and Dropbase also allow Python-based UIs, but often abstract away React in different ways or fit narrower use cases.
   • FastUI aims to integrate smoothly with large-scale React-based front ends, bridging back-end Python and modern single-page app design.
   • HTMX was mentioned as another approach, and there’s an interesting essay on REST linked here: How Did REST Come to Mean the Opposite of REST?

8. “RESTful UI” Approach

   • The conversation referenced Roy Fielding’s REST principles and how returning “self-describing” data can reduce complexity.
   • FastUI’s JSON-based response is intended to be a more direct, self-describing interface for the front end.
   • This makes testing simpler (just test the JSON) and spares you from heavy HTML scraping or front-end re-implementations each time you change the data model.

9. Future Directions

   • Samuel mentioned interest in hooking up advanced features like real-time LLM responses via SSE.
   • The Pydantic company will be using FastUI extensively in their own product, so the project is likely to evolve and mature.
   • There’s room for the community to create new components—like calendars, advanced grids, or native integrations with frameworks such as Flutter or Svelte.

Quotes & Stories

• On Building FastUI Internally:
  “I was just dreading all that churn… so I built something like FastUI to remove that need to have complete synchronization between backend and frontend.” – Samuel Colvin
• On the Reception to FastUI:
  “It was only released publicly like two weeks ago… and there’s already been a great reaction.” – Samuel Colvin
• On Combining Pythonic Data Models with React:
  “All of the components are basically Pydantic models, so you get data validation, coercion, even camel-casing, right out of the box.” – Samuel Colvin

Overall Takeaway

FastUI demonstrates the growing possibility of building professional web interfaces with minimal JavaScript overhead and a strong Python foundation. By leveraging Pydantic models for every UI component, it unifies data validation and front-end structure under one umbrella. This approach promises quicker iteration, fewer miscommunications, and simpler testing, especially for teams that lean heavily on Python. While FastUI is still rapidly evolving, it already empowers Python-focused developers to orchestrate React-driven UIs with ease, setting a new standard for modern full-stack Python web apps.