Integrating sections workflow

General
1

I have a few questions about the general recommended workflow for using sections, but just to check my understanding is correct.

  1. Sections are used to “centralise” components into the CMS and allow you to easily update the data they display in one place without having to go and update many page blocks. Also this leans nicely into split testing etc, as you can try out different variations of your sections from within the visual editor without any code changes. Sounds great so far

  2. Sections do not replace “block” components, and are comprised of them.

So given these 2, then my workflow looks a bit like this

  1. Create a new section model
  2. Update your codebase to render the new section model where desired
  3. Create an instance of your section model “content”
  4. Use custom components or builder blocks to design and build it via the UI

It feels to me that step 2 should be redundant - I feel like we should be able to add sections to pages directly via the builder visual editor, therefore cutting out the need for the code integration.

Is there a way to do this?

Ideally all we should have to do for Builder integration is the recommended component


export function RenderBuilderContent<T>({
  content,
  model,
}: BuilderPageProps<T>) {
  // Call the useIsPreviewing hook to determine if
  // the page is being previewed in Builder
  const isPreviewing = useIsPreviewing();
  // If `content` has a value or the page is being previewed in Builder,
  // render the BuilderComponent with the specified content and model props.
  if (content || isPreviewing) {
    return <BuilderComponent content={content as any} model={model} />;
  }
  // If the `content` is falsy and the page is
  // not being previewed in Builder, render the
  // DefaultErrorPage with a 404.
  return <DefaultErrorPage statusCode={404} />;
}

And then use this component to render the “page”

From there builder should be able to hand-off all editting to the visual editor i would have thought,

Having to jump back into my codebase in order to integrate every section feels “wrong”

Maybe I’m just missing something?

2

Hello @danwillow,

Your grasp of sections is on the right track. Sections in Builder.io serve as a powerful means to centralize and manage components in a modular manner, streamlining updates and facilitating experimentation with various variations. When you create a Section content entry within the Content section of Builder, the chosen Section model dictates the structure of that Section content entry.

Notably, you have the flexibility to directly add sections to Builder pages using symbols. When working with sections, there’s often no imperative need to integrate code, thanks to the convenience of the Builder fallback editor.

While integration becomes necessary in more complex scenarios, such as when employing custom components to construct section blocks or utilizing advanced features, Builder.io’s visual editor and symbol functionalities offer a seamless and code-light approach to building engaging content.

For more details, consider exploring these resources:

Hope this helps!