Skip to content

Try Python components in a notebook

Build an order summary from Python values, cards and a data table. Change the customer, quantities or accent color, then download the PDF and both HTML exports. The notebook contains the complete source, with no authored HTML strings.

Open in Colab Download the notebook View the source

Opt-in component alpha

The notebook installs Fullbleed 2.6.0a3. Its APIs under fullbleed.ui.experimental may change and have documented CSS limits. Bootstrap components are static in PDF and HTML; no Bootstrap JavaScript is included. The stable Python guide documents the established API.

Run it, then make an edit

  1. Open the notebook, sign in to Google if prompted, and choose Runtime > Run all.
  2. Edit the order data in step 2 or the accent and title size in step 3.
  3. Rerun from your edited cell through the download cell. Review every page preview.
  4. Download the ZIP containing the current PDF, HTML files and page previews.

Use a standard CPU runtime; this example needs no GPU or paid plan. Colab runs the code on a hosted machine, applies its own availability and usage limits, and deletes runtime files after the session expires. Download your results before leaving. You can also open the notebook in local Jupyter; the same cells display a download link there.

What you will make

A Northstar order summary with green headings, quantity and total cards, a three-row table and a shipment note.

Open the sample PDF Open styled HTML Open unstyled HTML

The fictional order contains 44 items totaling USD 1,056.00. Python Decimal calculates the total; the example omits tax, shipping and discounts. Try an empty item list or add rows to explore pagination.

See how styling connects

Change Where it belongs
Reusable card defaults Panel = styled(bs.Card, ...)
One card's title or body .with_parts(title=style(...), body=style(...))
Bootstrap spacing class_name="mb-4 mx-0"
A custom class such as dispatch-note Its selector rule in Document(styles=...)
Inherited typography Theme(text=style(...))

The PDF renderer receives the bundled Inter font file explicitly. Styled HTML keeps the CSS font-family declaration; its browser host supplies Inter or uses the Arial/sans-serif fallback. Unstyled HTML retains the component structure and classes for the host's CSS. The component and styling guide explains these choices and includes the full static Bootstrap catalog.

What has been checked

The notebook checks execute its cells in Jupyter for the default order, edited data and styles, a 72-row order spanning four pages, and an empty order after that long run. They inspect PDF text, page bounds and colors with independent readers; compare repeat renders; and check both HTML exports and the ZIP's exact contents. Old page previews are excluded from a shorter order's download.

The verification record includes the sample and notebook hashes. These checks do not execute a hosted Colab runtime or its download UI, or establish complete CSS, browser or PDF-standard conformance.

Share a small authoring example if a composition or styling task feels awkward. Use fictional data in public examples.