Notebook

A modern, lightweight markdown note-taking application built with Tauri, React, and TypeScript. Notebook provides a clean interface for creating, editing, and managing markdown files with live preview capabilities.

Overview

Notebook is a desktop application that combines the power of Rust's performance with the flexibility of web technologies. It allows users to organize and edit markdown notes in a distraction-free environment with real-time preview support.

Features

• Markdown Editing: Full-featured markdown editor with syntax support
• Live Preview: Toggle between edit and preview modes to see rendered markdown
• File Management: Create, rename, and delete markdown notes
• Folder Support: Open any folder to organize your notes
• Keyboard Shortcuts: Save with Cmd/Ctrl+S
• Clean UI: Modern, minimalist interface built with Tailwind CSS
• Cross-Platform: Built with Tauri for native desktop performance

Technology Stack

Frontend

• React 19: UI framework with modern hooks and functional components
• TypeScript: Type-safe development
• TanStack Router: Type-safe routing solution
• Tailwind CSS: Utility-first CSS framework
• Vite: Fast build tool and dev server
• React Markdown: Markdown rendering with GitHub Flavored Markdown support
• Lucide React: Icon library

Backend

• Tauri 2.0: Rust-based desktop framework
• Rust: System programming language for file operations
• Tauri Plugins:
  • tauri-plugin-dialog: Native file/folder dialogs
  • tauri-plugin-opener: System opener integration

Architecture

Application Structure

notebook/
├── src/                          # Frontend source
│   ├── components/               # React components
│   │   ├── Editor.tsx           # Markdown editor with preview
│   │   ├── Modal.tsx            # Reusable modal component
│   │   └── Sidebar.tsx          # File navigation sidebar
│   ├── routes/                  # Application routes
│   │   ├── root.tsx             # Root layout with app context
│   │   ├── home.tsx             # Landing page
│   │   └── note.tsx             # Note editing route
│   ├── context/                 # React context
│   │   └── AppContext.tsx       # Global app state
│   ├── lib/                     # Utilities
│   │   └── api.ts               # Tauri backend API calls
│   └── main.tsx                 # Application entry point
├── src-tauri/                   # Tauri Rust backend
│   ├── src/
│   │   ├── lib.rs               # Tauri commands & file operations
│   │   └── main.rs              # Application entry
│   ├── Cargo.toml               # Rust dependencies
│   └── tauri.conf.json          # Tauri configuration
└── package.json                 # Node dependencies

Component Hierarchy

RootComponent (AppContext Provider)
├── Sidebar
│   ├── File List
│   └── Action Buttons (New, Open Folder)
├── Modal (Create/Rename/Delete)
└── Outlet (Router)
    ├── IndexComponent (Home)
    └── NoteComponent
        └── Editor
            ├── Edit Mode (Textarea)
            └── Preview Mode (ReactMarkdown)

Data Flow

1. Frontend → Backend: React components invoke Tauri commands via the api.ts module
2. Backend → Filesystem: Rust handlers perform file system operations
3. Backend → Frontend: Results are returned as promises to React components
4. State Management: App-wide state managed via React Context (AppContext)
5. Routing: TanStack Router handles navigation between home and note views

Tauri Commands (Rust Backend)

The application exposes the following Rust commands to the frontend:

• list_files(dir: string): Lists all .md files in a directory
• read_file(path: string): Reads file content
• save_file(path: string, content: string): Writes content to file
• create_file(path: string, filename: string): Creates new markdown file
• rename_file(path: string, new_name: string): Renames existing file
• delete_file(path: string): Deletes a file

Frontend API Layer

The lib/api.ts module provides typed TypeScript wrappers around Tauri commands:

invoke("list_files", { dir })     → Promise<string[]>
invoke("read_file", { path })     → Promise<string>
invoke("save_file", { path, content }) → Promise<void>
// ... etc

Getting Started

Prerequisites

• Node.js (v18 or higher)
• Rust (latest stable)
• Platform-specific build tools:
  • macOS: Xcode Command Line Tools
  • Linux: gcc, webkit2gtk
  • Windows: Visual Studio Build Tools

Installation

1. Clone the repository:

git clone <repository-url>
cd notebook

2. Install dependencies:

npm install

Development

Run the application in development mode:

npm run tauri dev

This will:

• Start the Vite dev server on http://localhost:1420
• Launch the Tauri development window
• Enable hot-reload for frontend changes

Building

Build the application for production:

npm run tauri build

This creates optimized platform-specific installers in src-tauri/target/release/bundle/.

Usage

1. Open a Folder: Click the folder icon in the sidebar to select a directory
2. Create Note: Click "New Note" button and enter a filename
3. Edit Note: Click on any note in the sidebar to open it
4. Toggle Preview: Use the Preview/Edit button to switch modes
5. Save: Click Save button or press Cmd/Ctrl+S
6. Manage Notes: Hover over files to rename or delete

Project Scripts

• npm run dev: Start Vite dev server
• npm run build: Build frontend for production
• npm run tauri dev: Run Tauri development app
• npm run tauri build: Build production app with installers

Configuration

Tauri Configuration

Application settings can be modified in src-tauri/tauri.conf.json:

• Window size and title
• App identifier
• Build commands
• Security policies

Styling

Tailwind CSS configuration is in tailwind.config.js. The app uses:

• Typography plugin for markdown rendering
• Custom gray color scheme
• Responsive utilities

Recommended IDE Setup

• VS Code
• Extensions:
  • Tauri
  • rust-analyzer
  • Tailwind CSS IntelliSense

License

This project is open source and available under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.