Notion as a CMS

This template is currently in progress!

I'm building this Notion as a CMS portfolio + blog template in public.

Follow my daily updates on X and Bluesky.

a portfolio website with a blog, built using Next.js with Notion as the CMS

manage all your content (pages, blogs, metadata) directly from your Notion app.

Launching soon, you'll be able to buy this template and use it for your own portfolio & blog.

Interested in buying this template? Message me on X or Bluesky.

Rich text

Text

Bold, Italicize, Underline, Link, code , break, s p a c i ng,

Color Text

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Background Text

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Text Links

External Link

This link navigates to the Notion website

( These are standard external links added in Notion to point to websites outside your domain. On our website, they open in a new tab. )

Internal Site Link

This link navigates to the blog page

( These are internal links created in Notion to point to other pages within your website. They open in the same tab for faster navigation. To create an internal link in Notion, use a direct path like /blog — don’t include the full domain. The path must match an existing page on your site for it to be recognized and rendered correctly. )

Color Link

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Background Link

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Underline

Normal Underline

Underline

Color Underline

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

( You can see here that the underline color is inherited from the text color. )

Background Underline

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Strikethrough

Normal Strikethrough

Strikethrough

Color Strikethrough

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

( You can see here that the Strikethrough color is inherited from the text color. )

Background Strikethrough

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Inline Code

Default inline Code

inline code

Color text inline Code

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Background inline Code

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple, Pink, Red.

Different Backgrounds Code side by side

Yellow Green Blue

Default Gray Brown Orange Yellow Green Blue Purple Pink Red.

Different Text Colors inline inline Code side by side

Yellow Green Blue

Default Gray Brown Orange Yellow Green Blue Purple Pink Red

inline code with Bold

Bold

inline code with Italicize

Italicize

inline code with Underline

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple,Pink, Red

inline code with Strike Through

Default, Gray, Brown, Orange, Yellow, Green, Blue, Purple,Pink, Red

inline code with Link inside

Link

inline code with Emoji inside

const status = " Success";

console.log(" Debug mode enabled");

const emoji = " + = ";

mix inline code with all annotations

Notion as a CMS

Text inline Equation

$E = mc²$

$F = ma$

$F = G * (m₁ * m₂) / r²$

Emojis in Text

All emojis in text are rendered as Twemojis for consistent appearance across devices.

People with Skin Tone Variations

Gendered Professions

  // Developer

  // Astronaut

  // Artist

Popular and Expressive

Aesthetic Emojis for UI

People with Skin Tone Variations

Rich Text Rendering – How It Works

All text customizations are rendered with semantic HTML in mind. The structure is intentionally minimal, no unnecessary <span> or <div> clutter. Links are rendered using the <a> tag, and code snippets use the <code> tag for proper semantics and accessibility.

(Everything is styled to closely match the look and feel of a Notion page.)

External Links

External links are rendered using the <a> tag with target="_blank" and rel="noopener noreferrer" attributes.

This ensures secure navigation by opening the link in a new tab without allowing the new page to access or control your original site, protecting it from potential security risks like tab-napping.

Internal Links

Internal links are rendered using Next.js’s Link component. This enables fast, client-side navigation with performance benefits, when you hover over these links, Next.js begins preloading the destination page in the background.

Inline equation

You can add inline equations in Notion using LaTeX syntax — and we support this feature as well.

Inline equations are rendered using KaTeX, just like in Notion, for fast and accurate math rendering directly inside text.

Twemoji

You may notice that these emojis look slightly different from the default system emojis.

That’s because we convert them into Twemojis, the open-source emoji set from 𝕏 (formerly Twitter), designed for consistency across platforms.

We achieve this by parsing and replacing native emojis using the twemoji-parser package.

This makes the emoji rendering uniform across all browsers and devices, matching Notion’s emoji styling more closely.

Rich Text Support

Rich text styling is supported anywhere text appears, inside paragraph blocks, headings, list items, callouts, block captions, and all notion blocks.

This includes bold, italic, code, links, text color, and background color.

Rich Text Styling Behavior

In Notion, you can apply both a color and a background to rich text, but the Notion API only returns one at a time, either a color or a background. So, in this template, we replicate that limitation and render only one.

Some Notion blocks (like paragraphs, headings, callouts, etc.) also allow applying a text color or background color to the entire block. Just like with rich text, we apply only one style to the block, either color or background.

You can still customize individual text inside the block with its own color or background, separate from the block’s styling.

This means a block can have a background, and specific words inside it can have their own rich text styling, just like in Notion.

Basic Blocks

Paragraph Block

Color Paragraph block

default color

gray color

brown color

orange color

yellow color

green color

blue color

purple color

pink color

red color

Background Paragraph block

default background

gray background

brown background

orange background

yellow background

green background

blue background

purple background

red background

pink background

Paragraph block with all text customizations

Lorem ipsum dolor sit, Emojis ִֶָ☾♡ using https://github.com/jdecked/twemoji-parser, Bold, Italicize, Underline, My Portfolio link, Code, Break, S p a c i n g. Equations: $F = (G * m1 * m2) / d^2$ blue color blue background Link site page referring link  World Emoji Day  World Emoji Day $F = (G * m1 * m2) / d^2$ yooo hie lal a alsd v asdh code1code2 yo

Paragraph Block – How It Works

The text (paragraph) block is rendered using the <p> HTML tag.

You can apply either a text color or a background color to the entire block.

In Notion, paragraph blocks do not support nested blocks, so this behavior is replicated here as well.

If a paragraph block is empty in your Notion page, we still render it.

This allows you to intentionally create spacing between blocks, just like you can in Notion.

Heading Blocks

Heading 1

Heading 2

Heading 3

Color Heading 1/2/3 block

Heading 1 block with color blue color blue background

You can see above even if a block has a background or color, any text inside it that has its own background or color still shows up just like in Notion. This works thanks to the RichText component.

Heading 2 block with color

Heading 3 block with color

(like paragraph you can give all colors to any heading 1/2/3 blocks)

Background Heading 1/2/3 block

Heading 1 block with background blue color blue background

Heading 2 block with background

Heading 3 block with background

(like paragraph you can give all colors to any heading 1/2/3 blocks)

Heading blocks with all text customizations

Heading 1 , Italicize, Underline, Link, code , break, s p a c i ng, code1code2 $F = (G * m1 * m2) / d^2$ blue color blue background

Heading 2 , Italicize, Underline, Link, code , break, s p a c i ng, code1code2 $F = (G * m1 * m2) / d^2$ blue color blue background

Heading 3 , Italicize, Underline, Link, code , break, s p a c i ng, code1code2 $F = (G * m1 * m2) / d^2$ blue color blue background

Heading Blocks – How It Works

Heading blocks (1, 2, and 3) are rendered using the <h2>, <h3>, and <h4> HTML tags.

We skip <h1> for Heading 1 because <h1> is reserved for the page title, maintaining proper document structure and SEO best practices.

You can apply either a text color or a background color to the entire heading block.

If a heading block is empty in your Notion page (i.e., contains no text), we do not render it.

In Notion, if you insert another block inside a heading block (making it a nested), Notion automatically converts it into a heading toggle block.

We support this behavior as well.

Bulleted list Block

Background Bulleted list block

• default color
  • gray color
    • brown color
      • orange color
        • yellow color
          • green color
            • blue color
              • purple color
                • pink color
                  • red color

Background Bulleted list block

• default background
  • gray background
    • brown background
      • orange background
        • yellow background
          • green background
            • blue background
              • purple background
                • pink background
                  • red background

Normal bulleted list example

• Boil fresh water
• Add coffee grounds to your filter or French press
• Pour hot water over the coffee
• Let it brew (about 4 minutes for French press)
• Press or filter the coffee
• Pour into your favorite mug
• Add milk or sugar if desired
• Enjoy your coffee break!

Bulleted List Block – How It Works

Each bulleted list item is rendered using the <li> HTML tag.

We’ve added a custom feature where adjacent bulleted list items are grouped and wrapped inside a <ul> element for proper HTML semantics.

By default, the Notion API does not return list items as grouped blocks, so we manually detect and group them to maintain structure.

You can apply either a text color or a background color to the entire bulleted list block.

In Notion, you can nest any block inside a list item — we replicate this behavior exactly.

As you nest bulleted list blocks inside one another, the bullet point style automatically adjusts based on the nesting level.

In Notion, the bullets cycle through disc, circle, and square depending on the depth — we replicate this behavior as well.

If a Bulleted List block is empty in your Notion page (i.e., contains no text), we do not render it.

Numbered list Block

Background Numbered list block

1. 1.a.i.

   default color
2. 2.b.ii.

   gray color
3. 3.c.iii.

   brown color
   1. 1.a.i.

      orange color
   2. 2.b.ii.

      yellow color
   3. 3.c.iii.

      green color
      1. 1.a.i.

         blue color
      2. 2.b.ii.

         purple color
      3. 3.c.iii.

         pink color
      4. 4.d.iv.

         red color

Background Numbered list block

1. 1.a.i.

   default background
2. 2.b.ii.

   gray background
   1. 1.a.i.

      brown background
   2. 2.b.ii.

      orange background
      1. 1.a.i.

         yellow background
      2. 2.b.ii.

         green background
3. 3.c.iii.

   blue background
   1. 1.a.i.

      purple background
   2. 2.b.ii.

      pink background
4. 4.d.iv.

   red background

Normal Numbered list example

1. 1.a.i.

   Boil fresh water
2. 2.b.ii.

   Add coffee grounds to your filter or French press
3. 3.c.iii.

   Pour hot water over the coffee
4. 4.d.iv.

   Let it brew (about 4 minutes for French press)
5. 5.e.v.

   Press or filter the coffee
6. 6.f.vi.

   Pour into your favorite mug
7. 7.g.vii.

   Add milk or sugar if desired
8. 8.h.viii.

   Enjoy your coffee break!

Numbered List Block – How It Works

Each numbered list item is rendered using the <li> HTML tag.

We’ve added a custom feature where adjacent numbered list items are grouped and wrapped inside an <ol> element for proper HTML semantics.

By default, the Notion API does not return list items as grouped blocks, so we manually detect and group them to preserve the correct structure.

You can apply either a text color or a background color to the entire numbered list block.

In Notion, you can nest any block inside a list item — we replicate this behavior as well.

As you nest numbered list blocks inside one another, the numbering style automatically adjusts based on the nesting level.

In Notion, the styles cycle through numbers, letters, and Roman numerals, depending on the depth — we replicate this behavior too.

If a Numbered List block is empty in your Notion page (i.e., contains no text), we do not render it.

To-do Block

Color To-do block

Background To-do block

To-do block with all text customizations

To-do Block – How It Works

The To-do block is rendered using an <input type="checkbox"> along with a <p> tag for the text content.

We include a semantic checkbox input for accessibility, marked as readOnly and visually hidden to match Notion’s behavior.

In Notion, the To-do block does not use a standard HTML checkbox. Instead, it renders the checked and unchecked states using custom SVG icons — we replicate this behavior for a exact look.

You can apply either a text color or a background color to the entire block.

Just like in Notion, you can nest any block inside a To-do block, and we also able to render that as well.

If a To-do block is empty in your Notion page (i.e., it contains no text), we do not render it.

Toggle Block

Color Toggle block

Background Toggle block

Toggle Block – How It Works

The Toggle block is rendered using the native <details> and <summary> HTML tags, along with a <p> tag for the toggle text — providing clean and semantic HTML.

In Notion, a Toggle block behaves similarly to a paragraph block, but it allows nesting any other Notion block inside it.

By default, nested blocks are collapsed and hidden. In Notion, you expand them by clicking the small triangle icon on the right.

We replicate this behavior, but with an improvement — the entire toggle block is clickable, not just the icon. Clicking anywhere on the toggle block will open or close it, and the whole block uses a pointer cursor to indicate interactivity.

If a Toggle block is empty in your Notion page (i.e., it contains no text), we do not render it — even if it has nested blocks inside.

Page Block

not supported

Callout Block

Color Callout block

Default text

Gray text

Brown text

Orange text

Yellow text

Green text

Blue text

Purple text

Pink text

Red Text

Background Callout block

Default

Gray

Brown

Orange

Yellow

Green

Blue

Purple

Pink

Red

Callout Block without Icon

Callout Block with nested blocks including callout text

Callout Block with only nested blocks

Heading 1

Heading 2

Heading 3

paragraph

Callout block in callout block

Callout Block with all icons types

Twemoji (Standard Emojis)

Notion Icons, selected from Notion’s built-in icon library.

Custom Emojis, These are icons uploaded as custom emojis in Notion.

Uploaded File Icons, directly uploaded in Notion (e.g., PNG, JPG, SVG)

External URL Icons, sourced from an external URL, such as CDNs, public asset servers, or icon libraries like SVGRepo.

Callout Block – How It Works

The Callout block is rendered using the <figure> HTML tag, along with a <p> tag for the callout text — providing clean and semantic HTML.

In Notion, we can nest any block inside a Callout — either along with callout text, or with callout text with nested block, or as a callout with only nested blocks no callout text.

(Note: when it's a callout with only nested blocks, Heading 1, 2, and 3 do not have top margin in Notion.)

We have replicated this exact behavior and rendered it accordingly.

You can apply either a text color or a background color to the entire block.

In dark mode, Notion uses different callout background shades compared to standard blocks — we’ve replicated this styling as well.

Callouts support various types of icons:

• You can use a standard emoji, a built-in Notion icon, a custom emoji, or even a directly uploaded file.
• You can also remove the icon entirely and display a plain callout — just like in Notion.

Notion’s built-in icon library displays different icons in light and dark modes, and we’ve mirrored that behavior to ensure visual consistency.

We’ve also implemented a feature that handles custom emoji and uploaded file icons with local caching:

• Since these icons have expiring URLs (valid for only ~1 hour),
• We detect and download them locally to your Next.js project's public/icons/custom_emoji or public/icons/file folders,
• This ensures your callout icons render reliably on your site.

If a Callout block is empty, we still render it, just like Notion — this can be useful for spacing, layout, or visual dividers.

Quote Block

Color Quote block

default color

gray color

brown color

orange color

yellow color

green color

blue color

purple color

pink color

red color

Background Quote block

default background

gray background

brown background

orange background

yellow background

green background

blue background

purple background

red background

pink background

Quote Block with nested blocks

To be or not to be, that is the question.

— William Shakespeare

Quote with nested blocks

Heading 1 inside Quote

Some supporting paragraph text.

• A bullet list item
• Another one

Even a nested quote block!

Quote Text Color

Stay hungry, stay foolish.

(The left border color of the quote block inherits from the block’s text color.)

Quote Block – How It Works

The quote block is rendered using the <blockquote> HTML tag, along with a <p> tag for the quote text — providing clean and semantic HTML.

In Notion, you can nest any block inside a quote block, and we replicate this behavior exactly.

You can apply either a text color or a background color to the entire block.

If a quote block is empty (i.e., has no text), we do not render it — even if it contains nested blocks.

Table Block

Table block with Heading Row

Table block with Heading Column

Table block with Both Headings

Table block Without Heading Row or Heading Column

Large overflow Table block

Table Blocks in Column blocks

Divider block

Link to page Block

work in progress

Media Blocks

Image Block

Uploaded File Images via Notion

Unsplash Notion image URL

Cloudinary image URL

Pexels image URL

Giphy image URL

Video Block

work in progress

Audio Block

Code Block

Code block with with notion rich text

export default function Page() {
  return <div>Page</div>;
}
inline code Bold, Italicize, Underline, Link, code ,     break,    s     p   a  c i ng,$F = G * (m₁ * m₂) / r²$Notion as a CMS

JavaScript code block

function debounce(func, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); }; }

// Example usage:
const fetchData = () => { console.log("Fetching data..."); };

const debouncedFetch = debounce(fetchData, 1000);

document.getElementById("search").addEventListener("input", debouncedFetch);
  

File Block

Handling Notion-hosted and External Files in File & Audio Blocks

In both the File and Audio blocks, we receive either Notion-hosted URLs (files uploaded directly to Notion) or externally hosted URLs (e.g., S3, Dropbox, or public CDN links).

Now, Notion-hosted URLs are temporary, they typically expire after 1 hour. This means if we directly use these URLs in our custom Notion block renderer, the file or audio will stop working shortly after being loaded.

To address this, I implemented a workaround:

• For Notion-hosted audio block files, we download them during build time and store them in /public/audio/.
• For Notion-hosted file block files, we store them in /public/file/.
• For audio files, we extract the exact filename and format from the Notion URL and save it accordingly.
• For file blocks, we use the filename provided in the Notion API (block.file.name) and preserve it when saving.

I’ve also added a check to avoid redundant downloads, if a file already exists in the respective folder, we reuse it instead of downloading it again.

Although this approach increases the project’s build size, it ensures long-term availability of files without relying on expiring Notion URLs.

I'm also considering uploading these Notion-hosted files to a CDN or cloud storage instead of storing them in the Next.js public folder, to reduce the overall project size.

Web Bookmark Block

The AI workspace that works for you. | Notion

A tool that connects everyday work into one space. It gives you and your teams AI tools—search, writing, note-taking—inside an all-in-one, flexible workspace.

https://www.notion.com/

Next.js by Vercel - The React Framework

Next.js by Vercel is the full-stack React framework for the web.

https://nextjs.org

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

https://tailwindcss.com/

Code Spell Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Spelling checker for source code

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Schema.org - Schema.org

Schema.org is a set of extensible schemas that enables webmasters to embed structured data on their web pages for use by search engines and other applications.

https://schema.org/

Build your Component Library - shadcn/ui

A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.

https://ui.shadcn.com/

The growing divide among React developers…

react.gg is an interactive, challenge-based learning experience that will get you shipping modern React apps like a pro. Get 30% off during their launch sale…

https://www.youtube.com/watch?v=lLJbHHeFSsE

Advanced Blocks

Table of contents Block

Block equation

work in progress

Button

not supported

Breadcrumb

work in progress

Synced block

this block is synced from blog page

Columns Block

2 Columns

3 Columns with Custom Widths

4 Columns

5 Columns

Nested columns? Yes! You can even place a Columns block inside a column — just like Notion allows.

Supports all column layouts: 1, 2, 3, 4, and 5 columns.

This block in Notion is used to organize content side by side, perfect for layouts that need structure and flexibility.

It also accurately reflects custom column widths if you change a column’s width in Notion, it will render with the exact same width here.

Big thanks to the Notion API for providing detailed column width data

Code - Mermaid

%% A simple Mermaid diagram
graph TD;
    A[Hello, World!] --> B{Sum};
    B -->|5| C[5];
    B -->|10| D[10];
    C --> E[Result];
    D --> E;

flowchart LR
    id1>This is the text in the box]

erDiagram
          CUSTOMER }|..|{ DELIVERY-ADDRESS : has
          CUSTOMER ||--o{ ORDER : places
          CUSTOMER ||--o{ INVOICE : "liable for"
          DELIVERY-ADDRESS ||--o{ ORDER : receives
          INVOICE ||--|{ ORDER : covers
          ORDER ||--|{ ORDER-ITEM : includes
          PRODUCT-CATEGORY ||--|{ PRODUCT : contains
          PRODUCT ||--o{ ORDER-ITEM : "ordered in"