FlexRender.Core 0.4.1

FlexRender

A .NET library for rendering images from YAML templates with a full CSS flexbox layout engine. Perfect for generating receipts, labels, tickets, and structured documents.

Features

• YAML Templates -- define complex image layouts in readable YAML format
• Full CSS Flexbox -- direction, wrapping, justify, align, grow/shrink/basis, min/max constraints, auto margins
• RTL Support -- right-to-left layout with text-direction: rtl, logical alignment (start/end), row mirroring
• Template Engine -- variables ({{name}}), loops (type: each), conditionals (type: if with 13 operators)
• Rich Content -- text, images, QR codes (FlexRender.QrCode), barcodes (FlexRender.Barcode), separators
• HarfBuzz Shaping -- optional FlexRender.HarfBuzz package for Arabic/Hebrew glyph shaping
• Multiple Formats -- PNG, JPEG (quality 1-100), BMP (6 color modes), Raw pixels
• Per-Call Options -- antialiasing, font hinting, text rendering mode per render call
• AOT Compatible -- no reflection, works with Native AOT publishing
• CLI Tool -- render, validate, watch, and debug templates from the command line

Examples

Receipt	Dynamic Receipt	Ticket	Label

<details> <summary>Feature Showcase (click to expand)</summary>

</details>

Installation

# All-in-one package
dotnet add package FlexRender

# CLI tool
dotnet tool install -g flexrender-cli

Linux / Docker: Add SkiaSharp.NativeAssets.Linux to avoid DllNotFoundException: libSkiaSharp. For HarfBuzz text shaping, also add HarfBuzzSharp.NativeAssets.Linux.

Quick Start

1. Create a template (receipt.yaml):

canvas:
  fixed: width
  width: 300
  background: "#ffffff"

layout:
  - type: flex
    padding: 20
    gap: 10
    children:
      - type: text
        content: "{{shopName}}"
        font: bold
        size: 1.5em
        align: center

      - type: each
        array: items
        as: item
        children:
          - type: flex
            direction: row
            justify: space-between
            children:
              - type: text
                content: "{{item.name}}"
              - type: text
                content: "{{item.price}} $"

      - type: text
        content: "Total: {{total}} $"
        font: bold
        align: right

2. Render with code:

var render = new FlexRenderBuilder()
    .WithSkia(skia => skia.WithQr().WithBarcode())
    .Build();

var data = new ObjectValue
{
    ["shopName"] = "My Shop",
    ["total"] = 1500,
    ["items"] = new ArrayValue(
        new ObjectValue { ["name"] = "Product 1", ["price"] = 500 },
        new ObjectValue { ["name"] = "Product 2", ["price"] = 1000 })
};

byte[] png = await render.RenderFile("receipt.yaml", data);

3. Or use the CLI:

flexrender render receipt.yaml -d data.json -o receipt.png

Documentation

For LLM Agents

• llms.txt -- concise project overview (~200 lines)
• llms-full.txt -- comprehensive reference (~600 lines)
• AGENTS.md -- build commands, coding conventions

License

MIT