Table of Contents

Nooto?

A Nooto works best when it is built around a clear and durable idea.

Even very small Nooto projects usually benefit from a minimal structure: chapters (sections, pages) and a coherent direction.

Nooto is especially suited for essays, journals, books, documentation, archives, portfolios, research, collections, personal websites, call-to-actions and long-form projects that are meant to remain readable and organized over time.

Temporary and Shared Projects

A nooto does not need to be permanent from the beginning. Many nooto pages are also used as lightweight shared workspaces for texts that are still evolving.

Because nooto pages are immediately accessible through a clean public URL, they work well for drafts, collaborative writing, project notes, research material, briefings, presentations, temporary publications, or structured documents that need to be shared quickly without becoming messy.

Even provisional content benefits from:

• Clear typography
• Stable URLs
• Printable layouts
• Mobile readability
• Lightweight structure
• Easy editing through Markdown

In many cases, a nooto begins as a temporary or evolving document and later naturally becomes a more complete and permanent publication.

This flexibility makes nooto useful not only for finished websites, but also for living documents, shared ideas, and ongoing projects.

How to Create Your Nooto Site

Nooto is supported through donations.

Each donation automatically creates a new Nooto and a new account.

To open your Nooto, simply make a one-time donation through Stripe. After the payment, your Nooto page becomes immediately accessible.

The email address used during the Stripe payment is automatically assigned as the initial login email for your Nooto account.

After activation, it is strongly recommended to sign in to your account panel and confirm both:

• The email address you want to permanently use for the account
• Your personal password and take note of it.

This is important for future access, account recovery, editing, and domain management.

Once activated, you can immediately begin editing your Nooto.

Donate and Create your Nooto

Basic Structure

Start by writing down the # Titles of each section/page of your Nooto.

# Title for Page 1
# Title for Page 2
# Title for Page 3
# Title for Page 4

This will create the links in the navigation sidebar and the pages/sections.

Next, add actual contents to these chapters/pages.

# Title for Page 1
## Subtitle 
Text with **bold** or *italic*.
![Image](Image URL)

Nooto Behaviours

Nooto includes several automatic behaviours designed to keep pages clean, lightweight, and readable without requiring complex configuration.

Empty Nooto Pages

If a Nooto page has no Markdown content, the system automatically generates a minimal placeholder page.

Depending on the configuration, this page may display:

• the site logo
• the site title
• the site domain or URL

This behaviour avoids broken or visually empty pages while preserving a clean appearance.

Automatic Section Detection

Nooto automatically detects sections from Markdown headings.

Example:

# Introduction

## Subtitle

# Projects

# Contact

Each # Heading becomes a navigable section inside the Nooto menu.

Automatic Menu Search

The search field inside the navigation menu only appears when needed.

If a Nooto contains very few sections, the search input is automatically hidden to reduce interface noise.

Continue Reading

Nooto remembers the last reading position of a visitor before leaving the page.

This may include:

• the current section
• the vertical reading position
• the approximate reading progress

When the visitor returns, Nooto may briefly suggest continuing from the previous position.

The suggestion appears only for a few seconds and disappears automatically if ignored.

This behaviour is designed to improve long-form reading experiences (books, manuals) while remaining lightweight and non-intrusive.

How to Nooto

Nooto is not designed like a traditional modern website.

It is designed more like a book, a document, or a long-form reading experience.

This is an important difference.

Start from the reading flow

Before thinking about:

• images and galleries
• cards or visual effects
• decorations and layouts

focus first on the reading flow.

A good Nooto should feel natural to read from top to bottom.

The structure should guide the visitor gently through the content.

Think in chapters/sections/pages

A Nooto works best when divided into a small number of strong sections.

Usually:

• 5 # chapters is excellent
• 10 chapters is already enough for most projects
• more than 10 chapters often becomes fragmented, unless your Nooto is a real book or a manual.

Each chapter should have a clear purpose and identity.

Chapters titles are extremely important

The titles of your chapters matter more than visual effects.

A visitor should understand the structure of your Nooto simply by reading the navigation menu.

Good chapter titles are:

• clear
• broad
• meaningful
• stable over time

Examples:

• About
• Research
• Projects
• Publications
• Archive
• Philosophy
• Contact

Avoid overly fragmented or temporary titles.

Keep the structure simple

Modern websites often become chaotic because every page tries to become its own universe.

Nooto prefers:

• continuity
• rhythm
• clarity
• predictable navigation

A visitor should never feel lost.

A section can still evolve

Inside each chapter, you can still use:

• cards
• galleries
• timelines
• quotes
• embeds
• images
• media blocks

The content inside a chapter can become rich and expressive.

But the global structure should remain:

• simple
• solid
• readable
• coherent

Resist the temptation to over-divide

Many creators split content into too many pages and subsections.

This usually weakens the reading experience.

A stronger approach is often:

• fewer sections
• longer sections
• clearer narrative flow

Readers tend to remember coherent chapters more than fragmented micro-pages.

Nooto values continuity

Nooto is designed for:

• long-term reading
• archives
• personal histories
• research
• documentation
• memorial pages
• public notes

The structure should therefore feel stable and understandable even after many years.

Build slowly

Do not try to design everything immediately.

Start with:

1. your main chapters
2. their titles
3. a clean reading flow

Only later add:

• galleries
• cards
• visual enrichments
• advanced blocks

A strong Nooto usually grows progressively over time.

Simplicity is not limitation

A simple structure is often more powerful than a complex one.

The goal of Nooto is not to impress visitors with technical complexity.

The goal is to help people:

• read at ease
• understand and remember what you want to say
• preserve it in the memory

That is why Nooto prioritizes textual flow and structural clarity over visual fragmentation.

Markdown?

Markdown is a simple way of writing formatted text without using complicated editors or design software.

It allows you to create clean documents, articles, notes, books, and websites using plain text and a few intuitive symbols such as # or * or -.

Many people have already used Markdown without realizing it.

Writing titles, lists, links, quotes, or emphasizing words with symbols is very similar to how Markdown works. The goal of Markdown is to make writing feel natural, fast, and distraction-free.

Unlike traditional website builders or word processors, Markdown focuses on content first. You write text in a lightweight, natural and readable form, and the platform automatically transforms it into a beautiful webpage or document.

Markdown is widely used by developers, writers, researchers, students, bloggers, and online communities because it is easy to learn, portable, future-proof, and works on almost every device.

Markdown Tools

If you need to practice Markdown in real time try this page:

MarkdownLivePreview

If you need to convert a formatted Word file into Markdown try this one:

Clipboard2Markdown

Markdown and AI

Markdown is one of the native writing formats most commonly used by modern AI systems.

Because Markdown is simple, structured, and human-readable, AI tools can understand, generate, edit, reorganize, summarize, translate, and extend Markdown content extremely well.

This makes nooto particularly compatible with AI-assisted writing workflows.

Even complex projects containing chapters, sections, lists, references, tables, links, notes, code, images, or long-form documentation remain easy for AI systems to process and manipulate without breaking the overall structure of the text.

In practice, this means that AI can help you:

• Draft and expand content
• Reorganize chapters and sections
• Correct grammar and formatting
• Translate texts
• Summarize long documents
• Generate structured notes
• Maintain consistency across pages

Because Markdown remains lightweight and readable even outside of Nooto, your content also stays portable, future-proof, and easy to reuse across different AI systems and platforms.

Using AI with Nooto

You can use ChatGPT, Claude, Gemini or other AI tools to generate content for your Nooto pages.

Copy the prompt below and customize it for your project.

Dear AI, you are creating content for a Nooto.org page.

Topic:
WRITE YOUR TOPIC HERE

Language:
English

Style:
Warm and direct, easy to understand


IMPORTANT RULES:

- Output ONLY clean Markdown.
- Do NOT use HTML.
- Use # to create short titles for main sections/pages.
- In Nooto every # becomes a menu item and a page.
- Use ## and ### for subsections.
- Keep the writing clean, readable and elegant.
- Prefer short paragraphs.
- Use * and 1. lists when useful.
- write nude email addresses just such as info@domain.com
- Do NOT explain Markdown syntax.
- Do NOT wrap the output in code blocks.
- The final text must be directly copy-pasteable into Nooto.

Nooto.org structure example:


# Home
Intro text...

# About
About text...

## History
More details...

# Contacts
Contact information...

Tips

• Use # only for major sections/pages.
• Avoid creating too many top-level sections.
• Keep titles short and clear.
• Large texts work better when divided into multiple # sections.
• After AI generation, refine the tone and structure manually if needed.

Typography

Markdown allows you to style text in a simple and readable way.

You do not need design software or complex formatting tools: you write plain text, and Nooto transforms it into clean typography.

Headings

Headings are used to divide your Nooto into pages, chapters, and sections.

# Page title (create a link in the navigation menu)

## H2 Section title or main sub-text

### H3 Smaller section title or secondary sub-text

#### H4 Some important detail

##### H5 Highlight (in your Brand main color)

###### H6 Attention Message (displayed in red)

Result:

H2 Section title or main sub-text

H3 Smaller section title or secondary sub-text

H4 Some important detail

H5 Highlight (in your Brand main color)

H6 Attention Message (displayed in red)

Paragraphs

Normal text is written as simple paragraphs. Leave one empty line between paragraphs.

This is the first paragraph.
This is the second paragraph.

Bold text

Use bold text for important words or strong emphasis.

This is **important text**.

Result:

This is important text.

Italic text

Use italic text for light emphasis, titles, or subtle changes of tone.

This is *italic text*.

Result:

This is italic text.

Bold and italic text

You can combine bold and italic when stronger emphasis is needed.

This is ***bold and italic text***.

Result:

This is bold and italic text.

Strikethrough

Strikethrough can be used for corrections, removed ideas, or text that is intentionally crossed out.

This is ~~deleted text~~.

Result:

This is deleted text.

Blockquotes

Blockquotes are useful for quotations, notes, excerpts, or highlighted thoughts.

> This is a quotation or highlighted note.

Result:

This is a quotation or highlighted note.

Lists

Use lists to organize information clearly.

* First item
* Second item
* Third item

Result:

• First item
• Second item
• Third item

Numbered lists

Numbered lists are useful for steps, instructions, rankings, or ordered sequences.

1. First step
2. Second step
3. Third step

Result:

1. First step
2. Second step
3. Third step

Links

Links can point to websites, documents, references, or external resources.

[Visit Nooto](https://nooto.org)

Result:

Visit Nooto

Horizontal rules

A horizontal rule creates a visual separation between parts of the page.

---

Result:

Ruby

Ruby is the standard Japanese system used to display reading hints (furigana) above kanji.

Nooto supports Ruby annotations with a simple syntax that is easy to type on a Japanese keyboard.

Syntax

Write the text and its reading between full-width vertical bars:

Example:

私は｜日本｜にほん｜へ行きます。

Result:

More Examples

｜私｜I｜は｜日本｜Japan｜へ｜行｜go｜きます。

Notes

• Ruby works inline inside normal paragraphs.
• Ruby can be used multiple times within the same sentence.
• The reading may contain hiragana, katakana, romaji, pinyin, or any other text.
• Ruby is especially useful for educational content, language learning materials, tourism guides, and historical documents.

Japanese Keyboard

The syntax uses the full-width vertical bar:

｜

This character is commonly available on Japanese keyboards and allows Ruby annotations to be written without switching to a Latin keyboard layout or using special complex tags.

Example Paragraph

｜私｜わたし｜は｜日本｜にほん｜へ｜旅行｜りょこう｜することが｜大好｜だいす｜きです。

｜毎年｜まいとし｜、｜東京｜とうきょう｜や｜京都｜きょうと｜、｜大阪｜おおさか｜などの｜都市｜とし｜を｜訪｜おとず｜れ、｜歴史｜れきし｜や｜文化｜ぶんか｜について｜学｜まな｜びます。

｜先週｜せんしゅう｜は｜新幹線｜しんかんせん｜に｜乗｜の｜って｜東北地方｜とうほくちほう｜を｜巡｜めぐ｜りました。｜車窓｜しゃそう｜から｜見｜み｜える｜山々｜やまやま｜や｜川｜かわ｜の｜景色｜けしき｜は｜非常｜ひじょう｜に｜美｜うつく｜しく、｜写真｜しゃしん｜をたくさん｜撮影｜さつえい｜しました。

｜日本｜にほん｜には｜四季｜しき｜があり、｜春｜はる｜には｜桜｜さくら｜、｜夏｜なつ｜には｜祭｜まつ｜り、｜秋｜あき｜には｜紅葉｜こうよう｜、そして｜冬｜ふゆ｜には｜雪景色｜ゆきげしき｜を｜楽｜たの｜しむことができます。

｜外国人旅行者｜がいこくじんりょこうしゃ｜にとって、｜公共交通機関｜こうきょうこうつうきかん｜の｜正確｜せいかく｜さや｜安全性｜あんぜんせい｜は｜大｜おお｜きな｜魅力｜みりょく｜です。

また、｜多｜おお｜くの｜博物館｜はくぶつかん｜や｜美術館｜びじゅつかん｜では、｜日本｜にほん｜の｜伝統芸能｜でんとうげいのう｜や｜工芸品｜こうげいひん｜について｜詳｜くわ｜しく｜知｜し｜ることができます。

｜私｜わたし｜が｜特｜とく｜に｜感動｜かんどう｜したのは、｜奈良｜なら｜の｜古寺｜こじ｜を｜訪問｜ほうもん｜したときです。｜千年以上｜せんねんいじょう｜の｜歴史｜れきし｜を｜持｜も｜つ｜建築物｜けんちくぶつ｜を｜目｜め｜の｜前｜まえ｜にすると、｜時間｜じかん｜の｜流｜なが｜れを｜感｜かん｜じます。

｜現在｜げんざい｜、｜多｜おお｜くの｜人々｜ひとびと｜が｜携帯電話｜けいたいでんわ｜や｜人工知能｜じんこうちのう｜を｜利用｜りよう｜して｜情報収集｜じょうほうしゅうしゅう｜をしていますが、｜実際｜じっさい｜に｜現地｜げんち｜を｜歩｜ある｜き、｜体験｜たいけん｜することの｜価値｜かち｜は｜変｜か｜わりません。

これからも｜新｜あたら｜しい｜場所｜ばしょ｜を｜発見｜はっけん｜し、｜多様｜たよう｜な｜人々｜ひとびと｜との｜交流｜こうりゅう｜を｜深｜ふか｜めたいと｜考｜かんが｜えています。

Hidden Notes

Sometimes you may want to leave private notes inside your Nooto without showing them publicly.

You can use hidden blocks like this:

Everything inside the block will be completely removed before the page is rendered.

Hidden blocks are useful for:

• private reminders
• draft sections
• temporary notes
• collaboration comments
• unfinished content

The hidden content will not appear on the page.

External Media Files

Nooto does not directly provide storage for media files such as images, audio, video, or large downloadable documents.

Instead, Nooto is designed to work as a lightweight publishing and aggregation system. Media files remain hosted wherever you already store them, while Nooto simply references and displays them inside your pages.

This means you can use media files coming from:

• Your own web hosting space
• Existing websites
• CDN services
• Image hosting platforms
• Audio or video platforms
• External archives or repositories

For example, a Nooto page may contain images, YouTube videos, audio files, PDFs, or external resources without those files being physically stored by Nooto itself.

This approach keeps Nooto lightweight, portable, fast, and easy to maintain over time, while allowing you to retain full ownership and control over your media files.

Images

To display an image inside your Nooto, use the standard Markdown syntax:

![AlternativeText](https://www.domain.com/image.jpg)

Large images will automatically expand to the full content width:

Smaller images will naturally appear smaller when appropriate:

Custom size

You can also explicitly request a custom image width in pixels by adding a second pair of parentheses after the image URL:

![AlternativeText](URL)(Pixels)

Example of a very heavy image rendered normally:

The same image rendered at only 150 pixels:

Unavailable images

If the image URL is incorret or the image does not exist or is unavailable, Nooto will automatically display a fallback placeholder image instead of a broken browser icon:

![AlternativeText](https://www.domain.com/deleted.jpg)

All images are automatically optimized and proxied through Nooto for better performance, caching and compatibility across devices.

Images Pools

You do not need to upload images to Nooto.

You can simply link beautiful public images from trusted websites around the web.

Below you can find some popular image pools where you can link high quality images for free.

One of the most popular photography platforms in the world.

Beautiful modern photography for:

• travel
• nature
• cities
• architecture
• people
• lifestyle

Unsplash

Free photos and videos with a very clean and modern style.

Perfect for:

• business
• blogs
• startups
• social pages
• restaurants

Pexels

Huge historical and cultural archive.

Perfect for:

• history
• museums
• monuments
• public domain material
• educational pages

Wikimedia Commons

Search engine for Creative Commons media from many different sources.

Useful when searching for specific themes or rare images.

Openverse

Important

Always make sure you have the right to use an image.

Some images may require:

• attribution
• author credits
• non-commercial usage

Please respect the original creators whenever possible.

Example

![Mountain by John Smith](https://images.unsplash.com/photo-xxxxxxxx)

Nooto will automatically optimize and cache external images when possible.

Galleries

Nooto supports responsive image galleries with fullscreen navigation, captions and automatic fallback images.

To create a gallery, use the gallery special block and place one image URL per line.

You can optionally add a caption using the | separator.

[gallery]
https://photo.com/4BB6E23A.jpg | Bike and Snow
https://photo.com/5C208EED.jpg | Reflections
https://photo.com/6C1131BA.jpg | Tram
https://photo.com/C25050F9.jpg | Road
https://photo.com/82059B9A.jpg | TV Tower
https://photo.com/IMG_0057.JPG | Bridge
https://photo.com/missing.jpg | Error
[/gallery]

Result:

Bike and SnowReflectionsTramRoadTV TowerBridgeError

Features

• Responsive grid layout
• Fullscreen lightbox
• Keyboard navigation
• Captions support
• Mobile friendly
• Automatic fallback image for broken URLs
• Lazy loading support

Fullscreen Navigation

When a gallery image is opened fullscreen you can use:

• Left Arrow → previous image
• Right Arrow → next image
• ESC → close gallery

The lightbox is optimized for both desktop and mobile devices.

Notes

• Images are not uploaded to Nooto.
• Galleries use external image URLs.
• Any public image URL can be used.
• Broken images automatically display a fallback placeholder image.

Tables

Nooto also supports simple Markdown tables.

Tables are useful for organizing information in a clean and readable way, especially for comparisons, schedules, references, lists, prices, technical data, timelines, or structured notes.

To create a table, write a first row with the column titles, then a second row made of dashes to define the columns, followed by the content rows.

Example:

| Name    | Country | Role       |
| ------- | ------- | ---------- |
| Alice   | Japan   | Writer     |
| Bruno   | Italy   | Designer   |
| Clara   | Canada  | Researcher |

Result:

Tables can contain text, numbers, dates, links, or short notes.

Keeping tables simple usually produces the best visual result, especially on mobile devices and printed pages.

YouTube and Vimeo Videos

Nooto can automatically embed YouTube and Vimeo videos directly inside your pages.

Simply paste a normal YouTube link on its own line, and Nooto will transform it into an embedded video player.

Both standard YouTube links and short youtu.be links are supported.

Example:

https://www.youtube.com/watch?v=jNQXAC9IVRw
https://youtu.be/jNQXAC9IVRw

or, you can add a Label like the example below.

[ブランコ株式会社](https://youtu.be/0g2IF7uuwOc)

The video will appear directly inside the page, making it easier to create presentations, lectures, music collections, documentaries, tutorials, interviews, or multimedia articles without using additional HTML code.

For the cleanest result, place video links on separate lines rather than inside paragraphs or lists.

[Vimeo](https://vimeo.com/318235505?fl=pl&fe=cm)

Audio Files

Nooto can also embed audio files directly inside your pages.

This is useful for music, podcasts, interviews, voice notes, ambient recordings, oral histories, sound archives, or spoken articles.

Simply place a direct link to an audio file on its own line. Supported formats usually include MP3, OGG, and WAV.

Nooto will automatically transform the link into an audio player that visitors can play directly inside the page.

For the best result, use direct file links rather than streaming pages or download portals, and place audio links on separate lines.

Example:

https://mavilio.com/sonoro/audio/01.mp3

[Separation](https://mavilio.com/sonoro/audio/01.mp3)

Google Maps

You can add Google Maps to your Nooto page in two simple ways.

1. Simple Map Link

Paste a Google Maps link directly into your text:

https://maps.app.goo.gl/eXb6RDZfwYKuREd89

Nooto will automatically turn it into a clean map card:

Open in Google MapsView location, directions, etc

This is the easiest and safest option.

2. Embedded Map

If you want to show the actual interactive map inside your page, open Google Maps, click Share, then choose Embed a map.

Copy the iframe code and paste it into Nooto:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Nooto will automatically make the map responsive and visually clean.

Google Analytics

Nooto can be connected to Google Analytics 4, allowing you to collect detailed visitor statistics for your website.

By linking your own Google Analytics property, you can monitor page views, traffic sources, visitor locations, devices, engagement metrics, and other analytics directly from your Google account.

To enable Google Analytics:

1. Create a Google Analytics 4 property.
2. Copy your Measurement ID (for example: G-XXXXXXXXXX).
3. Open your Nooto settings.
4. Go to Settings → Visibility.
5. Paste your Measurement ID into the Google Analytics field.
6. Save your changes.

Once configured, Nooto will automatically include the required Google Analytics tracking code on your website.

All analytics data is collected and stored directly by Google Analytics and remains under your control.

Umami Analytics

Nooto can be connected to Umami Analytics, allowing you to collect visitor statistics through a simple, privacy-friendly analytics platform.

By linking your own Umami website, you can monitor page views, visitor activity, referrers, countries, devices, browsers, and other essential analytics directly from your Umami dashboard.

To enable Umami Analytics:

1. Create a website in your Umami account.
2. Copy your Website ID.
3. Open your Nooto settings.
4. Go to Settings → Visibility.
5. Paste your Website ID (not the full script) into the Umami Analytics field.
6. Save your changes.

Once configured, Nooto will automatically include the required Umami tracking code on your website.

All analytics data is collected and stored directly by your Umami account and remains under your control.

XML Sitemaps

Nooto automatically generates XML sitemaps to help search engines discover and index your content.

Every public Nooto is included in the main Nooto sitemap, and each website also provides its own dedicated sitemap containing all public sections and pages.

No setup is required.

Nooto.org Sitemap

The main sitemap contains public Nooto websites published on the platform.

Single Nooto Sitemap

Each public Nooto automatically generates a dedicated sitemap listing its internal pages and sections.

The sitemap is updated automatically whenever the content of the Nooto changes.

Why Sitemaps Matter

XML sitemaps help search engines:

• Discover new pages
• Detect updated content
• Index large websites more efficiently
• Understand the structure of your Nooto

This is particularly useful for documentation, portfolios, research archives, company websites, and other projects containing multiple sections.

External Domains

If a Nooto is connected to a custom domain, the sitemap automatically uses the public URLs of that domain.

This helps search engines associate indexed pages with the correct website while keeping sitemap generation fully automatic.

Advanced Tags

From here you can explore the advanced tags available in Nooto.

These special tags allow you to create richer and more elegant pages while keeping the simplicity of plain writing.

With advanced tags you can add:

• Buttons
• Boxes and Strips
• Card grids
• Books
• Timelines
• Social network buttons
• Image galleries
• Tables of contents
• Contact Form

Nooto was designed to remain simple and readable, so every advanced block uses a very lightweight and human-friendly syntax.

Each feature is explained in its own dedicated chapter with practical examples and copy-paste snippets.

Hero Image

The hero block allows you to create large visual sections with a cover image, title, subtitle, and call-to-action button.

Hero blocks can be placed anywhere in a Nooto and are especially useful at the beginning of a section to introduce a topic, project, product, event, book, or website.

This is our Hero.

We are good.

Learn More

Example

[hero]
https://von.arx.onl/cover.jpg
# REIWA
## An Outsider’s Chronicle of Contemporary Japan
### Get the Books
[/hero]

Result:

REIWA

An Outsider’s Chronicle of Contemporary Japan

Get the Books

Structure

The Hero block follows a simple order:

• First URL → Cover image
• # → Main title
• ## → Subtitle
• ### → Button text
• Last URL → Button destination

All fields except the image are optional.

Minimal Example

[hero]
https://www.example.com/cover.jpg
# My Project
[/hero]

Result:

Sapporo

Typical Uses

• Product launches
• Books and publications
• Events and conferences
• Portfolio highlights
• Landing pages and sections
• Featured announcements

Hero blocks automatically adapt to desktop and mobile screens and display text directly on top of the cover image.

Boxes and Strips

Boxes and Strips are simple layout elements that help highlight important content without leaving Markdown.

Use them to separate notes, contact information, warnings, quotations, summaries, pricing information, or any content that deserves additional visual emphasis.

[strip]
## Strip
### A Strip displays content between two subtle horizontal lines.
The content inside a Strip can contain headings, lists, links, images, buttons, and other supported Nooto elements.
[/strip]

[box]
## Box
A Box displays content inside a bordered container.
Like Strips, Boxes support regular Markdown and most Nooto tags.
[/box]

Buttons

Nooto supports simple responsive buttons for links, websites and email contacts.

Buttons automatically use the main Nooto color defined by the current theme.

Syntax

[button]
hello@nooto.org
Contact Us
[/button]

[button]
https://nooto.org/edit.php
Edit this Nooto
[/button]

Result:

Contact Us

Edit this Nooto

Notes

• Email addresses automatically become protected mail buttons.
• External links automatically open in a new tab.
• Buttons automatically adapt to the current Nooto color theme.
• Buttons are mobile friendly and responsive.

TOC

Nooto can automatically create a Table of Contents from your page headings.

To add a TOC, simply write where you need a Table Of Contents to appear:

[toc]

Result:

Notes

• The TOC starts from the first # Heading 1.
• Headings before the first # Heading 1 are ignored.
• Clicking a TOC item opens the related Nooto section.
• The TOC works on desktop and mobile.

Keyboard Navigation

Nooto supports keyboard navigation between sections.

• ← Previous section
• → Next section
• , Previous section
• . Next section

This makes it easy to read long documents, portfolios, journals, and research archives without using the mouse.

Cards (and Grids)

Cards are useful to create elegant links to pages, projects, books, articles, or external websites.

Single Card

Use card when you want to show one single card.

[card]
https://von.arx.onl/favicons/cover.jpg
# Von Arx Books
https://von.arx.onl
[/card]

Von Arx Books

→

Card Grid

Use cards when you want to show multiple cards in a responsive grid.

[cards]

[card]
https://tik.onl/favicons/cover.jpg
# Tik
Ideas.
https://tik.onl
[/card]

[card]
https://mavilio.com/sonoro/favicons/cover.jpg
# Sonoro
**Drones from Japan**
https://mavilio.com/sonoro
[/card]

[card]
# Title without image
This is a blank card with a non working target URL.
https://example.com
[/card]

[/cards]

Tik

Ideas.

→

Sonoro

Drones from Japan

→

Title without image

This is a blank card with a non working target URL.

→

The Kybalion

The lips of wisdom are closed, except to the ears of Understanding.

→

Card without target URL

This is a blank card with only text.

Books

To display books or publications use the books and book blocks.

[books]
[book]
https://www.book.com/book.jpg
# Title
Author
https://www.book.com/isbn
[/book]

[book]
Repeat Pattern for book 2
[/book]

[book]
Repeat Pattern for book 3
[/book]

[/books]

Result:

Baal

A. W. Mavilio

Soon I Shall Die

Theo Bolt

Beyond the Phonetic Nursery

A. W. Mavilio

Structure of each book block:

1. Cover image URL
2. Title (using #)
3. Author or description
4. Optional target URL

Books are automatically displayed as elegant responsive covers:

• 4 covers per row on desktop
• 2 covers per row on mobile
• realistic shadows and glossy effect
• optional clickable links

You can also show a single standalone book:

Inside The Fence

A. W. Mavilio

[books]
[book]
https://www.book.com/book.jpg
# Title
Author
https://www.book.com/isbn
[/book]
[/books]

News

Nooto includes a lightweight news system designed for chronological updates, announcements, logs, journals, and public communications.

Unlike traditional blogs, Nooto News does not create separate pages for every article.

All news entries remain inside the same reading flow of the Nooto.

This keeps the experience:

• simple
• compact
• readable
• easy to maintain

Basic structure

To create a news section use:

[new]
2026/12/01
# Title
## Subtitle / short intro

Long text in Markdown.

You can add:
- images
- links
- lists
- videos
- cards
- galleries

[/new]

Result:

How it works

Each new block becomes a collapsible article.

Visitors initially see:

• date
• title
• subtitle

Then they can open the full content when needed.

This allows long news archives to remain readable without creating extremely long pages.

Flexible syntax

The News parser is intentionally tolerant.

You can omit some lines if you want.

In this way you can use the same module for collapsible elements other than actual news.

A similar ouput is given by the tags faq and toggle.

Example with only title

[new]
# New update
Today we improved the mobile layout.
[/new]

Example without subtitle

[new]
2026/12/01
# New server online
The migration has been completed.
[/new]

Recommended approach

Good News sections usually:

• keep titles short
• keep subtitles informative
• avoid extremely long articles
• focus on chronological continuity

News entries work best as:

• updates
• announcements
• development logs
• diaries
• research notes
• historical records

Timeline

The timeline tag allows you to create elegant chronological stories inside your Nooto.

Timelines are perfect for:

• Personal biographies
• Research histories
• Company milestones
• Travel journals
• Project development
• Academic careers
• Historical archives

Each event is written using a simple time block.

You can use normal Markdown inside each timeline event, including:

• Titles
• Paragraphs
• Links
• Images
• Lists
• Buttons

Timelines automatically adapt to your Nooto color and visual style.

[timeline]

[time]
2025
# Project started
First internal prototype.
[/time]

[time]
2026
# Public beta
First users joined Nooto.
[/time]

[/timeline]

Collapsible/Toggle

To create a collapsible element you can use the toggle blocks.

[toggle]
# Click here to open 1
Whatever.
[/toggle]
[toggle]
# Click here to open 2
Whatever.
[/toggle]

Result:

Social Networks

Nooto supports simple social network links through the social block.

Just paste one URL per line and Nooto will automatically generate elegant social buttons.

[social]
https://instagram.com/username
https://x.com/username
https://github.com/username
https://youtube.com/@username
[/social]

The result will look like this:

Supported Networks

Currently supported platforms include:

• Instagram
• X / Twitter
• Facebook
• YouTube
• TikTok
• LinkedIn
• GitHub
• Threads
• Bluesky
• Mastodon
• Spotify
• SoundCloud
• Telegram
• WhatsApp
• LINE

If Nooto recognizes the domain, it will automatically display the correct platform name.

Unknown links will simply appear as generic website buttons.

Tips

• Use full URLs including https://
• Put one social link per line
• The order of the links will be preserved
• Social buttons automatically adapt to your site color

Email Public Link

Nooto can protect public email addresses from basic spam bots.

You can write email addresses in two ways.

Plain Email

Write the email address directly in your text:

contact@domain.com

Result:

contact@domain.com

Nooto will automatically protect the address in the page source and make it clickable for real visitors.

Labeled Email Link

You can also create a custom email link using standard Markdown:

[Contact us](mailto:contact@domain.com)

Result:

Contact us

This method is useful when you do not want to display the full email address.

Notes

• The email is protected in the HTML source.
• Visitors can still click it normally.
• JavaScript is required to activate the final mailto: link.
• This protection reduces basic spam scraping, but no public email address can be considered completely invisible.

For this reason Nooto suggest anyway to use the tag contact.

https://nooto.org/abc/contact-form

Contact Form

Nooto includes a simple integrated contact form system.

To add a contact form anywhere inside your page, simply write:

[contact]

and Nooto will automatically generate a modern AJAX contact form directly inside your page like this:

Features

The Nooto contact form includes:

• AJAX sending (no page reload)
• Anti-spam honeypot protection
• Rate limiting
• Email validation
• Hidden recipient email
• SMTP delivery support
• Reply-To support
• Elegant integrated design
• Mobile friendly layout

Recipient Email

The form sends messages to your email address.

Your email email is never exposed publicly in the HTML source.

This helps reduce spam and unwanted scraping bots.

Desktop Themes

Nooto supports multiple desktop themes that allow the same content to be presented in different ways without changing your Markdown.

Themes only affect appearance and layout. Your content, links, images, sections, and custom blocks remain fully compatible across all themes.

Currently, Nooto provides three desktop themes:

• Classic — The original reading-focused Nooto experience.
• Brisk — A more traditional website layout with enhanced navigation and browsing.
• Atlas — A spacious presentation designed for larger websites, archives, and content collections.

You can switch themes at any time from your Nooto settings. Because themes only change presentation, no content migration or editing is required.

For theme previews, screenshots, and detailed information, visit:

https://nooto.org/themes

Your Account

Each Nooto is connected to a personal account used to manage access, editing, publishing, and configuration.

Your account is normally associated with:

• A NootoID
• An email address
• A password

The NootoID is the unique public identifier of your Nooto and becomes part of the URL.

https://nooto.org/THIS-PART

To sign in to your account you normally need to enter:

• Your NootoID
• Your email address
• Your password

A single person can own multiple Nooto sites using the same email address and password. However, each Nooto must always have its own unique NootoID.

Inside the account area you can typically manage:

• The title and content of your Nooto
• Visual settings such as colors and typography
• Visibility and publication status
• Connected custom domains
• General account information

Access your account here:

https://nooto.org/auth.php

Settings

Nooto provides a lightweight set of publishing and presentation settings designed to keep the system simple while still allowing each project to develop its own identity.

Inside the settings area you can typically configure:

NootoID and URL

The NootoID defines the public address of your nooto.

Example:

https://nooto.org/my-project

Title

The title represents the main public name of your Nooto and is usually used in page headers, browser titles, previews, and navigation.

Main Content in Markdown

The body of the Nooto contains the Markdown content of your pages, sections, images, tables, links, media, and overall structure.

Text Alignment

You can choose how the main content is aligned (left/justify), depending on the visual style and readability you want for the project.

Author and Institution

Author and Institution fields can be used for personal attribution, academic projects, organizations, studios, research groups, archives, or editorial publications.

Language

The primary language of the Nooto can be specified to improve consistency, typography, accessibility, and metadata generation.

Color and Typography

Each Nooto can have its own visual identity through a primary color. This color is automatically reflected in important interface elements such as the navigation menu, main titles, and hyperlinks.

A consistent color choice helps give personality and recognition to the overall project while keeping the interface clean and readable.

Visibility and Publishing Status

A Nooto can typically be configured as:

• Private
• Public

This controls how and where the nooto becomes visible inside the Nooto ecosystem.

URLs for a PNG round Icon, rectangular Logo and a Cover image.

Custom Domain

A Nooto can run on many different types of web addresses, including:

https://domain.com
https://domain.com/folder
https://sub.domain.com
https://sub.domain.com/folder

The setup is intentionally lightweight. In all cases, Nooto only requires two small files (.htaccess and index.php) to be uploaded inside the correct root folder or subfolder of your web hosting space.

For example:

• domain.com → upload the files into the main public web root
• domain.com/folder → upload the files into that specific folder
• sub.domain.com → upload the files into the subdomain folder
• sub.domain.com/folder → upload the files into the subdomain > folder

In addition to uploading the files, it is also important to configure the exact desired URL inside your Nooto account. This allows the Nooto system to correctly recognize, connect, and serve your content from the chosen address.

If you do not yet own a domain, you can first create your Nooto on nooto.org and later connect your own domain whenever you want.

Export

Every Nooto can be exported as a simple .md file.

The export contains:

• Your content in pure Markdown
• Site metadata
• Colors and layout settings
• Images and branding links
• Author information

The exported file is human readable and can be:

• archived as a backup
• edited offline
• stored on Git repositories
• moved to another server
• reused in future projects

Example:

---
Title: "My Nooto"
NootoID: "my-page"
Lang: "en"
Color: "#222222"
Etc: "etc"
---

### Hello World

This is my exported Nooto with all my content.

The export system is designed to keep your content portable, independent and future-proof.

FAQ

To create FAQ you can use the faq blocks.

[faq]
# Question 1 
Answer 1
[/faq]
[faq]
# Question 2
Answer 2
[/faq]

Support

For any enquiry drop a line.

Behind the scene

From URL to Published Page

When a visitor opens a Nooto page, such as:

https://nooto.org/example

Nooto performs a series of steps before displaying the content.

1. URL Resolution

The system first analyzes the incoming request.

Depending on the domain and URL structure, Nooto determines:

• which site (NootoID) is being requested
• which section of the site is being requested

• whether the request comes from:

  • a native Nooto URL (nooto.org/NootoID)
  • a custom external domain
  • a reverse proxy configuration

Invalid NootoIDs or page names are immediately rejected.

2. Site Discovery

Once the NootoID is known, Nooto searches the database for the corresponding site.

A site can be found through:

• its NootoID
• its external domain mapping

If no matching site exists, the visitor is redirected to the public Nooto directory.

3. HTTP Cache Validation

Before doing any expensive work, Nooto generates an ETag based on the site's latest edit timestamp.

If the visitor already owns the latest version, the server returns:

304 Not Modified

without rebuilding the page.

This significantly reduces bandwidth and server load.

4. Visit Registration

Nooto records page visits in a lightweight way.

To avoid counting refreshes repeatedly, each visitor generates at most one hit per site every 24 hours.

This produces cleaner statistics while keeping the implementation simple.

5. Site Configuration

The platform loads the site's basic settings:

• language
• colors
• logo
• cover image
• external URL
• visual preferences

Invalid values are replaced with safe defaults.

6. Markdown Processing

The core content of a Nooto site is stored as Markdown.

Nooto loads the Markdown document and prepares a secure parser.

The parser operates in Safe Mode, meaning arbitrary HTML cannot be injected into the page.

7. Nooto Extensions

Before Markdown is rendered, Nooto scans the document for special Nooto blocks.

Examples include:

* [card]
* [cards]
* [gallery]
* [timeline]
* [social]
* [books]
* [news]
* [button]
* [contact]

Each block is temporarily replaced with an internal placeholder.

After Markdown rendering is completed, those placeholders are restored as fully generated HTML components.

This approach keeps the Markdown engine simple while allowing advanced layouts.

8. Media Enhancement

Nooto automatically enhances content.

Examples include:

• image proxying
• lazy loading
• image fallback handling
• audio player generation
• video embedding
• YouTube embedding
• Vimeo embedding
• Google Maps cards
• secure external links

The author only needs to provide standard URLs.

9. Section Extraction

Every first-level heading:

# Introduction
# Projects
# Contact
# Whatever marked with a single #

is treated as a major site section.

Nooto extracts these sections and creates:

• section identifiers
• menu entries
• standalone section URLs
• page anchors

A single Markdown document therefore becomes a complete multi-section website.

10. Site Cache Generation

After parsing is complete, Nooto stores the processed result in a JSON cache.

The cache contains:

• site title
• extracted sections
• generated HTML
• description metadata

Future requests can reuse this cache without reparsing the Markdown document.

Whenever the site is edited, the cache automatically becomes obsolete and is rebuilt.

11. Navigation Generation

Using the extracted sections, Nooto builds the navigation menu.

The menu automatically adapts to the content.

No manual menu management is required.

If enough sections exist, search functionality is enabled automatically.

12. Metadata Generation

Finally, Nooto generates:

• page title
• description
• canonical URL
• Open Graph image
• favicon URLs
• Apple touch icons

This ensures the page is ready for:

• browsers
• search engines
• social media previews

13. Page Delivery

The final HTML is sent to the visitor.

What the visitor experiences as a simple page is actually the result of:

1. URL resolution
2. site discovery
3. cache validation
4. Markdown parsing
5. component generation
6. media enhancement
7. navigation building
8. metadata generation

All of this happens automatically from a single Markdown source.