Sync Core

@servly/sync-core is the engine that powers real-time synchronization between your design system source of truth and your codebase.

How It Works

1. Watch — Monitors your component registry for changes
2. Diff — Computes minimal changesets using CIF versioning
3. Transform — Applies framework-specific code generation
4. Apply — Writes updated code to your project

Architecture

Registry (CIF manifests)
    │
    ├─ sync-core (diff engine)
    │   ├─ @servly/runtime-react
    │   ├─ @servly/runtime-vue
    │   ├─ @servly/runtime-svelte
    │   ├─ @servly/runtime-angular
    │   └─ @servly/runtime-solid
    │
    └─ Your codebase

Configuration

Create a servly.config.ts in your project root:

import { defineConfig } from "@servly/cli";

export default defineConfig({
  registry: "https://registry.servly.app",
  framework: "react",
  output: "./src/components/servly",
  typescript: true,
});