Skip to content
ACMS ACMS Docs

Getting Started

ACMS (Any Content Management System) is a framework-agnostic, schema-less CMS that automatically detects and manages content fields at runtime. Replace a string with acms.something and it becomes instantly editable — no schema definitions, no boilerplate, no lock-in.

Installation

Section titled “Installation”

Install the client library and CLI tool:

Terminal window
# npm
npm install @useacms/client @useacms/cli


# pnpm
pnpm add @useacms/client @useacms/cli


# yarn
yarn add @useacms/client @useacms/cli

Quick Setup

Section titled “Quick Setup”

1. Create a Configuration File

Section titled “1. Create a Configuration File”

Create acms.config.ts in your project root:

import { defineConfig } from '@useacms/client';
import { localFile } from '@useacms/cli/adapters';


export default defineConfig({
  dev: localFile({ path: './acms.json' }),
});

This tells ACMS to store your content in a local acms.json file during development.

2. Start the Dev Server

Section titled “2. Start the Dev Server”

In one terminal, start the ACMS dev server:

Terminal window
npx acms dev

This starts a local server on port 3001 that handles field registration, content serving, and type generation.

3. Use Content in Your Code

Section titled “3. Use Content in Your Code”

Import and use the acms object in your application. ACMS works with any JavaScript framework:

// React
import { acms } from '@useacms/client';


export default function Hero() {
  return (
    <section>
      <h1>{acms.hero.title}</h1>
      <p>{acms.hero.subtitle}</p>
    </section>
  );
}
<!-- Vue -->
<template>
  <section>
    <h1>{{ acms.hero.title }}</h1>
    <p>{{ acms.hero.subtitle }}</p>
  </section>
</template>


<script setup>
import { acms } from '@useacms/client';
</script>
<!-- Svelte -->
<script>
  import { acms } from '@useacms/client';
</script>


<section>
  <h1>{acms.hero.title}</h1>
  <p>{acms.hero.subtitle}</p>
</section>

4. Fields Are Auto-Registered

Section titled “4. Fields Are Auto-Registered”

When your app renders, the proxy detects that acms.hero.title and acms.hero.subtitle are accessed. It automatically registers them with the dev server, which creates entries in acms.json:

{
  "hero": {
    "title": "",
    "subtitle": ""
  },
  "_meta": {
    "hero.title": {
      "type": "string",
      "lastAccessed": "2025-01-15T10:30:00.000Z"
    },
    "hero.subtitle": {
      "type": "string",
      "lastAccessed": "2025-01-15T10:30:00.000Z"
    }
  }
}

5. Edit Your Content

Section titled “5. Edit Your Content”

You have several options for editing content:

Option A: Edit acms.json directly

Open acms.json and set values:

{
  "hero": {
    "title": "Welcome to My Site",
    "subtitle": "Built with ACMS"
  }
}

Option B: Use the built-in dashboard

Visit http://localhost:3001/dashboard to see a visual editor for all your fields.

Option C: Use the REST API

Terminal window
curl -X POST http://localhost:3001/api/field \
  -H "Content-Type: application/json" \
  -d '{"path": "hero.title", "value": "Welcome to My Site"}'

6. See Changes Instantly

Section titled “6. See Changes Instantly”

Your application re-fetches the updated content and renders the new values. TypeScript definitions are regenerated automatically, giving you full IDE autocomplete.

What Happens Under the Hood

Section titled “What Happens Under the Hood”
  1. You access acms.hero.title in your code.
  2. The client proxy intercepts the property access.
  3. If the field doesn’t exist yet, the client POSTs to http://localhost:3001/api/register.
  4. The dev server creates the field in acms.json with an empty value.
  5. The dev server regenerates acms.d.ts with updated TypeScript types.
  6. You edit the value via JSON, dashboard, or API.
  7. Your app re-fetches and displays the updated content.

Next Steps

Section titled “Next Steps”