Esqia

An inline MDX editor for Next.js.

npm
npm install -D esqia

Press ⌘ ⌥ E to enter edit mode or use the .

How It Works

Click into any markdown on the page and edit it.

Press / on to insert headings, code blocks and line breaks.

Select text to apply bold, italic, code, links or your own styles.

Drag any block to move it, including demos.

Supports your already existing MDX components.

Images and videos work just like any other blocks.

Keyboard Shortcuts

Switch between reading and editing
⌘⌥E
Save / Exit edit mode
Esc
Open the insert menu
/
Move the block up
⌘⇧↑
Move the block down
⌘⇧↓
Undo the last change inside the editor
⌘Z
Redo the latest undo
⌘⇧Z

Setup

Add esqia/remark after your other remark plugins and wrap your Next.js config with withEsqia.

next.config.ts
import { withEsqia } from "esqia/next";

const withMDX = createMDX({
  options: {
    remarkPlugins: [
      ...(process.env.NODE_ENV === "development" ? ["esqia/remark"] : []),
    ],
  },
});

export default withEsqia(withMDX(nextConfig));

Then add the <Esqia /> component to your root layout. Esqia only runs in development, so nothing changes in production.

app/layout.tsx
import { Esqia } from "esqia";

{process.env.NODE_ENV === "development" && <Esqia />}

To configure it, pass options as the second argument to withEsqia.

next.config.ts
export default withEsqia(withMDX(nextConfig), {
  snippets: [{ name: "Demo", source: "<Demo />" }],
  marks: [{ name: "Serif", tag: "em", className: "font-serif" }],
  smartypants: { dashes: false },
});

snippets are blocks you can insert while writing, like your own components. Type / on an empty line to pick one.

next.config.ts
export default withEsqia(withMDX(nextConfig), {
  snippets: [
    { name: "Demo", source: "<Demo />" },
    { name: "Newsletter", source: "<Newsletter />" },
  ],
});

marks add buttons to the toolbar that appears when you select text, like one for a serif font.

next.config.ts
export default withEsqia(withMDX(nextConfig), {
  marks: [{ name: "Serif", tag: "em", className: "font-serif" }],
});

smartypants takes the same settings as remark-smartypants, if your site uses it, so quotes and dashes look right while you type.

next.config.ts
export default withEsqia(withMDX(nextConfig), {
  smartypants: { dashes: false },
});