Components · Inkoxide

Components take className, style and id, and those with a box also take debug (Debugging layout), with these exceptions: Document takes only debug; Page has no id; PageBreak takes only id; PageNumber and TotalPages take no props; the shapes inside an Svg take SVG attributes (fill, stroke, transform, id) instead of className and style; and a Text or Link inside a Text, a run of the paragraph, takes only text styles (with verticalAlign: 'super' or 'sub'), href, lang, hyphenate and hyphenationCallback (props such as id, bookmark, pages or render are an error there).

Component	What it is
`Document`	The PDF: `title`, `author`, `subject`, `keywords`, `creator`, `producer`, `lang` (`"en-US"`), `creationDate`, `pageMode`, `pageLayout` and `fallbackFonts` (metadata).
`Page`	One page layout; content flows over as many sheets as it needs. `size` (a preset such as `"A4"`, `"letter"` or `"A4-landscape"`, `[width, height]`, `{ width, height }`, or `[width]` or one length for a square), `orientation`, `margin`. Padding on a page is its margin; a percentage is of the page width, on every side, as in CSS.
`View`	A box: flex column by default, and also grid.
`Text`	A paragraph. A `Text` inside a `Text` is an inline run (bold, colour, link).
`Link`	A link (`href`, or `src`): a linked run inside a `Text`, a box like a `View` elsewhere.
`Image`	JPEG, PNG, GIF, WebP or SVG. `fit` (or `objectFit` in its style): `fill`, `contain`, `cover`, `none`; `objectPosition` in its style places the fitted image.
`ImageBackground`	A `View` with an image behind its children: `src` and `fit` as on `Image` (Images).
`Header`, `Footer`	Repeated on every page, in the top or bottom margin.
`PageNumber`, `TotalPages`	The current page and the page count, inside a `Text`.
`Table`, `Row`, `Cell`	A table that splits across pages.
`PageBreak`, `Spacer`	A forced page break; empty space.
`Svg`, `Path`, `Rect`, `Circle`, `Ellipse`, `Line`, `Polyline`, `Polygon`, `G`, `Defs`, `ClipPath`, `Marker`, `LinearGradient`, `RadialGradient`, `Stop`, `Tspan`	Vector drawing in JSX; a `Text` in an `Svg` is SVG text.
`Canvas`	Drawing in code: `paint={(painter, width, height) => …}`.
`TextField` (or `TextInput`), `Checkbox`, `Radio`, `Select`, `List`, `Field`	Fillable form fields (AcroForm).
`FieldSet`	A `View` that groups the form fields inside it under its `name`.
`Note`	A text note: an icon that opens its text in the viewer.

The one rule: a Text contains strings, numbers, PageNumber, TotalPages, Link, Image (an image in the line), Note and other Text, and nothing else. A View inside a Text is an error that names the component.