Skip to content
Galley Editor Galley Editor
Galley Editor logo

Galley Editor

A React Markdown editor that keeps Markdown as source text and renders it in place while you write.
Quick Start API Reference

Galley is for React apps that need Markdown editing without a separate Markdown-to-HTML preview pane. It uses CodeMirror 6 and Lezer’s Markdown parser to hide syntax marks when the cursor leaves a node, then reveal raw Markdown when the user edits that node.

Live preview, not HTML conversion

Markdown remains the document format. Galley decorates the editor view instead of maintaining a second rendered document.

Designed for product surfaces

Bring your own toolbar, upload pipeline, renderer hooks, and CSS tokens while keeping the core editor controlled.

Extensible at CodeMirror depth

Use built-in renderers, register custom plugins, or add CodeMirror extensions through the public API.

Start Here

Section titled “Start Here”
Install Galley Package installation, peer dependencies, and CSS import choices.
Build an editor A controlled React example with modes, events, and a ref.
Style the surface Themes, semantic classes, CSS variables, and app-owned chrome.
Use commands Toolbar actions, keyboard shortcuts, custom commands, and tables.
Extend rendering Custom plugins, image renderers, code highlighters, and link handling.
Handle uploads Paste/drop file flows, progress reporting, overlays, and placeholders.

Shared Theme Package

Section titled “Shared Theme Package”

The built-in Galley palettes and design tokens are published as a separate dependency-free package, @inkyquill/galley-themes. It exports the frozen catalog of built-in themes (getTheme, listThemesByScheme, isThemeId, BUILT_IN_THEMES) and maps any theme to the --app-* / --ge-* CSS variable contract that the editor consumes:

import { getTheme, themeToCssVariables } from '@inkyquill/galley-themes';


const variables = themeToCssVariables(getTheme('galley-light')!);
// { colorScheme: 'light', '--app-bg': '#f6f4ef', '--ge-color-bg': '#fbfaf7', ... }

The result is a plain style object, so it can be spread onto a React style prop or applied to a DOM element with Object.assign(element.style, variables) — no React or DOM APIs are required from the package itself.

The optional thoth-light and thoth-dark entries adapt the Thoth Palette, whose own repository contains the canonical colors and exports for web, terminals, Kate, and VS Code. For example, themeToCssVariables(getTheme('thoth-dark')!) produces the editor and app CSS variables for the dark palette. Galley’s default themes are unchanged.

Current Scope

Section titled “Current Scope”

Galley is currently v0.16.0 and still pre-1.0. The documented API is the intended public surface for the current package, but minor releases may still refine behavior before the first stable release.