Custom Components library

Hi,
Its normaly in any project, some compnents have the same style.
For Exemple…all buttons at all project screens will have the same background color and the same text, so, we need avoid editing style every time a button is placed on screen.
I call this “custom components” in where we do style edition only one time, and use this in all project.
How do i do it in noodl ?

Hi Mario. There are different ways to achieve what you’re asking. Here are the two main ways:

1) Variants. See Docs Reference Here
If you’re looking to save and reuse/re-edit the styles of a single element (e.g. a group, a text input, a button etc.), you can apply a what is known as a variant to that element. Variants can be accessed by clicking the element in question and then you can navigate to the variant-section almost at the top of the properties panel (see screenshot below).

When you create a variant, you can apply the style of this variant to other elements of the same type. When you click “edit variant”, all instances of that variant are changed, like you describe. You can also apply a variant to an element, and then override certain styles if you want. This works a bit like you would work with components in Figma and the like.

2) Visual Components. See Docs Reference Here and Here
If you’re looking to re-use (and possibly re-edit) multiple elements in conjunction, I would advise you to create what in Noodl is known as a Visual Component. With visual components, you can create a subgroup of nodes, that together form a whole. This could e.g. be a Group Node that holds a Text Node and Button Node.

When you create a Visual Component, you can use it wherever you want in your project by opening the node picker. There you’ll find your newly created component that you can drag into your node graph. You can create a new visual components in the left side panel, once you click the little puzzle-piece icon (see screenshot below). You can also learn more about visual components in Interactive Tutorial #2, which you’ll find at the top of the window, when you open the Noodl app.

Hope this helps. Let me know if you need any more assistance :slight_smile:

Best regards, Victor from Noodl.

Thanks, i´ll try it.