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.

Raw PHP rendering — SSE update hot path uses plain PHP string building instead of Twig. Bypassing the template engine on every broadcast yields a 3–4× throughput increase under concurrent load.

	A	B	C	D	E	F	G	H	I	J
1	' OR 1=1-- STRIX-SHEET	hmm			aaa				ooohga boohga
2	hhell	aoeu	sda	asd		asdasdas	8
3	foo		testing	:)jj	=		=1		=h4	6
4	hmmmmmmm ok	ok		74546		ww	AB2000	=H3		🔴
5	bar		Hi	52				=I1	f	k
6			m	r			what		2df	🔥
7		Nantes	ccc		🚀	🚀	🚀	🚀	🚀	🔥
8			test	what	🚀	🚀	🚀	🚀	🚀
9	46		GYATT	a	d	🚀	🚀	🚀	🚀	Eeerr
10	ee		ddsasd	🚀	Brotli	rocking	the	stream	🚀	Eeerr
11	ùlkme	zezr		gghghg	compressing	11 MB	of	data	🚀	44
12	Test	zrez			to	only	10 KB	!	🚀	cool
13		dzrez			🚀	🚀	🚀	🚀	🚀	We were here
14	z	zre				🚀	🚀	🚀	🚀
15	zzz	ee				🚀	🚀	🚀	🚀
16	w	ee			🚀	🚀	🚀	🚀	🚀
17	asdasd	e		Derval		z	Dedd		we're so back
18	🔆	ee				t		Yo
19		e		dda				hi guys!	hello mate	hi m8 :o)
20		e	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

Outer shell rendered on initial page load only. SSE updates are generated with raw PHP string building, yielding a 3–4× throughput improvement over Twig rendering on the hot path.