HTMLNotes is a lightweight, web-based note-taking application built with HTML, CSS, and TypeScript. It leverages TinyMDE for rich Markdown editing and Lucide for a polished, icon-driven interface. Users can create, manage, and organize notes with a clean, intuitive design featuring theme support. Features include a toggleable sidebar, note creation, pinning, categorization, export/import capabilities in JSON and Markdown formats, note deletion, and multiple theme modes.
- Create and Manage Notes: Easily create new notes and view all, recent, or pinned notes via the sidebar.
- Pin Notes: Pin important notes for quick access.
- Categorize Notes: Organize notes with customizable categories.
- Rich Markdown Editing: Powered by TinyMDE for seamless Markdown support.
- Theme Support: Switch between Dark, Light, and Auto theme modes.
- Export Notes: Export notes as JSON or Markdown for easy sharing or backup.
- Import Notes: Import notes to restore or share content.
- Delete Notes: Remove unwanted notes with a single click.
- Responsive Sidebar: Toggle the sidebar for a distraction-free experience.
- Icon-Driven UI: Enhanced with Lucide icons for intuitive navigation.
- Real-Time Saving: Notes are saved automatically as you type.
- Modern UI: Inspired by HTMLPlayer v2 for a sleek, curvomorphic interface.
A live demo is available on GitHub Pages: https://htmltoolkit.github.io/HTMLNotes/
Open the demo in your browser or download the latest release for better offline usage.
To run or modify HTMLNotes locally, follow these steps:
-
Clone the Repository:
git clone https://github.com/HTMLToolkit/HTMLNotes.git
-
Navigate to the Project Directory:
cd HTMLNotes -
Include Dependencies:
- TinyMDE: The Markdown editor is included via CDN in the
index.htmlfile. Ensure an internet connection for the CDN, or download the TinyMDE library locally from https://github.com/jefago/tiny-markdown-editor. - Lucide: Icons are included via CDN. Ensure an internet connection, or download Lucide locally from https://lucide.dev/.
- TinyMDE: The Markdown editor is included via CDN in the
-
Open the Application: Open
index.htmlin a web browser to start using or modifying HTMLNotes. No additional setup is required if using CDNs.
-
Creating a Note:
- Click the "New Note" button in the sidebar to start a new note.
- Use the TinyMDE editor to write and format content in Markdown, with auto-saving enabled.
-
Managing Notes:
- Use the sidebar to view "All Notes", "Recent", or "Pinned" notes.
- Select a note to edit or view its content.
- Pin notes by clicking the pin button for quick access.
- Assign categories to notes for better organization.
-
Themes:
- Access the settings panel to switch between Dark, Light, and Auto theme modes.
-
Exporting/Importing Notes:
- Click the "Export Note" dropdown to save as JSON or Markdown.
- Use the "Import Note" button to upload a previously exported note.
-
Deleting Notes:
- Select a note and click "Delete Note" to remove it.
Contributions are welcome! Follow these steps to contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature). - Make your changes and commit (
git commit -m "Add your feature"). - Push to the branch (
git push origin feature/YourFeature). - Open a Pull Request.
Please ensure your code follows the project's coding standards, respects TinyMDE and Font Awesome licensing, and includes appropriate documentation.
This project is licensed under the MIT License. See the LICENSE file for details.
Note: TinyMDE and Lucide have their own licensing terms. TinyMDE is licensed under the MIT License, and Lucide is licensed under the ISC License. Ensure compliance when using or distributing these dependencies.
- TinyMDE for providing a lightweight Markdown editor: https://github.com/jefago/tiny-markdown-editor
- Lucide for high-quality icons: https://lucide.dev/
- Inspired by simple, user-friendly note-taking applications and HTMLPlayer v2 for UI design.
- Built with vanilla HTML, CSS, and JavaScript for maximum compatibility.
For questions or feedback, open an issue or reach out to me on GitHub.