@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

| Method | Alias | Registers As | Example | With Default | | ------------ | ------ | ------------ | ----------------------- | ------------------------------ | | (implicit) | — | string | acms.hero.title | — | | () | — | string | acms.hero.title() | acms.hero.title("Welcome") | | .str() | .s() | string | acms.hero.title.str() | acms.hero.title.s("Welcome") | | .int() | .i() | number | acms.count.int() | acms.count.i(42) | | .num() | .n() | number | acms.price.num() | acms.price.n(9.99) | | .bool() | .b() | boolean | acms.show.bool() | acms.show.b(true) | | .text() | — | text | acms.bio.text() | acms.bio.text("Long...") | | .img() | — | image | acms.logo.img() | acms.logo.img("/pic.jpg") | | .list() | — | array | acms.tags.list() | acms.tags.list(["a","b"]) |

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