I am using Django for backend, and normal HTML/CSS/JavaScript for frontend without any interactive UI libraries like React.

Current Approach:

I have a page that contains a form to edit instance X as an example. If someone opens this page for editing, I am adding a value in my database that this instance is locked by this editor. After he finalizes editing, he should press "save" or "close" button to unlock it for others.

Problem:

If the editor didn't save and forgot to "close", the instance will remain locked till he come back and close it.

Required Approach:

But, I want to dynamically prevent the others to open it because someone is actively editing X now. By "actively" word, I mean that this user is using the page now, and the page tab is active in his browser. So, if he just closes the tab or browser, or leaves the tab inactive for maybe 5 minutes, I want to unlock the instance for editing.