XIB & Storyboard Visual Editor
🎨 Advanced WYSIWYG editor for iOS/OSX XIB and Storyboard files directly in VS Code
🚀 Features
- ✅ Dual View: Visual canvas + XML editor with seamless toggle
- ✅ Smart Parser: Intelligent detection of UI elements (UILabel, UIButton, UITextField, UIImageView, UISlider, etc.)
- ✅ Storyboards and Segues: Supported with visual scene navigation
- ✅ Real Positioning: Uses actual XIB frame coordinates for accurate layout
- ✅ 🆕 Bidirectional Editing: Edit properties in panel and see changes in XML and visual canvas
- ✅ 🆕 Live Property Sync: Changes save automatically and update all views instantly
- ✅ Element-Specific Rendering: Specialized rendering for each UI element type
- ✅ Complete Properties Support: All UIKit component properties editable
- ✅ Advanced Syntax Highlighting: XML syntax highlighting with element correlation
- ✅ Cell Support: Full support for UITableViewCell and UICollectionViewCell
- ✅ Smart Search: Find and navigate through XML content with Ctrl+F
- ✅ Live Preview: See changes instantly across all editing modes
🎯 Motivation
Why this extension?
If you’re tired of opening Xcode for minor XIB edits, this extension is for you. With the XIB & Storyboard Visual Editor, you can:
- Edit XIB files directly in VS Code.
- Modify all UIKit component properties via the properties panel.
- Instantly reflect changes in XML and the visual canvas.
- Switch seamlessly between visual and XML views.
- Reduce reliance on Xcode for interface adjustments.
Originally a simple preview tool, this extension is intended to be a full WYSIWYG editor with bidirectional editing. It's a work in progress, so stay tuned for updates.
🚀 Recent Major Updates
0.4.5
- ✅ Autolayout Support: Now, you can visualize AutoLayout constraints directly on the canvas for more advanced layout control. Check the properties panel for constraint section. Editing is coming soon!
- ✅ Improved Performance: Significant speed improvements when handling large Storyboards and XIB files.
- ✅ Bug Fixes: Resolved various issues related to property editing and rendering glitches.
0.4.0
- ✅ Code Refactor: Complete rewrite of the properties panel to improve maintainability and performance.
- ✅ Improved Color Picker
- ✅ Simplified UI: A cleaner interface that closely resembles Interface Builder.
- ✅ Instant Updates: Changes are immediately visible on the canvas.
- ✅ Enhanced Xcode Compatibility: Better handling of properties and formats to avoid inconsistencies.
- ✅ Improved Storyboard rendering: Better handling of scenes and segues for a more accurate representation.
0.3.3
- ✅ Clear Color Support: Added "Clear Color" option to the color picker for transparent backgrounds and colors, matching iOS/macOS UIColor.clearColor behavior.
- ✅ Storyboard Cell Embedding: Now supports embedded cells within Storyboards for more accurate scene previews.
- ✅ Code Improvements: Refactored to a modular architecture, reducing UI rendering glitches and improving maintainability.
- ✅ User Defined Runtime properties support: Text placeholders, fonts and colors
- ✅ Fixed issues on property edition: Some properties were failing to reflect or save the provided changes.
0.3.2
- ✅ Expanded Properties Editing: Edit a wider range of properties for all major UIKit components directly from the properties panel.
- ✅ IBOutlet & IBAction Editing: IBOutlets and IBActions are now fully editable in the properties panel for seamless code connections.
- ✅ Improved XML Search: The XML editor’s search function now reliably navigates to and highlights results.
- ✅ Live Rendering Updates: Visual changes are reflected instantly—no more full refresh required after edits.
Planned / Missing Features & Roadmap:
Properties editing from panel is still limited for certain components (e.g., custom views, some advanced UIKit properties, and IBInspectable attributes)
Planned for v0.5.x: Edit AutoLayout constraints directly on the canvas for more advanced layout control.
Expanded Properties Panel Editing
Ongoing: Some properties are still limited; expect broader support for UIKit components in upcoming releases.
IBInspectable Custom Runtime Attributes Support
Currently missing: Editing of custom runtime attributes marked as IBInspectable is not yet supported.
Planned for v0.5.x: Full support for adding, editing, and removing IBInspectable attributes directly from the properties panel.
If you have suggestions or want to help accelerate these features, please reach out!
Your feedback and suggestions are welcome!
📦 Installation
From VS Code Marketplace or OpenVSX
- Open VS Code / Cursor / Windsurf / TRAE or derivatives.
- Go to Extensions (Ctrl+Shift+X)
- Search for "XIB & Storyboard Visual Editor" by Mariano Guadagnini
- Click Install
🎮 Usage
- Open a XIB file: Open any
.xib or .storyboard file in VS Code
- Choose Editor: When prompted, select "XIB/Storyboard Visual Editor"
- Visual Editing: Use the canvas to select and edit UI elements
- Properties Panel: Edit element properties in the right panel
- XML View: Toggle to XML view to see, search and edit the raw code
- Syntax Highlighting: Click on XML elements to highlight corresponding visual elements
🔧 Supported Elements
- Labels (UILabel)
- Buttons (UIButton) - with state support
- Text Fields (UITextField)
- Image Views (UIImageView)
- Table View Cells (UITableViewCell)
- Collection View Cells (UICollectionViewCell)
- Stack Views (UIStackView)
- Scroll Views (UIScrollView)
- Views (UIView)
- And many more...
🤝 Contributing
Contributions are welcome! Please feel free to reach me out.
☕ Support the Project
If you find this extension helpful and want to support its continued development, consider buying me a coffee! Your support helps me maintain and improve the extension.
📝 License
This project is licensed under the MIT License - see the MIT License for details.
🐛 Issues & Support
- Bug Reports: Please contact the author
- Feature Requests: Please contact the author
- Support: Please contact the author
🙏 Acknowledgments
- Created by: Mariano Guadagnini
