Next.js 16 + MDX + Tailwind 4

notebook-blog-starter

The most aesthetic blog starter for Next.js

30 notebook-style MDX components. Book reader mode. Visual editor. Ship in a day.

supacode.in/blog/weekend-in-kyoto

Weekend in Kyoto

Best visited in spring for cherry blossoms, or autumn for the maple leaves.

Kyoto holds a quiet magic that is hard to describe until you have walked its temple paths at dawn. The city layers centuries of history beneath every cedar beam and stone lantern, inviting slow exploration. We arrived on a Friday evening and left wondering how we fit three lifetimes of memory into forty-eight hours.

Fushimi Inari at sunrise (arrive by 6am)
Philosopher's Path in cherry blossom season
Nishiki Market for street food
Arashiyama bamboo grove before 8am

Dawn at Fushimi Inari

The temples never felt like tourist traps. Each one earned your attention through architecture, silence, or sheer unexpected beauty. Ryoan-ji's rock garden, in particular, stopped us both mid-sentence.

Why this starter

Most blog starters look the same. Yours shouldn't.

Generic templates hand you gray cards and leave the hard part — making the blog feel like yours — up to you. notebook-blog-starter ships 30 hand-crafted MDX components, a book-style reader, and a visual editor, with SEO and performance already wired in. You publish something readers remember today, not after weeks of design work.

Who it's for

Built for people who publish

Indie hackers & founders

Launch a marketing blog, changelog, or docs site that looks designed — without hiring a designer or wrestling a page builder.

Writers & educators

Essays, tutorials, or STEM lessons: formula blocks, timelines, and callouts make dense topics a pleasure to read.

Developers

A typed Next.js 16 + MDX codebase with 30 components, book mode, and SEO already wired. Clone, configure, ship.

Content teams

Non-technical writers draft, style, and preview posts in the /studio editor — no Markdown or JSX knowledge needed.

What you get

Everything to ship a beautiful blog

30 Notebook Components

StickyNotes, Polaroids, WashiTape, FlipCards, and more. MDX-native, zero setup.

Book Reader Mode

A paginated reading experience with chapter navigation. Toggle on in theme.config.ts.

5 Accents + 3 Intensities

amber, blue, rose, emerald, violet. Dial from full notebook chaos to clean subtle.

/studio Visual Editor

Non-technical authors can draft, style, and preview posts right in the browser.

SEO Infrastructure

JSON-LD schemas, OG tags, sitemap, canonical URLs. All wired up.

Ship in a Day

Clone. Edit site.config.ts. Deploy to Vercel. Done.

Theme intensity

One dial. Three personalities.

Change intensity in theme.config.ts to control how decorative your blog feels.

Fullintensity: 'full'

Everything is intentionally decorative. Notes, tape, Polaroids all show.

Why This Matters: The notebook aesthetic is front and center.

Mediumintensity: 'medium'

Cleaner feel. Sticky notes remain, heavy decoratives step back.

Tip: A good balance for professional blogs.

Subtleintensity: 'subtle'

Key Point: Minimal. Clean. Zero decoratives. Just content.

At subtle intensity, only structural elements like callouts and highlights appear. Perfect for content-first, distraction-free reading.

Component library

Every post element, reimagined

20+ MDX components designed for blogs. Use them in any post, just drop the JSX.

Phosphorus helps sleep. Take magnesium.

StickyNote

Flash Card

What is a moat?

tap to flip ↺

A competitive advantage that is hard to replicate, like a castle moat protecting a business.

FlipCard

Tip: Use FlipCards for Q&A sections and key concepts.

Callout

Margin notes float beside your paragraphs.This is a sample paragraph. The margin note floats to the right of this text on desktop.

MarginNote

Kyoto, 2024

Polaroid

Before

Manual calculation every time

After

Automated with one line of code

Before

Manual calculation every time

After

Automated with one line of code

Compare

Browse all components

Built-in editor

Non-technical authors welcome.

The /studio editor is a 3-pane visual workspace built into the starter. Pick components from the palette, edit content with live preview, and download the .mdx file. No code knowledge required.

Palette of all 30 components
Live MDX preview
Download as .mdx
Dev-only, zero production overhead

See the /studio

supacode.in/studio

Palette

📌 StickyNote

🎞 Polaroid

📎 WashiTape

🃏 FlipCard

💬 CallOut

📐 Compare

🗂 IndexCard

📝 MarginNote

Editor

---
title: "My Post"
date: "2026-06-20"
---

# Introduction

<StickyNote color="yellow"
  title="Key Point">
  Write like you talk.
</StickyNote>

The first paragraph hooks
the reader immediately.

<Callout type="tip">
  Keep sentences short.
</Callout>

Preview

My Post

Introduction

Key Point

Write like you talk.

The first paragraph hooks...

Tip: Keep sentences short.

Getting started

Up and running in minutes.

Get the starter

After you get access, you receive the full source code with all 30 components and infrastructure wired up.

# full source, ready to run

Configure

Edit site.config.ts for your name and contact. Edit theme.config.ts for accent, intensity, and fonts.

# site.config.ts + theme.config.ts

Deploy

Push to GitHub, connect to Vercel. First deploy takes under 2 minutes.

git push && vercel deploy

Ready to build the most beautiful blog on the web?

Get the full source code. One-time access, lifetime use.

Get Access Browse Components