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 :-)