Core Concepts

Document

The Document is the root object representing an HTML document. It manages the Head (metadata, styles, scripts) and Body (visible content).

var doc = new Document();
doc.Head.Title = "My Report";
doc.Body.Page(page => { /* content */ });
doc.Save("output.html");

Element Hierarchy

All HTML components inherit from the abstract Element class. Elements form a tree:

Document → Head + Body
Body → Pages, Containers, Components
Containers → Cards, Rows, Columns, Tabs
Components → Tables, Charts, Badges, Buttons

Each element automatically registers its required CSS/JS libraries.

Library Management

HtmlForgeX manages external libraries (Bootstrap, DataTables, ApexCharts, Tabler, etc.) automatically. When you use a component, its dependencies are registered and included in the output.

Library Modes

Mode	Description	Use Case
Online	Links to CDN resources	Web-connected environments
Offline	Embeds all CSS/JS inline	Single self-contained HTML file
OfflineWithFiles	Creates separate CSS/JS files	Local file serving

var doc = new Document();
doc.LibraryMode = LibraryMode.Offline; // Self-contained HTML

Fluent API

All configuration methods return this , enabling method chaining:

table.EnableSearch()
     .EnablePaging(25)
     .EnableSorting()
     .WithStriped()
     .WithHover();

Type Safety

HtmlForgeX uses enums extensively instead of magic strings:

// Instead of: .Class("badge bg-green")
new TablerBadge("Active").Color(TablerBadgeColor.Green);

// Instead of: .Style("width: 50%")
new TablerProgress(50, TablerColor.Blue);

Page Structure

The typical structure of a document uses the Page component for Tabler-based layouts:

doc.Body.Page(page => {
    page.Row(row => {
        row.Column(TablerColumnNumber.Four, col => {
            col.Card(card => {
                card.Body(body => body.Text("Card 1"));
            });
        });
        row.Column(TablerColumnNumber.Eight, col => {
            col.Card(card => {
                card.Body(body => body.Text("Card 2"));
            });
        });
    });
});