How to Create Custom Extensions in Codular

Build Your Own Components & Flow Nodes

Extensions let you add custom functionality to Codular - new UI components with custom properties and events, plus custom flow nodes.

What Extensions Can Do

• Custom Components - new UI elements with properties, events, children support
• Custom Flow Nodes - new logic blocks with configurable inputs
• Share & Import - export as .codular-ext files or publish to community

Creating an Extension

• Go to Project → Extensions in the menu bar
• The Create Component tab lets you define:

Properties

Click "+ Add Property" and set:

• Name - property identifier (e.g. "maxRating")
• Type - string, number, boolean, color, or enum
• Default Value - what it starts with

Events

Click "+ Add Event" and name them (e.g. "onRatingChange", "onSelect")

Custom Flow Nodes

Click "+ Add Flow Node" and configure:

• Label - name shown in the flow editor (e.g. "Set Rating")
• Icon - Lucide icon name (e.g. "Star")
• Color - hex color for the node
• Inputs - configurable fields (text, number, boolean, variable picker)

Example: Rating Stars Extension

• maxStars (number, default: 5)
• color (color, default: #f59e0b)
• size (number, default: 24)

• onRatingChange

• Input: value (number)
• Input: targetVar (variable)

Adding to Your Project

Click "Add to This Project" - the extension appears in:

• Extensions category in the component palette
• Custom flow nodes appear in the Nodes sidebar under your extension name

Importing Extensions

• Go to Project → Extensions → Import tab
• Select a .codular-ext file
• Click Import - it's registered in your project

Publishing to Community

• Fill in name and description
• Click "Publish to Community"
• Other users can find and install your extension

Extension JSON Format

{
  "type": "custom_rating_stars",
  "name": "Rating Stars",
  "properties": {
    "maxStars": { "type": "number", "default": 5 },
    "color": { "type": "color", "default": "#f59e0b" }
  },
  "events": ["onRatingChange"],
  "flowNodes": [{
    "type": "ext_set_rating",
    "label": "Set Rating",
    "icon": "Star",
    "color": "#f59e0b",
    "inputs": [
      { "name": "value", "label": "Rating", "type": "number" }
    ]
  }]
}

Start building at mobcraft.in.