mino

Mino Code Editor

A reusable React component library for LeetCode-style code editor using Monaco Editor. Designed for easy integration into coding interview platforms, educational tools, and practice environments.

📖 Documentation

Explore our comprehensive documentation:

• 🚀 Getting Started Guide - Quick installation and basic setup
• 🎯 Feature Overview - Detailed feature list and capabilities
• 📋 API Reference - Complete props and methods documentation
• 🎨 Styling Guide - Theme customization and CSS variables
• 🧩 Component Examples - Interactive component demos
• 🛠️ Development Guide - Contributing and local setup

🚀 Quick Start

# Install the package
npm install @mikr13/mino

# Or with pnpm
pnpm add @mikr13/mino

# Or with bun
bun add @mikr13/mino

import { CodeEditor } from '@mikr13/mino';
import '@mikr13/mino/style.css';

function App() {
  const [code, setCode] = useState('console.log("Hello, World!");');
  
  return (
    <CodeEditor
      language="javascript"
      value={code}
      onChange={setCode}
      showToolbar={true}
      showStatusBar={true}
    />
  );
}

🎯 Key Features

• 📝 Advanced Code Editing
  • Monaco Editor integration with full IDE features
  • Multi-language syntax highlighting
  • IntelliSense and auto-completion
  • Error diagnostics and quick fixes
• 🎨 Rich Customization
  • Light/Dark themes
  • Custom CSS variables
  • Configurable toolbar
  • Custom icons support
• 🛠️ Developer Experience
  • TypeScript support
  • Readonly ranges
  • Format on demand
  • Language switching
• 🎭 UI Components
  • Customizable toolbar
  • Status bar
  • Action buttons
  • Full-screen mode

🎨 Styling & Customization

Mino provides extensive styling options through CSS variables:

/* Custom theme example */
:root {
  --mino-editor-bg: #fafafa;
  --mino-editor-text: #2d3748;
  --mino-toolbar-bg: #f7fafc;
  --mino-toolbar-text: #4a5568;
}

View all styling options →

🧩 Component Examples

• Basic Editor - Simple code editor setup
• LeetCode Style - Complete interview platform setup
• Theme Switcher - Dark/Light theme demo
• Language Comparison - Multi-language support
• All Features - Full feature showcase

🛠️ Development

Prerequisites

• Bun (recommended) or Node.js 22+

Local Setup

# Clone the repository
git clone https://github.com/mikr13/mino.git
cd mino

# Install dependencies
bun install

# Start development server
bun run dev

Available Scripts

• bun run dev - Start Ladle development server
• bun run build - Build the library
• bun run build:story - Build documentation
• bun run preview:story - Preview documentation
• bun run lint - Run linter
• bun run format - Format code
• bun run type-check - Run TypeScript checks

🤝 Contributing

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

See our Contributing Guide for more details.

📄 License

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

🙏 Acknowledgments

• Monaco Editor - The code editor that powers VS Code
• Ladle - Development and testing environment
• Biome - Toolchain for web projects
• TypeScript - Type safety and developer experience
• Vite - Next generation frontend tooling

This site is open source. Improve this page.