Bluesky Latest Posts Showcase

Demo page for the <bluesky-latest-posts> custom element. Use the panel to try a handle or feed URL, then scroll through example configurations covering the supported parameters.

Live demo

The widget below updates from the control panel.

Interactive example
Edit values in the left panel, then apply them here.

        


        

          

            
Quick start

            
Minimal usage for a user feed.

          


          

            
Minimal user example

            
Defaults to stack layout and system theme mode.

            
          



<bluesky-latest-posts
  handle="biorxiv-bioinfo.bsky.social">
</bluesky-latest-posts>

        


        

          

            
User-source examples

            
Examples using the author feed endpoint.

          


          

            
User, stack, exclude replies

            
A standard vertical feed with a small count.

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  exclude-replies="true"
  count="2"
  max-check="10"
  layout="stack">
</bluesky-latest-posts>


          

            
User, grid, explicit columns

            
Uses grid layout with fixed columns.

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="4"
  max-check="12"
  layout="grid"
  columns="2"
  gap="1rem">
</bluesky-latest-posts>


          

            
User, grid, auto-fit by min-width

            
No columns attribute; cards auto-fit using min-width.

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="4"
  max-check="12"
  layout="grid"
  min-width="260"
  gap="1.25rem">
</bluesky-latest-posts>

        


        

          

            
Uniform-height examples

            
Examples showing height clipping and expansion controls.

          


          

            
Uniform height + expandable

            
Cards clip to the given height and show an expand button when needed.

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="3"
  max-check="10"
  layout="grid"
  columns="3"
  uniform-height="true"
  box-height="330"
  expandable="true"
  show-expand-only-when-needed="true">
</bluesky-latest-posts>


          

            
Uniform height without expansion

            
Useful if you want visually aligned cards with no manual expansion.

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="3"
  max-check="10"
  layout="grid"
  columns="3"
  uniform-height="true"
  box-height="280"
  expandable="false">
</bluesky-latest-posts>

        


        

          

            
Theme mode examples

            
Examples for mode="light", mode="dark", and mode="system".

          


          

            
Light mode

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="1"
  mode="light">
</bluesky-latest-posts>


          

            
Dark mode

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="1"
  mode="dark">
</bluesky-latest-posts>


          

            
System mode

            
            
          



<bluesky-latest-posts
  source="user"
  handle="biorxiv-bioinfo.bsky.social"
  count="1"
  mode="system">
</bluesky-latest-posts>

        


        

          

            
Feed-source examples

            
Examples using source="feed". Replace the placeholder feed URLs with real feed URLs.

          


          

            
Feed by feed-url

            
This is a placeholder; replace with a real Bluesky feed URL.

            
            
          



<bluesky-latest-posts
  source="feed"
  feed-url="https://bsky.app/profile/example.com/feed/placeholder"
  count="3"
  max-check="12"
  layout="stack">
</bluesky-latest-posts>


          

            
Feed by feed-uri

            
Direct AT URI form if you already know the DID and generator key.

            
            
          



<bluesky-latest-posts
  source="feed"
  feed-uri="at://did:plc:placeholder/app.bsky.feed.generator/placeholder"
  count="3"
  max-check="12"
  layout="grid"
  columns="3">
</bluesky-latest-posts>

        


        

          

            
Parameter reference

            
Supported attributes for the component.

          



source="user|feed"
handle="biorxiv-bioinfo.bsky.social"
feed-uri="at://did:.../app.bsky.feed.generator/..."
feed-url="https://bsky.app/profile/{actor}/feed/{rkey}"
mode="light|dark|system"
exclude-replies="true|false"
max-check="1..100"
count="1..20"
layout="stack|grid"
columns="1..12"
min-width="180+"
gap="CSS length, e.g. 1rem"
uniform-height="true|false"
box-height="160+"
expandable="true|false"
show-expand-only-when-needed="true|false"


          

            This component currently supports recent posts from a user or feed. It does not currently accept individual post IDs as an input mode.