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>;
}

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"],
  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.

Saving shows a plain summary of what changed, 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 the file changed on disk since you loaded it (a teammate, a coding agent, a git pull), the save is refused with a reload prompt instead of overwriting anyone's work.