DEV Community

Cover image for Building a Real-Time Collaborative Notes Application with htmx 2.0
Sohini Pattanayak
Sohini Pattanayak

Posted on

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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:

Image description

Happy coding! ✨
Sohini

Top comments (3)

Collapse
 
sharma_suhas_71dabcf4fec3 profile image
Sharma Suhas

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

Collapse
 
sohinip profile image
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.

Collapse
 
artydev profile image
artydev

Thank you :-)