Editor Showcase: Every Block You Can Use

This is a showcase post demonstrating every block the editor supports: headings, emphasis, links, lists, blockquotes, images, tables, code blocks with syntax highlighting, horizontal rules, and more. Use it as a reference for what your published posts can look like.

Rich text basics

You can make text bold, italic, or both at the same time. Add inline links that open in a new tab, drop inline code mid-sentence for technical terms, and highlight key phrases with emphasis.

Paragraphs support long-form writing with comfortable line-height for reading at 15px on desktop and 14px on mobile. The typography is tuned for editorial content, balancing density and whitespace.

Bullet lists

• Fast global CDN via Cloudflare R2
• Image optimization with sharp (WebP, q80)
• Full-text sanitization with sanitize-html
• Syntax highlighting via Shiki dual-theme

Numbered lists

1. Draft your post in the admin editor
2. Upload a cover image and any inline images
3. Preview, then publish with one click
4. Your post appears on /blog and in the RSS feed

Images

Inline images stretch to the full content width and are automatically rounded. They work in both light and dark mode.

Tables

Tables are great for comparisons, pricing, or structured data. The first row is a header:

Code blocks

Code blocks are syntax-highlighted server-side with Shiki using dual themes (github-light and github-dark). A copy button appears in the top-right of every block.

TypeScript

import { db } from "@/lib/db"
import { posts } from "@/lib/db/schema"
import { eq } from "drizzle-orm"

export async function getPublishedPost(slug: string) {
  const post = await db.query.posts.findFirst({
    where: eq(posts.slug, slug),
    with: { author: { columns: { name: true, image: true } } },
  })

  if (!post || post.status !== "published") return null
  return post
}

Shell

# Install dependencies and run the dev server
bun install
bun run db:start
bun run db:seed
bun run dev

JSON

{
  "name": "openlaunch",
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "db:seed": "bun run lib/db/seed.ts"
  }
}

Blockquotes

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

Horizontal rules & structure

Use a horizontal rule to separate major sections or signal a topic change.

What's next

Now you have a full reference post. Duplicate it to build your own, or delete it once you're comfortable with the editor. Every element you see here is available from the toolbar.

Happy writing.