Author a PDF with Python components, then export the HTML

An order summary is a useful test for a component API: pass rows to a table, give a card a heading, put a status badge in its footer, and change the title color without finding an internal CSS selector.

Fullbleed's experimental Python component kit does that with static Bootstrap 5.0.0 components. One component tree can produce a PDF, a complete HTML document, or a fragment for another page. This walkthrough builds a small order summary without HTML strings.

Version boundary: this uses the opt-in 2.6.0a2 alpha, under fullbleed.ui.experimental. The API may change. The Bootstrap kit is currently Python-only; it is not part of the stable install or the JavaScript/C# component APIs.

Install the preview

Use CPython 3.10 or later in an isolated environment:

python -m venv .venv

Activate it with .venv\Scripts\Activate.ps1 in Windows PowerShell, or source .venv/bin/activate on macOS/Linux. Then install the pinned alpha:

python -m pip install --pre "fullbleed==2.6.0a2"

Compatible wheels include the native engine. A source build requires Rust/Cargo and native build tools. Fullbleed is MIT-licensed and renders static print documents without a browser runtime.

Compose the order

Save this as first_document.py:

from pathlib import Path
from fullbleed.ui.experimental import Document, style
from fullbleed.ui.experimental import bootstrap as bs

rows = [{"item": "Studio notebook", "quantity": 24, "amount": "$360.00"}]
card = bs.Card(
    bs.DataTable(
        rows,
        columns=[
            bs.Column("Item", lambda row: row["item"]),
            bs.Column("Quantity", lambda row: row["quantity"], align="right"),
            bs.Column("Amount", lambda row: row["amount"], align="right"),
        ],
        striped=True,
    ),
    title="Ready to ship",
    header="ORDER / 1048",
    footer=bs.Badge("Approved", variant="success"),
    class_name="mb-3",
).with_parts(title=style(color="#205b47"))

document = Document(card, title="Order summary")
Path("order.html").write_text(document.to_html(include_styles=True), encoding="utf-8", newline="\n")
Path("order.unstyled.html").write_text(document.to_html(include_styles=False), encoding="utf-8", newline="\n")

Run python first_document.py. It writes order.html and order.unstyled.html; open both in a browser.

Card supplies its header, heading, body and footer structure. DataTable supplies table markup, and each Column defines how to read a row. Ordinary Python functions, lists and conditions compose the content. Strings become escaped text.

The React-inspired part is composition through values and properties. There is no browser component runtime here. Components are immutable values: customization methods such as .with_style(...) and .with_parts(...) return a changed copy.

Where the styling comes from

class_name="mb-3" writes a literal CSS class on the card's root element. It does not find a Python variable or load a file called mb-3. The Bootstrap component carries its pinned stylesheet dependency, which Document collects once. That stylesheet defines the margin utility.

The green title comes from .with_parts(title=style(color="#205b47")). title is a named part of the card. You can customize it without depending on the card's generated markup, and the change does not reach a nested card's heading.

Intent	API
A component variation	bs.Badge("Paid", variant="success", pill=True)
An existing Bootstrap class	class_name="mb-3 text-secondary"
Checked Bootstrap utilities	class_name=bs.utilities(p=3, mt={"md": 2})
Style this component's root	.with_style(border_color="#b8cec4")
Style a card's exposed section	.with_parts(title=style(color="#205b47"))

For a class of your own, provide both the label and its rule. Add this to the same script:

note = bs.Alert("Please retain this copy.", class_name="order-note")
styled_document = Document(
    note,
    styles={".order-note": style(color="#304f45", border_color="#b8cec4")},
)
Path("custom-class.html").write_text(styled_document.to_html(include_styles=True), encoding="utf-8", newline="\n")

Normal CSS specificity still applies. Bootstrap utility rules using !important can override a normal inline declaration, so avoid assigning conflicting values through both.

Render the same card as a PDF

Append this to first_document.py. It selects the bundled Inter font explicitly and fixes the document timestamp:

from importlib.resources import files
from fullbleed.ui.experimental import Renderer, Theme, pt

document = Document(card, title="Order summary", theme=Theme(text=style(font_family="Inter", font_size=pt(11))))
font = files("fullbleed_assets").joinpath("fonts/Inter-Variable.ttf")
renderer = Renderer(font_files=[str(font)], document_timestamp="2026-04-30T00:00:00Z")
Path("order.pdf").write_bytes(document.render_pdf(renderer))

Run the script again and open order.pdf. PDF generation is independent of the browser used to view the HTML. The theme in this block changes the PDF document's text styling; the two HTML files above were exported before that theme was applied.

Decide who owns the CSS

document.to_html(include_styles=True) exports a complete document with its collected CSS. include_styles=False removes generated and inline styling while retaining class names and authored state. The same option on card.to_html(...) exports a fragment instead of a full document.

Styled export embeds CSS, not font or image files. Supply asset URLs appropriate to your application. Bootstrap's global reset and typography rules can affect the host page when you embed a styled fragment. If the host already owns the CSS, use the unstyled fragment and style its retained classes there. It will also need rules for any custom classes; removing styles does not preserve their appearance automatically.

HTML authoring currently requires the installed Fullbleed distribution. This alpha is not a separate HTML-only package.

Go beyond the small example

This is the larger fictional report included in the downloadable kit, not the output of the small order-summary snippet above. The image is rendered from the linked PDF.

The kit and guide include its complete source, styled and unstyled exports, and a catalog covering the 23 Bootstrap 5.0.0 component families plus layout, content, forms and utilities. The verification record describes the checked documents. This is a bounded catalog, not exhaustive verification of every Bootstrap combination.

Everything remains static, including exported HTML: tabs and carousels show the selected content; overlays appear in document flow; no Bootstrap JavaScript is included. Native HTML form controls retain normal browser behavior. PDF controls show printed values and selections, not fillable fields. JavaScript interactions, Sass compilation, browser pixel parity and accessibility conformance are outside this alpha.

Try adding a calculated column, rebranding the title, or changing a selected state. If that requires raw HTML or an internal selector, share that editing task in the design discussion. Those are useful tests of whether the API is improving on hand-written markup.

Disclosure: written and published on behalf of Fullbleed by an autonomous AI agent. The runnable snippets were executed against the published alpha; the resulting PDF and styled/unstyled HTML were checked and visually inspected. This article introduces an experimental authoring API, not a production-stability or standards-conformance claim.