Simple vs Expert Mode

FM Skin Builder offers two editing modes that change how editors behave. Understanding these modes helps you work more efficiently.

Overview

Switching Modes

Status Bar Toggle

The quickest way:

1. Look at the bottom status bar
2. Find the mode indicator (“Simple” or “Expert”)
3. Click it to toggle

Simple Mode

Simple Mode provides visual interfaces that make editing intuitive, especially for newcomers.

CSS Editor in Simple Mode

Features:

• Color Pickers: Click any color to open a visual picker
• Variable List: Scrollable list of all CSS variables
• Grouped View: Variables organized by category

UXML Editor in Simple Mode (Currently Not Available)

Features:

• Element Tree: Visual hierarchy of UI elements
• Property Inspector: Edit properties without touching code
• Element Palette: Drag new elements onto the tree
• Live Preview: See changes in real-time

Config Editor in Simple Mode

Features:

• Form Fields: Input boxes for each config property
• Checkbox Controls: Toggle boolean options
• Folder Picker: Visual selection for include paths
• Validation Feedback: Immediate error highlighting

When to Use Simple Mode

• You’re new to FM Skin Builder
• Making quick color tweaks
• You prefer visual interfaces
• You don’t need fine-grained control
• Learning how FM’s styling system works

Expert Mode

Expert Mode gives you direct access to the raw file contents with powerful editing features.

CSS Editor in Expert Mode

Features:

• Syntax Highlighting: Color-coded CSS/USS syntax
• Line Numbers: Easy navigation
• Auto-Fix Dialog: Detect and fix common issues
• Code Folding: Collapse sections
• Multi-Cursor: Edit multiple locations simultaneously

UXML Editor in Expert Mode

Features:

• XML Highlighting: Proper UXML syntax colors
• Tag Auto-Close: Automatically closes opening tags
• Attribute Suggestions: Autocomplete for known attributes
• Format Document: Auto-format messy XML

Config Editor in Expert Mode

Features:

• JSON Highlighting: Syntax-colored JSON
• Bracket Matching: Find matching braces
• Schema Validation: Real-time JSON validation
• Format Document: Pretty-print JSON

When to Use Expert Mode

• You’re comfortable with CSS/JSON/XML
• Need fine-grained control
• Copying code from examples
• Troubleshooting issues
• Working with complex selectors
• Bulk editing

Mode Persistence

Your mode choice persists:

• Per-session: Mode stays the same until you change it
• Across restarts: FM Skin Builder remembers your preference
• Not per-file: All files open in your current mode

Syncing Between Modes

Changes sync seamlessly between modes:

1. Make edits in Simple Mode
2. Switch to Expert Mode
3. Your changes appear in the raw code
4. Edit in Expert Mode
5. Switch back to Simple Mode
6. Visual editor reflects your code changes

Important: Unsaved changes are preserved when switching modes. The file cache keeps your work regardless of which mode you’re in.

Hybrid Workflow

Many users combine both modes:

1. Start in Simple Mode - Use color pickers for initial colors
2. Switch to Expert Mode - Copy/paste complex selectors from examples
3. Back to Simple Mode - Fine-tune specific values
4. Expert Mode for review - Verify the final code looks correct

Editor-Specific Mode Support

Not all editors support both modes equally:

Recommendations by Task

Troubleshooting Mode Issues

”Changes not appearing after mode switch”

• Save the file before switching
• Check if validation errors are blocking the visual rendering

”Simple Mode looks broken”

• The file may have syntax errors
• Switch to Expert Mode to see and fix errors
• Invalid files can’t be parsed for Simple Mode

”Can’t find a setting in Simple Mode”

• Some advanced options are Expert Mode only
• Check the Reference section for expert-level settings

Next: CSS Editor - Learn to edit colors and styles.