HtmlForgeX

Quick Start

Build your first HTML document with HtmlForgeX in 5 steps.

Step 1: Create a Project

dotnet new console -n MyReport
cd MyReport
dotnet add package HtmlForgeX

Step 2: Create a Document

using HtmlForgeX;

var doc = new Document();

Step 3: Add a Page with Content

doc.Body.Page(page => {
    page.Card(card => {
        card.Header(header => header.Title("My First Report"));
        card.Body(body => body.Text("This report was generated with HtmlForgeX."));
    });
});

Step 4: Add a Table

var data = new[] {
    new { Name = "Alice", Department = "Engineering", Salary = 95000 },
    new { Name = "Bob", Department = "Marketing", Salary = 78000 },
    new { Name = "Carol", Department = "Engineering", Salary = 102000 },
};

doc.Body.Page(page => {
    page.Table(data, table => {
        table.EnableSearch().EnablePaging(10);
    });
});

Step 5: Save and Open

doc.Save("report.html");

Open report.html in your browser. You should see a styled page with an interactive, searchable table.

Complete Example

using HtmlForgeX;

var employees = new[] {
    new { Name = "Alice", Department = "Engineering", Salary = 95000 },
    new { Name = "Bob", Department = "Marketing", Salary = 78000 },
    new { Name = "Carol", Department = "Engineering", Salary = 102000 },
};

var doc = new Document();
doc.Body.Page(page => {
    page.Card(card => {
        card.Header(header => header.Title("Employee Report"));
        card.Body(body => {
            body.Table(employees, table => {
            table.EnableSearch()
                 .EnablePaging(25)
                 .EnableSorting();
        });
        });
    });
});
doc.Save("employee-report.html");

Next Steps

  • Core Concepts — Understand Document, Element, and Library modes
  • Tables — Advanced table features with DataTables
  • Charts — Add ApexCharts and Chart.js visualizations
  • Layout — Build multi-column layouts with Tabler

API Reference