A modern, powerful, and intuitive OpenAPI specification editor with real-time preview and validation.

Features • Getting Started • Usage • Shortcuts • Contributing

• Dark/Light Theme Support: Seamlessly switch between themes
• Split View: Edit and preview simultaneously
• Responsive Design: Works on all screen sizes
• Customizable Layout: Collapsible sidebar and preview panel

• Monaco Editor Integration: VS Code-like experience
• Syntax Highlighting: YAML/JSON support
• Auto-completion: Context-aware suggestions
• Real-time Validation: Instant feedback on errors
• Format on Save: Keep your code clean

• Real-time Updates: See changes instantly
• Interactive Documentation: Collapsible sections
• Search & Filter: Find endpoints quickly
• Tag-based Navigation: Organize by tags
• Color-coded Methods: Visual HTTP method identification

• File Management: Create, open, and save files
• Export Options: YAML/JSON conversion
• Keyboard Shortcuts: Efficient workflow
• Git Integration: Version control support
• Multiple Files: Work on multiple specs

• Node.js 16.x or later
• npm or yarn

# Clone the repository
git clone https://github.com/yourusername/openapi-editor.git

# Navigate to the project directory
cd openapi-editor

# Install dependencies
npm install
# or
yarn install

# Start the development server
npm run dev
# or
yarn dev

1. Create New File

   • Click the "+" button in the toolbar
   • Use Ctrl+N shortcut

2. Open File

   • Click "Open" in the toolbar
   • Drag & drop files
   • Use Ctrl+O shortcut

3. Save File

   • Click "Save" in the toolbar
   • Use Ctrl+S shortcut

4. Export

   • Export as YAML/JSON
   • Download documentation

• Adjust font size
• Toggle word wrap
• Show/hide minimap
• Configure tab size

• Filter by tags
• Search endpoints
• Expand/collapse all
• Copy endpoint URLs

{
  "editor": {
    "theme": "vs-dark",
    "fontSize": 14,
    "tabSize": 2,
    "wordWrap": "on",
    "formatOnSave": true,
    "minimap": true
  }
}

{
  "theme": {
    "light": {
      "primary": "#0284c7",
      "background": "#ffffff",
      "foreground": "#0f172a"
    },
    "dark": {
      "primary": "#38bdf8",
      "background": "#0f172a",
      "foreground": "#f8fafc"
    }
  }
}

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Monaco Editor
• OpenAPI Initiative
• Tailwind CSS
• React
• TypeScript