🎌 Origami - Smart Code Folding for VS Code
Fold your code like art. A VS Code extension that intelligently toggles code folding with a single command.
📸 Screenshots
Code Expanded
Status Bar (bottom-right, marked in green) shows "Expanded"

Code Folded
Status Bar (bottom-right, marked in green) shows "Folded"

✨ Features
- 🔄 Single Toggle: One command to fold all / unfold all
- 📁 Universal Support: Works with all programming languages
- 🎯 Smart Patterns: Different folding strategies for different file types
- 💾 State Memory: Remembers fold state per file during your session
- 🎨 Status Bar: Visual indicator showing current fold state
- ⌨️ Keyboard Shortcut: Quick access with
Alt+Z
(Windows/Linux) or Option+Z
(Mac)
🚀 Installation
From VS Code Marketplace (Coming Soon)
- Open VS Code
- Press
Ctrl+P
/ Cmd+P
- Type
ext install origami-vscode
- Press Enter
From Source (Development)
# Clone the repository
git clone https://github.com/yourusername/origami-vscode.git
cd origami-vscode
# Install dependencies
npm install
# Open in VS Code
code .
# Press F5 to run in development mode
📖 Usage
Toggle Folding
- Keyboard: Press
Alt+Z
(Windows/Linux) or Option+Z
(Mac)
- Status Bar: Click the fold indicator in the status bar
- Command Palette: Press
Ctrl+Shift+P
and type "Origami: Toggle"
- Context Menu: Right-click in editor and select "Toggle Smart Fold"
How It Works
- Open any file - Code is displayed normally (expanded)
- Press
Alt+Z
- All code blocks fold, showing only the structure
- Press
Alt+Z
again - Everything expands back to normal
Smart File Patterns
Origami recognizes different file types and applies appropriate folding:
- React Components (
.jsx
, .tsx
) - Folds all component bodies
- Test Files (
*.test.js
, *.spec.ts
) - Folds test implementations
- JSON Files - Folds nested objects to show structure
- CSS/SCSS - Folds rule blocks
- HTML - Folds nested elements
- Default - Folds all code blocks
🛠️ Development Setup
Prerequisites
- Node.js (v14 or higher)
- VS Code (v1.74.0 or higher)
- npm or yarn
Project Structure
origami-vscode/
├── extension.js # Main extension code
├── package.json # Extension manifest
├── README.md # Documentation
├── .vscodeignore # Files to exclude from package
├── .gitignore # Git ignore rules
├── icon.png # Extension icon
└── test/
└── suite/ # Test files
Development Commands
# Install dependencies
npm install
# Run tests
npm test
# Package extension
npm run package
# Publish to marketplace
npm run publish
Testing Locally
- Open the project in VS Code
- Press
F5
to launch a new VS Code window with the extension loaded
- Important: A new VS Code window titled "[Extension Development Host]" will open
- This is the test environment where your extension is active
- The original window is for editing code, the new window is for testing
- Open any code file in the new test window (not the original window)
- Test the folding toggle with
Alt+Z
(Windows/Linux) or Option+Z
(Mac)
- Look for the fold indicator in the status bar (bottom-right)
⚙️ Configuration
Access settings through VS Code Settings or add to your settings.json
:
{
// Remember fold state for each file
"origami.rememberState": true,
// Show fold indicator in status bar
"origami.showStatusBar": true
}
🎯 Features Breakdown
Core Functionality
- ✅ Toggle between folded/expanded state
- ✅ Fold all nested structures
- ✅ Support all file types
- ✅ Remember state per file
User Interface
- ✅ Status bar indicator with current state
- ✅ Keyboard shortcut (Alt+Z)
- ✅ Command palette integration
- ✅ Context menu option
Smart Features
- ✅ File type detection
- ✅ Different patterns for different languages
- ✅ Session-based state persistence
🐛 Known Issues
- Fold state resets when VS Code restarts (by design - session only)
- Very large files (>10,000 lines) may have slight delay
📝 Changelog
Version 0.0.1 (Initial Release)
- Basic fold/unfold toggle
- Status bar integration
- Keyboard shortcuts
- File type detection
- State persistence per session
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
)
- Commit your changes (
git commit -m 'Add some AmazingFeature'
)
- Push to the branch (
git push origin feature/AmazingFeature
)
- Open a Pull Request
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🙏 Acknowledgments
- Inspired by the art of origami - transforming complex forms into simple, elegant shapes
- Thanks to the VS Code team for the excellent extension API
- Icon credit: [Origami icon source]
💡 Future Enhancements
- [ ] Persistent fold state across VS Code sessions
- [ ] Custom fold patterns per project
- [ ] Fold level selection (1, 2, 3... levels)
- [ ] Auto-fold on file open (configurable)
- [ ] Fold statistics in status bar
- [ ] Export/import fold preferences
📞 Support
Made with ❤️ by Sayed Abdul Karim
Fold your code like art with Origami 🎌