How can I populate a list on a page from a collection data?

Technical Questions
1

Builder public api key
fbf40af7219745d1a115b63d1c3582b3

What are you trying to accomplish
I would like to have a page that is populated from a collection of data. I’d like that data to be defined from within Builder so that my non-technical coworkers can add and remove data.

For example:
Imagine we’re creating a blog site, with many blog posts. I would like to be able to define a blog post model with fields such as: post_title, post_description, post_cover_image. With this model defined, anyone on my team can add or create a post, and populate these fields for each one.

I then want to have a page that reads and displays this collection of posts. If someone adds, removes, or edits a post in Builder, that change would be automatically reflected on this page.

Screenshots or video link
Here is an example. Let’s say my coworkers added the Relative Valuation Model In Excel. This would automatically get added to the page without a code change.

image
image2134×1658 461 KB

Code stack you are integrating Builder with
NextJS

Help would be much appreciated! This seems like a common use case.

2

Hi @jakechambers, This seems achievable using the Builder.io app. You can check out our docs and a few articles on blogs to kick off with this use case and let us know if you’ve further questions!

To be more specific, the below docs would be helpful to understand how you can connect dynamic collection data from API and populate on the editor in any form you want:-

  1. Connecting your API data to builder - Builder.io
  2. Connecting dynamic data in Builder's Visual Editor