inline-core 2.1.0 · v1 scope frozen

The client edits the site
on the page.

Content lives in versioned JSON files. Astro injects them at build time. An overlaid interface makes them editable right there in the page — and publishing writes a commit. No CMS, no database, no application server to watch over.

Read the documentation Try the simulator

$ npm create inline@latest my-site

npm create inline@latest my-site

$ pnpm create inline my-site

pnpm create inline my-site

$ bun create inline my-site

bun create inline my-site

A fresh site, editable locally, in four commands.

0databases

37 KBof overlay, loaded for the editor only

22documentation chapters

2languages, two URLs

example.com/admin

Changer l’image

fournil-au-petit-matin.webp 1600 × 900 · 8,4 Mo → 210 Ko

Description de l’image

Changer la vidéo

Adresse de la vidéo

youtube · aqz-KE-bpKQ

Menuiserie sur mesure

Agencement, restauration, pose. Depuis 1974.

content/accueil.fr.json 3 modifications

4 "hero": { 5− "titre": "Menuiserie sur mesure" 5+ "titre": "Menuiserie sur mesure, depuis 1974" 6− "image": { "src": "atelier.webp", … } 6+ "image": { "src": "fournil-au-petit-matin.webp", … } 7+ "film": { "provider": "youtube", "id": "aqz-KE-bpKQ" } 8 }

+images/fournil-au-petit-matin.webp210 Ko

Aucun fichier pour la vidéo : le schéma n’en retient que le fournisseur et l’identifiant.

a3f1c92 contenu : hero — compte machine, jeton restreint

The site

The visitor gets pre-built HTML. Nothing to query, nothing to wake up.

No video, no editing: the sequence above reproduces the six states a change actually goes through. Run the sequence for real →

The gesture

Six states, no editing suite

This is exactly what a change goes through, from the visit to the deployment.

01 The site The visitor gets pre-built HTML. Nothing to query, nothing to wake up.

02 The key One key, once, on /admin. No account to create, no password to reset.

03 Editing The overlay finds the editable fields and makes them editable where they are.

04 The media The photo is cropped and converted to WebP in the browser before it leaves. The video never enters the repository: the schema keeps only the provider and the id.

05 Publishing The changes go to the repository, signed by a machine account with restricted rights.

06 Going live The public site is regenerated. The content history is the Git history.

The problem

A brochure site does not need a CMS. It needs an autonomous client.

Between “the client can change nothing” and “let us install a full CMS”, a step was missing. inline is exactly that step.

With nothing

The client emails you

A comma to fix becomes a ticket.
You bill ten minutes or you give them away.
The site goes stale because nobody touches it.

With a CMS

You maintain an infrastructure

A database, updates, backups.
A back office the client crosses to change one word.
An attack surface, for three pages of content.

With inline

Content stays code

JSON files in the repository, validated by a schema.
The client edits on the page, with no interface to learn.
Nothing more to host: the site stays static.

How it works

Two flows, and nothing in between

The reading flow knows nothing about editing. The editing flow never writes into the live site: it writes into the repository, and lets the build chain do its job.

Reading From file to page 4

01 content/*.json Content, versioned, readable, diffable.
02 Zod schema The build fails if a field is missing or changes type.
03 Astro Content is injected into the HTML at build time.
04 Static HTML Served as is. No call at visit time.

Editing From page to repository 4

01 Site key Checked by a server function, never by the browser alone.
02 Overlay Loaded for the editor only. The visitor never downloads it.
03 Commit Publishing writes to the repository through a restricted token.
04 CI + deploy The site is rebuilt and put back online.

The consequenceContent and code share one history. Rolling back is a git revert, not a backup restore.

What it looks like

Three files, and the page becomes editable

No intermediate language to learn: JSON, a schema, an Astro component.

content/home.json

{
  "titre": "Berthaud Workshop",
  "accroche": "Bespoke joinery since 1974.",
  "services": [
    { "id": "svc-1", "nom": "Fitting", "texte": "Kitchens and bookcases." },
    { "id": "svc-2", "nom": "Restoration", "texte": "Antique furniture and floors." }
  ]
}

{
  "titre": "Berthaud Workshop",
  "accroche": "Bespoke joinery since 1974.",
  "services": [
    { "id": "svc-1", "nom": "Fitting", "texte": "Kitchens and bookcases." },
    { "id": "svc-2", "nom": "Restoration", "texte": "Antique furniture and floors." }
  ]
}

src/content/schema.ts

import { z } from 'zod';

export const home = z.object({
  titre: z.string().min(1),
  accroche: z.string().min(1),
  services: z.array(
    z.object({
      id: z.string(),
      nom: z.string(),
      texte: z.string(),
    }),
  ),
});

import { z } from 'zod';

export const home = z.object({
  titre: z.string().min(1),
  accroche: z.string().min(1),
  services: z.array(
    z.object({
      id: z.string(),
      nom: z.string(),
      texte: z.string(),
    }),
  ),
});

src/pages/index.astro

---
import { field, list } from 'inline-core';
import home from '../../content/home.json';
---

<h1 {...field('home.titre')}>{home.titre}</h1>
<p {...field('home.accroche')}>{home.accroche}</p>

<ul>
  {home.services.map((service) => (
    <li {...list('home.services', service.id)}>
      <h2 {...field('nom')}>{service.nom}</h2>
      <p {...field('texte')}>{service.texte}</p>
    </li>
  ))}
</ul>

---
import { field, list } from 'inline-core';
import home from '../../content/home.json';
---

<h1 {...field('home.titre')}>{home.titre}</h1>
<p {...field('home.accroche')}>{home.accroche}</p>

<ul>
  {home.services.map((service) => (
    <li {...list('home.services', service.id)}>
      <h2 {...field('nom')}>{service.nom}</h2>
      <p {...field('texte')}>{service.texte}</p>
    </li>
  ))}
</ul>

terminal

npm create inline@latest my-site -- --nom "My site" --courriel contact@example.com
cd my-site && npm install

npm run mock:git          # fake local repository, in a first terminal
npm run build             # build the site
npm run serve:functions   # serve the site AND the functions

npm create inline@latest my-site -- --nom "My site" --courriel contact@example.com
cd my-site && npm install

npm run mock:git          # fake local repository, in a first terminal
npm run build             # build the site
npm run serve:functions   # serve the site AND the functions

What it does

Enough for a brochure site. Nothing more.

Every line below is implemented and documented. The v1 scope is frozen: what is missing is missing on purpose.

Editing on the page Text, rich text, images, lists with stable ids. The client sees the result while typing.

Site key, no accounts One key per site, checked server-side, revocable with one command. No users to manage.

Mandatory Zod schema Content is typed. A structural mistake stops the build instead of breaking the page.

Publish by commit GitHub end to end, GitLab documented. Machine account, restricted token, one commit per publish.

Conflicts detected Two concurrent changes do not silently overwrite: the conflict is shown to the client.

Multilingual by URL One URL per language, no JavaScript switch. The documentation applies the rule it describes.

Images and media Uploaded from the page, formats checked, stable paths in the repository.

Theme held One style file to adapt. The client picks within the theme, never a free-form colour.

The documentation

Twenty-two chapters, and two step-by-step workshops

Written to be read once in order, then consulted in pieces. Two complete workshops add a guided path, from the first “npm create” to going live. Bilingual, with a search palette and an editing simulator.

Tutorials

A fresh, editable site in four commands

Follow the setup guide Read “Why this tool exists” Open the documentation

Front-end content editing for static sites. inline-core 2.1.0 · create-inline 1.2.0

The client edits the site
on the page.

Six states, no editing suite

A brochure site does not need a CMS. It needs an autonomous client.

The client emails you

You maintain an infrastructure

Content stays code

Two flows, and nothing in between

Three files, and the page becomes editable

Enough for a brochure site. Nothing more.

Twenty-two chapters, and two step-by-step workshops

A complete site, A to Z

Porting an HTML site

Why this tool exists

Local setup

The content model

Editing simulator

GitHub, end to end

Troubleshooting

Everything, on one page

A fresh, editable site in four commands

The client edits the siteon the page.

Six states, no editing suite

A brochure site does not need a CMS. It needs an autonomous client.

The client emails you

You maintain an infrastructure

Content stays code

Two flows, and nothing in between

Three files, and the page becomes editable

Enough for a brochure site. Nothing more.

Twenty-two chapters, and two step-by-step workshops

A complete site, A to Z

Porting an HTML site

Why this tool exists

Local setup

The content model

Editing simulator

GitHub, end to end

Troubleshooting

Everything, on one page

A fresh, editable site in four commands

The client edits the site
on the page.