Building a Real-Time Collaborative Notes Application with htmx 2.0

Hey everyone! 👋

If you caught my blog last week about Remix and React Router, you know I've been diving into new technologies over the weekends. This time, I decided to play around with htmx 2.0, and I came up with a neat little project: a real-time collaborative notes application. Let me tell you all about it! 🚀

What I Built

I built a collaborative notes application where you can add, edit, and delete notes in real-time. The coolest part? All of this is done with minimal JavaScript, thanks to htmx!

Why htmx 2.0?

htmx 2.0 is pretty awesome for a few reasons:

• Partial Page Updates: You can update specific parts of a webpage without refreshing the whole thing.
• Enhanced Interactivity: It helps you create interactive web apps with less JavaScript.
• Simplified Data Handling: Managing data operations dynamically is super easy with htmx.

Key Features

1. Real-time Updates: Add, edit, and delete notes, and see changes instantly.
2. Minimal JavaScript: htmx handles dynamic content updates for us.
3. Server-Side Rendering: Notes are rendered on the server and updated dynamically on the client side.

Code Snippets

Here are some snippets to show how I used htmx:

Adding a New Note:

<form id="add-note-form" hx-post="/add-note" hx-swap="beforeend:#notes-list" class="add-note-form">
    <input type="text" name="title" placeholder="Note Title" required>
    <textarea name="content" placeholder="Note Content" required></textarea>
    <button type="submit">Add Note</button>
</form>

This form uses htmx’s hx-post to send the new note to the server and hx-swap to append the note to the list without reloading the page.

Editing a Note:

<button class="edit-button" hx-get="/edit-note/${note.id}">Edit</button>

The edit button sends a GET request to fetch the edit form for a specific note, allowing in-place editing.

Deleting a Note:

<button class="delete-button" hx-delete="/delete-note/${note.id}">Delete</button>

The delete button sends a DELETE request to remove the note, instantly updating the UI.

Project Structure

• index.html: The main HTML file.
• server.js: A simple Express.js server to handle requests.
• style.css: Basic styling for the application.

You can find the complete code for this project on my GitHub repository.

Conclusion

This project was a lot of fun and showcased the power of htmx 2.0 for creating dynamic web applications. I hope you find this project as exciting as I did!

Check out the screenshot below to see the app in action:

Happy coding! ✨
Sohini

Comments

[Sharma Suhas]

htmx is new to me.. how do you view this in comparison to React for usage in lage scale applications ?

[Sohini Pattanayak]

Heyy @sharma_suhas_71dabcf4fec3 - I feel .. when comparing htmx and React for large-scale applications, htmx excels with minimal JavaScript, making it perfect for projects needing dynamic interactions with less complexity and effective server-side rendering for fast initial loads and better SEO. And, when you talk about React, I feel it shines with its rich ecosystem, making it ideal for complex, highly interactive single-page applications (SPAs) with robust state management and component-based architecture that promotes reusability and modularity, essential for large codebases. For simpler, server-rendered projects, htmx is a fantastic choice, while React is the go-to for more complex, interactive applications.

[artydev]

Thank you :-)