Instructions

Double-click to mark a task as active.

Single-click to draw a line through your tasks.

Drag and drop to reorder tasks.

Press Enter to add a new task without needing to press the button.

Your tasks will be stored automatically in the local storage of your browser after the following actions: inserting a new task, marking or unmarking a task as active, dragging and dropping, and drawing or removing a line through a task.

How to use this to-do list as an overlay in your stream?

Downloading and using it as a local file

Download the templates and save them in a folder. Unzip them and copy the path of your desired template. 

Now open OBS and add a new source called "Browser." Mark the "Local" option and paste the path of the template. Adjust the maximum height of the app. Choose a size that doesn’t cover any useful information and can adjust automatically when new tasks are added without needing to resize the app.

Save the changes and position the to-do list where you want it to be. The background is already transparent, so you don’t need to adjust anything. This version will automatically adjust its size when new tasks are added.

Click on "Interact" to open a new window. In this window, you can manage your notes as a web app without needing to record an entire browser window.

You can close the Interact window by pressing Alt + F4. You can open it whenever you need it. Your tasks will be saved automatically in the local storage of OBS’s integrated browser.

Cons: due to OBS integrated browser limitations the functions drag and drop and press enter do add a new task doesn't work.

Using it as a web application

You can also simply use the app on this website and capture it as a window. To add a transparent background to this version, you'll need to edit the page’s HTML and add a background color that differs from the colors in the displayed template.

Choose your desired template. Right-click on the background of the itch.io page. Click 'Inspect,' select the arrow icon, click on the To-Do app, select 'body,' change the background color, and set the opacity to 100%. Now, add the browser capture in OBS, apply the chroma key filter, and adjust the size. Here's a video that explains how to set it up.