HAUSE

ByteMap

A physical layout drawn to scale — each field's width is its width in bytes.

OPERATE THE FORM ↓
01 / THE ENCOUNTERAN INSTRUMENT — THE READER OPERATES

A STUDY IN BYTEMAP

Space means bytes.

A fictional 32-byte record, drawn proportionally. Select a region to inspect its exact offset and width.

32 bytesILLUSTRATIVE RECORD / OFFSET 0–31

Identifies this illustrative format.

The map and field table use the same sizes: 4 + 4 + 8 + 16 = 32 bytes. Width encodes byte count, not importance.

INSPECT THE REUSABLE LIBRARY COMPONENT

A TIMESTAMP RECORD — WORKED EXAMPLE

Twelve bytes, drawn to scale

12 bytes · little-endian · a demonstration record, not a standard

secondsu324 Bwhole seconds since the epoch
nanosu324 Bthe fraction, in nanoseconds
zonei162 Boffset from UTC, in minutes
flagsu162 Bbit 0: daylight saving was in effect

02 / THE DECISION

An act.
Not a container.

YOU ARE SHOWING WHAT SOMETHING IS MADE OF

Showing a physical layout to scale.

Does the width of each field on screen mean its width in the artifact?

EXPLORE THE SELECTION GRAMMAR ↗

What is the ByteMap form in HAUSE, and when do you use it?

The ByteMap form is a HAUSE instrument — a physical layout drawn to scale — each field's width is its width in bytes. A physical layout drawn to scale: a proportional bar (each field's width is its width in bytes) above the field table, hover on either illuminating the other. Strictly static apart from that illumination, at --motion-immediate — bytes are the one place a page should feel like an engineering drawing, not a film.

THE LIBRARY’S OWN ACCOUNT

Behind the form.

components/forms/ByteMap.tsx

A physical layout drawn to scale: a proportional bar (each field's width is its width in bytes) above the field table, hover on either illuminating the other. Strictly static apart from that illumination, at --motion-immediate — bytes are the one place a page should feel like an engineering drawing, not a film.

THE INSTRUMENT’S DISCIPLINE

Every instrument carries an always-present text fallback, so the point survives with the interaction removed — for reduced motion, for no-JS, for a crawler, and for anyone in a hurry. ARIA state is part of the form, because an agent browser reads aria-pressed and aria-expanded to understand what it is looking at.

03 / MAKE SOMETHINGINSTALL HAUSE ↗

Give it your subject.

The opening study is an authored demonstration, not an additional component API. Expand the library specimen above to inspect the reusable form. Its props below come directly from the source.

REACT · ByteMap

import { ByteMap } from "@chrishayuk/hause/components/forms/ByteMap";

export type ByteField = {
	name: string;
	type: string;
	bytes: number;
	/** A fixed value, when the format pins one (a magic, a version). */
	value?: string;
	meaning: string;
};

export type ByteMapProps = {
	kicker: string;
	title: string;
	fields: ByteField[];
	/** e.g. "24 bytes · little-endian · regions 64-byte aligned" */
	totalLabel?: string;
	caption?: string;
};

export function ByteMap({ kicker, title, fields, totalLabel, caption }: ByteMapProps)

The import and the complete props contract. For installation and composition, follow the Build guide.

PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0

CITE

source components/forms/ByteMap.tsx · site build bafb122 · built 2026-09-09

CITE THIS

Web page · 0.1.0

Hay, C. (2026). ByteMap — a HAUSE instrument. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/byte-map

The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.