⚠️ Work in Progress - This project is currently under active development. Features and APIs may change as we continue building and refining the editor.
SlipboxEditor is a powerful Swift Package that provides a WYSIWYG rich text editor for iOS and macOS applications. Built with Swift 6.2, WKWebView, and Quill.js, it offers seamless JavaScript interoperability and native performance for modern SwiftUI and UIKit apps.
Perfect for: Content management systems, note-taking apps, document editors, blogging platforms, messaging apps, and any iOS/macOS application requiring advanced text editing capabilities.
- 📝 Rich Text Editing: Complete WYSIWYG editor with text formatting, bulleted/numbered lists, images, links, tables, and advanced typography
- 🚀 Native iOS/macOS Performance: Leverages WKWebView and JavaScriptCore for optimal rendering speed and memory efficiency
- 📱 Cross-Platform Swift Package: Universal compatibility with iOS 26.0+, macOS 26.0+, SwiftUI, and UIKit applications
- 🔄 Type-Safe Swift-JavaScript Bridge: Structured message passing with Codable support for reliable interoperability
- 💾 Offline-First Architecture: Zero network dependencies with bundled assets for consistent performance
- 🎯 SwiftUI Native Integration: Drop-in view component with @StateObject and @ObservableObject support
- ⌨️ Keyboard Shortcuts: Full keyboard navigation and shortcuts for power users
- 🎨 Customizable UI: Themeable interface with CSS customization support
- 📤 Multiple Export Formats: HTML, plain text, and structured data export options
- 🔧 Programmatic Control: Comprehensive API for automation and custom workflows
- iOS 26.0+ / macOS 26.0+ - Modern platform support
- Swift 6.2+ - Latest Swift language features and performance improvements
- Xcode 16.0+ - Compatible with latest development tools
- SwiftUI / UIKit - Works with both UI frameworks
- WKWebView support - Core web rendering technology
Add SlipboxEditor to your project using Xcode:
- File → Add Package Dependencies
- Enter the repository URL:
https://github.com/slipboxai/slipbox-editor - Select the version or branch
- Add to your target
Or add it to your Package.swift:
dependencies: [
.package(url: "https://github.com/yourusername/slipbox-editor", from: "1.0.0")
]The simplest way to add a rich text editor to your iOS or macOS app:
import SwiftUI
import SlipboxEditor
struct ContentView: View {
var body: some View {
SlipboxEditorView()
.frame(minHeight: 400)
}
}For full control over the WYSIWYG editor with custom toolbars and state management:
import SwiftUI
import SlipboxEditor
struct ContentView: View {
@StateObject private var editorModel = SlipboxEditorModel()
var body: some View {
VStack {
// Custom formatting toolbar
HStack {
Button("Bold") {
Task {
try? await editorModel.executeCommand(
SlipboxEditorCommand(action: .bold, data: nil)
)
}
}
.disabled(!editorModel.isReady)
Button("Save Document") {
let state = editorModel.saveState()
// Persist to Core Data, CloudKit, or file system
}
Spacer()
}
.padding()
// Rich text editor view
SlipboxEditorView()
.environmentObject(editorModel)
}
}
}The primary SwiftUI view component that embeds the rich text editor in your app:
public struct SlipboxEditorView: ViewUsage: Drop-in SwiftUI view for instant WYSIWYG editing functionality.
The core model class providing programmatic control over the rich text editor:
@MainActor
public class SlipboxEditorModel: ObservableObject {
@Published public var htmlContent: String // Real-time HTML content
@Published public var plainText: String // Stripped plain text
@Published public var isReady: Bool // Editor initialization state
@Published public var selectedRange: NSRange? // Current text selection
// Async command execution for text formatting
public func executeCommand(_ command: SlipboxEditorCommand) async throws
// Content management methods
public func setContent(_ html: String) async throws
public func getContent() async throws
// State persistence for document management
public func saveState() -> SlipboxEditorState
public func restoreState(_ state: SlipboxEditorState) async throws
}Comprehensive command system for programmatic text formatting and editor control:
public struct SlipboxEditorCommand: Codable {
public enum Action: String, Codable {
// Text formatting commands
case bold, italic, underline, strike
// Content insertion commands
case insertText, insertImage, insertLink
// Document management
case setContent, getContent
// Layout and alignment
case format, align
// Undo/redo functionality
case undo, redo
// List creation
case insertList, insertOrderedList
// Heading styles
case heading1, heading2, heading3
// Block formatting
case blockquote, codeBlock
}
public let action: Action
public let data: [String: AnyCodable]? // Optional parameters for commands
}Essential commands for implementing rich text editing functionality:
// Text formatting commands
try await model.executeCommand(SlipboxEditorCommand(action: .bold, data: nil))
try await model.executeCommand(SlipboxEditorCommand(action: .italic, data: nil))
// Content insertion with parameters
try await model.executeCommand(SlipboxEditorCommand(
action: .insertText,
data: ["text": AnyCodable("Hello World")]
))
// Image embedding (base64 or URL)
try await model.executeCommand(SlipboxEditorCommand(
action: .insertImage,
data: ["src": AnyCodable("data:image/jpeg;base64,...")]
))
// HTML content management
try await model.setContent("<p>Your HTML content here</p>")
// Heading and structure commands
try await model.executeCommand(SlipboxEditorCommand(action: .heading1, data: nil))
try await model.executeCommand(SlipboxEditorCommand(action: .insertList, data: nil))SlipboxEditor implements a modern hybrid architecture optimized for iOS and macOS development:
- WKWebView - High-performance web rendering engine for UI display
- WKScriptMessageHandler - Bidirectional Swift ↔ JavaScript communication bridge
- JavaScriptCore - Direct JavaScript execution for advanced scenarios
- Quill.js - Proven rich text editing engine with extensive formatting support
- Native iOS/macOS Performance - No WebAssembly overhead, pure native execution
- Platform Integration - Full access to iOS/macOS APIs and system features
- Type-Safe Interoperability - Structured Swift-JavaScript communication using Codable
- Offline-First Design - Zero network dependencies with bundled web assets
- Memory Efficient - Optimized resource usage for mobile and desktop environments
- Swift Concurrency Support - Modern async/await patterns throughout the API
Create your own formatting toolbar while leveraging the editor's programmatic API:
SlipboxEditorView()
.toolbar(.hidden) // Hide default toolbar for custom implementation
.overlay(alignment: .top) {
MyCustomToolbar(model: editorModel)
}Apply custom themes and styling through JavaScript CSS injection:
let customCSS = """
.ql-editor {
font-family: 'SF Mono', monospace;
background: #f8f8f8;
border-radius: 8px;
padding: 16px;
}
.ql-toolbar {
border: none;
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}
"""
editorModel.evaluateCustomScript("document.head.insertAdjacentHTML('beforeend', '<style>\(customCSS)</style>')")Implement system-responsive dark mode themes for your rich text editor:
@Environment(\.colorScheme) var colorScheme
let darkModeCSS = colorScheme == .dark ? """
.ql-editor {
background-color: #1c1c1e;
color: #ffffff;
}
""" : ""Experience SlipboxEditor's full capabilities with our comprehensive demo application:
- Clone this repository
- Open
Examples/Package.swiftin Xcode - Select the
SlipboxEditorDemoscheme - Press ⌘R to run on iOS Simulator or macOS
cd Examples/
swift run SlipboxEditorDemoThe demo app showcases real-world implementation patterns:
- 📝 Document Management System: Create, save, and load multiple rich text documents
- 🛠️ Complete Formatting Toolbar: All WYSIWYG editing options with keyboard shortcuts
- 📄 HTML Source Export: View and copy the generated HTML markup
- ⚙️ Settings & Configuration Panel: Explore features, shortcuts, and customization options
- 💾 Sample Documents: Pre-loaded content demonstrating various formatting capabilities
- 🎨 Theme Switching: Light/dark mode support with custom CSS themes
- 💿 Persistence Integration: Examples of Core Data and file system integration
SlipboxEditor is perfect for various application types:
📱 Note-Taking Apps: Bear, Notion-style editors with rich formatting
📝 Content Management: Blog editors, documentation tools, wiki systems
💬 Messaging Platforms: Rich text messaging with formatting support
📖 Document Editors: Word processor alternatives for iOS/macOS
🎓 Educational Apps: Interactive content creation and markup tools
💼 Business Apps: Report generation, proposal creation, documentation
The Examples/ directory contains production-ready implementations:
- SlipboxEditorDemo: Complete demo application with document management, persistence, and theming
- Integration Patterns: SwiftUI, UIKit, Core Data, and CloudKit examples
- Custom Toolbar Examples: Advanced formatting controls and keyboard shortcuts
- Theme System: Light/dark mode with custom CSS styling implementations
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
- Built on top of Quill.js - An amazing rich text editor
- Inspired by the research on Swift 6.2+ JavaScript interoperability enhancements
- Thanks to the Swift community for feedback and contributions
Primary: Swift WYSIWYG editor, iOS rich text editor, macOS text editor, SwiftUI editor component, WKWebView editor Secondary: JavaScript Swift interop, Quill.js Swift, cross-platform editor, rich text editing Swift, WYSIWYG Swift package Technical: WKScriptMessageHandler, JavaScriptCore Swift, Swift 6.2 JavaScript, iOS text formatting, macOS rich text Use Cases: Swift note app, iOS document editor, macOS word processor, SwiftUI text editor, mobile rich text
If you encounter any issues or have questions:
- 📚 Check the comprehensive documentation
- 🔍 Search existing issues and discussions
- 🆕 Create a new issue with detailed information
- 💬 Join our community discussions for tips and best practices
- ✅ iOS 26.0+ - Full feature support with modern SwiftUI
- ✅ macOS 26.0+ - Native macOS integration with AppKit interoperability
- ✅ Swift 6.2+ - Leverages latest language features and concurrency model
- ⚡ Optimized Performance - Minimal memory footprint, 60fps scrolling
- 🔄 Backward Compatible - Works with existing UIKit and AppKit applications
Made with ❤️ for the Swift community | Perfect for iOS & macOS rich text editing needs