Noyto Noyto
Create Your First Note!

Documentation & Guide

Everything you need to write, customize, and publish notes with Noyto.

1. Getting Started

Noyto is a fast, distraction-free markdown publisher and visual bio builder. You can compose documents, technical documentation, personal bio profiles, and custom card layouts with instant real-time previews.

Key Features

  • Rich Markdown Support — Standard markdown plus custom syntax for cards, grids, bio profiles, and more
  • Live Preview — Real-time preview sidebar with background and color support
  • Custom Backgrounds — Colors, images, and videos with automatic text overlays
  • Discord Embeds — Rich link previews when sharing on Discord
  • Custom URLs — Memorable slugs for your published documents
  • Password Protection — Optional password protection for sensitive content
  • Syntax Highlighting — Code blocks with 180+ language support
  • Auto-save — Local storage saves your work as you type
INSTANT DRAFTS

All editor inputs, custom layouts, and markdown formatting are automatically saved to local storage as you type.

Editor Modes

Switch between three viewing modes using the segmented control in the toolbar:

  • Editor — Full-width markdown editing view
  • Split — Side-by-side editor and live preview
  • Preview — Full-width rendered markdown view
NOTE

The preview sidebar shows live background changes, custom admonition colors, and all markdown formatting in real-time as you type.

3. Callout Admonitions

Highlight crucial tips, warnings, and alerts with GitHub-style callouts:

markdown 
> [!NOTE]
> Helpful additional information.

> [!TIP]
> Useful suggestion or shortcut.

> [!WARNING]
> Critical step required before proceeding.

> [!DANGER]
> Destructive action notice.

> [!INFO]
> Informational context for readers.

> [!IMPORTANT]
> Key information to remember.

> [!CAUTION]
> Warning about potential issues.

Custom Color Admonitions

You can customize admonition colors using the extended syntax:

markdown 
> [!NOTE|#e0f2fe|#0369a1]
> Custom colored note with background and text colors.

> [!TIP|#dcfce7|#166534]
> Custom tip with green theme.

> [!WARNING|#fef3c7|#92400e]
> Custom warning with amber theme.
NOTE

Callouts render with matching accent colors, glassmorphic backgrounds, and distinct indicator icons. Use [!TYPE|background|text-color] syntax for custom colors, or omit colors for default styling.

4. Profile Bio Cards & Containers

Create visual profile summaries, avatar status badges, and framed containers:

markdown 
:::bio avatar=https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150 status=PRO
Alex Rivera
Frontend engineer & designer building open web software.
[badge:Open to Work|#10b981|#ffffff] [badge:TypeScript|#3178c6|#ffffff]
:::

:::bio avatar=https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150
Alex Rivera
Frontend engineer & designer building open web software.
:::
markdown 
:::card title=Project Overview
This content is enclosed in an elevated container card.
:::

:::banner src=https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=800
Header in Banner
Text over a background banner image.
:::

5. Multi-Column Grids

Arrange content and cards side-by-side using responsive grid blocks:

markdown 
:::grid cols=2
:::card title=Feature A
Fast response times.
:::
:::card title=Feature B
Edge network distribution.
:::
:::

6. Text Alignment, Badges & Buttons

Customize placements, sizes, colors, and interactive buttons:

markdown 
->This text is centered<-
->>This text is aligned right<<-
<->This paragraph is justified on both sides.<->

++Extra large headline text++
--Small subtitle caption text--

[color:#ec4899]Custom colored text[/color]
[gradient:linear-gradient(135deg,#6366f1,#ec4899)]Gradient vibrant text[/gradient]

[badge:Beta|#3b82f6|#ffffff]
[btn:Follow Me|https://x.com/noyto|gradient]
[btn:Documentation|/docs|outline]

7. Code & Syntax Highlighting

Syntax highlighting is built-in for over 180 languages with one-click copy buttons:

typescript 
interface ProfileBio {
  name: string;
  avatar: string;
  tags: string[];
}

const author: ProfileBio = {
  name: "Alex",
  avatar: "/alex.png",
  tags: ["Creator", "Developer"]
};

8. Background Customization

Add custom backgrounds to your documents using colors, images, or videos:

markdown 
<!--noyto-bg:#1a1a2e-->
# Dark Blue Background

<!--noyto-bg:https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=1920-->
# Image Background

<!--noyto-bg:https://videos.pexels.com/video-files/28450968/12386901_1920_1080_25fps.mp4-->
# Video Background
EASY SETUP

While you can manually add the background comments, the easiest way is to use the "Background" field in the publish modal. Simply paste your color, image URL, or video URL there and it will be automatically applied.

BACKGROUND TYPES

Supports CSS colors (hex, rgb, named), image URLs, and video URLs. Backgrounds automatically add dark overlays for text readability. Videos auto-play, are muted, and loop continuously.

9. Publishing & Custom URLs

Publish your documents with custom URLs and additional options:

text 
Publish Modal Options:
- Title: Document title for display
- Description: Brief description for embeds
- Custom URL: Your custom slug (e.g., "my-awesome-doc")
- Background: Color, image, or video URL
- Password: Optional password protection
- Hide Views: Hide view count from readers

URL Customization

Choose a memorable custom URL for your document:

  • Auto-generated — Random slug like abc-123xyz
  • Custom — Your choice like my-tutorial or portfolio-2024
  • From title — Automatically slugified from your document title
WARNING

Custom URLs must be unique. If a URL is already taken, you'll need to choose another. URLs cannot be changed after publishing.

10. Discord Embed Support

When you share your custom URL on Discord, it will automatically display a rich embed card with your document's title and description:

text 
Share: https://noyto.pages.dev/your-custom-slug

Discord will show:
📄 Your Document Title
Your description or "No Description"
INFO

Make sure to set a title and description in the publish modal for the best embed appearance. If no description is provided, it will show "No Description".

11. Advanced Features

Password Protection

Protect sensitive documents with optional password protection. Readers will need to enter the correct password to view the content.

View Count Privacy

Choose to hide view counts from readers while still tracking them for your own analytics.

Edit Keys

Each document comes with a unique edit key that allows you (or others you share it with) to edit the document later. Edit keys are remembered locally for convenience.

SECURITY

Keep your edit keys secure. Anyone with the edit key can modify your document content.

12. Keyboard Shortcuts

  • ⌘ + B or Ctrl + B — Bold selection
  • ⌘ + I or Ctrl + I — Italic selection
  • ⌘ + K or Ctrl + K — Insert link
  • Tab — Indent 2 spaces