https://github.com/jaywcjlove/swiftui-codemirror
SwiftUI wrapper for CodeMirror 6.
https://github.com/jaywcjlove/swiftui-codemirror
codemirror codemirror6 ios jaywcjlove macos swift-package-manager swiftui swiftui-component
Last synced: 1 day ago
JSON representation
SwiftUI wrapper for CodeMirror 6.
- Host: GitHub
- URL: https://github.com/jaywcjlove/swiftui-codemirror
- Owner: jaywcjlove
- License: mit
- Created: 2025-08-11T17:07:23.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-09-18T14:52:00.000Z (26 days ago)
- Last Synced: 2025-10-06T06:43:54.794Z (8 days ago)
- Topics: codemirror, codemirror6, ios, jaywcjlove, macos, swift-package-manager, swiftui, swiftui-component
- Language: Swift
- Homepage:
- Size: 1.26 MB
- Stars: 16
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
CodeMirror
===
SwiftUI wrapper for CodeMirror 6.
## Features
- Minimal and fast
- Handles large documents with ease
- [40+ themes](https://uiwjs.github.io/react-codemirror/#/theme) available
- macOS & iOS support
- Built with SwiftUI
## Installation
### Swift Package Manager
Add CodeMirror to your project using Xcode:
1. In Xcode, go to `File` → `Add Package Dependencies...`
2. Enter the repository URL: `https://github.com/jaywcjlove/swiftui-codemirror.git`
3. Click `Add Package`
Or add it to your `Package.swift` file:
```swift
dependencies: [
.package(url: "https://github.com/jaywcjlove/swiftui-codemirror.git", from: "1.0.0")
]
```
## Usage
### CodeMirror
```swift
import SwiftUI
import CodeMirror
struct ContentView: View {
@State var value: String = ""
var body: some View {
CodeMirror(value: $value, prompt: String(localized: "Please enter text"))
CodeMirror(value: $value)
.onLoadSuccess() {
print("Hello!")
}
.onLoadFailed { error in
print("@@@2 \(#function) \(error)")
}
.onContentChange { value in
print("@@@3 Content Did Change")
}
}
}
```
**Set Line Wrapping**
```swift
struct ContentView: View {
@State var lineWrapping = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmLineWrapping($lineWrapping)
}
}
```
**Show Line Numbers**
```swift
struct ContentView: View {
@State var lineNumber = true
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmLineNumber($lineNumber)
}
}
```
**Show Fold Gutter**
```swift
struct ContentView: View {
@State var foldGutter = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmFoldGutter($foldGutter)
}
}
```
**Set Editor Read-Only**
```swift
struct ContentView: View {
@State var readOnly = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmReadOnly($readOnly)
}
}
```
**Set enabled search**
```swift
struct ContentView: View {
@State var enabledSearch = false
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmEnabledSearch(.constant(false))
}
}
```
**Set Font Size**
```swift
CodeMirror(value: $value)
.cmFontSize(.constant(14))
```
**Set Highlight Active Line**
```swift
CodeMirror(value: $value)
.cmHighlightActiveLine(.constant(false))
```
**Set Programming Language**
```swift
struct ContentView: View {
@State var language: Language = .json
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmLanguage($language)
}
}
```
Support: `C`, `C++`, `CQL`, `CSS`, `Go`, `HTML`, `Java`, `JavaScript`, `JSON`, `JSX`, `LESS`, `Liquid`, `MariaDB SQL`, `Markdown`, `MS SQL`, `MySQL`, `PHP`, `PLSQL`, `PostgreSQL`, `Python`, `Rust`, `Sass`, `SCSS`, `SQL`, `SQLite`, `TSX`, `TypeScript`, `WebAssembly`, `XML`, `YAML`, `APL`, `PGP`, `ASN.1`, `Asterisk`, `Brainfuck`, `Cobol`, `C#`, `Clojure`, `ClojureScript`, `Closure Stylesheets (GSS)`, `CMake`, `CoffeeScript`, `Common Lisp`, `Cypher`, `Cython`, `Crystal`, `D`, `Dart`, `diff`, `Dockerfile`, `DTD`, `Dylan`, `EBNF`, `ECL`, `edn`, `Eiffel`, `Elm`, `Erlang`, `Esper`, `Factor`, `FCL`, `Forth`, `Fortran`, `F#`, `Gas`, `Gherkin`, `Groovy`, `Haskell`, `Haxe`, `HXML`, `HTTP`, `IDL`, `JSON-LD`, `Jinja2`, `Julia`, `Kotlin`, `LiveScript`, `Lua`, `mIRC`, `Mathematica`, `Modelica`, `MUMPS`, `Mbox`, `Nginx`, `NSIS`, `NTriples`, `Objective-C`, `Objective-C++`, `OCaml`, `Octave`, `Oz`, `Pascal`, `Perl`, `Pig`, `PowerShell`, `Properties files`, `ProtoBuf`, `Pug`, `Puppet`, `Q`, `R`, `RPM Changes`, `RPM Spec`, `Ruby`, `SAS`, `Scala`, `Scheme`, `Shell`, `Sieve`, `Smalltalk`, `Solr`, `SML`, `SPARQL`, `Spreadsheet`, `Squirrel`, `Stylus`, `Swift`, `sTeX`, `LaTeX`, `SystemVerilog`, `Tcl`, `Textile`, `TiddlyWiki`, `Tiki wiki`, `TOML`, `Troff`, `TTCN`, `TTCN_CFG`, `Turtle`, `Web IDL`, `VB.NET`, `VBScript`, `Velocity`, `Verilog`, `VHDL`, `XQuery`, `Yacas`, `Z80`, `MscGen`, `Xù`, `MsGenny`, `Vue`, `Angular Template`,
**Set Theme**
```swift
struct ContentView: View {
@Environment(\.colorScheme) var colorScheme
@State var theme: Themes = .vscodelight
@State var value: String = ""
var body: some View {
CodeMirror(value: $value)
.cmTheme($theme)
.cmTheme(
colorScheme == .dark ? .constant(.vscodedark) : .constant(.vscodelight)
)
}
}
```
### CodeMirrorView
```swift
import SwiftUI
import CodeMirror
struct ContentView: View {
@ObservedObject var vm: CodeMirrorVM = .init()
@State var value: String = ""
var body: some View {
CodeMirrorView(vm, value: $value)
.onAppear {
vm.setContent(jsonString)
}
}
}
```
**Set Theme**
```swift
import SwiftUI
import CodeMirror
struct ContentView: View {
@ObservedObject var vm: CodeMirrorVM = .init()
@State var value: String = ""
var body: some View {
VStack {
CodeMirrorView(vm, value: $value)
.onAppear {
vm.setContent(jsonString)
}
Picker("Theme", selection: $vm.theme) {
ForEach(Themes.allCases, id: \.rawValue) {
Text($0.rawValue).tag($0)
}
}
}
}
}
```
**Set Programming Language**
```swift
Picker("Lang", selection: $vm.language) {
ForEach(Language.allCases, id: \.rawValue) {
Text($0.rawValue).tag($0)
}
}
```
```swift
vm.language = .json
```
**Set Editor Content**
```swift
Button {
vm.setContent("Hello World!")
} label: {
Text("SET")
}
```
**Get Editor Text Content**
```swift
Button {
Task {
let content = try? await vm.getContent()
print(content ?? "")
}
} label: {
Text("GET")
}
```
**Set Editor Read-Only**
```swift
Toggle(isOn: $vm.readOnly, label: { Text("Read Only") })
.toggleStyle(.checkbox)
```
**Show Line Numbers**
```swift
ToolbarItem {
Toggle(isOn: $vm.lineNumber, label: { Text("Line Number") })
.toggleStyle(.checkbox)
}
```
**Set Line Wrapping**
```swift
ToolbarItem {
Toggle(isOn: $vm.lineWrapping, label: { Text("Line Wrapping") })
.toggleStyle(.checkbox)
}
```
**Event**
```swift
@ObservedObject var vm: CodeMirrorVM = .init(
onLoadSuccess: {
print("@@@1 \(#function)")
},
onLoadFailed: { error in
print("@@@2 \(#function) \(error)")
},
onContentChange: { value in
print("@@@3 Content Did Change")
}
)
```
## Acknowledgments
Thanks to these projects:
- https://codemirror.net
- https://github.com/khoi/codemirror-swift
- https://github.com/ProxymanApp/CodeMirror-Swift
## License
Licensed under the MIT License.