@useacms/client

Framework-agnostic client for ACMS — the schema-less, zero-config content management system.

Replace any string in your code with acms.something and it becomes instantly editable. No schema definitions, no boilerplate.

Install

npm install @useacms/client

Usage

import { acms } from "@useacms/client";

// Access content — fields are auto-registered
acms.hero.title; // ""  (auto-registered as string)
acms.hero.subtitle; // ""

// Set default values
acms.hero.title("Welcome to my site");

Type Methods

React JSX Setup

ACMS includes a custom JSX runtime that automatically resolves proxy values in JSX expressions. Add this to your tsconfig.json:

{
  "compilerOptions": {
    "jsxImportSource": "@useacms/client"
  }
}

This lets you write <h1>{acms.hero.title}</h1> directly — the runtime handles converting the proxy to a string.

Works with any JavaScript framework:

// React
<h1>{acms.hero.title}</h1>

// Vue
<h1>{{ acms.hero.title }}</h1>

// Svelte
<h1>{acms.hero.title}</h1>

Reactive Updates

import { acms, subscribe } from "@useacms/client";

const unsubscribe = subscribe(() => {
  console.log("Content updated:", acms.hero.title);
});

Configuration

Create acms.config.ts in your project root:

import { defineConfig } from "@useacms/client";
import { localFile, githubGist } from "@useacms/cli/adapters";

export default defineConfig({
  dev: localFile(),
  production: githubGist({
    token: process.env.GITHUB_TOKEN,
    gistId: "your-gist-id",
  }),
  strategy: "runtime",
});

Type Safety

Run acms dev to auto-generate TypeScript definitions. You get full IDE autocomplete for all your content fields.

Learn More

• Documentation
• GitHub