@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"]) | | .loc() | — | location | acms.office.loc() | acms.office.loc({lat:0,lng:0}) | | .color() | .col() | color | acms.brand.color() | acms.brand.col("#ff0000") | | .md() | .markdown() | markdown | acms.bio.md() | acms.bio.md("# Hello") | | .cal() | .calendar() | calendar | acms.events.cal() | acms.events.cal([...]) |

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