@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>

SSR / SSG Helpers

For server-side rendering and static site generation, the client exports helpers to pre-populate content:

import { setContent, loadContent } from "@useacms/client";

// Synchronous: inject content you already have
setContent({ hero: { title: "Hello" } });

// Async: fetch from a URL and populate the cache
await loadContent("https://example.com/api/content");

• setContent(data) — Populate the client cache synchronously with a content object. Useful in getServerSideProps, +page.server.ts, or Astro frontmatter.
• loadContent(url?) — Fetch content from a URL (defaults to the configured content endpoint) and populate the cache. Returns a promise.

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