The editor

The preview pane shows your real site, and it updates as you type, before anything is saved. Discard puts everything back the way it was on disk.

For keystroke-level preview, pages consume content through the useEditsy hook in a client component:

"use client";
import { useEditsy } from "editsy/react";
import homeContent from "@/content/home";

export default function Home() {
  const home = useEditsy(homeContent, "content/home.ts");
  return <h1>{home.hero.heading}</h1>;
}

When a file exports several pieces of content, name the one the hook consumes with a fragment: useEditsy(hero, "content/home.ts#hero").

On the live site the hook does nothing. Pages without it still preview on save.

Markdown fields edit as formatted text: bold looks bold, a dropdown sets the current paragraph's style (text, heading, quote), and there's underline, strikethrough, lists, and links. The file underneath keeps clean markdown. Flip the md toggle to see or edit it raw.

Sites render those fields with the Markdown component from editsy/react. It escapes all HTML and restricts link targets, so content can never inject markup into your pages.

The editor can wear your site's colors and font with one optional block in editsy.config.ts:

export default {
  content: ["content/**/*.{ts,json,md}"],
  theme: {
    accent: "#2f8f85",
    font: "Georgia, serif",
  },
};

Keys: accent, accentInk, bg, panel, ink, muted, line, gold (the offset shadows), font. Anything you don't set keeps the editsy defaults.

Image fields pick from the files already in your public folder, thumbnails included. There's an upload button too: files are checked server-side (type, size, and that the bytes really are what the extension claims), land under uploads/, and never overwrite anything. On a deployed site an upload is its own commit, like a media library.

The editor keeps a separate draft per file, so you can edit three pages and save them together: the summary lists what changed in plain words, grouped by page, with the exact file diff one click away for those who want it. Saves are AST rewrites of your TypeScript, so comments, quote style, and formatting survive untouched.

If a file changed underneath you (a teammate, a coding agent, a git pull), the save is refused with a reload prompt instead of overwriting anyone's work.

The sidebar groups files by folder, and once a project has more than a few, a filter box appears above the list. Need a new post? Open an existing one and hit duplicate: you get a copy under the name you choose, ready to edit. On a deployed site the copy is created as a commit right away, so it's safe the moment it exists.

Unsaved edits are mirrored into your browser's storage as you type. Close the tab by accident, or crash entirely, and the editor offers them back the next time you open that file, as long as the file hasn't moved on without you. And the whole editor works at phone width, so you can fix a typo from your phone and publish it on the spot.