productivity

Task Packing

A local-first visual to-do that sizes tasks as area and places only the work that fits on a finite capacity board.

Local processing
About your filesFiles and content selected in this tool are processed in your browser and are not uploaded to a Browser Kitty backend.
Operation demo See the basic workflow in a short video.

About this tool

Task Packing is a visual to-do app built around two separate ideas: a normal task list that can hold everything you still need to do, and a finite grid that represents how much work you can actively carry. Instead of forcing every task onto the board, you place only the work that currently fits.

Tasks can use XS–XL presets or custom sizes from 1×1 to 8×8 cells. The board can be resized from 3 to 16 rows and columns, prevents overlaps and overflow, and reports both total free cells and the largest free rectangle. Notes can appear directly on tiles when space allows, and the current board can be exported as a PNG without action controls.

Tasks, placements, and completion history are autosaved to localStorage. JSON backup is the primary portable format, with an optional gzip-compressed URL-fragment backup for small datasets. The app itself does not upload task contents to an external server.

Good for

  • Keep a long to-do list without pretending every task can be active at once
  • Visualize workload including effort or mental weight that is not well represented by time alone
  • Check whether enough contiguous capacity remains before taking on a large task
  • Manage the same task set with drag-and-drop on desktop and touch-oriented controls on mobile

What it can do

Key capabilities available in this tool.

How to use

  1. Open the tool and add a task to the task list. When you no longer need the starter examples, clear only the sample data from the task-list banner.
  2. Choose an XS–XL preset or a custom size, then add an important flag or note when useful.
  3. On desktop, drag the task onto the board or use the place action. On mobile, use batch placement to select multiple unplaced tasks.
  4. Watch the free-cell count and largest free rectangle while keeping only the work that fits within your current capacity. Repack the board when you need a larger contiguous space.
  5. Export the board as PNG when you want a visual record. Use JSON for normal backup and the optional compressed URL backup only for small datasets.
  6. Move finished tasks to history and undo accidental completions when needed.

Supported

  • Task sizes include XS, S, M, L, XL, plus custom dimensions from 1×1 to 8×8 cells.
  • Board sizes include presets such as 4×4, 5×5, 7×7, and 9×9, with custom row and column counts from 3 to 16.
  • Desktop supports drag operations across the task list, board, and completion history, while mobile provides touch-oriented batch placement and controls.
  • The current board can be exported as PNG. JSON is the primary backup format, while browsers with CompressionStream can also create a compressed URL backup for small datasets.
  • Supported browsers can use a Document Picture-in-Picture mini board; unsupported browsers hide the mini-board button entirely.

Limitations and notes

  • Task area is not an automatic time estimate. You decide what each cell means for your own workload and capacity.
  • A board may have many free cells but still lack a contiguous rectangle large enough for a particular task; use the largest-free-rectangle indicator as a guide.
  • The Document Picture-in-Picture mini board is optional and only works in supporting browsers.
  • URL backup places gzip-compressed data in the URL fragment; it is compression, not encryption. Use JSON backup for sensitive or larger datasets.
  • Data is stored in localStorage and can be lost if browser site data is cleared, so export a JSON backup for important states.

Frequently asked questions

How is this different from a normal to-do list?

It keeps a normal task list but adds a finite board for the work you are actively carrying. Unplaced tasks stay in the list instead of disappearing.

How many minutes does one cell represent?

There is no fixed duration. You can make a short but mentally heavy task large and a longer mechanical task small, using area as a personal capacity measure.

Are my tasks sent to a server?

No. Tasks, placements, completion history, PNG export, and JSON backup are processed locally. URL backup stores the state in the URL fragment rather than uploading it through the app.

Is the URL backup secure?

It is gzip-compressed but not encrypted. Anyone with the URL can restore its contents, so do not use it for sensitive tasks and prefer JSON for normal backup.

Can I use it on a phone?

Yes. On mobile, tapping a board task opens its details, and unplaced tasks can be selected together for batch placement.

Offline version and source code

The core task list, board placement, history, PNG export, and JSON backup work from a single HTML file without runtime network communication. The optional URL backup uses the URL fragment. The Document Picture-in-Picture mini board depends on browser support and secure-context requirements.

View source on GitHub