Ultimate Blog Editor App

The Ultimate Blog Editor App is an open-source Next.js workspace that fuses Obsidian-style Markdown editing with Substack-style publishing, letting you write, preview, and store technical articles through a self-hosted Supabase backend.

What is the Ultimate Blog Editor App?

The Ultimate Blog Editor App is a self-hosted writing and content-management workspace built on the Next.js App Router, React 19, and the Lexical editor framework, released as open source by GitHub user Masculinn under the repository Masculinn/blog-editor. It accepts rich-text or Markdown input inside the browser editor and produces serialized, compressed documents that are rendered as MDX through next-mdx-remote-client, while drafts, posts, and banner images are persisted in Supabase tables and a Supabase storage bucket. The author deploys the same codebase to Netlify or Vercel and reads the resulting content from a statically generated Next.js Pages Router blog.

What makes the Ultimate Blog Editor App stand out?

• Dual editing modes — a Lexical-based rich-text surface and a Markdown mode toggled with Ctrl + M, so the same document can be written either visually or as raw Markdown.
• MDX viewer with error display — a document viewer toggled with Ctrl + / renders MDX output and surfaces compile errors from the compiled MDX source instead of failing silently.
• Media library with image optimization — uploads are converted to .webp and served from a Supabase storage bucket named banner, which the author uses as a public CDN endpoint.
• Command center — Ctrl + K opens a searchable tool palette (View Posts, View Drafts, Create Draft, Media Library, Manage Drafts, Manage Posts) navigable with arrow keys and Enter.
• Custom content components — MDX content components include charts rendered with recharts, with dedicated modules for editing, rendering, and conversion.
• Draft and post separation — two PostgreSQL tables, blog_posts and drafts, differ only in nullable columns, mirroring a separation-of-concerns model.
• Editing ergonomics — 50+ predefined background patterns, extensive English autocomplete, document serialization and compression, URL-based document state, and keyboard shortcuts with accessibility support.
• Tech stack — Next.js 16 or newer, React and React DOM 19 or newer, TypeScript 5 or newer, Lexical 0.49 or newer, Supabase JS 2.112.3 or newer, Tailwind CSS 4 or newer, shadcn 4.19 or newer, Base UI 1.7 or newer, plus React Hook Form and Zod for validation.

Who should use the Ultimate Blog Editor App?

• Technical bloggers who want to write Markdown locally but publish through their own database instead of a hosted newsletter platform.
• Developers building custom editors who need a reference for Lexical node, plugin, toolbar, and Markdown-transformer organization inside a components/editor/ tree.
• Next.js developers who want a working example of server actions, Supabase typegen, and MDX serialization wired together in one repository.
• Self-hosters who prefer owning their content in a Supabase project rather than renting space on Substack or keeping files only in Obsidian.

What can you do with the Ultimate Blog Editor App?

• Write and manage a personal technical blog: compose in rich text or Markdown, save into the drafts table, then promote finished pieces to blog_posts.
• Preview before publishing: toggle the MDX viewer to see how custom components and charts will render, and fix compile errors in place.
• Fork it into a custom editor product: swap the serialized custom components and curate the predefined tables to match a different content model.
• Power a static site: pair the stored posts with an SSG-rendered Next.js Pages Router blog, as the author does in the burakdev repository.

How does the Ultimate Blog Editor App work?

1. Clone the repository and run npm install on Node.js 22 or newer.
2. Create a Supabase project, paste the provided SQL to create the blog_posts and drafts tables, and add a storage bucket named banner.
3. Add a .env file with SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY, BUCKET_NAME, APP_TOKEN, and APP_USER_AGENT.
4. Run npx supabase login followed by npm run db:types to generate database types for the React actions.
5. Start npm run dev, which serves the app on port 36805.

Pricing

The Ultimate Blog Editor App is free and open source; the author states the stack costs nothing and that Supabase and Netlify free plans are sufficient even at scale. No paid tier is mentioned in the repository documentation.

Alternatives

Obsidian, a local Markdown note-taking app that the editor deliberately mimics for its writing experience, and Substack, a hosted newsletter platform the project borrows its publishing flexibility from. The editor was curated from the shadcn-editor repository by htmujahid, and the background patterns come from Patterncraft.

FAQ

Is the Ultimate Blog Editor App free?

Yes. The project is open source and the author states it costs nothing to run, with Supabase and Netlify free plans suitable for the workload. There is no paid tier, license fee, or subscription described anywhere in the documentation.

Do I need a Supabase account to run it?

Yes. You must create a Supabase organization and project, run two SQL snippets to create the blog_posts and drafts tables, and create a storage bucket named banner. The documentation warns not to start the dev server until the database environment and tables are configured.

Does it work on macOS and Linux?

It runs, but keyboard shortcuts are defined with the Control modifier by default. Unix-based users are told to edit the useKeyboardShortcut calls so the Meta key handles shortcuts instead, since macOS conventions differ from the shipped defaults.

Why does the Netlify build fail?

The author reports build failures caused by Netlify's external systems and provides a patch: add the environment keys SECRETS_SCAN_ENABLED=false and SECRETS_SCAN_OMIT_PATHS=.netlify/.next/cache alongside the existing Supabase keys in the Netlify dashboard.

What can the editor render beyond plain text?

It renders MDX through next-mdx-remote-client, including custom content components such as charts built with recharts, and it displays compilation errors for the generated MDX source so broken content can be fixed before publishing.