Oh My Posh Visual Configurator ✨
🎯 What is Oh My Posh Configurator?
The Oh My Posh Visual Configurator is a modern, intuitive web application that lets you design and customize your terminal prompt visually. No more manual JSON editing or trial-and-error configuration—just drag, drop, customize, and export!
Perfect for developers, DevOps engineers, and anyone who wants a beautiful, informative terminal prompt for PowerShell, Bash, Zsh, Fish, or any shell supported by Oh My Posh.
✨ Features
- 🎨 103+ Segments: Browse comprehensive segment library organized in 8 categories with detailed properties and options
- 🖱️ Drag & Drop Interface: Intuitive visual editor with real-time updates
- ⚡ Live Preview: See your prompt instantly with sample data and powerline/diamond styles
- 🎛️ Full Customization: Configure colors, templates, styles, and alignment with inline documentation
- 🚀 Progressive Disclosure: Advanced features hidden by default with settings dialog to show/hide complexity as needed
- 🎯 Smart Defaults: Auto-applied cache settings, intelligent feature detection on import
- 💡 Command Tooltips: Configure command-triggered custom prompts (e.g., show git status when typing
git)
- 📚 Segment Documentation: Built-in properties and options reference for every segment
- 📦 Import & Export: Support for JSON, YAML, and TOML formats
- 💾 Auto-Save: Never lose your work with automatic browser storage
- 🎯 Sample Configs: Start quickly with 6 pre-built professional templates
- 👥 Community Themes: Browse and share community-contributed configurations
- 🤝 Easy Sharing: Submit your own themes via GitHub PR with built-in tools
- 🌐 100% Client-Side: Your configurations never leave your browser
- 📱 Responsive Design: Works on desktop, tablet, and mobile devices
- 🎨 Smart Color Schemes: Category-based default colors for quick setup
- 🤖 MCP Server: Use AI assistants like Claude to create and manage configurations through natural language (Learn more)
🗂️ Segment Categories
- System: Path, OS, Shell, Session, Battery, Time, Execution Time, Status, and more
- Version Control: Git, Mercurial, SVN, Fossil, Plastic SCM, Sapling, Jujutsu
- Languages: Node.js, Python, Go, Rust, Java, .NET, PHP, Ruby, Swift, and 20+ more
- Cloud & Infrastructure: AWS, Azure, GCP, Kubernetes, Terraform, Docker, Pulumi
- CLI Tools: NPM, Yarn, PNPM, Angular, React, Flutter, and many more
- Web: IP Address, Weather, HTTP requests
- Music: Spotify, YouTube Music, Last.fm
- Health: Nightscout, Strava, Withings
🚀 Getting Started
🌐 Use Online (Recommended)
No installation required! Visit the hosted version:
👉 https://configurator.ohmyposh.dev/
💻 Local Development
git clone https://github.com/jamesmontemagno/ohmyposh-configurator.git
cd ohmyposh-configurator
npm install
npm run dev
npm run build
npm run preview
🔧 Development Scripts
npm run dev: Start Vite development servernpm run build: Build for production and minify all JSON assetsnpm run build:mcp: Build the MCP servernpm run mcp: Run the MCP servernpm run preview: Serve the production build from dist/npm run minify: Manually minify JSON files in the public/ directorynpm run format:json: Expand/format JSON files in public/ for easier editingnpm run validate: Validate all configuration files and manifestsnpm run lint: Run ESLint checknpm run test: Run tests
🤖 MCP Server (AI-Powered Configuration)
Want to create Oh My Posh configurations using natural language with AI assistants? The Oh My Posh Configurator includes a Model Context Protocol (MCP) server that works with VS Code and GitHub Copilot.
Quick Setup for VS Code:
-
Add to your workspace .vscode/mcp.json:
{
"servers": {
"ohmyposh-configurator": {
"type": "stdio",
"command": "node",
"args": ["/path/to/ohmyposh-configurator/dist/mcp/index.js"]
}
}
}
-
Build the MCP server:
-
Open GitHub Copilot Chat in VS Code and start creating prompts with AI!
Example Requests:
- "Create me a developer prompt with git and Python"
- "Add caching to all language segments"
- "Apply the Dracula color theme"
- "Help optimize my slow prompt"
📖 Full MCP Server Documentation
📖 Usage
Quick Start Guide
-
🎯 Choose a Starting Point
- Start from scratch, or
- Load a sample configuration, or
- Browse community themes, or
- Import your existing Oh My Posh config
-
➕ Add Segments
- Browse categories in the left sidebar
- Click segments to add them to your prompt
- Or drag them directly to desired positions
-
🎨 Customize
- Click any segment to edit properties
- Adjust colors, styles, and templates
- Configure powerline, diamond, or plain styles
-
👀 Preview
- See changes instantly in the preview panel
- Toggle between dark and light backgrounds
- View powerline arrows and diamond shapes
-
💾 Export or Share
- Choose your format: JSON, YAML, or TOML
- Download and use with Oh My Posh
- Or share your creation with the community!
🤝 Contributing Your Theme
Love your configuration? Share it with the community!
- Click the "Share" button in the header
- Fill in your theme details (name, description, author, tags)
- Select "Open Submission Issue" and submit the prefilled GitHub issue
- A maintainer reviews your theme and automatically generates a draft pull request when approved
- See your theme in the Community collection!
See CONTRIBUTING.md for detailed instructions.
🔧 Using Your Configuration
After downloading your configuration file, follow the Oh My Posh installation guide to use it with your shell:
oh-my-posh init pwsh --config ~/your-theme.json | Invoke-Expression
eval "$(oh-my-posh init bash --config ~/your-theme.json)"
eval "$(oh-my-posh init zsh --config ~/your-theme.json)"
🛠️ Technology Stack
- ⚛️ Framework: React 19 with TypeScript
- ⚡ Build Tool: Vite 6.4
- 🎨 Styling: Tailwind CSS 4.1
- 🖱️ Drag & Drop: @dnd-kit (sortable lists and cross-container support)
- 💾 State Management: Zustand with localStorage persistence
- 🎯 Icons: Custom Nerd Font icon library (200+ icons) with unique IDs
- 📝 Config Parsing: js-yaml, @iarna/toml
- 📦 Data Loading: Dynamic JSON-based lazy loading with request-deduplication and caching
- JSON Minification: All JSON metadata and configuration files are automatically minified during the production build to reduce payload size.
- Smart Caching: The application implements a request-deduplication and caching layer for all JSON assets. Each file is fetched exactly once, even if requested by multiple components simultaneously.
- Lazy Loading: Segment metadata is loaded on-demand by category, keeping the initial bundle size small.
🏗️ Project Structure
├── public/
│ ├── configs/ # Sample and community configurations
│ │ ├── samples/ # 6 pre-built professional templates
│ │ │ └── manifest.json # Sample configs metadata
│ │ └── community/ # User-contributed themes
│ │ └── manifest.json # Community configs metadata
│ └── segments/ # Segment metadata organized by category (103+ segments)
│ ├── system.json # 14 system segments (path, battery, time, etc.)
│ ├── scm.json # 8 version control segments (git, svn, etc.)
│ ├── languages.json # 26 programming language segments
│ ├── cloud.json # 12 cloud provider segments
│ ├── cli.json # 30 CLI tool segments
│ ├── web.json # 7 web-related segments
│ ├── music.json # 3 music player segments
│ ├── health.json # 3 health tracker segments
│ └── README.md # Documentation for adding segments
├── src/
│ ├── components/ # React components
│ │ ├── Canvas/ # Drag-and-drop prompt builder with tooltips support
│ │ ├── SegmentPicker/ # Category browser with segments
│ │ ├── PropertiesPanel/ # Segment, block, tooltip, and global properties editor
│ │ ├── PreviewPanel/ # Live prompt preview with tooltip previews
│ │ ├── AdvancedSettingsDialog/ # Progressive disclosure settings for advanced features
│ │ ├── ExtraPromptsDialog/ # Secondary prompts configuration
│ │ ├── ConfirmDialog/ # Reusable confirmation dialog
│ │ └── ...
│ ├── data/ # Configuration data and color schemes
│ ├── store/ # Zustand state management with persistence
│ │ ├── configStore.ts # Main config state (blocks, segments, tooltips, global settings)
│ │ └── advancedFeaturesStore.ts # Feature toggles for progressive disclosure
│ ├── types/ # TypeScript type definitions (SegmentMetadata, Tooltip, etc.)
│ ├── utils/ # Utility functions
│ │ ├── segmentLoader.ts # Dynamic segment loading with caching
│ │ ├── configExporter.ts # Export to JSON/YAML/TOML
│ │ ├── configImporter.ts # Import with auto-feature detection
│ │ └── unicode.ts # Unicode escape handling
│ ├── constants/ # Nerd Font icons and other constants
│ └── hooks/ # Custom React hooks (useConfirm, etc.)
├── docs/ # Comprehensive documentation
│ ├── config-migration-guide.md # Guide for config structure updates
│ ├── segment-json-migration.md # Segment refactoring documentation
│ ├── quick-reference.md # Quick reference for contributors
│ └── nerd-font-icons-reference.md # 200+ icon documentation
└── scripts/ # Build and validation scripts
├── validate-configs.js # Config validation tool
└── README.md # Scripts documentation
Adding New Segments
Segments are now stored in separate JSON files by category in public/segments/. This makes it easy to add or modify segments without touching the codebase:
- Open the appropriate category file (e.g.,
public/segments/languages.json)
- Add your segment with the following structure:
{
"type": "segment-type",
"name": "Display Name",
"description": "Brief description",
"icon": "lang-python",
"defaultTemplate": " {{ .Property }} ",
"properties": [
{
"name": ".Property",
"type": "string",
"description": "Description of this template variable"
}
],
"options": [
{
"name": "option_name",
"type": "boolean",
"default": true,
"description": "What this option does"
}
],
"defaultCache": {
"duration": "168h",
"strategy": "folder"
}
}
- Properties are template variables available in
{{ }} templates (e.g., .Full, .Path)
- Options are segment configuration settings (e.g.,
home_enabled, fetch_version)
- defaultCache (optional) provides recommended caching for performance (see Cache Strategy Guide in
public/segments/README.md)
- Segments are loaded dynamically on demand for better performance
- Colors are applied automatically from category-based color schemes
See public/segments/README.md for detailed instructions.
🔍 SEO & Sharing
This project includes comprehensive SEO optimization:
- ✅ Structured data (JSON-LD) for search engines
- ✅ Open Graph tags for rich social media previews
- ✅ Twitter Card support
- ✅ PWA manifest for "Add to Home Screen"
- ✅ Sitemap and robots.txt
- ✅ Semantic HTML with proper meta tags
🌟 Keywords
oh my posh, terminal customization, shell prompt, powerline, prompt theme, terminal theme, powershell prompt, zsh theme, bash prompt, terminal configurator, visual editor, drag and drop, oh-my-posh builder, prompt generator
📚 Documentation
User Documentation
Developer Documentation
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is open source and available under the MIT License.
Acknowledgments
- Oh My Posh by Jan De Dobbeleer
- All the Oh My Posh contributors and community
