Features · DevCore UI Engine

Components and reactivity

Svelte-style components, compiled to C# when you save.

One file per componentA .dcue file: a C# script, markup and a scoped style.
No virtual DOMThe compiler writes the exact update for each binding. Nothing is diffed.
Reactive state[State], [Derived], [Effect], and [Tick] for values the game owns.
Props and two-way bindings[Prop], [Bindable], bind:value, bind:checked, bind:this.
Blocks{#if}, keyed {#each}, {#key}, {@const}, {@html}.
Virtual lists{#virtual} keeps elements only for the rows on screen: 10,000 rows cost 0.55 ms.
Slots and contextNamed slots, CSS variables passed into children, context for descendants.
Reactive plain classesA source generator gives any partial class reactive [State] properties.
Batched updatesHowever many values change, the page updates once per frame.
Reach from game codequery:api names and Q<T> / Query<T>, indexed and allocation-free.

The specifications as Chromium implements them.

Every common layout modeBlock, inline, flexbox, grid, tables, floats, positioned and sticky.
Browser cascadeUser-agent sheet, <link>, <style>, @import, inline styles, !important, custom properties.
Modern selectors:has(), :is(), :where(), :not(), :nth-child(of S), :focus-visible, attribute operators.
Values and unitscalc(), clamp(), viewport units, oklch() and the other color spaces, var(), env().
Media and feature queries@media (size, orientation, pointer, color scheme, reduced motion), @supports.
Transforms and motion2D and 3D transforms, transitions, keyframe animations, steps(), cubic-bezier().
ScrollingOverflow, sticky, smooth scrolling, overlay or custom scrollbars, line-clamp, text-overflow.
Styled controlsScrollbar parts, customizable <select>, range parts, checkbox and radio, in Chrome's syntax.

Its own renderer for the Built-in Render Pipeline.

One draw call per pageGPU instance records and one shader for boxes, text, images and gradients.
Browser-exact blendingColors are blended in sRGB as a browser does, also in Linear projects.
BackgroundsMultiple layers, linear, radial and conic gradients, background-clip: text, box and text shadows.
Filtersfilter and backdrop-filter: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate and more.
Clipping, masking, blendingclip-path shapes, mask images and gradients, every mix-blend-mode, isolation.
Partial repaintOnly what changed is painted and uploaded; an idle page costs about a microsecond.
GPU transitionsTransform, opacity and color transitions can run in the shader with no CPU work per frame.
Burst kernelsThe heaviest loops are Burst jobs when Burst is present, with a plain C# fallback.

Its own text stack, from Unicode data to glyph pixels.

Complex scriptsArabic, Hebrew, nine Indic scripts, Khmer, Myanmar, Thai, Lao, Hangul, Tibetan and more.
HarfBuzz-identical shapingA C# shaper checked against HarfBuzz on 20,000 texts in 38 scripts.
Font fallback per characterGame font packs first, then what the browser would pick, then any font that has the glyph.
Bidirectional textdirection, dir="auto", <bdi>, right-to-left editing.
Browser line breakingUAX #14 with Chromium's CJK rules, and dictionaries for Thai, Lao, Khmer and Burmese.
Color emojiCOLR v0, CBDT and sbix color fonts.
Sharp at any sizeBitmap glyphs for static text, distance fields for transformed or animated text.
Per-frame text without garbage{time:F1} writes digits straight into the page: no string is made.

DOM events in browser order, from Unity's Input System.

Pointer eventsMouse, touch and pen, hover and active states, pointer capture, wheel.
Accurate hit testingFollows what is painted: transforms, rounded corners, clips, clip-path, pointer-events.
Keyboard and focusTab order with tabindex, :focus-visible, Enter and Space activation.
Gamepad navigationD-pad and stick move focus to the nearest element; confirm, cancel and scroll are mapped.
TouchTaps, drag scrolling with momentum, touch-action.
Text editingCaret, selection, undo and redo, clipboard, word deletion, IME composition, on-screen keyboards.
Form controlsInputs, textareas, checkboxes, radios, ranges and selects that look and size like Chrome's.
ElementFromPointThe browser's own hit query, for drag and drop and custom interactions.

Vector art drawn by the engine at the size it is shown.

Inline SVGShapes are DOM elements: page CSS, :hover and color transitions apply to them.
SVG filesAs <img> sources and background images.
Paths, gradients, groupsAll path commands, linear and radial gradients, use, symbol, transforms, group opacity.
Clip paths and masksclip-path and mask attributes, so icon sets and design-tool exports draw correctly.
Iconify by name<Icon id="mdi:home" /> for any of 200,000+ icons, sized by font-size and colored by color.
Only what you useOne command downloads the icons your components name, and nothing else.
License checksOnly icon sets that allow commercial use without attribution are accepted; the rest are refused.
Recolor without redrawingSingle-color drawings are coverage masks, so hover colors cost nothing.

Pages where you need them, and Unity inside pages.

AppsA folder with App.dcue and App.css is your game's UI; a DevCoreApp component shows it.
Four render modesScreen overlay, in the camera before post-processing, world panel, render texture.
World panelsSized in meters, mipmapped, redrawn only when changed, clicked by rays.
Pages on meshesA render texture with an input collider maps hits through UVs.
Unity content elements<unity-camera>, <unity-model>, <video> and -unity-material.
Scale modesConstant pixel size, scale with screen size, constant physical size, like Canvas Scaler.
Shared resourcesFonts, images and files are loaded once and shared by every view.
Licences in buildsEvery player build gets a Licenses folder with the notices it needs.

Texts compiled into the game, switched at runtime.

YAML filesOne file per language; nested keys become dotted names.
T("key")In templates and in code. Reading a text allocates nothing.
Reactive switchingSet Locale.Current and every text updates in the same frame.
Plural formsCLDR rules for 216 languages, matching the browser's Intl.PluralRules.
FormatsNumbers and dates follow the locale's culture.
Right-to-leftThe page's lang and dir follow the locale.

A short loop between typing and seeing.

Live PreviewDevice presets, dark mode, touch, language, direction, and a picker with box-model, grid and flex overlays.
Hot reloadMarkup, CSS and component C#, keeping state, in and out of Play mode.
InspectorStyles with their source lines, computed values, box model, component state, listeners, layers, performance.
VS Code extensionCompletion, hover, go to definition, signature help, problems, quick fixes, formatting, snippets.
Errors at the sourceCompiler errors point at the .dcue line and column.
Locale editorKeys by languages, with filters for missing and unused texts.
Stats overlayEngine timings on screen, and markers in the Unity Profiler.
SamplesCounter, settings, forms, shop, notes, icons, gamepad menu, leaderboard, inventory, tables, effects, languages.