Markdown Notes App

A clean, lightweight markdown notes application with live side-by-side editor and preview, built with vanilla HTML, CSS, and JavaScript.

Features

• Live Editing: Real-time markdown preview as you type
• Note Management: Create, edit, delete, and organize notes
• Tagging System: Organize notes with tags and filter by tags
• Templates: Pre-built templates for common note types:
  • Meeting Notes
  • Daily Journal
  • Project Plan
  • Book Summary
  • To-Do List
  • Blank Note
• Persistence: Notes saved automatically to localStorage (with optional Puter cloud sync)
• Theming: Light/Dark mode toggle with system preference detection
• Formatting Toolbar: One-click markdown formatting (bold, italic, lists, links, code, etc.)
• Search: Full-text search across note titles and content
• Export/Import: Export notes as markdown files
• Keyboard Shortcuts: Ctrl/Cmd+B (bold), Ctrl/Cmd+I (italic), Ctrl/Cmd+K (link), Ctrl/Cmd+S (save)
• Responsive Design: Works on desktop and mobile devices
• PWA Capable: Can be installed as a Progressive Web App

Project Structure

markdown_notes_app/
├── index.html          # Main HTML structure
├── app.js              # Application logic and state management
├── styles.css          # Styling and dark mode support
├── manifest.json       # PWA manifest
��── icons/              # App icons (icon-192.png, icon-512.png, maskable-512.png)

How It Works

State Management

The application uses a simple state model stored in JavaScript variables:

• notes: Array of note objects containing title, body, tags, timestamps
• activeId: ID of the currently selected note
• searchTerm: Current search filter
• activeTag: Currently selected tag filter
• viewMode: Current view layout (split, editor-only, preview-only)

Data persistence is handled through:

1. Primary: Puter KV storage (if user is signed in)
2. Fallback: browser localStorage

Key Components

• Editor: <textarea> for markdown input
• Preview: <article> element that renders markdown to HTML using Marked.js and DOMPurify
• Sidebar: List of notes with search and filtering capabilities
• Toolbar: Formatting buttons for common markdown syntax
• Modal: Template selector for creating notes from predefined templates

Markdown Processing

• Uses Marked.js for markdown-to-HTML conversion
• Uses DOMPurify for sanitizing HTML output
• Configured with GFM (GitHub Flavored Markdown) and line breaks enabled

Getting Started

1. Clone or download this repository
2. Open index.html in a modern web browser
3. Start taking notes immediately - no setup required

Browser Support

Works in all modern browsers that support:

• ES6 Modules
• localStorage/sessionStorage
• CSS Custom Properties
• Flexbox and Grid Layout

Customization

Adding New Templates

Edit the TEMPLATES array in app.js to add new note templates. Each template should have:

• id: Unique identifier
• name: Display name
• desc: Description shown in template picker
• icon: Lucide icon name
• accent: CSS classes for color accent
• title: Function returning default title
• body: Function returning default markdown content

Changing Theme Colors

Modify the Tailwind CSS configuration in index.html:

tailwind.config = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: '#4f46e5', dark: '#4338ca', light: '#818cf8' }
      },
      fontFamily: {
        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace']
      }
    }
  }
}

Development

This project uses no build tools or dependencies beyond CDN-loaded libraries. To modify:

1. Edit index.html for structural changes
2. Modify app.js for logic and functionality changes
3. Update styles.css for styling adjustments
4. Changes take effect immediately when refreshing the browser

Included CDN Dependencies

• Lucide Icons - via jsdelivr
• Tailwind CSS - via jsdelivr
• Marked.js - via jsdelivr
• DOMPurify - via jsdelivr

Privacy

• Notes are stored locally in your browser by default
• Optional cloud synchronization requires signing into Puter.com
• No tracking or analytics included
• All processing happens client-side

Credits

Built with:

• Lucide Icons
• Tailwind CSS
• Marked.js
• DOMPurify
• Puter.com (for optional cloud sync)

Star this repo if you like it

License

MIT License - feel free to use, modify, and distribute this application.

---

Note: This application was created using the Puter.com builder platform.