How do I create pinterest like web app?

[Phouter0499]

Here are are features I want to implement:

• infinite scroll
• masonry layout
• lazy loading (only load after in view or close to view)
• display cards of pictures or videos or gifs
• fast and efficient
  I am currently looking at react packages like masonry or infinitegrid but I want to know if anyone already has a solution I could use that meets all or most of the requirements I described?

[manimovassagh]

You can absolutely build a Pinterest-style layout in Reflex. Here is a practical approach:

Masonry layout with CSS columns

Reflex supports raw CSS, so you can use CSS multi-column layout which gives you a masonry effect without any JS dependency:

import reflex as rx

class State(rx.State):
    items: list[dict] = []  # your cards data
    page: int = 0
    loading: bool = False

    def load_more(self):
        self.loading = True
        # fetch next batch from your data source
        new_items = fetch_items(offset=self.page * 20, limit=20)
        self.items.extend(new_items)
        self.page += 1
        self.loading = False

def card(item: dict) -> rx.Component:
    return rx.box(
        rx.image(src=item["url"], loading="lazy", width="100%"),
        rx.text(item["title"]),
        style={
            "break-inside": "avoid",
            "margin-bottom": "1rem",
            "border-radius": "8px",
            "overflow": "hidden",
        },
    )

def index() -> rx.Component:
    return rx.box(
        rx.foreach(State.items, card),
        style={
            "column-count": "4",
            "column-gap": "1rem",
            "padding": "1rem",
        },
    )

Lazy loading

Use the native loading="lazy" attribute on rx.image — this is built into HTML and works without any extra library. The browser will only load images as they approach the viewport.

Infinite scroll

For infinite scroll, use an rx.el.div with an Intersection Observer via a custom event handler. Alternatively, a simpler approach is a "Load More" button at the bottom:

rx.cond(
    State.loading,
    rx.spinner(),
    rx.button("Load more", on_click=State.load_more),
)

If you really want automatic infinite scroll, you can wrap a React infinite scroll component. Reflex lets you wrap any React component:

class InfiniteScroll(rx.Component):
    library = "react-infinite-scroll-component"
    tag = "InfiniteScroll"
    data_length: rx.Var[int]
    has_more: rx.Var[bool]
    # ... map the props you need

Video/GIF support

For videos, use rx.el.video with autoplay and muted attributes. For GIFs, just use rx.image — they load the same as any image.

Responsive columns

Make the column count responsive with media queries in your style dict or use Reflex's responsive props.

This approach keeps things lightweight — no heavy JS masonry libraries needed. CSS columns handle the layout, native lazy loading handles performance, and Reflex state handles pagination.