Skip to content
InlineCMS Docs

Quick Start (Static HTML).

Make any plain HTML page editable with a single script tag — no build step, no framework, no React shipped to visitors.

InlineCMS isn’t only for React and Vue apps. The @inlinecms/loader drop-in makes any HTML page editable with one <script> tag — a hand-written index.html, a page from a static site generator, a server-rendered template. No build step, no bundler, and visitors never download React.

1. Add the script tag

Section titled “1. Add the script tag”

Drop one tag at the end of your <body>. The only required attribute is your project API key:

<script
  src="/inlinecms.js"
  data-api-key="your-project-key"
  data-api-url="https://cms.yourdomain.com"
></script>

data-api-url is only needed when you self-host the API. The loader ships as two files — inlinecms.js (the lightweight binder every visitor loads) and inlinecms-editor.js (the React editor chrome). Host them in the same directory; the loader fetches the editor only when an actual editor opens the page, so visitors pay nothing for it.

2. Mark elements editable

Section titled “2. Mark elements editable”

Add inline-cms to any element you want editable, and give it a stable inline-cms-key:

<h1 inline-cms inline-cms-key="home-title">Welcome to our site</h1>
<p  inline-cms inline-cms-key="home-lede">We build great things.</p>
<a  inline-cms inline-cms-key="home-cta" href="/signup">Get started</a>

The key is how a stored edit finds its element again, so keep it stable across redeploys. The field type is inferred from the tag (<h1> → text, <div> → rich text, <img> → image, <a> → url, …); override it with inline-cms-type when you need to.

That’s the whole content model — no schemas, no migrations. The text you ship in the HTML is the fallback: visitors see it until something is published, and it stays as clean markup for SEO.

3. (Optional) Add a built-in component

Section titled “3. (Optional) Add a built-in component”

Built-in components render from a JSON config. The hero gallery is the same one the React SDK ships — here it’s driven by an attribute:

<div
  inline-cms-component="gallery"
  inline-cms-key="home-hero"
  inline-cms-config='{"layoutStyle":"1-4","media":[
    {"url":"/img/1.jpg","type":"image"},
    {"url":"/img/2.jpg","type":"image"}
  ],"defaultUrl":"/img/1.jpg"}'
></div>

The loader renders the gallery from this config so it’s visible (and crawlable) before anything is published. In edit mode an Edit gallery button opens the full media dialog; in view mode, clicking a tile opens the fullscreen lightbox — no React required for visitors.

4. Open the page as an editor

Section titled “4. Open the page as an editor”

There are two ways an editor gets in. The default, handoff, expects no on-page login: an editor opens the page from the InlineCMS dashboard’s “Enable editing” action, which sends them to your page with a one-time token. The loader exchanges it for a session and loads the editor chrome.

For quick local testing without the dashboard, switch to the on-page login pill:

<script
  src="/inlinecms.js"
  data-api-key="your-project-key"
  data-access="manual"
></script>

5. Edit and publish

Section titled “5. Edit and publish”

Once editing, the bottom toolbar drives everything — same chrome as the React SDK:

  • Click any outlined element and type. Bold/italic/links are preserved.
  • Save draft keeps changes private; Publish makes them live.
  • No redeploy. The published content replaces your HTML fallback on the next load.

What’s next

Section titled “What’s next”
Was this page helpful? Your feedback goes straight to the docs team.