@useacms/editor

React components for building custom ACMS editing interfaces. Use these components to create your own content editing dashboard or embed editors directly into your application.

Installation

npm install @useacms/editor
# or
pnpm add @useacms/editor

Usage

Full Content Editor

The ContentEditor component renders a complete editing interface for all fields in your ACMS schema:

import { ContentEditor, createLocalApiClient } from "@useacms/editor";

const apiClient = createLocalApiClient("http://localhost:3001");

function App() {
  return <ContentEditor apiClient={apiClient} />;
}

Individual Field Editors

Use FieldEditor for granular control over individual fields:

import { FieldEditor } from "@useacms/editor";

function MyEditor({ field, onChange }) {
  return <FieldEditor field={field} onChange={onChange} />;
}

Available Components

| Component | Description | | ---------------- | ------------------------------------------------------ | | ContentEditor | Full editing interface with field grid and management | | FieldEditor | Single field editor that renders the appropriate input | | FieldGrid | Grid layout for multiple field editors | | StringEditor | Single-line text input | | TextEditor | Multi-line textarea | | NumberEditor | Numeric input with validation | | BooleanEditor | Toggle switch | | ArrayEditor | List management (add, remove, reorder) | | PoweredByBadge | "Powered by ACMS" badge component |

Hooks

• useContent(apiClient) — Fetches and manages content state with real-time updates via SSE

API Clients

• createLocalApiClient(baseUrl) — Client for the local ACMS dev server
• createShareApiClient(options) — Client for shared/platform ACMS instances

Documentation

Full documentation: https://acms.app/docs

License

AGPL-3.0-only