Custom Element Types

Register new element types (items, blocks, entities, etc.) that integrate with Nexo Maker's project browser, routing, and editor system.

All registration happens in main.js init() function.

---

Registration (main.js)

api.nexomaker.registerItemType(typeId, config)

module.exports.init = async () => {
  api.nexomaker.registerItemType('armor', {
    renderMode: 'svg',               // 'svg' or '3d'
    editorRoute: 'armor_editor',     // Editor ID to use
    svgIcon: 'SmallItem',            // Icon name (for svg mode)
    displayName: 'Armor',            // Display name in UI
    tabIcon: 'SmallItem',            // Icon for tabs
    color: '#9333ea'                 // Hex color
  });
};

Parameters

Parameter	Type	Required	Description
typeId	string	Yes	Unique identifier (e.g., 'armor', 'weapon')
config.renderMode	'svg' | '3d'	Yes	How to render in browser
config.editorRoute	string	Yes	Editor ID to use when opening
config.svgIcon	string	No	Icon name (for svg mode)
config.displayName	string	Yes	Display name in UI
config.tabIcon	string	No	Icon for editor tabs
config.color	string	No	Hex color (e.g., '#9333ea')
config.showInBrowser	boolean	No	Show in browser (default: true)
config.browserCategory	string	No	Category grouping

---

Complete Workflow (main.js)

To fully integrate a custom element type, register 4 things:

module.exports.init = async () => {
  // 1. Register custom editor
  api.nexomaker.registerEditorType(
    'armor_editor',
    __dirname + '/editors/ArmorEditor.jsx',
    { label: 'Armor Editor', description: 'Edit armor pieces' }
  );
  
  // 2. Register custom creator
  api.nexomaker.registerModularCreator(
    'create_armor',
    __dirname + '/creators/ArmorCreator.jsx',
    {
      label: 'Armor',
      icon: 'Shield',
      category: 'item',
      compatibility: ['nexo', 'itemsadder', 'oraxen', 'craftengine']
    }
  );
  
  // 3. Register element type
  api.nexomaker.registerItemType('armor', {
    renderMode: 'svg',
    editorRoute: 'armor_editor',
    svgIcon: 'SmallItem',
    displayName: 'Armor',
    tabIcon: 'SmallItem',
    color: '#9333ea'
  });
  
  // 4. Map type to editor
  api.nexomaker.setEditorForType('armor', 'armor_editor');
};

---

How It Works

Flow

User clicks "Create Armor" 
  → ArmorCreator.jsx shows form
  → onNext({ id, type: 'armor', ... })
  → NexoMaker creates Data/{id}/item.yml with type: 'armor'
  → Browser displays item with purple color + SmallItem icon
  → User clicks item
  → Routes to 'armor_editor'
  → ArmorEditor.jsx opens

Type Recognition

When NexoMaker reads a YAML file:

id: my_armor
type: armor        # ← ItemTypeRegistry looks up 'armor'
display: My Armor
armor_type: chestplate

System applies:

• Color: #9333ea (purple)

• Icon: SmallItem

• Editor: armor_editor

---

Examples

Armor (SVG, from apitest)

api.nexomaker.registerItemType('armor', {
  renderMode: 'svg',
  editorRoute: 'armor_editor',
  svgIcon: 'SmallItem',
  displayName: 'Armor',
  tabIcon: 'SmallItem',
  color: '#9333ea'  // Purple
});

YAML:

id: diamond_chestplate
type: armor
display: Diamond Chestplate
armor_type: chestplate
defense: 8
toughness: 2

Weapon (3D model)

api.nexomaker.registerItemType('weapon', {
  renderMode: '3d',
  editorRoute: 'weapon_editor',
  displayName: 'Weapon',
  tabIcon: 'Sword',
  color: '#dc2626'  // Red
});

Vehicle (3D, categorized)

api.nexomaker.registerItemType('vehicle', {
  renderMode: '3d',
  editorRoute: 'vehicle_editor',
  displayName: 'Vehicle',
  tabIcon: 'Car',
  color: '#ef4444',
  browserCategory: 'Entities'
});

Spell (SVG, hidden from browser)

api.nexomaker.registerItemType('spell', {
  renderMode: 'svg',
  editorRoute: 'spell_editor',
  svgIcon: 'Sparkles',
  displayName: 'Spell',
  tabIcon: 'Sparkles',
  color: '#8b5cf6',
  showInBrowser: false  // Don't show in item browser
});

---

Color Guide

Use distinct colors for different categories:

Category	Colors	Example
Combat/Weapons	#dc2626, #ef4444, #f87171	Red family
Tools/Utility	#2563eb, #3b82f6, #60a5fa	Blue family
Magic/Special	#9333ea, #a855f7, #c084fc	Purple family
Nature/Food	#16a34a, #22c55e, #4ade80	Green family
NPCs/Quests	#eab308, #f59e0b, #fbbf24	Yellow/Amber

---

Common Issues

Type Not Showing in Browser

Solution 1: Check showInBrowser is not false

api.nexomaker.registerItemType('my_type', {
  showInBrowser: true  // Explicitly set
});

Solution 2: Verify YAML has type field

type: armor  # ← Must match registered typeId

Wrong Editor Opens

Solution: Map type to editor

api.nexomaker.registerEditorType('armor_editor', ...);
api.nexomaker.registerItemType('armor', { editorRoute: 'armor_editor' });
api.nexomaker.setEditorForType('armor', 'armor_editor');  // Don't forget!

Icon Not Showing

Solution: For SVG mode, use valid icon name

renderMode: 'svg',
svgIcon: 'SmallItem'  // Use built-in icon name

Color Not Applied

Solution: Use hex format with #

color: '#9333ea'  // ✅ Correct
color: '9333ea'   // ❌ Wrong

Path Not Found

Solution: Use __dirname + '/path' (NOT path.join())

// ✅ Correct
api.nexomaker.registerEditorType('id', __dirname + '/editors/MyEditor.jsx', {});

// ❌ Wrong
const path = require('path');
api.nexomaker.registerEditorType('id', path.join(__dirname, 'editors', 'MyEditor.jsx'), {});

---

Quick Reference

Naming Convention

// Consistent naming across registration
Type ID:     'armor'
Editor ID:   'armor_editor'
Creator ID:  'create_armor'
Files:       ArmorEditor.jsx, ArmorCreator.jsx

Required Steps

• registerEditorType('armor_editor', path, metadata)

• registerModularCreator('create_armor', path, metadata)

• registerItemType('armor', config)

• setEditorForType('armor', 'armor_editor')

---

Related APIs

• Custom Editors

• Custom Creators