In development · no official release yet Try the demos in your browser

Fresnel

A modern widget set for native Free Pascal and Lazarus applications.

Fresnel is a set of visual controls (buttons, edits, lists, grids, menus, trees ...) for Object Pascal. Fresnel draws the controls itself, and CSS decides how they look and where they go. You get a normal, native program for Windows, Linux or macOS. The same code can also run in a web browser, compiled to WebAssembly.

Try it live What is Fresnel? Get started

The Fresnel control gallery, a native Linux program, with the Fresnel element inspector next to it — A native Linux program made with Fresnel, with its CSS inspector.

Fresnel in one picture

You write Pascal code, as you always did. The look and the layout go in CSS. The Free Pascal compiler turns it into a program.

Your Pascal code

forms and .lfm files
components with properties and events
your program logic, databases, files ...

CSS stylesheets

colors, fonts, borders
layout: flexbox, grid
light and dark theme

Free Pascal

the normal fpc compiler
in Lazarus, with lazbuild, or on the command line

A native program

Windows, Linux, macOS
Android new
no browser inside, nothing extra to install

A WebAssembly program optional

the same code, running in a web page
like the demos on this site

What Fresnel gives you

Native programs

A Fresnel program is a normal executable. There is no browser, no JavaScript and no web server inside. It opens real windows on Windows, Linux and macOS.

Platforms →

Look and layout with CSS

Colors, fonts, borders, spacing and layout (flexbox, grid) come from CSS. Change the stylesheet, and the whole program changes. Light and dark mode are built in.

Styling with CSS →

Made for Pascal programmers

Controls are components with published properties and events. Forms are stored in .lfm files and you can design them in the Lazarus IDE, with the Object Inspector.

What is Fresnel? →

Works together with the LCL

Show Fresnel forms next to LCL forms in the same program, or put Fresnel controls on an LCL form. You can move an existing application to Fresnel one form at a time.

Fresnel and the LCL →

Also in the browser

Compile the same program to WebAssembly and it runs in a web page. The user does not need to install anything. All demos on this site work like that.

Try it live →

A complete set of controls

Edits, combo boxes, lists, trees, tabs, menus, a data grid, a calendar, a code editor, dialogs, data-aware controls, video, and even CSS inspection tools.

See the controls →

What does the code look like?

Pascal for what is on the form and what it does. CSS for how it looks.

type
  TForm1 = class(TFresnelForm)
    Body1: TBody;
    Label1: TLabel;
    Button1: TButton;
    procedure Button1Click(Event: TAbstractEvent);
  end;

procedure TForm1.Button1Click(Event: TAbstractEvent);
begin
  Label1.Caption:='Hello, Fresnel!';
end;

/* unit1.css: the stylesheet of the form */
body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
}
button {
  background-color: #009692;
  color: white;
  border-radius: 6px;
  padding: 6px 14px;
}
button:hover { background-color: #007a77; }

Things Fresnel is not

We hear these ideas a lot. None of them are true.

Myth You need a browser to run a Fresnel program.

Fact

No. A Fresnel program is a normal native program. The browser is only one of the possible targets.

Myth You need pas2js to use Fresnel.

Fact

No. You compile Fresnel programs with the normal Free Pascal compiler. pas2js is only used for the small loader page of the browser version.

Myth You need the Skia graphics library.

Fact

No. On Linux, Fresnel draws with GTK3, and in the browser, the browser draws. Skia is used on Windows, macOS and Android, and it is shipped with Fresnel.

Myth You need a special "Fresnel IDE".

Fact

No. You use the normal Lazarus IDE, or any editor. The “IDE” demo is only an example program.

Myth You cannot mix Fresnel and the LCL.

Fact

You can. Fresnel forms and LCL forms can live in the same program, and Fresnel controls can sit on an LCL form.

Myth Fresnel is part of Lazarus.

Fact

No. Fresnel is a separate project, with its own repository. It is not installed with Lazarus, and it does not use the LCL.

Myth A Fresnel TButton has exactly the same properties as an LCL TButton.

Fact

No. Many names are the same, but positions, sizes, colors and fonts are set with CSS, not with properties.

Myth Fresnel is like HTML.

Fact

No. There is no HTML and no JavaScript. Fresnel borrows CSS and the idea of a tree of elements. Everything else is Pascal.

Read the full explanation

Real programs, real screenshots

All of these are native programs, except where the caption says otherwise.

**A real application**A time tracker, ported from the LCL to Fresnel. Its whole layout is a few dozen lines of CSS.

**Light and dark mode**The same program, only the stylesheet is different. No change in the Pascal code.

**A data grid**Sorting, resizing, grouped headers, frozen rows and columns, and editing in the cells.

**A code editor**SynEdit for Fresnel: syntax highlighting, code folding and code completion.

**Design in Lazarus**Fresnel forms in the Lazarus form designer, with a CSS inspector like in a browser.

**One program, three platforms**The same program on Windows, on Linux and in a web browser.

Where Fresnel runs

Fresnel chooses the right backend for the platform you compile for. Your code does not change.

WindowsWin32 windows, Skia drawing

LinuxGTK3 windows and drawing

macOSCocoa windows, Skia drawing

Androidnewest platform, Skia drawing

BrowserWebAssembly and HTML canvas

Inside the LCLon an LCL form, any LCL platform

See it for yourself

More than 60 demo programs run in your browser, with nothing to install. When you are ready, get the sources and build your first Fresnel program.

Try it live Get started