Nocturnote is a sleek, modern, and highly customizable note-taking application designed for the minimalists who crave power. Built with the robustness of **Electron** and the agility of **Svelte**, it bridges the gap between a simple scratchpad and a full-fledged editor.

> "A distraction-free writing environment that adapts to your state of flow, not the other way around."

## Visual Showcase


## Core Philosophy

Nocturnote was born from a frustration with bloated text editors. It focuses on:

* **Immediacy:** Opens instantly.

* **Clarity:** UI that recedes when you're typing.

* **Flexibility:** From a retro "Notepad" aesthetic to a cyberpunk "Rain Mode".

## Key Features

* **Customizable Typography:** Fine-tune your font family, size, weight, and line height to match your reading preferences.

* **Seamless File Management:** Native support for `.txt` and `.md` files with auto-save capabilities.

* **Advanced Search:** Regex-powered search and replace for power users.

* **Visual Modes:** Switch between a classic light aesthetic or the immersive dark mode with digital rain effects.

* **Information Bar:** Real-time stats on line/column position, character count, and file encoding.

## Architecture & Tech Stack

Nocturnote leverages a modern stack to ensure performance and cross-platform compatibility:

* **Electron:** Provides the native desktop shell.

* **Svelte:** Delivers a reactive, DOM-efficient UI without the virtual DOM overhead.

* **TypeScript:** Ensures code reliability and maintainability.

* **Tailwind CSS:** Enables rapid styling and theming.

* **Electron-Vite:** A blazing fast build tool optimized for Electron development.

## Getting Started

### Installation

Ensure you have Node.js installed, then:

```bash

# Clone the repository

git clone https://github.com/fezcode/nocturnote.git

# Navigate to the directory

cd nocturnote

# Install dependencies

npm install

```

### Development

To start the app in development mode with hot-reloading:

```bash

npm run dev

```

### Building for Production

Create distributable binaries for your OS:

```bash

# Build for all platforms

npm run build

# Or specific platforms

npm run build:win

npm run build:mac

npm run build:linux

```

(repo_link) https://github.com/fezcode/nocturnote

(demo_link) https://github.com/fezcode/nocturnote

(image) /images/projects/nocturenote-header.webp

(repo_link) https://github.com/fezcode/fezcode.github.io

(demo_link) https://fezcode.com/about

(repo_link) https://github.com/fezcode/piml

(demo_link) /apps/piml-lab

(repo_link) https://github.com/fezcode/bm

(repo_link) https://github.com/fezcode/Villain-Couch

(demo_link) https://pkg.go.dev/github.com/fezcode/go-piml

(repo_link) https://github.com/fezcode/go-piml

(demo_link) https://www.npmjs.com/package/piml

(repo_link) https://github.com/fezcode/piml.js

(repo_link) https://github.com/fezcode/doku.js

(repo_link) https://github.com/fezcode/Stroque

(repo_link) https://github.com/fezcode/scrappy

(repo_link) https://github.com/fezcode/piml-highlighter/

(repo_link) https://github.com/fezcode/go-homo-sapiens-time

(demo_link) https://pkg.go.dev/github.com/fezcode/go-tournament-brackets

(repo_link) https://github.com/fezcode/go-tournament-brackets

(demo_link) https://addons.mozilla.org/en-US/firefox/addon/open-tab-with-respect/

(repo_link) https://github.com/fezcode/open-tab-with-respect

(demo_link) https://addons.mozilla.org/en-US/firefox/addon/clipboard-concat/

(repo_link) https://github.com/fezcode/clipboard-concat

(repo_link) https://github.com/fezcode/boxer

(demo_link) https://addons.mozilla.org/en-US/firefox/user/17269481/

(repo_link) https://github.com/fezcode

const GenerativeArtCommand = () => {

const [seed, setSeed] = useState(() => Math.random().toString(36).substring(7));

const handleRegenerate = () => {

setSeed(Math.random().toString(36).substring(7));

};

return (

<GenerativeArt

seed={seed}

showDownload={true}

downloadResolution={3840} // 4K Resolution

onRegenerate={handleRegenerate}

/>

);

<GenerativeArtCommand />,

import { DownloadSimpleIcon, ArrowsClockwiseIcon } from '@phosphor-icons/react';

downloadResolution = 1024,

onRegenerate,

const size = downloadResolution;

<div className="absolute bottom-4 right-4 flex gap-2">

{onRegenerate && (

<button

onClick={onRegenerate}

className="p-3 bg-white/10 hover:bg-emerald-500 text-white hover:text-black transition-all border border-white/10 rounded-sm group/regen backdrop-blur-md"

title="Regenerate Art"

>

<ArrowsClockwiseIcon size={20} weight="bold" className="group-hover/regen:rotate-180 transition-transform duration-500" />

</button>

)}

{showDownload && (

<button

onClick={handleDownload}

className="p-3 bg-white/10 hover:bg-emerald-500 text-white hover:text-black transition-all border border-white/10 rounded-sm group/dl backdrop-blur-md"

title="Download PNG (4K)"

>

<DownloadSimpleIcon size={20} weight="bold" />

</button>

)}

</div>