Using Builder.IO as template designer for headless CMS data within Gatsby

Technical Questions
1

Hi,

I’m planning on building a website that will be edited by a few different users. People still enjoy WordPress nowadays and I want to help them to break free of it, by using this builder in combination of strapi and Gatsby.

strapi is a great headless CMS that is perfect to maintain data (like for a blog) and get a nice API right away. Builder IO on the other hand is a great editor for visual content, what a beast. However, in an ideal world with a lot of data I would use Builder IO to design a template and use strapi to maintain its data. I.e. on a blog I would design the landing page and blog pages in Builder IO and I would write the content of the blog in strapi; or on an e-commerce site I would edit products in strapi and design the product page template in Builder UI, there are many possibilities.

If this all is served with Gatsby I could end up with a neat replacement of WordPress. At least creators for the website would have a similar experience to WordPress without the horrible clutter WordPress comes with.

My question is: Is it possible? If so, what would be the right direction here to get it done? I know I can implement Builder.IO into Gatsby and I know I can connect strapi to Gatsby, as well. Now, can I even combine all three together? What would be the best approach for it?

Disclaimer: I’m very new to all three technologies. Firstly, I would profit from any verification that this is possible, as well as a quick summary how it can be done. I’m thankful for any input.

Thanks in advance!

1 Like
2

Hi,
I wanna be create something like you but i wanna use only react.js. I have some issues with configuration. Because in my project, user create account in my platform and builder.io will be connected with it. In my app user can create pages and there will be accesable as subpages or separate page in web. I hope that someone created something like this and can help me with configuration

3

This is absolutely possible with Builder.io and any SSR too (Gatsby / nextjs … ), it’s also possible to combine with other headless CMS options, although not necessary since Builder does support data models, the steps look something like this:

  • Create a data model in Builder, for example name it post: Add open graph fields: title, description, text, image, author, slug … and create a couple of content entries from that model.

  • in Gatsby-node, query builder to get all the post content entries, and create a page for each entry on the slug configured inside each post:

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return graphql(`
    {
    allBuilderModels {
      post(
        limit: 99
        options: { cachebust: true }
      ) {
        content
      }
    } 
  `).then(result => {
    result.data.allBuilderModels.post.forEach(({ content }) => {
      createPage({
        path: `/blog/${content.data.slug}/`,
        component: path.resolve(`./src/templates/blog-page.tsx`),
        context: {
         // passing post to context will make it available in context props for the template page
          post,
        },
      });
    });
  });
};
  • create a blog-page.tsx template file in gatsby and render the post in it using a BuilderComponent, read the post object from the context and pass it as data attribute to the BuilderComponent:
<BuilderComponent model='blog-page-template' data={{post}} />

  • Create a model named blog page template of type section in Builder and create an entry on it

  • Now when you edit the template entry you can bind to state.post, to read any of the data fields and render it within the template.

  • once you have a blog page template entry ready, query it in gatsby’s graphql in the template file, and pass it to the BuilderComponent

This is pretty rough plan, we’re working on an admin cli that will make those steps a lot easier… but this is completely doable now.