# FMXER > FMXER: a declarative, Flutter-inspired visual framework for Delphi FireMonkey (FMX). Build screens by composing frames and forms in code, with named routes, a scaffold, layout containers and ready-made elements. FMXER is an open source (MPL 2.0) framework for Embarcadero Delphi FireMonkey, built on TFrameStand and TFormStand. Source code, releases and demos: https://github.com/andrea-magni/FMXER ## Guide - [Introduction](https://andrea-magni.github.io/FMXER/guide/introduction.md): FMXER is a declarative visual framework for Delphi FireMonkey (FMX), inspired by the way Google Flutter builds user interfaces. It was introduced at EKON 23 and CodeRage 2019, and has been used since then to build mobile and desktop apps from Delphi. - [Installation](https://andrea-magni.github.io/FMXER/guide/installation.md): FMXER has no design-time components: its design-time package only adds FMXER to the splash screen and the About box of the IDE. Your application compiles FMXER's units, so installing FMXER means making its source folder (or the compiled units of its runtime packages) and its dependencies... - [Your First App](https://andrea-magni.github.io/FMXER/guide/getting-started.md): This walkthrough builds a two-screen app: a home screen where you type your name, and a second screen that greets you. Along the way you meet the pieces you will use in every FMXER app: the navigator, the scaffold, a column and a few elements. - [Core Concepts](https://andrea-magni.github.io/FMXER/guide/core-concepts.md): An FMXER screen is a tree of elements. This page explains what an element is, how a container creates its children, and who owns what. - [Composing Layouts](https://andrea-magni.github.io/FMXER/guide/layouts.md): FMXER layouts are made of a few containers nested into each other. This page shows the sizing rules and the combinations used most often; every container is described in detail in Containers. - [Navigation](https://andrea-magni.github.io/FMXER/guide/navigation.md): TNavigator (unit FMXER.Navigator) turns the screens of an app into named routes. A route is defined once, created on demand when you route to it, and freed when you close it. The navigator keeps a stack of the open routes for the Back button. - [Styling & Theming](https://andrea-magni.github.io/FMXER/guide/styling.md): FMXER elements get their look from three places: the application colors in TAppColors, the stands that wrap them, and the setters of each element. - [State & Events](https://andrea-magni.github.io/FMXER/guide/state.md): FMXER has no state-management library of its own: elements are created by closures, and the closures are where state lives. This page collects the patterns used in the demos, and the rules that keep them safe. - [Writing Your Own Elements](https://andrea-magni.github.io/FMXER/guide/custom-elements.md): Any frame or form can be an FMXER element: SetContentAsFrame works with every TFrame descendant. A few conventions make your own elements feel like the built-in ones — and the README invites you to contribute them back. - [FAQ & Troubleshooting](https://andrea-magni.github.io/FMXER/guide/faq.md): Answers to common questions and fixes for common problems with FMXER: Skia unit names, missing dependencies, navigator errors, invisible text, missing icons, access violations after closing a screen. - [Building & Testing](https://andrea-magni.github.io/FMXER/guide/building.md): The repository has a build script and a DUnitX test suite, used to check every change on the command line. - [AI Agent Skill](https://andrea-magni.github.io/FMXER/guide/agent-skills.md): An Agent Skill that teaches Claude Code and other AI coding agents to develop Delphi FireMonkey apps with FMXER: installation as a plugin, with npx or by hand, and usage examples. ## Elements - [Element Catalog](https://andrea-magni.github.io/FMXER/elements/index.md): Every element is a unit in source\ named FMXER..pas, with its .fmx. Add the unit to the uses clause and pass the class to a container's slot method (SetContentAsFrame, AddFrame, ...). - [Scaffold](https://andrea-magni.github.io/FMXER/elements/scaffold.md): TScaffoldForm (unit FMXER.ScaffoldForm) is the screen skeleton of most FMXER apps, after Flutter's Scaffold and Material Design: a title bar, a content area, floating action buttons at the bottom right and a snackbar for short messages. - [Containers](https://andrea-magni.github.io/FMXER/elements/containers.md): Containers arrange other elements. Each one has a TFrameStand and a TFormStand (public fields FrameStand1, FormStand1) that create its children, and one or more slots. For how to combine them, see Composing Layouts. - [Text & Input](https://andrea-magni.github.io/FMXER/elements/text-and-input.md): Elements that show text or take input. All of them use Skia labels (TSkLabel) for their text, and fill their slot (Align = Client). - [Images & Media](https://andrea-magni.github.io/FMXER/elements/images-and-media.md): Elements that draw: bitmaps, SVG, Lottie animations, custom drawing with Skia, and a web view. The Skia101 demo shows most of them. - [Lists](https://andrea-magni.github.io/FMXER/elements/lists.md): TListViewFrame (unit FMXER.ListViewFrame) wraps a FireMonkey TListView — virtualized, native-looking, with search and pull-to-refresh — and adds a click handler per item. Use it for long or data-driven lists, where a column of elements would be too heavy. - [QR Codes](https://andrea-magni.github.io/FMXER/elements/qrcode.md): TQRCodeFrame (unit FMXER.QRCodeFrame) draws a QR code from a text, with rounded modules rendered as SVG by Skia. Encoding is done by DelphiZXingQRCode; the rounded renderer (QRCode.Render) comes from the Skia4Delphi samples. - [Icons](https://andrea-magni.github.io/FMXER/elements/icons.md): FMXER draws icons from the Material Design Icons font (5,918 glyphs, version 5.9.18) through a shared TIconFontsImageList. Icons are vector glyphs: they scale to any size and take any color. ## Reference - [TNavigator](https://andrea-magni.github.io/FMXER/reference/navigator.md): Unit FMXER.Navigator. Named routes on top of a TFormStand. For a guided tour see Navigation. - [FMXER.UI.Misc](https://andrea-magni.github.io/FMXER/reference/ui-misc.md): Unit FMXER.UI.Misc: element definitions, parameters, fluent helpers for controls and forms, the slot layout of columns and rows, and a file helper. The tap handler type shared by the image elements is in FMXER.UI.Types (see Images & Media). - [TAppColors](https://andrea-magni.github.io/FMXER/reference/app-colors.md): Unit FMXER.UI.Consts. Application colors read by the elements when they are created, and the Material Design palette. See Styling & Theming. - [Units & Dependencies](https://andrea-magni.github.io/FMXER/reference/units.md): Every unit is in source\. FMXER has no packages: add source\ to the search path (see Installation). ## Demos - [Demos](https://andrea-magni.github.io/FMXER/demos/index.md): The demos folder has one project per topic; ten of them are in demos\AllDemos.groupproj (MyTicketing and EKON25 - Weather are not). They target Windows, macOS, iOS and Android. ## More - [Release Notes](https://andrea-magni.github.io/FMXER/release-notes.md): Releases are published on GitHub.