🌐 Language / 言語 / Idioma: English | 日本語 | Español
A futuristic, holographic-style code editor
Inspired by Minority Report's floating UI panels
Note: SF EDITOR is now macOS only. Windows and Linux development has been discontinued due to resource constraints. Existing Windows builds (v0.5.12 and earlier) remain available but will no longer receive updates.
| Platform | Download |
|---|---|
| macOS (Apple Silicon) | SF_EDITOR-0.7.0-arm64.dmg |
SF EDITOR is a desktop code editor that brings science fiction aesthetics to your daily coding workflow. With its transparent, floating interface and holographic visual effects, coding feels like operating a futuristic control panel.
Core Editor
- Holographic UI - Transparent, frameless window with glowing edges
- SF Splash Screen - Cinematic startup animation
- Multi-tab Editor - Work with multiple files simultaneously
- File Explorer - Built-in folder navigation
- Custom Themes - Cyan, Magenta, Green, Gold color options
- Auto-updater - Automatic update notifications
- Large File Support - Optimized performance for large files
- 40+ Languages - Full Monaco Editor syntax support
- Integrated Terminal - SF-styled terminal with command history
- Multi-language UI - English, Japanese, Spanish support (Settings > Appearance)
- Japanese Font - M PLUS 1p for improved CJK readability
Pro Features (Subscription)
- AI Assistant - Claude/OpenAI/Gemini/Grok API integration
- Git Integration - Visual diff, staging, commits, branch management
- LSP Support - TypeScript/JavaScript language server
Team Features (Team Plan)
- Team Chat - Real-time messaging with file/cursor context
- Focus Mode - Pomodoro-style timer with notification batching
- Video Call Integration - "INCOMING TRANSMISSION" holographic alerts
- Real-time Collaboration - Pair programming with shared cursors
Multi-Agent Development (Team Plan)
- AI Agent Orchestration - Coordinate multiple Claude Code agents
- Hierarchical Team Structure - CTO → Lead → Dev (up to 10 agents)
- Integrated Terminal Grid - Visual multi-pane terminal layout
- Agent Hub - Real-time monitoring and task distribution
- Custom Personas - Configure agent specializations and prompts
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/NEXT-STANDARD/sf-editor.git
cd sf-editor
# Install dependencies
npm install
# Start development server
npm run dev# Build for current platform
npm run build
# Build for specific platforms
npm run build:mac # macOSmacOS builds require code signing and Apple notarization for Gatekeeper approval:
# Required environment variables
export APPLE_ID="your-apple-id@example.com"
export APPLE_APP_SPECIFIC_PASSWORD="xxxx-xxxx-xxxx-xxxx"
export APPLE_TEAM_ID="XXXXXXXXXX"
# Build with signing and notarization
npm run build:macSetup Requirements:
- Apple Developer Program membership
- Developer ID Application certificate in Keychain
- App-specific password from appleid.apple.com
# Development mode (with hot reload)
npm run dev
# Production build
npm run build
# Lint code
npm run lint| Technology | Purpose |
|---|---|
| Electron 40 | Desktop application framework |
| React 19 | UI components |
| TypeScript | Type safety |
| Monaco Editor | Code editing engine |
| Vite | Build tool |
| Framer Motion | Animations |
SF EDITOR includes a powerful multi-agent development system that orchestrates multiple Claude Code instances for parallel development workflows.
| Role | Count | Recommended Model | Responsibility |
|---|---|---|---|
| CTO | 1 | Opus | Architecture decisions, code review, strategic oversight |
| Lead | 1 | Sonnet | Task coordination, PR reviews, team management |
| Dev | 1-8 | Sonnet/Haiku | Implementation, testing, documentation |
- Open the Multi-Agent panel from the status bar (⬡ icon)
- Click START SESSION to initialize agents
- Use the BROADCAST button to send tasks to all agents
- Monitor agent status and output in real-time
- Visual Terminal Grid - 10-pane layout with xterm.js terminals
- Agent Hub Server - WebSocket-based real-time communication
- Task Distribution - Send commands to individual agents or broadcast to all
- Custom Personas - Configure specializations (Frontend, Backend, DevOps, etc.)
- Model Selection - Choose Opus/Sonnet/Haiku per agent based on task complexity
Agent settings can be customized via the settings panel:
⚙ Settings → Multi-Agent → Configure agents
Options include:
- Enable/disable specific agents
- Select AI model per role
- Define custom system prompts
- Set initial instructions for agents
See Multi-Agent Guide for detailed documentation.
See ROADMAP.md for the full development plan.
- Monaco Editor bundle optimization (dynamic language worker imports)
- AppContent component splitting (4 memoized sub-components)
- PanelContext State/Actions split (useReducer migration)
- Unified notification system (NotificationContext with deduplication)
- Focus trap for all modal dialogs (WCAG 2.1 compliance)
- Stripe Customer ID race condition fix
- Security hardening (JWT verification, path traversal prevention, sandbox, CSP, safeStorage)
- WCAG AA color contrast compliance (105+ CSS adjustments)
- AI context performance optimization (debounce + truncation)
- Detached terminal window (pop-out terminal with SF theme)
- IPC handler refactoring (modular architecture)
- Error handling & logging improvements
- Multi-language UI support (English, Japanese, Spanish)
- Japanese font improvement (M PLUS 1p)
- i18n foundation with react-i18next
- File open/save operations
- Multi-language syntax highlighting
- Custom window controls & SF splash screen
- Settings panel & Auto-updater
- macOS support (Windows support discontinued)
- Integrated Terminal
- AI Assistant (Claude/OpenAI/Gemini/Grok)
- Git Integration (diff, staging, commits)
- LSP Support (TypeScript/JavaScript)
- Team Chat & Cloud Sync
- Team Management (Admin dashboard)
- Focus Mode (Pomodoro timer)
- Video Call Integration ("INCOMING TRANSMISSION")
- Real-time Collaboration (Pair Programming)
- Screen sharing within editor
- Collaborative editing (OT/CRDT)
- Plugin system
- Custom theme creator
-
Linux support(discontinued)
Contributions are welcome! Please read the following before submitting PRs:
npm run dev # Start dev environment
npm run vite # Vite dev server only
npm run lint # Run ESLint
npm run build # Production buildsf-editor/
├── electron/ # Electron main process
│ └── main.ts
├── src/
│ ├── components/ # React components
│ │ └── SFEditor.tsx
│ ├── styles/ # CSS styles
│ │ └── sf-theme.css
│ ├── App.tsx # Main app component
│ └── main.tsx # React entry point
├── index.html
└── package.json
SF_EDITOR prioritizes aesthetics without sacrificing usability. The futuristic visual effects are carefully tuned to be:
- Subtle - Animations don't distract from coding
- Purposeful - Visual feedback enhances the experience
- Performant - Smooth 60fps animations
- Accessible - Animations can be disabled for users who prefer static UI
Note: High contrast mode is not supported and is not planned for future releases. SF EDITOR's visual identity is built around its cyberpunk aesthetic with glowing effects, transparency, and dark themes. Adding high contrast would fundamentally alter this design language. Users requiring high contrast accessibility features should consider other code editors.
This project is licensed under the MIT License - see the LICENSE file for details.
- Visual inspiration: Minority Report (2002)
- Fonts: Google Fonts (Orbitron, Share Tech Mono, M PLUS 1p)
- Editor engine: Monaco Editor