Skip to content
ACMS ACMS Docs

Vanilla JS

ACMS works with plain JavaScript — no framework required. This guide covers using ACMS in vanilla JS projects, static sites, and any environment where you write plain HTML and JavaScript.

Installation

Section titled “Installation”
Terminal window
npm install @useacms/client @useacms/cli

Or use a CDN for quick prototyping:

<script type="module">
  import { acms } from 'https://esm.sh/@useacms/client';
</script>

Basic Usage

Section titled “Basic Usage”

With ES Modules

Section titled “With ES Modules”
<!DOCTYPE html>
<html>
<body>
  <h1 id="title"></h1>
  <p id="subtitle"></p>


  <script type="module">
    import { acms } from '@useacms/client';


    document.getElementById('title').textContent = acms.hero.title;
    document.getElementById('subtitle').textContent = acms.hero.subtitle;
  </script>
</body>
</html>

With a Bundler

Section titled “With a Bundler”

If you’re using a bundler (Vite, webpack, Parcel, esbuild):

main.js
import { acms } from '@useacms/client';


document.querySelector('.hero-title').textContent = acms.hero.title;
document.querySelector('.hero-subtitle').textContent = acms.hero.subtitle;
document.querySelector('.cta-link').href = acms.hero.ctaLink;
document.querySelector('.cta-link').textContent = acms.hero.ctaText;

Reactive Updates

Section titled “Reactive Updates”

Subscribe to content changes for live updates:

import { acms, subscribe } from '@useacms/client';


function render() {
  document.getElementById('title').textContent = acms.hero.title;
  document.getElementById('subtitle').textContent = acms.hero.subtitle;
}


// Initial render
render();


// Re-render on content changes
subscribe(() => {
  render();
});

Configuration

Section titled “Configuration”

Create acms.config.ts (or .js) in your project root:

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


export default defineConfig({
  dev: localFile({ path: './acms.json' }),
  production: githubGist({
    token: process.env.GITHUB_TOKEN,
    gistId: process.env.GIST_ID,
  }),
});

Development Setup

Section titled “Development Setup”
Terminal window
# Terminal 1: ACMS dev server
acms dev


# Terminal 2: Your dev server (Vite, live-server, etc.)
npx vite        # or any static file server

DOM Manipulation Patterns

Section titled “DOM Manipulation Patterns”

Setting Text Content

Section titled “Setting Text Content”
import { acms } from '@useacms/client';


document.querySelector('h1').textContent = acms.hero.title;

Setting Attributes

Section titled “Setting Attributes”
document.querySelector('img.logo').src = acms.brand.logo;
document.querySelector('a.cta').href = acms.hero.ctaLink;

Rendering Lists

Section titled “Rendering Lists”
const list = document.getElementById('features');


acms.features.forEach((feature) => {
  const li = document.createElement('li');
  li.textContent = feature;
  list.appendChild(li);
});

Conditional Display

Section titled “Conditional Display”
const banner = document.getElementById('banner');
banner.style.display = acms.banner.visible ? 'block' : 'none';
banner.querySelector('p').textContent = acms.banner.message;

Template Literals

Section titled “Template Literals”

Use template literals for building HTML strings:

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


document.getElementById('app').innerHTML = `
  <header>
    <h1>${acms.hero.title}</h1>
    <p>${acms.hero.subtitle}</p>
  </header>
  <main>
    <ul>
      ${acms.features.map((f) => `<li>${f}</li>`).join('')}
    </ul>
  </main>
  <footer>
    <p>${acms.footer.copyright}</p>
  </footer>
`;

Web Components

Section titled “Web Components”

ACMS works well with custom elements:

import { acms, subscribe } from '@useacms/client';


class AcmsText extends HTMLElement {
  connectedCallback() {
    const path = this.getAttribute('path');
    this.render(path);


    subscribe(() => this.render(path));
  }


  render(path) {
    const keys = path.split('.');
    let value = acms;
    for (const key of keys) {
      value = value[key];
    }
    this.textContent = value;
  }
}


customElements.define('acms-text', AcmsText);
<h1><acms-text path="hero.title"></acms-text></h1>
<p><acms-text path="hero.subtitle"></acms-text></p>

Next Steps

Section titled “Next Steps”