DEV Community

cuculhart
cuculhart

Posted on

I built a cell-less spreadsheet where you count by enclosing — free, runs in your browser

I built Sethera Piece — a calculation board with no cells. You drop
text and number "pieces" anywhere on a canvas, draw a zone around them,
and it aggregates them live. MIT-licensed, fully local, and it runs in
your browser with no install.

Repo: https://github.com/cuculhart/sethera-piece
Live demo: https://cuculhart.github.io/sethera-piece/

An estimate built on a paper frame in Sethera Piece

The idea

A lot of what people do in Excel isn't actually spreadsheet work. We
use cells as graph paper: laying out forms, sticking notes, summing
things by hand. The grid is a constraint the job never asked for.

Sethera Piece removes the grid entirely. Objects live anywhere. If you
want a total, you draw a zone around the pieces — spatial layout is
the formula.

What it feels like

  • Pieces — text / number / sticky-note+number. Multi-line, alignment, colors, sizes, borderless display.
  • Σ zones — aggregate enclosed pieces with Sum / Count / Avg / Max / Min. Drag a piece in or out and every zone's total updates instantly. A piece that only partially overlaps a zone gets a red dashed warning so it can't silently escape aggregation.
  • Calc pieces — + − × ÷ with rounding modes. Wire a zone's output handle into a calc's inputs and you get chains like subtotal × tax rate → total with zero syntax.

The screenshot above is a US-style estimate built on an A4 paper
frame: the AMOUNT column sits inside a Σ zone (subtotal 4,800), a tax
piece and the zone feed a calc piece that shows the total (5,196).
Printing/PDF export captures the paper frame.

Color = category (SumIf / CountIf)

The 1.0 feature I'm happiest with: pick a zone, choose a piece color
in the inspector, and only pieces of that color are counted. Eight
usable colors = eight categories. To mark items, multi-select them
and batch-change the color — that's the whole workflow. No label
matching, no strings to typo.

Everything else in the box

  • Lines, rects, ellipses, arcs, curves, diagonals — table frames, flowchart connectors; grid snapping makes adjacent edges land exactly
  • Custom pieces — group any combination into a reusable unit; template library saves named selections across documents
  • CSV/TSV round-trip with Excel — paste a range or import a file (auto-detects UTF-8/UTF-16/Shift_JIS/EUC-JP); number columns become number pieces that aggregate immediately
  • Paper & print — A4/B5/A3 portrait/landscape, print/PDF capture
  • Fonts — bundled Noto Sans JP / Shippori Mincho / BIZ UDP Gothic / monospace, or a custom font name with a missing-font warning
  • Japanese / English UI — toggle in one click, auto-detects from the browser
  • Fully local — localStorage + JSON files only. Nothing is sent anywhere. No telemetry

Why the name

"Sethera" comes from Yan Tan Tethera, a counting rhyme shepherds
in northern England used to tally sheep — probably one of humanity's
oldest aggregation functions. Enclosing pieces to count them is the
modern version.

(The other image in my head: a general moving pieces on a sand table.
Move a piece and the situation changes — a board that recalculates
when you move it.)

Tech stack

React 19 + TypeScript + Vite, canvas on
@xyflow/react (React Flow, MIT).
I picked React Flow over tldraw because tldraw's license charges for
production use; React Flow is MIT. The aggregation core is just
rect-containment + a filter predicate — the spatial model does the
rest.

Honest limitations

Single-player. Real-time collaboration is still only an idea on the
drawing board — the local-first version comes first. Editing is
mouse-first; a phone can view but won't enjoy it.

License

MIT. Feedback and issues welcome:
https://github.com/cuculhart/sethera-piece/issues

Top comments (0)