XIB & Storyboard Visual Editor
🎨 Powerful WYSIWYG editor for iOS 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.)
- ✅ Real Positioning: Uses actual XIB frame coordinates for accurate layout
- ✅ Properties Panel: Edition still not implemented here
- ✅ Element-Specific Rendering: Specialized rendering for each UI element type
- ✅ Partial Support: Currently partial support of properties. Storyboards coming soon.
- ✅ Syntax Highlighting: Advanced XML syntax highlighting with element correlation
- ✅ Cell Support: Support for UITableViewCell and UICollectionViewCell
- ✅ Live Preview: See changes instantly as you edit in the included XML editor.
🎯 Motivation
Why this extension?
If you’re frustrated with having to open Xcode just to make small tweaks to your XIB files, this extension is for you! With the XIB & Storyboard Visual Editor, you can:
- Open and edit XIB files directly in VS Code or Cursor (currently, editing is limited to the XML editor)
- Instantly preview your UI visually as you edit
- Seamlessly switch between a visual canvas and the raw XML code
- Minimize your reliance on Xcode for everyday interface changes
This project began as a simple preview tool to avoid constantly switching between Xcode and VS Code for minor edits. Given the complexity of Interface Builder, some features are still in progress, but the goal is to make as much as possible available right inside your code editor.
Planned / Missing Features:
- Storyboard file support
- Autolayout visualization and editing
- Full IBOutlet/connection management
- Complete property editing from the properties panel
- Support for additional UIKit components
Your feedback and suggestions are welcome!
📦 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "XIB & Storyboard Visual Editor" by Mariano Guadagnini
- Click Install
From Source
Download the source code
Extract to a folder
Open in VS Code
Install dependencies
npm install
- Compile the extension
npm run compile
- Install the extension in VS Code
code --install-extension xib-storyboard-editor-0.1.0.vsix
🎮 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/edit the raw code
- Syntax Highlighting: Click on XML elements to highlight corresponding visual elements
🖼️ Screenshots
Coming soon - screenshots will be added before publication
🔧 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...
🏗️ Technical Architecture
Technologies Used
- VS Code Extension API for integration
- TypeScript for development
- SVG for interactive visual canvas
- fast-xml-parser for XIB/Storyboard parsing
- Custom Editor Provider for custom editor
Project Structure
├── src/
│ ├── extension.ts # Extension entry point
│ ├── xibEditorProvider.ts # Custom editor provider
│ └── webview/
│ ├── main.ts # Webview logic (Canvas + UI)
│ ├── parser/ # XML parsing utilities
│ └── rendering/ # Element rendering
├── media/
│ └── style.css # Editor styles
├── examples/ # Sample XIB files
└── out/ # Compiled files
🔧 Development
Building
npm run compile
Testing
# Open in Extension Development Host
npm run dev
# Or press F5 in VS Code
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
Development Setup
- Download the source code
- Extract to a folder
- Install dependencies:
npm install
- Make your changes
- Test your changes:
npm run compile && F5
- Contact the author for contributions
📝 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
- Thanks to the VS Code team for the amazing Extension API
- Thanks to the fast-xml-parser library for XML parsing
- Thanks to Prism.js for syntax highlighting
📋 Changelog
Version 0.1.0
- Initial release
- Basic XIB/Storyboard visual editing
- Support for common UI elements
- Dual view (Visual + XML)
- Properties panel
- Syntax highlighting
- Table/Collection view cell support
Made with ❤️ for iOS developers
