Aardink

Aardink is a Compose Multiplatform code editor with VS Code's keys and Monaco's API shape: multiple cursors, incremental highlighting, folding, find and replace, diagnostics, completions, a minimap and sticky scroll. It runs on Android, desktop (JVM) and the browser (Wasm) from one codebase, published as open source by Aardarch.

It draws only the lines on screen, so a keystroke costs the same in a 5,000-line file as in a 50-line one.

Upgrading from 0.5? 0.6 replaces the text field underneath the editor, and the API changes with it. The migration guide has every change with a before and after.

Why teams choose Aardink

One editor for Android, desktop and the web, built on Compose Multiplatform
Virtualised rendering and incremental tokenization that stay fast in large files
Completions, hover, signature help, quick fixes, diagnostics, go to definition and formatting
VS Code's keyboard shortcuts, plus touch selection handles and a keyboard toolbar on phones
Six built-in themes, or your own from EditorTheme or VS Code theme JSON
Language servers over streams on Android and the JVM, or WebSocket in the browser

Screenshots

Aardink editor showing bracket-pair colours. — Bracket-pair colours

Aardink editor showing breadcrumbs. — Breadcrumbs

Aardink editor showing codeblock. — Codeblock

Aardink editor showing decorations. — Decorations

Aardink editor showing folding. — Folding

Aardink editor showing material. — Material

Aardink editor showing minimap. — Minimap

Aardink editor showing multiple cursors. — Multiple cursors

Aardink editor showing occurrences. — Occurrences

Aardink editor showing overview ruler. — Overview Ruler

Aardink editor showing selection handles. — Selection handles

Aardink editor showing diagnostics. — Diagnostics

Aardink editor showing sticky scroll. — Sticky scroll

Aardink editor showing whitespace rendering. — Whitespace rendering

Aardink editor showing word wrap. — Word wrap

Aardink editor showing wrap indent. — Wrap Indent

Built-in themes

Aardink editor in the Material Dark theme. — Material Dark

Aardink editor in the Material Light theme. — Material Light

Aardink editor in the Midnight Ocean theme. — Midnight Ocean

Aardink editor in the Solarized Dark theme. — Solarized Dark

Aardink editor in the VS Code Dark theme. — VS Code Dark

Aardink editor in the VS Code Light theme. — VS Code Light

Add to your project

Gradle (Kotlin DSL with version catalog)

Declare the dependencies in gradle/libs.versions.toml. aardink-languages adds the built-in languages; leave it out if you bring your own.

[versions]
aardink = "0.8.0"

[libraries]
aardink = { module = "com.aardarch:aardink", version.ref = "aardink" }
aardink-languages = { module = "com.aardarch:aardink-languages", version.ref = "aardink" }

Then reference them from your module's build.gradle.kts:

dependencies {
    implementation(libs.aardink)
    implementation(libs.aardink.languages)
}

Each artifact is a Kotlin Multiplatform publication, so com.aardarch:aardink resolves to the Android, JVM or Wasm build automatically.

Maven

<dependency>
  <groupId>com.aardarch</groupId>
  <artifactId>aardink</artifactId>
  <version>0.8.0</version>
</dependency>
<dependency>
  <groupId>com.aardarch</groupId>
  <artifactId>aardink-languages</artifactId>
  <version>0.8.0</version>
</dependency>

npm (any JavaScript app)

The ready-built browser editor, with the built-in languages and themes and the same version number. SeeUsing Aardink in a web app.

pnpm add @aardarch/aardink-web@0.8.0

Feature walkthrough

Pick a language: LanguageRegistry.withBuiltIns() holds Kotlin, TypeScript, JSON, TOML, XML, HTML, CSS and Markdown. Add your own as a Kotlin tokenizer or a Monarch grammar.
Create editor state: rememberCodeEditorState takes the initial text and the language's tokenizer. Read state.text and state.selections, and edit withstate.applyTextEdits(...).
Render the editor: CodeEditorLayout takes the state, the language service and folding provider, and EditorOptions to turn on the minimap, sticky scroll and more.
Wire up language intelligence: with a language service, the editor collects diagnostics itself and offers completions, hover and quick fixes at the caret. Connect a language server through aardink-languages-lsp.
Apply your brand: provide an EditorTheme throughLocalEditorTheme, from the EditorThemes presets or parsed VS Code theme JSON.

Module walkthrough

Aardink publishes four artifacts on Maven Central, so you can adopt only what you need:

com.aardarch:aardink — the editor library: composables, state, theming and the language-service interfaces. It is language-agnostic.
com.aardarch:aardink-languages — built-in language definitions for common formats.
com.aardarch:aardink-languages-lsp — a bridge to an external Language Server over JSON-RPC (stream transport on JVM/Android, WebSocket in the browser).
com.aardarch:aardink-editor-web — browser only: mounts the editor into a DOM element behind a small JavaScript-friendly API.

The npm package @aardarch/aardink-web is the ready-built browser editor on top ofaardink-editor-web.

Guides and changelog

Using Aardink in a web app
Migrating from Aardink 0.5 to 0.6
Changelog — what changed in each release

API reference

Browse the API reference —16 packages,178 classes.

Jump straight to module overviews: editor · languages · languages-lsp · editor-web

Source

The module's source code is hosted on GitHub.