Custom components in Builder

Technical Questions
, ,
1

Hello,

I’m trying out builder for our company and it looks like a good solution to our UI problems. However there are some questions about the custom components.

  1. If I set the component mode to true, I’ll loose the styles tab? Is there any way to use it and can I configure it in anyway, like define the values and units and use it with the custom components?
  2. If I use withChildren with containers and pass a component inside, first one goes fine, but the next one wraps with .builder-column css classes and breaks the layout. Is there a way to get rid of those extra tags / css? I can circle this by moving the elements out from the column and delete the column component, but it’s not nice.
  3. How can I use responsive props or styles with custom components? If I now have a prop like padding with value of enum xl and want to use different setting in mobile like m how can I do that?

Cheers, Janne

2

Hey @jjtoikka -

  1. If you still want some access to the style tab consider using roles instead - that way some people can have access to the style tab but editor roles are in components-only mode
  2. Ah - I’m guessing you dragged the second component in to the left or right of the first one. Columns are added automatically when a user drags to the left or right of another block as opposed to the top or bottom. Try just placing a new block above or below the current one when using withChildren and no .builder-column should be added
  3. Great Q. As of now there are no constructs for this but you do have a lot of flexibility in how you take inputs. So one option would be to just have separate inputs for different device sizes like mobilePadding that you handle as desired
3

Hi @steve,
and thanks for your swift answer

  1. So the editor can see it but admin can’t in custom mode? I’m currently in free mode, so I have only admin and wouldn’t like to change the roles while developing anyways. So I need to develop with all components visible then.
  2. Thanks! That works
  3. Can I adjust the breakpoints for the different sizes? Currently in our library I can define those so it would be cool to do that also in Builder.
  4. Can I parse the style output and define what I see there? Like colors? Prop I need to do custom plugin for that? Is the style tab anywhere in npm?

-J

4

  1. Not sure I totally follow what you are saying, can you try explaining what you are trying to accomplish a little more?

  2. The breakpoints in the editor are not user adjustable, but we have gotten that as a feature request before and think it is a good idea that we will work on adding at some point!

  3. Not sure exactly what you are trying to accomplish, but it sounds like you want to control the specifics of how people can edit the styles of custom components? If that is the case, using custom inputs to control style elements is definitely the way to go: Using Your React Components in Builder.io - Builder.io

5
  1. This one is ok. I just need to use the not only component mode as admin so I can see the style tab.
  2. That would be awesome! Maybe just extend the editor.settings? Also would be cool, if you could add api docs in the doc section.
  3. I would like to use the styles, but with my own options. Let’s say the colors: I would like those to be in the colour modal same as are defined in the theme. Or margins, that those could be defined in the theme. Like passing there an enum instead of pixels. Is there any api for that?
  4. If I have a custom theme coming from Nextjs to the builder. How could I make an editable view for it in Builder? It can’t be a component, cos each page needs it, and it would be only defined once?

Thanks, Janne

6

  1. This is not something you can do out of the box with Builder, but you could make a plugin that hides the current style tab and then adds a custom version with simpler options. Here are some docs on how to go about doing that: edit tab plugin

  2. You could use a data model to control theme variables from within Builder, and then query that data in your app. You would then be able to edit values and they would be applied site wide. We do this in our nextjs-shopify starter to make the app themeable. Basically, you create a function that gets called on page render that will make a request to Builder to get values for the theme variables. The function is here and you can see it used throughout the app, for example here where it is passed via getStaticProps to the component that is being rendered.

7

Hi, thanks!

  1. I tried to get the data from the theme model, but I only get null… what could be the problem?

export async function getStaticProps({
  params,
}: GetStaticPropsContext<{ path: string[] }>) {
  const page = await resolveBuilderContent('page', {
    urlPath: '/' + (params?.path?.join('/') || ''),
  })
  const theme = await resolveBuilderContent('theme')

  return {
    props: {
      page,
      theme,
    },
    revalidate: 30,
  }
}
...

export default function Path({
  page,
  theme,
...
console.log(theme) = null
  • J
8
  1. Also tried editor.editTab binding, but I do not see any new tabs in the UI. Is this because I am still using free Builder plan?
  • Janne