UI

Two controls over a stored PDF: a reader with fit, zoom and a real text layer, and a thumbnail that draws one page as a picture. Shipped as an…

Every screen in an Osy# app is a `component` — the one archetype. A page is a component with a route on it, a layout is a component, a reusable…

A live camera scanner for QR codes and barcodes, shipped as an optional KIT you depend on with one line. It owns the camera and the decode loop and…

Line, area, column, bar, scatter and OHLC candle marks over one shared value scale, plus a Pie — an optional KIT you depend on with one line. Marks…

A full rich-text markdown editor — sections, partial saves, a block menu, tables, find and replace, maths and diagrams — shipped as an optional KIT…

How an Osy# component comes alive and stays in sync: declarations are live value bindings, `on mount`/`on unmount` are once-only lifecycle bodies…

Every app page is served with a Content-Security-Policy the browser enforces. Scripts, styles, fonts, workers and data connections must come from the…

Osy# is C# almost everywhere, which is what makes the handful of deliberate differences worth knowing before you hit them. Ordinary C# works and…

When a query a region reads fails or is refused, that region shows the failure in place — the server's own sentence, the correlation id to look it up…

When the order of a list is a fact the person owns rather than something a field implies, store it: an int Position on the row, written when the row…

An app shell is the frame around every page: a brand, a navigation tree, the signed-in person and a menu behind them, a search slot and a place for a…

A render expression may call a PURE client helper — a component `method`, a client class method, a top-level function — and render the value it…

A drawing surface, and the verbs that paint on it. Put a `Canvas` in a render block, call `Draw.*` from an `on frame` body, and the picture is…

A lit, shadowed 3D scene on the same `Canvas` the 2D verbs paint. Build meshes once into fields, then each frame place a camera, a sun and some fog…

A control that paints cells — a grid — writes plain text in each one. A `slot <Field> { row => … }` block on the call replaces that column's cell…

Put a string on the visitor's system clipboard. One verb, callable from any action, so a copy button — an API key, a share link, a code snippet, an…

The live state of the browser's link to the server, and the two verbs that recover it. A component you nominate as your app's connection-loss surface…

Opens a component in an overlay above the current screen, with a unit of work you choose: `Inherit` makes its edits a savepoint of the work already…

An app shell for completing a single task — a checkout, an approval, a configuration step, a guided flow. It is built around three things a task…

A parameter or class field typed `Func<T, R>` takes a lambda and can be invoked for a result, so reusable code can be told HOW to get a value rather…

`Layout.ScrollHeight` is how tall a container's CONTENT is; `Layout.Height` is how tall the container is. The difference is what "is there more here…

Answers how wide a string will actually paint, measured against the font the surrounding container paints with. Null wherever there is no font to…

`Markdown(text)` renders a markdown string as formatted content — headings, lists, tables, code, links. It is a read-only renderer, not an editor:…

A `render` block can name a value the way any C# block does — `var lapsed = …;` to infer the type, or `bool lapsed = …;` to declare it. The name is…

The routes the user currently has open, and the verbs that move between them. Read `Navigation.Routes` in a layout to build a tab bar, a breadcrumb…

The bundled UI kit — ready-made styled controls like `Button`, the shared design-system vocabularies (`Tone`, `Size`) and a starter theme — is in…

When a control's action waits on the server, the platform shows a busy spinner and disables the control — but only after a short delay, so a fast…

A kit like `Ui` is versioned independently of the platform, so you pin the major you build against with `using Ui@2;`. The number is a stability…

An app shell built around a permanently narrow icon rail, in the shape Slack, Linear and Discord converge on. Every row reveals its label on hover…

Drop a `.svg` into `model/art/` and render it with `Svg(Art.Hexgrid)`. Unlike an icon, an asset keeps its own colours, gradients and patterns — it is…

`Session.CurrentUser` is the person the app is being shown to, as your own `[Principal]` entity. Read it in a member, in a render expression, or…

`Image` is the element that shows a picture, and it addresses one of two ways. `src` takes a URL — for a file in the app's own path store…

A `Slot` marks where a component renders the content block its caller wrapped around it. Writing `Card { Text("hi"); }` passes `Text("hi")` as Card's…

`Slot(item)` renders the caller's template once for that item. It is how a component owns the list — the layout, the scrolling, the selection — while…

A sortable table names its sort key with the chosen column's own selector, never with a string. Over rows already loaded the sort happens in memory…

An app shell whose primary navigation is a horizontal strip of tabs under the brand row, and a bottom tab bar within thumb reach on a phone. It takes…

You declare a field's rules once, on the entity — `[Required]`, `[Pattern]`, `[MaxLength]` — and give each rule the sentence to show when it fails. A…

`Visitor.Id` is a stable opaque id for the browser someone is using, minted on their first visit and remembered afterwards. It gives work started…

Mark a presentational, composition-only component `[Composable]` so a public page can compose it without marking it `[AllowAnonymous]` itself. A…

Tags already give an element its role, focus and keyboard behaviour. The semantic props say the rest: `role:` for a widget a tag cannot name…

An `animation` block declares reusable, looping motion — a shimmer, a pulse, an indeterminate progress hint. Its keyframe stops are written with the…

Take a photograph, record a video, or record audio. `Camera.Start()` asks for the device and `Camera()` shows the viewfinder; `Camera.Capture()`…

`canPress`/`canEdit`/`canSee: <policy>` ties a control to a declared `policy`: `canPress` disables a button, `canEdit` makes a value control…

A `chunks { }` block declares assets a control ships but does not need at mount — a maths renderer, a diagram engine, a stylesheet only one feature…

`Palette.From("#seed")` turns one brand color into a full ramp of shades. A bare reference (`Primary`) is the seed itself; `Primary.Hover` and…

A `commands { }` block declares the verbs a control accepts — the mirror of its events. An event is the control telling the app something happened; a…

`--theme <file>` compiles an app with the theme in that file INSTEAD of its own. It is a replacement, never a merge, so the look you get is one you…

The one archetype for all UI: a bounded reactive unit — typed props, reactive members (fields, `live` queries/computeds, actions, methods), and a…

A `control` block declares the contract of a foreign UI widget — a chart, a data grid, a map — that a small JavaScript module implements. You declare…

A UI `action` creates, updates and deletes data by writing `new Entity { … }`, assigning fields, and calling `.Delete()`. Edits apply instantly and…

`debounce: 300` tells a control to wait for a pause before it runs its event handler. Without it, an `onInput` handler fires on every keystroke — so…

`drag:` binds a number to a drag gesture: grabbing the element moves the value, arrow keys move the same value, and Escape puts it back where it…

A component with type parameters, bound at each call site from the arguments — one component that works over any enum or any row type, instead of a…

Drop `.svg` files into `model/icons/` and render them with `Icon(Icons.Search)`. The name is checked at compile time, so a typo is an error rather…

`keys:` declares that an element owns a set of keys: it becomes focusable, those keys stop scrolling the page, and `Keyboard.Down(Left)` answers…

The built-in layout primitives and how they arrange children. `Stack` stacks children in a column, `Row` lays them in a row, and `Box` is a plain…

`on change { … }` is a reactive **side-effect**: the runtime re-runs it whenever a value it read changes, so it's how you keep something OUTSIDE the…

`on every (TimeSpan.FromSeconds(5)) { … }` runs a block on a repeating cadence for as long as the component is mounted. Unlike `on frame` it is…

`on mount { … }` runs a block ONCE, the first time a component appears — before its first paint; `on unmount { … }` runs a block ONCE when it goes…

`on settled(x) { … }` runs once when the stream `x` finishes arriving — whether it completed or failed. It is how you store a streamed answer, and it…

`onEnter` runs an action when the Enter key is pressed while an element is focused — the keyboard peer of `onClick`. There is no form to submit: in…

`onEscape` runs an action when the Escape key is pressed while the element is on screen. Unlike `onEnter` it is not scoped to the focused element —…

A `policy` names a reusable authorization predicate over the current user — e.g. `policy Admins => UserRole.Any(r => r.User == user && r.Role ==…

`onPointerEnter` / `onPointerLeave` run an action when the pointer enters or leaves an element. They are the half of hover an app can ACT on — a…

A `probe { }` block declares the facts a control publishes about its OWN internal state, so an app's tests can ask for them. It is the one direction…

A data read written inside an `action`, `method` or lifecycle hook runs at that point in the body: the platform fetches it from the server and the…

How a component becomes a page: it declares a route with `[Page("/catalog/{slug}")]`, and navigating to a matching path serves it. Covers route…

A second render tree that stands in for a component while its first query has not yet arrived. It is written with the same grammar as `render`, it…

Drop `.mp3`, `.wav`, `.ogg` or `.m4a` files into `model/sounds/` and play them with `Sound.Play(Sounds.Flap)`. The name is a compile-checked member…

Inside a `variants` block, each `Name = value` is a style prop from a fixed vocabulary the renderer maps to CSS — paint (`Bg`, `Color`, `Border`)…

A `styles { }` block declares the look values a control owns — its paddings, widths, shadows — as named knobs an app can override. It is how a…

Drop `.png`, `.jpg` or `.webp` files into `model/textures/` and blit them onto a canvas with `Draw.Image(wall, …)`. The name is checked at compile…

A `theme` block names your app's design tokens — colors, spacing, radii, and more — as reusable values. A token can hold a literal value (`Primary =…

`Upload(onUploaded: Ingest) { … }` is a file picker wearing whatever you put inside it. When someone chooses a file its bytes are stored and your…

Naming a font in your theme asks for it; `osy font add` ships it. The command pins a font file in your project's lock, every compile carries it to…