An infinite pannable masonry grid for your Twitter bookmarks. Browse your bookmarks visually or by folder. Based on @afar1's great fieldtheory-cli repo. Lightbox animation logic inspired by @lucasvocos.
Feel free to remix this into a webapp, browser extension or whatever suits your needs!
Requires Node.js 20+ and Chrome logged into x.com.
# Install fieldtheory-cli and sync your bookmarks
npm install -g fieldtheory
ft sync
# Install dependencies
npm install
# Sync your bookmark folders (optional)
node sync-folders.js
# Export bookmarks to JSON for the grid
node export-bookmarks.js
# Start browsing
node server.js- Masonry positions are computed as pure data, then a fixed pool of ~400 DOM elements is recycled as you pan. Tested with 1,300+ bookmarks.
- Lightbox clones the clicked element, animates it to center with Motion One springs, and loads a high-res image on top.
- Folder sync uses Twitter's internal GraphQL endpoints via Chrome session cookies (same approach as fieldtheory-cli).
sync-folders.js fetches your Twitter bookmark folders so you can filter the grid by folder. It uses Twitter's internal GraphQL API (BookmarkFoldersSlice and BookmarkFolderTimeline) authenticated via your Chrome session cookies — no API keys needed.
Run node sync-folders.js and it will:
- List all your bookmark folders
- Fetch the bookmarks in each folder (paginated, ~20 per page)
- Output
folders-data.jsonmapping tweet IDs to folder names
Then re-run node export-bookmarks.js to merge the folder data into the grid. A dropdown pill in the top-right lets you filter by folder.
Note: Twitter's GraphQL query IDs can change when they update their web app. If the sync fails, you may need to update the query IDs in sync-folders.js by inspecting the network tab on x.com/i/bookmarks.
Add tweet IDs to EXCLUDED_IDS in export-bookmarks.js and re-export.
MIT