Rich Text Formatting

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

empty block, ( only for normal text, not for Headings )

bg code

underline Code

normal code

strike through code

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

blue

blue_background

brown

brown_background

default

gray

gray_background

green

green_background

orange

orange_background

pink

pink_background

purple

purple_background

red

red_background

yellow

yellow_background

Basic Blocks

Text

Plain Text hi there

Color Paragraph

Background Paragraph

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptatum maiores molestiae labore sed ratione, aspernatur quo deleniti quia, blanditiis suscipit odio autem reprehenderit nemo consectetur saepe ab molestias consequatur doloribus. Itaque cum aperiam assumenda provident, alias dignissimos accusamus fuga suscipit iusto officia et repudiandae asperiores possimus praesentium modi quaerat fugit quia facilis natus id architecto. Dolor sed a unde eos delectus voluptas ipsum atque dicta qui laborum. Cupiditate eaque, esse numquam officia libero impedit quisquam voluptate quaerat quod minus dolore, iste, illo commodi. Est doloremque officia eius animi facere? Reprehenderit dolor doloribus aspernatur vel assumenda blanditiis iusto eaque laudantium.

To-do list

Heading 1

Color Heading 1

Background Heading 1

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

bg code underline Code normal code strike through code

Heading 2

Color Heading 2

Background Heading 2

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

bg code underline Code normal code strike through code

Heading 3

Color Heading 3

Background Heading 3

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

bg code underline Code normal code strike through code

Table

Table with Row & Column Header

List

Toggle

Add Any Block Inside the Toggle

Quote

Quote of the day

Colored Quote

Background Quote

Rich text Quote Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptatum maiores molestiae labore sed ratione, aspernatur quo deleniti quia, blanditiis suscipit odio autem reprehenderit nemo consectetur saepe ab molestias consequatur doloribus. Itaque cum aperiam assumenda provident, alias dignissimos accusamus fuga

Parent

Chiild quote

childs

its child

You can add any block in the child

---

Divider

Callout

*you can choice any icon for callout like Emojis, Notion Icon, Custom Uploaded Icons

Callout

Color Callout

Background Callout

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis voluptatum maiores molestiae labore sed ratione, aspernatur quo deleniti quia, blanditiis suscipit odio autem reprehenderit nemo consectetur saepe ab molestias consequatur doloribus. Itaque cum aperiam assumenda provident, alias dignissimos accusamus fuga

parent

child

child

it’s child

Callout Background different in Dark theme

Callout Background

*callout have different background on dark theme

default

default

gray

gray

brown normal

brown

orange

orange

yellow

yellow

Green

greeen

blue

blue

purple

purple

pink

pink

red

red

callout colors

default

default

gray

gray

brown normal

brown

orange

orange

yellow

yellow

Green

greeen

blue

blue

purple

purple

pink

pink

red

red

Column

*you can add any block in this columns

Child Support for blocks

Parent

Child quote

child

its child

You can add any block in the child

---

parent

child

child

it’s child

hi

Images

You can add and render images from Unsplash, Giphy, Cloudinary URLs, Pexels, Pixabay, StockSnap, and SvgRepo.

Note: Avoid adding images or icons directly uploaded from your device to Notion, as these images have a timeout and expire after a few days. Consequently, you won't be able to see the images on your website after this period. It's preferable to use the mentioned solutions instead.

Video

youtube video block supported

Code

Java:

javaCopy code
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

JavaScript:

javascriptCopy code
console.log("Hello, World!");

JSON:

jsonCopy code
{
  "name": "John",
  "age": 30,
  "city": "New York"
}

Markdown:

markdownCopy code
# Heading 1
## Heading 2
### Heading 3

- List item 1
- List item 2

**Bold Text**

*Italic Text*

PowerShell:

powershellCopy code
Write-Host "Hello, World!"

Python:

pythonCopy code
print("Hello, World!")

TypeScript:

typescriptCopy code
console.log("Hello, World!");

CSS:

cssCopy code
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  color: #333;
}

JavaScript:

javascriptCopy code
function greet() {
  console.log("Hello, World!");
}

greet();

Ruby:

rubyCopy code
puts "Hello, World!"

Sass:

sassCopy code
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS:

scssCopy code
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Scheme:

schemeCopy code
(define (hello)
  (display "Hello, World!")
  (newline))

(hello)

SQL:

sqlCopy code
SELECT * FROM users WHERE country = 'USA';

YAML:

yamlCopy code
name: John Doe
age: 30
city: New York

XML:

xmlCopy code
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

<svg
  xmlns="http://www.w3.org/2000/svg"
  width={14}
  height={14}
  fill="none"
  viewBox="0 0 24 24"
>
  <path
    stroke="currentColor"
    strokeLinecap="round"
    strokeLinejoin="round"
    strokeWidth={2}
    d="M8 5H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M8 5v0a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v0M8 5v0a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v0"
  />
</svg>

Table of content

Colored table of content

Background table of content

Web Bookmark

Link To Page

NoNex Pricing

NoNex offers three pricing packages: Basic, Standard, and Premium, each with a one-time payment per website.

NoNex

Fetch & Render Beyond 100 Blocks

NoNex has no limitations and can render any number of blocks from your Notion page.

No Limitations

My Journey Building NoNex

When I first considered using Notion as my database a few months ago, I looked it up on Google and asked ChatGPT. I felt disappointed because it seemed like I couldn't use Notion as a database. However, after a lot of searching, I discovered a GitHub repository where someone had used Notion as a database for their blog website. I downloaded it and tried to use it on my desktop, but it failed because the code was too old, from 2-3 years ago, and was written too complexly.

Later, I found some Notion rendering packages on the npm website. I attempted to use them, but they were too complicated to work with, and I couldn't customize the blocks according to my preferences. So, I made the decision to develop my own Notion renderer and create a blog website with it.

This Notion renderer code is very well-written and focused on performance. All blocks are rendered on the server-side, statically generated, and built with Next.js, CSS3, and Tailwind CSS. It only uses the notionhq/client official Notion API to get your notion page or database content.

I'm so happy that I was able to build something this good. I had a lot of fun building it and learned many things in the process.