If you’re building great solutions using Neutrinos Alpha Studio, you’ve probably wondered how the plugins or components you drag and drop onto the canvas shows those handy configuration options when you click on the component.
Check out the image below — this is exactly what I’m talking about:
Well, that smooth, user-friendly configuration panel is powered by Alpha decorators — and more specifically, the @AlphaAttribute() decorator.
Here’s something cool:
When you create a new component using the Alpha CLI( @jatahworx/alpha-cli - npm), a basic @AlphaAttribute() decorator is automatically added for you. This gives you a starting point to make your component configurable inside the Alpha Studio — without having to write it from scratch.
In this post, we’ll dive into what @AlphaAttribute() is, how it works, and why it’s essential for making your custom plugins fully configurable and designer-friendly in Alpha Studio.
Let’s clear it up:
What is @AlphaAttribute()?
What is The @AlphaAttribute() decorator is used to expose configurable inputs to your component in the Neutrinos Alpha Studio.
This means:
- You define what values users can bind to.
- You control how those inputs appear in the configuration UI.
- You make your components reusable, dynamic, and designer-friendly.
A Simple Example:
A Simple Example:@AlphaAttribute({
label: ‘Title’,
uiType: UI_TYPE.INPUT,
type: ATTRIBUTE_TYPE.PROPERTY,
category: ‘Additional Properties’
})
UI_TYPE could be any of [ INPUT, TOGGLE , DROPDOWN, MULTI_SELECT, TYPED_INPUT, RANGE, COLOR_PICKER, DATASOURCE, DATASET , TABLE_ACTIONS, DATA_MAPPING, ICON, CONTAINER, PAGES_LIST, TEXT_INPUT]
ATTRIBUTE_TYPE could also be any of [PROPERTY, EVENT, VALIDATION]
Will dive deeper on others but today we just going to be covering UI_TYPE .INPUT for uiType and ATTRIBUTE_TYPE.PROPERTY for type
In this case:
- A field labeled “Title” will appear in the component config.
- It will render as a input.
- Category it’s how you what the attribute categorized in Neutrinos Alpha Studio
- The value entered will be passed as a property input to your component.
How it appears on the plugin configuration in Alpha studio.
Why It Matters
Why It MattersUsing @AlphaAttribute() properly ensures:
- Your component works seamlessly in low-code scenarios.
- Business users and designers can bind variables, set text, or configure behavior without touching code.
- You can build powerful, plug-and-play components for Alpha studio.
When Should You Use It?
When Should You Use It?Whenever you want your component to accept input or add triggers from the component configurations.
Coming Up Next…
Coming Up Next…In the next post, we’ll dive deeper into specific configs like:
uiType: TYPED_INPUT`type: ATTRIBUTE_TYPE- How
optionsandfieldMappingsenable dynamic data bindings
If you have any question, comment or the is something you want us to cover next time please don’t hesitate to drop a reply below.
Stay tuned!
#Neutrinos #Neutriverse #NeutrinosReels #NeutrinosTrinity #AlphaAttribute #NeutrinosAlphaStudio
