NoteMark

A local-first desktop note-taking application built with Electron, React and TypeScript.

Secure filesystem access • Typed IPC • Markdown Preview • Full-text Search • Tags • Command Palette • Playwright E2E

---

Overview

NoteMark is a lightweight, local-first desktop note-taking application built with Electron, React, and TypeScript.

The project focuses on strong engineering practices rather than feature count alone. It demonstrates secure Electron architecture, filesystem hardening, typed IPC contracts, automated testing, observability, and a polished user experience.

Notes are stored as portable Markdown files on disk, giving users full ownership over their data without requiring accounts, cloud synchronization, or external services.

This repository also serves as a portfolio project for studying desktop application architecture, front-end engineering, testing strategies, and product development.

---

Features

Writing Experience

• Local-first Markdown notes
• Auto-save editing workflow
• Markdown preview mode
• GitHub Flavored Markdown support
• Safe Markdown rendering without raw HTML

Organization

• Full-text search across titles and content
• Tag support using Markdown frontmatter
• Tag filtering combined with search
• Stable note selection during filtering
• Command Palette (Ctrl/Cmd + K)

Security

• Filesystem access isolated in the Electron main process
• Typed IPC contracts through preload
• Path traversal protection
• Runtime validation for notes, searches, and tags
• contextIsolation enabled
• Electron sandbox enabled

Observability

• Sentry integration for main and renderer processes
• React Error Boundaries
• Autosave breadcrumbs
• Sensitive data sanitization

Testing

• Playwright E2E tests
• Isolated test environments using NOTEMARK_HOME
• Validation for search, tags, persistence, and Markdown preview
• Real Electron application testing instead of mocked environments

---

Demo

A short product walkthrough GIF/video will be added here.

![Demo](./docs/mark-note.png)

---

Architecture Highlights

Electron Process Separation

• Main Process

  • Application lifecycle
  • Native dialogs
  • Filesystem access
  • IPC handlers

• Preload Process

  • Secure API bridge
  • Typed contracts
  • Renderer isolation

• Renderer Process

  • React UI
  • State management
  • Search
  • Markdown preview
  • Tag filtering

Filesystem Hardening

• Runtime validation for note titles
• Path traversal prevention
• Safe path resolution
• Content validation before writes
• Internal paths never exposed to the renderer

Local Metadata

Tags are stored using Markdown frontmatter:

---
tags: [work, study]
---

# My note

Notes remain fully portable and readable outside the application.

---

Tech Stack

Category	Technology
Desktop Runtime	Electron
Front-end	React 18
Language	TypeScript
Build Tool	Vite + electron-vite
Styling	Tailwind CSS
State Management	Jotai
Markdown Editing	MDXEditor
Markdown Rendering	react-markdown
Testing	Playwright
Observability	Sentry
Packaging	electron-builder

---

Getting Started

Requirements

• Node.js 24.x
• npm

The repository includes:

.nvmrc
.node-version
package.json (engines.node)

to guarantee consistent runtime versions across environments.

Installation

Clone the repository:

git clone https://github.com/Mornieur/mark-note.git

Move into the project directory:

cd mark-note

Install dependencies:

npm install

Windows PowerShell users may use:

npm.cmd install

---

Development

Start the application:

npm run dev

Windows:

npm.cmd run dev

Build the application:

npm run build

Preview the production build:

npm run start

---

Scripts

Command	Description
npm run dev	Start development mode
npm run build	Typecheck and production build
npm run start	Preview built application
npm run typecheck	Validate TypeScript
npm run lint	Run ESLint
npm run lint:fix	Fix lint issues
npm run format:check	Validate formatting
npm run format:write	Apply formatting
npm run test:e2e	Execute Playwright E2E suite
npm run test:e2e:headed	Run E2E tests with UI
npm run demo:record	Record product demonstration

---

Project Structure

src/
├── main/         # Electron main process
├── preload/      # Secure renderer bridge
├── renderer/     # React application
└── shared/       # Shared contracts and types

tests/
└── e2e/          # Playwright tests

docs/
├── ARCHITECTURE.md
└── mark-note.png

---

Security Model

The application follows Electron security best practices:

contextIsolation: true
sandbox: true
nodeIntegration: false

Additional protections include:

• Runtime validation for note operations
• Path traversal prevention
• Typed IPC communication
• Filesystem access restricted to the main process
• Safe Markdown rendering
• Restricted link protocols

---

Search

Search functionality is implemented entirely through the Electron security boundary.

Features include:

• Full-text search
• Title matching
• Content matching
• Result excerpts
• Debounced renderer updates
• No persistent indexing
• No filesystem path exposure

---

Tags

Tags use Markdown frontmatter:

---
tags: [portfolio, work]
---

The main process:

• Parses tags
• Normalizes to lowercase
• Removes duplicates
• Validates length and allowed characters
• Preserves metadata during note updates

---

Markdown Preview

Markdown preview runs entirely in the renderer.

Features:

• GitHub Flavored Markdown
• Safe link handling
• No raw HTML rendering
• Secure protocol validation
• Edit and preview modes

---

Testing

The project maintains a lightweight but meaningful quality gate:

npm run typecheck
npm run lint
npm run format:check
npm run test:e2e
npm run build

The Playwright suite validates:

• Persistence flows
• Auto-save behavior
• Full-text search
• Markdown preview
• Tag creation
• Tag filtering
• Command Palette interactions
• Empty states

Tests run against the real Electron application.

---

Observability

Sentry support exists for both:

• Main process
• Renderer process

By default:

• Development mode disables telemetry
• Sensitive information is sanitized
• Note content is never transmitted
• DSNs must be provided manually

---

Deployment Notes

The project standardizes on Node.js 24.x:

package.json -> engines.node
.nvmrc
.node-version

Vercel deployments are intended only as lightweight previews and not as the primary distribution mechanism for the Electron application.

---

Technical Decisions

Why Electron?

• Native desktop APIs
• Cross-platform support
• Strong TypeScript ecosystem
• Excellent React integration

Why Jotai?

• Lightweight state management
• Minimal boilerplate
• Excellent TypeScript support

Why Playwright?

• Real Electron testing
• Reliable end-to-end workflows
• No mocked application behavior

Why Local-First?

• User ownership of data
• No vendor lock-in
• Offline support
• Portable Markdown files

---

Roadmap

Future improvements include:

• Favorites
• Better save status indicators
• Syntax highlighting for code blocks
• Unit tests for filesystem validation
• CI pipelines
• Release automation
• AI-assisted features:
  • Generate note titles
  • Summarize notes
  • Suggest tags
  • Rewrite selected text
  • Find related notes

---

License

MIT