feat: config editor

[stevensJourney]

#Overview

The new PowerSync CLI uses the concept of "configuration as code" to declare the PowerSync service configuration. This involves editing local service.yaml and sync.yaml files.

A well configured editor can use our JSON schemas for validation, hover comments and autocomplete. We document this in the README and provide a basic method for configuring a VSCode based editor - e.g.

powersync init cloud --vscode

Will configure settings.json in the .vscode folder to declare out !env YAML custom tags.

The above makes a couple of assumptions:

• Users have a well configured VSCode based editor available
• Users have the YAML extension for VSCode installed
• Users using other editors need to figure this out for themselves.

Since we're shipping our own Node.js based CLI. We have a lot of power. We can ship the CLI with its own editor which is preconfigured for the best DX.

This PR adds a webapp editor which edits the service.yaml and sync.yaml files. This webapp is built with TanStack Start. The front-end uses monaco-yaml to power the YAML features. The backend proves the front-end with file read and write capabilities. This is currently implemented as a TanStack start server function.

The command

powersync edit config

Spawns the TanStack Start server and opens the webapp on the local browser.

Extras:

The web editor now also validates and shows sync config warnings and errors inline. This involves moving some common sync config validation logic to the core-api package - where the TanStackStart server runs these validations for the client. The powersync validate command has also been updated to show the line and column number for validation warnings and errors.

self-sync-validation.mov

[Copilot]

Pull request overview

Adds a built-in, Monaco-based configuration editor (TanStack Start + Nitro) that the PowerSync CLI can launch locally via powersync edit config, alongside supporting schema/validation and monorepo tooling updates.

Changes:

• Introduces a new packages/editor web app for editing service.yaml + sync-config.yaml with JSON-schema validation and sync-rules validation markers.
• Adds a new CLI plugin (plugins/config-edit) that serves the built editor and opens it in the browser.
• Extends schema generation to include a sync-config JSON schema and refactors CLI validation output plumbing.

Reviewed changes

Copilot reviewed 71 out of 77 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
plugins/docker/package.json	Updates service schema/type dependency versions.
plugins/docker/eslint.config.mjs	Adds package-level ESLint config inheriting root.
plugins/config-edit/tsconfig.json	Adds TS project config for new CLI plugin.
plugins/config-edit/src/commands/edit/config.ts	Implements powersync edit config command to run local editor server.
plugins/config-edit/package.json	Defines new config-edit plugin package and dependencies.
plugins/config-edit/eslint.config.mjs	Adds ESLint config + ignores built editor dist.
plugins/config-edit/.gitignore	Ignores editor-dist in plugin workspace.
packages/schemas/src/scripts/create-schemas.ts	Generates sync-config.json schema output.
packages/schemas/package.json	Exposes sync schema export + adds lint script/dependency updates.
packages/schemas/eslint.config.mjs	Adds package-level ESLint config inheriting root.
packages/editor/vite.config.ts	Adds Vite config for TanStack Start + Nitro build.
packages/editor/tsconfig.json	Adds TS config for editor app with workspace references.
packages/editor/src/utils/yaml-schemas.ts	Maps YAML filenames to bundled JSON schemas for Monaco YAML.
packages/editor/src/utils/files/files.ts	Defines editor request/response shapes (Zod validators).
packages/editor/src/utils/files/files.server.ts	Implements server-side sync-rules validation via CLI core.
packages/editor/src/utils/files/files.functions.ts	Implements TanStack Start server functions for read/write/validate.
packages/editor/src/styles/monaco.css	Monaco-specific CSS tweaks.
packages/editor/src/styles.css	Tailwind theme variables + base styling for the editor app.
packages/editor/src/routes/index.tsx	Redirects / to /files.
packages/editor/src/routes/files/index.tsx	Empty-state / loading view for the files workspace.
packages/editor/src/routes/files/$filename.tsx	Route that renders the selected file editor widget.
packages/editor/src/routes/files.tsx	Main layout route with sidebar navigation + outlet.
packages/editor/src/routes/__root.tsx	Root document shell, QueryClient provider, devtools, header.
packages/editor/src/router.tsx	Creates TanStack router and registers route types.
packages/editor/src/routeTree.gen.ts	Generated TanStack Router route tree.
packages/editor/src/polyfills/buffer.ts	Attempts to polyfill Buffer for browser runtime.
packages/editor/src/placeholder.test.ts	Placeholder Vitest test to keep package in CI.
packages/editor/src/lib/utils.ts	Adds cn() utility for Tailwind + clsx merges.
packages/editor/src/lib/themes.ts	Defines a custom Monaco theme (registration helper).
packages/editor/src/env.ts	Parses editor env payload (POWERSYNC_PROJECT_CONTEXT).
packages/editor/src/components/ui/accordion.tsx	Shadcn/Radix accordion wrapper component.
packages/editor/src/components/hooks/useFiles.ts	Data fetching + global file state tracking via RxJS.
packages/editor/src/components/file-editors/use-sync-rules-validation-markers.ts	Debounced server-side sync-rules validation -> Monaco markers.
packages/editor/src/components/file-editors/resolve-editor-widget-for-filename.ts	Maps filenames to appropriate editor providers.
packages/editor/src/components/file-editors/SyncConfigYamlEditorWidgetProvider.tsx	Sync-config editor provider with validation hook enabled.
packages/editor/src/components/file-editors/ServiceYamlEditorWidgetProvider.tsx	Service editor provider with YAML custom tags enabled.
packages/editor/src/components/file-editors/BaseEditorWidget.tsx	Shared editor UI shell (save/reset/status/validation panel).
packages/editor/src/components/MonacoEditor.tsx	Monaco + monaco-yaml configuration + workers wiring.
packages/editor/src/components/Header.tsx	Top header/navigation component.
packages/editor/scripts/copy-editor-dist.mjs	Copies Nitro build output into CLI plugin editor-dist.
packages/editor/public/tanstack-word-logo-white.svg	Adds static asset.
packages/editor/public/robots.txt	Adds robots.txt.
packages/editor/public/powersync-logo-dark.svg	Adds static asset.
packages/editor/public/manifest.json	Adds web manifest.
packages/editor/public/logo.png	Adds static image asset.
packages/editor/public/favicon.ico	Adds favicon asset.
packages/editor/package.json	Defines editor package scripts/deps (TanStack Start, Nitro, Monaco, etc.).
packages/editor/eslint.config.mjs	Adds editor package ESLint config + ignores generated outputs.
packages/editor/components.json	Adds shadcn/ui configuration for the editor package.
packages/editor/README.md	Adds editor package documentation.
packages/editor/.gitignore	Adds editor package ignore list.
packages/editor/.cursorrules	Adds Cursor/shadcn instructions file.
packages/editor/.cta.json	Adds create-tanstack-app metadata/config file.
packages/cli-core/src/utils/yaml.ts	Updates yaml-language-server schema URLs to unpkg.
packages/cli-core/src/index.ts	Re-exports new sync-rules validation API.
packages/cli-core/src/api/validate-sync-rules.ts	Adds shared sync-rules validation helpers + diagnostics mapping.
packages/cli-core/package.json	Bumps management/service client versions + adds lint script.
packages/cli-core/eslint.config.mjs	Adds package-level ESLint config inheriting root.
eslint.config.mjs	Documents root ESLint config usage pattern for packages.
cli/tsconfig.json	Adds project reference for new config-edit plugin.
cli/src/commands/validate.ts	Refactors validate command to use shared test runner helpers.
cli/src/commands/generate/schema.ts	Adjusts sync rules parsing API usage.
cli/src/commands/deploy/sync-config.ts	Encodes cloud IDs as BSON ObjectId for deploy request.
cli/src/commands/deploy/index.ts	Encodes cloud IDs as BSON ObjectId for deploy request.
cli/src/api/run-validation-tests.ts	New shared validation test runner + formatting utilities.
cli/package.json	Adds config-edit plugin and bson dependency; bumps service deps.
cli/eslint.config.mjs	Adds CLI package ESLint config inheriting root.
cli/README.md	Documents new powersync edit config command in CLI docs.
README.md	Updates root README content (currently appears truncated).
.vscode/settings.json	Excludes generated route tree from watcher/search; marks read-only.
.prettierignore	Ignores .output, editor-dist, and generated route tree.
.husky/pre-commit	Switches to running pnpm lint:fix during pre-commit.
.github/workflows/test.yml	Increases Node heap for CI builds; minor workflow tidy.
.github/workflows/onRelease.yml	Increases Node heap for release workflow builds.
.github/workflows/onPushToMain.yml	Increases Node heap for main-branch workflow builds.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Chriztiaan]

Minor nits. LG2M.

[Chriztiaan]

Looks good, probably my favourite part of the tool aside from the login flow 🤣