Examples menu

📊 Spreadsheet

Collaborative spreadsheet with SQLite persistence, virtual scrolling, and multi-user cursors.

SQLite persistence — cell values survive server restarts. The database stores only non-empty cells, making the grid effectively infinite in both directions.

Virtual scrolling — only the visible cells are rendered at a time. Arrow keys, Page Up/Down, Home, mouse wheel, and Tab navigate the viewport. The server fetches only the visible range from SQLite on every render.

Dynamic resize — drag the bottom-right handle to make the grid any size. A ResizeObserver dispatches a throttled event; the browser computes how many rows and columns fit, writes them into signals, and posts to a resize action that re-renders exactly the right number of cells.

Jump to coordinate — type a cell reference like AB2000 into the toolbar input and press Enter. The server parses column letters and row number, centers the viewport, and moves the cursor in one round-trip.

Collaborative cursors — each user gets a hue derived from their session ID. Other users' focused cells show a colored border in real time, broadcast via a custom example:spreadsheet scope.

Copy & paste — Ctrl+C copies the selected range as tab-separated values to the clipboard. Ctrl+V pastes TSV from the clipboard starting at the focused cell, compatible with Google Sheets and Excel.

Keyboard-first UX — a single data-on:keydown__window handler covers arrows, Tab, Enter, Escape, F2, Delete, Ctrl+C, and printable-character-to-edit, with an explicit guard so the jump input is never intercepted.

Scope design — viewport position and editing state are TAB-scoped (private per tab). Cell data and cursor positions use a custom example:spreadsheet scope, so every connected user sees live updates without leaking private state.

	A	B	C	D	E	F	G	H	I	J
1		hmm		abcdef					ooohga boohga
2				=		asdasdas	8
3			testing	:)jj	asdasd		=		=h4	5
4	hmmmmmmm ok			:)	asdas	🚀	AB2000	=H3		🔴
5		test			override 2			=I1	f
6	adasda	187	k	Hellow world	<--	who	farted?		2df	🔥
7		187!!!!	ccc	🚀	🚀	🚀	🚀	🚀	🚀	🔥
8	test	Qe	test	🚀	🚀	🚀	🚀	🚀	🚀
9		woot	GYATT	🚀	🚀	🚀	🚀	🚀	🚀	Eeerr
10		great	ddsasd	🚀	Brotli	rocking	the	stream	🚀
11		kjkj	v	gghghg	compressing	11 MB	of	data	🚀	44
12	Test		Hi	🚀	to	only	10 KB	!	🚀	cool
13	Hello World			🚀	🚀	🚀	🚀	🚀	🚀	We were here
14	Datastar rules			🚀	🚀	🚀	🚀	🚀	🚀
15			🚀	🚀	🚀	🚀	🚀	🚀	🚀
16				🚀	🚀	🚀	🚀	🚀	🚀
17	asdasd	Xxdss	hi	hello		z	Dedd		we're so back
18	🔆	Wudi	🚀uuu	88		t		Yo
19				what is this				hi guys!	hello mate	hi m8 :o)
20			Test			z

Source View handler .php → View template .twig →

⚡ Signals

viewRow / viewCol int TAB 0

Top-left corner of the visible viewport. Private per tab.

focusRow / focusCol int TAB 0

Currently focused cell coordinates.

editing bool TAB false

Whether the focused cell is in edit mode.

editValue string TAB \"\"

Current cell editor input value.

Navigation params mixed TAB

tr, tc, key, shift, dr, dc, pasted — client-writable action parameters for keyboard and mouse events.

vrows / vcols int TAB 20×10

Dynamic viewport dimensions written by a client-side ResizeObserver.

version int Custom

Shared scope version counter. Bumped on every cursor/edit change to trigger broadcasts.

🎯 Actions

focusCell

Moves cursor to a cell. Commits pending edits, updates selection, broadcasts cursor position.

navigate

Keyboard navigation — arrows, Tab, Enter, Escape, PageUp/Down, Home. Auto-scrolls viewport.

startEdit

Enters edit mode on the focused cell. Prefills with typed character or current value.

commitEdit

Writes the edit value to SQLite and broadcasts the change.

scroll

Mouse wheel scrolling — moves viewport by delta rows/columns.

scrollTo

Absolute viewport positioning — used by scrollbar drag and track clicks.

clearCells

Deletes the selected range of cells.

paste

Pastes TSV clipboard data starting at the focused cell. Compatible with Excel/Sheets.

jumpTo

Parses a cell reference like AB2000, centers viewport, and moves cursor.

👁 Views

spreadsheet.html.twig

Virtual viewport rendering with collaborative multi-user cursors. Keyboard-first UX with a single data-on:keydown handler. Only visible cells are rendered.