HTMLNotes by NellowTCS

About HTMLNotes

HTMLNotes is a lightweight, web-based note-taking application delivered as a single HTML file, built with HTML, CSS, and JavaScript. It leverages TinyMDE for rich Markdown editing and Font Awesome for a polished, icon-driven interface. Users can create, manage, and organize notes with a clean, intuitive design. Features include a toggleable sidebar, note creation, export/import capabilities in JSON and Markdown formats, and note deletion. It uses Interact.js for drag-and-drop functionality and Highlight.js for syntax highlighting.

Perfect for students, professionals, and anyone needing a portable tool for jotting down ideas, HTMLNotes runs entirely in the browser with no server-side dependencies, making it ideal for offline use.

Features

Create and Manage Notes: Easily create new notes and view all or recent notes via the sidebar.
Rich Markdown Editing: Powered by TinyMDE for seamless Markdown support with live preview.
Export Notes: Export notes as JSON or Markdown for 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 Font Awesome icons for intuitive navigation.
Real-Time Saving: Notes are saved automatically as you type using local storage.
Browser Compatibility: Works in modern browsers like Chrome, Firefox, Edge, and Safari.

Gallery

Getting Started

Option 1: Use Online

1. Visit the Live Demo.
2. Drag elements from the tools panel to the canvas.
3. Edit code in the HTML, CSS, or JavaScript tabs.
4. Save or export your project using the toolbar.

Option 2: Run Locally

1. Download HTMLNotes.html from the Releases page.
2. Open the file in a modern browser (Chrome, Firefox, Edge).
3. Start using the editor.

Option 3: Clone and Customize

1. Clone the repository:

git clone https://github.com/HTMLToolkit/HTMLNotes.git

2. Open index.html in a browser or serve it locally (e.g., npx serve).
3. Modify the code to customize the editor.

Browser Compatibility

HTMLNotes is optimized for modern browsers (Chrome, Firefox, Edge, Safari). However, some things may not work in (much) older browsers.

Usage

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" or "Recent" notes. Select a note to edit or view its content.

Exporting/Importing Notes

Export notes as JSON or Markdown via the "Export Note" dropdown for sharing or backup. Import previously exported notes using the "Import Note" button.

Deleting Notes

Select a note and click "Delete Note" to remove it.

Dependencies

TinyMDE - Markdown Editing

Font Awesome - Icons

No server-side dependencies; runs entirely in the browser.

Contributing

Contributions are welcome! To contribute:
1. Fork the repository.
2. Create a feature branch (git checkout -b feature/new-feature).
3. Commit your changes (git commit -m "Add new feature").
4. Push to the branch (git push origin feature/new-feature).
5. Open a Pull Request.

Report bugs or request features via the Issues page.

License

HTMLNotes is licensed under the GNU General Public License v3.0. See the LICENSE file for details.

Acknowledgements

Built by NellowTCS.
Powered by TinyMDE.
Inspired by Obsidian.