Home

eQuantic.UI Documentation Wiki

🌐 This page in: English · Português

Welcome to the official wiki for eQuantic.UI, a C# framework for ultra-fast interface development: components are written once in C# and realized as DOM + CSS on the web (via TypeScript compilation and Intelligent Reconciliation) and as GPU pixels on native (via the proprietary Photon engine: Metal/Vulkan, no WebView, no Skia).

Try it first

ui.equantic.tech/playground: write a component in C#, press Run, and watch it render. It is not a simulation: the same eqc your build uses compiles the snippet server-side and the result mounts in the page, so what you see is what the framework actually does. Nothing to install.

The rest of the site is at ui.equantic.tech, and it is itself an eQuantic.UI app consuming the published packages, a standing proof that a consumer's build works from nothing but nuget.org.

Reading the version marks

A feature carries the release it shipped in: Since 0.2.0-preview.7 under a heading, or a Since column when a table's rows have different ages. If a section has no mark, it predates the marks rather than predating the feature.

These are derived from git, never written from memory:

c=$(git log --diff-filter=A --format=%h -- path/to/File.cs | tail -1)   # the commit that added it
git tag --contains $c --sort=v:refname | head -1                        # the first release with it

Each mark is written twice, and that is deliberate. The italic line is for whoever reads this on GitHub; the HTML comment beside it is the same fact in a shape a machine can filter on, and it is invisible here:

*Since **0.2.0-preview.20***  <!-- eq:since 0.2.0-preview.20 symbol="class InView" src="src/eQuantic.UI.Primitives" -->

symbol is what the version was derived FROM, so the next person can re-run the two commands above against the same thing rather than trusting the number. src narrows the search when the name is not unique, and note replaces symbol when no single symbol pins the answer.

Where the mark sits is what it covers:

• Under a heading, it covers that section, down to the next heading of the same or higher level.
• Before any heading, it covers the whole page, which is how a page that did not exist in an older release says so. Storage, Analytics, Markdown and Mermaid do that today.

The site reads these; a test fails the build when the comment and the italic line disagree. Marks written inside a sentence or in a table cell are prose only, and nothing filters on them yet.

📌 Navigation

🏁 Start Here

• Getting Started - Three commands and no Node: install the template, create an app, run it. What the template gives you, and where to point a preview feed.

📱 Native & Write-Once (Track N)

• Write-Once Components - THE architecture: one vocabulary, two realizers, the same class on web and native.
• Declarative Surface - Authoring without new: the factory surface, your own components joining it automatically, [UiFactory], and the one sharp edge.
• Photon Engine - The native GPU engine: normative SDF core, real text/icons (CoreText/CoreGraphics), Metal + Vulkan backends, the macOS/iOS/Android shells.
• Design System - Typed tokens, the ATOMIC style engine (styling without CSS), IAppTheme/Material 3 theming, density and the dense type rungs.
• Capabilities - Camera, location, photos, biometrics, network: services taken by constructor, realized per host, and null where the host has none.
• Storage - One signature over each platform's own store (localStorage, NSUserDefaults, SharedPreferences) and why secrets are a separate type the browser cannot provide.
• Forms - A form is a MODEL, not a widget: values, flags, rules, errors and the one in-flight submit live in Primitives, so the same C# runs on the server, in the browser twin and in a native window.
• Code Editor - The editor MODEL an IDE is built on: line documents, incremental highlighting for six languages, undo that thinks in words, and the controller behind every editing command.
• Markdown - Markdown rendered as the design system: one parser on every side (SSR, Photon, browser twin), themed by the app's own IAppTheme.
• Mermaid - Flowcharts and sequence diagrams drawn by the design system itself, with no mermaid.js; ```mermaid fences in Markdown render natively.

🏗️ Architecture & Concepts

• Architecture Overview - DDD, CQRS, and the Clean Architecture philosophy in the UI.
• Package Architecture - Self-contained package design and artifact management.
• Components - The component catalog: actions, surfaces, navigation, overlays, the recycling ListView, the Spreadsheet grid.
• Styling - Typed C# styling: one engine, atomic CSS on the web, GPU paint on native, plus the low-level HTML escape hatch.
• Localization - Multi-language the .NET way: the shipped seams (SdkStrings, the Photon culture hand) and the Track L design.
• Analytics & GTM - Analytics as a capability the app takes by constructor, with Google Tag Manager as one installer rather than the interface.

⚙️ Compilation Engine

• Compiler (CSharpToJs) - How we convert C# into performant TypeScript.
• Compile-Time Evaluation - Zero-overhead abstractions with symbolic compilation.
• Supported C# Features - Detailed matrix of supported language features and APIs.
• External Type Resolution - How the compiler resolves classes defined in external files.
• Build Flow - How the compilation pipeline works with zero external dependencies.

⚡ Runtime & Performance

• Runtime (TypeScript) - Details on the reconciler, state management, and component lifecycle.
• Performance & Optimization - Keyed Diffing, WeakMap Listener tracking, and other optimizations.

🔌 Server & Integration

• Server Integration - AddUI(), UIOptions, middleware, SSR, and SEO configuration.
• Asset Management - IRequireAssets, IComponentAssetProvider<T>, and automatic asset injection.
• BunPackage - Declare npm packages directly in .csproj (zero package.json).
• Security & Server Actions - Authorization, payload validation, and server action protection.

🎨 Ecosystem

• Image Optimization - Next.js-style server-side image optimization (resize, WebP, caching).
• Charts - Chart.js and ApexCharts integration.
• Icons - Lucide, Tabler, Heroicons, and more.
• Lottie - .lottie and .json animations through the dotLottie player component.

🚀 Development Guide

• Debugging & Development Tools - Professional debugging with logger and error overlay.
• Project Roadmap - What's ahead.

---

Tip

This documentation is updated as the project evolves. If you find any inconsistencies, feel free to report them.