UI

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…

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…

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…

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…

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…

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 application shell — a canvas, a floating card, a collapsing side rail with a scrolling nav, a work area, an app bar and open-document tabs — ships…

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…

`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…

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 =…

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…