Pixie: A lightweight HTML/CSS rendering engine for Free Pascal and Lazarus 🌟

[dsiders]

@retrofoxed
I am interested how many people, at SoftPerfect.com, work on this component? Fixes for 'issues' were very quick! So I guess at least 2-3 persons.

Actually it's just me and a clever AI - which indeed feels like having several people at your disposal. I have just pushed another commit and I believe now Pixie is production-ready:
Unified SVG Rendering Engine

Just tested. Pretty impressive. Is PDF export available on QT yet?

[Wallaby]

Just tested. Pretty impressive. Is PDF export available on QT yet?

Yes, PDF + SVG are available and should work identically on all platforms, including Qt.

[dsiders]

Just tested. Pretty impressive. Is PDF export available on QT yet?

Yes, PDF + SVG are available and should work identically on all platforms, including Qt.

Weel, in that case... something is wrong. If I add Pixie.PdfExport to the uses clause and try to work with it, I get:

Code: Text  [Select][+][-]

1. unit1.pas(33,40) Error: Cannot find Pixie.PdfExport used by Unit1 of the Project Inspector.

I can add a bug report if you prefer...

[Wallaby]

Code: Text  [Select][+][-]

1. unit1.pas(33,40) Error: Cannot find Pixie.PdfExport used by Unit1 of the Project Inspector.

It's right there:

Code: Text  [Select][+][-]

1. G:\[Dev]\common\Lazarus\Pixie\source>dir Pixie.PdfExport.*
2.  
3. Directory of G:\[Dev]\common\Lazarus\Pixie\source
4.  
5. 03/25/2026  11:46 AM            10,930 Pixie.PdfExport.pas

Perhaps the source folder is not in unit search path (or somehow the file is missing in your copy)?

[dsiders]

Code: Text  [Select][+][-]

1. unit1.pas(33,40) Error: Cannot find Pixie.PdfExport used by Unit1 of the Project Inspector.

It's right there:

Code: Text  [Select][+][-]

1. G:\[Dev]\common\Lazarus\Pixie\source>dir Pixie.PdfExport.*
2.  
3. Directory of G:\[Dev]\common\Lazarus\Pixie\source
4.  
5. 03/25/2026  11:46 AM            10,930 Pixie.PdfExport.pas

Perhaps the source folder is not in unit search path (or somehow the file is missing in your copy)?

I have the source file. It's in the same folder as the reset of the source files and has the same permissions. I can Ctrl+Click to access in the IDE. But when I try to compile, I get the error.

[Edit]
The file is not included in the Pixie.Package.Lazarus.lpk file.

[Wallaby]

The file is not included in the Pixie.Package.Lazarus.lpk file.

Indeed. The PDF export units were missing from the package file. This has been fixed — please update to the latest version and rebuild the package.

If you're still getting the error after updating, try adding the Pixie `source` folder directly to your project's unit search path (Project Options → Compiler Options → Paths → Other unit files).

[dsiders]

The file is not included in the Pixie.Package.Lazarus.lpk file.

Indeed. The PDF export units were missing from the package file. This has been fixed — please update to the latest version and rebuild the package.

If you're still getting the error after updating, try adding the Pixie `source` folder directly to your project's unit search path (Project Options → Compiler Options → Paths → Other unit files).

That's a bad Delphi habit that really isn't needed if the package file is updated. But hey, stuff happens... _

[dsiders]

The file is not included in the Pixie.Package.Lazarus.lpk file.

Indeed. The PDF export units were missing from the package file. This has been fixed — please update to the latest version and rebuild the package.

If you're still getting the error after updating, try adding the Pixie `source` folder directly to your project's unit search path (Project Options → Compiler Options → Paths → Other unit files).

That solves the compile problem. PDF generated successfully. I'll file a bug report for any quirks I see there.

Thanks.

[edwinyzh]

I have a dream, to put LCL controls inside a pixie document

That's not really possible - a completely different architecture.

What you want is probably the Fresnel project, but it's in early stages of development.

I think that to create something nice, it would be enough to anchor an LCL control to a div. That is, if you resize a form, the anchored control is automatically moved and resized. I think you can create something nice with just a little effort.
It's my idea, I hope it's a good one.

I'm sure it's a good idea. The commercial html component library has that feature.
BTW, Pixie is such a fantastic open source project!
Kudos to @retrofoxe!!!

[Wallaby]

I think that to create something nice, it would be enough to anchor an LCL control to a div. That is, if you resize a form, the anchored control is automatically moved and resized. I think you can create something nice with just a little effort.
It's my idea, I hope it's a good one.

Well Lazarus already has all kinds of anchoring (like component to component) and layouts (flow layout). I am not sure how this can be mixed with CSS - I guess that's what Fresnel aims to build.

I had a slightly different idea of building somerthing like Delphi's FMX, akin to Lazarus' customdrawn controls, but it should be a modern-looking GPU-accelerated framework. In a way, like Qt, but without Qt and its runtime.

While this can be accelerated with AI - that's still a massive project.

[valdir.marcos]

I think that to create something nice, it would be enough to anchor an LCL control to a div. That is, if you resize a form, the anchored control is automatically moved and resized. I think you can create something nice with just a little effort.
It's my idea, I hope it's a good one.

Well Lazarus already has all kinds of anchoring (like component to component) and layouts (flow layout). I am not sure how this can be mixed with CSS - I guess that's what Fresnel aims to build.

I had a slightly different idea of building somerthing like Delphi's FMX, akin to Lazarus' customdrawn controls, but it should be a modern-looking GPU-accelerated framework. In a way, like Qt, but without Qt and its runtime.

While this can be accelerated with AI - that's still a massive project.

Very interesting information.

Thanks.

[Wallaby]

Pixie Update — What's New Since the Initial Release

A lot has happened since the initial announcement two weeks ago. Here's a summary of what's been added and improved.

New Components

Pixie now ships three components instead of one:

• TPixieSvgView — Proportional SVG display with alignment options. Available for Lazarus, Delphi VCL, and Delphi FMX.
• TPixiePaintBox — A drawing surface with TPixieDrawingCanvas, a TCanvas-like stateful API providing Pen, Brush, and Font properties, shape primitives, and text methods. Also available for all three frameworks.

Both components share the same base class hierarchy and rendering backends as TPixieHtmlView.

New Platform Support

• Delphi VCL — Full support via Direct2D/DirectWrite backend.
• Delphi FMX — Works on Windows, macOS, iOS, and Android via FMX Canvas with TrueType-based font metrics.
• Qt4/ Qt5 / Qt6 — QPainter backend with native gradient support. A single unit handles Qt4, Qt5 and Qt6.
• GTK3 — The Cairo/Pango backend now supports GTK3 in addition to GTK2.

All drawing uses sub-pixel rendering, alpha blending, and hardware acceleration where available.

PDF Export

Export any HTML content to multi-page PDF with TPixiePdfExport:

• TrueType font embedding with glyph subsetting — text is searchable and selectable
• Images, borders, backgrounds, linear/radial gradients, opacity
• SVG rendered as vector Form XObjects (not rasterised)
• Font fallback for CJK and emoji
• Configurable page size (A4, Letter, Legal, custom) and margins
• Standalone SVG-to-PDF export (detects SVG input automatically)

SVG Rendering

A unified built-in SVG renderer now works identically across all platforms — no external dependencies (no librsvg, no native D2D SVG):

• All basic shapes: rect, circle, ellipse, line, polyline, polygon
• Full path commands: M, L, H, V, C, S, Q, T, A, Z
• linearGradient and radialGradient with stops, units, and transforms
• <use>/<symbol> element reuse and <clipPath> clipping
• viewBox with overflow clipping, opacity, transforms
• Text rendering with text-anchor alignment

New CSS Features

• calc() — Arithmetic expressions in property values
• opacity — With platform transparency layers (D2D, Cairo, CoreGraphics, FMX, Qt)
• display: flow-root — Block-level BFC
• overflow-wrap / word-wrap
• Grid minmax() — Content-based min with fr max in track sizing
• background-repeat — Proper tiling with pixel-snapped seams
• background-attachment — scroll vs fixed
• text-decoration — Moved to element-level for continuous inline spanning; style support (solid, dashed, etc.)
• ::before / ::after — Pseudo-element creation with content property
• sub / super — Vertical-align shift
• Self-collapsing margins — Per CSS 2.2 §8.3.1
• -webkit-center / -moz-center — Block-level child centring

Interaction Improvements

• Per-character text selection — Click and drag selects individual characters; double-click drag extends by whole words
• Ctrl+A / Cmd+A — Select all text
• Auto-scroll — Drag selection near viewport edges scrolls automatically
• Interactive scrollbar — Thumb drag, track page-up/down, configurable appearance (width, colours), auto-show/hide with fade
• Home / End keys — Scroll to top/bottom
• IME support — Candidate window positioning for CJK input on Windows (IMM32), Linux GTK2/3, and Qt
• Anchor scrolling — #fragment links scroll to target with inertia suppression
• OnScrollChanged event — For external scrollbar synchronisation
• BorderStyle property
• New elements — <details>/<summary> toggle, <input type="button">, OL/UL type attribute

Performance

• MeasureText cache — Two-level dictionary at the canvas base class. Halves first-render time on large documents and significantly speeds up PDF export.
• String allocation reductions throughout (StrLComp, SameText, optimised hex/UTF-8 parsing)
• HTML charset detection via spec prescan algorithm with automatic UTF-8 conversion

Bug Fixes

• Hover/active pseudo-class repainting on ancestor elements
• Click events firing correctly for ancestor/descendant pairs
• Font alias mappings matching Chromium/Firefox behaviour
• HiDPI: system scale factor applied, media queries use CSS pixels
• Line-height inheritance preserves px units
• Border-collapse pixel snapping, margin collapsing through wrappers
• Flex layout and PDF gradient divide-by-zero guards
• <br> line height and <script> phantom render items
• SVG rendering on comma-decimal locales
• PDF emoji (supplementary-plane) with UTF-16 surrogate pairs
• WIC use-after-free crash in D2D image loading
• Percent-encoded file paths in URLs and CSS imports

The updated demo is available for download from the home page and here is a screenshot of the new TPixiePaintBox:

[apeoperaio]

Wow!

I tried the demo on MacOS but I get the following error:
Pixie.Canvas.CG.pas(153,1) Error: Internal error 200609171

Any hint?

Lazarus 4.4 (rev lazarus_4_4) FPC 3.2.2 aarch64-darwin-cocoa

Pixie commit:
f4d14c46f4dd8f5ef576a88a3894ea07b2b3a66c

[Wallaby]

I tried the demo on MacOS but I get the following error:
Pixie.Canvas.CG.pas(153,1) Error: Internal error 200609171
Lazarus 4.4 (rev lazarus_4_4) FPC 3.2.2 aarch64-darwin-cocoa

This is a known FPC 3.2.2 bug — the DWARF3 debug info generator doesn't handle Objective-C types used by the Cocoa widgetset, so the compiler crashes when emitting debug data.

The demo defaults to Debug mode with DWARF3, which triggers the issue. Two options:

1. Build in Release mode — switch to Release in the build mode dropdown (or pass --bm=Release).
2. Switch to DWARF2 — in Project Options → Debugging, change debug info type from DWARF3 to DWARF2 or NONE.

This is fixed in FPC main and probably in 3.2.3.

[440bx]

@retrofoxed,

Off topic and strictly a matter of curiosity (IOW, I have no intention to elaborate on whatever your answer is), did you use any A.I model to help you develop Pixie ? and, if the answer is "yes", do you continue to rely on A.I for its further development (including bug fixes and such) ?

Thank you (since the topic of A.I seems to be a sensitive one, I will not make any comments on whatever your answers are.)