sgcHTML Design Surface — Build Pages Visually, Not Just in Code

sgcWebSockets 2026.9.0 adds a new way to build sgcHTML pages: the Design Surface. Until now, every page was composed in code — create the components, set their properties, read the resulting HTML. That still works, and remains the primary way to build a page. What is new is a second, visual path: drop the same components directly on an ordinary VCL form, arrange them, tune their properties in the Object Inspector, and render the identical page you would otherwise have written by hand.

Two Ways to Build a Page

The runtime approach has not changed. Create or drop the components, set their properties and bind data in Pascal, C# or .NET code, then read the component's HTML property:

uses
  sgcHTML_Component_Grid;

var
  oGrid: TsgcHTMLComponent_Grid;
begin
  oGrid := TsgcHTMLComponent_Grid.Create(nil);
  try
    oGrid.Columns.Add.Title := 'Customer';
    oGrid.Columns.Add.Title := 'Total';
    oGrid.Clear;
    oGrid.AddRow(['Acme Corp', '1,240.00']);
    Response.Write(oGrid.HTML);
  finally
    oGrid.Free;
  end;
end;

The Design Surface adds a second option for the same components: drop them on a form, and let the page's structure come from the form's own layout instead of from constructor calls.

The Design Surface

A component's position and width on the form infer its Bootstrap row and column, and its published properties are tuned in the Object Inspector instead of in code. A TsgcHTMLDesignSurface component added to the form reads that layout. Call sgcHTMLDesignBuildFromControls once, typically at startup, to walk the form's dropped components into the surface's node tree, then read Surface.GetBodyHTML to render it:

uses
  sgcHTMLDesign_Surface;

procedure TfrmDashboard.Build;
begin
  sgcHTMLDesignBuildFromControls(Surface, Self);
end;

function TfrmDashboard.BodyHTML: string;
begin
  Surface.Invalidate;
  Result := Surface.GetBodyHTML;
end;

For markup the component palette does not cover, Surface.AddHTML adds a fixed HTML node into the same tree, positioned with the node's Order property, or slotted inside a dropped component's own body with Slot := 'Body'.

Same Components, Same Output

The Design Surface only changes how a page's structure is expressed, not the components themselves or their behavior. A component dropped on a designed form is an ordinary component instance — Grid1.LoadFromDataSet(qry) works exactly as it would on a page built entirely in code. The two authoring styles can also be mixed freely on the same page, and both produce components that compile and run identically once built.

When to Use Each

Runtime composition still fits best when a page's structure is itself dynamic or data-driven — loop-generated rows, conditional sections, content that depends on state only known at runtime — and for one source shared across Delphi 7–13 with no IDE dependency. The Design Surface fits best when laying out mostly-static page structure visually, seeing the page's shape while building it, and tuning properties through the Object Inspector rather than in code. Neither is a runtime capability difference: choosing one over the other is purely an authoring-time preference.

Still Growing

The Design Surface's component palette is actively expanding, and a few gaps remain today. Some components' own wrapper markup, such as TsgcHTMLComponent_Panel's card shell, has no property yet to suppress it. TsgcHTMLComponent_Form fields do not currently apply column classes or spans the way hand-written markup can. Not every property exists on every sibling component — UseColorClass, for instance, exists on Panel but not on Login or StatCard. And TsgcHTMLComponent_Grid does not yet expose sortable column headers as a design-time property. None of this affects the runtime path, and the palette keeps closing these gaps release over release.

See It in Action

The clearest way to see both approaches side by side is the Demos\60.HTML folder that ships with sgcWebSockets. 01.RunTime holds the original, code-built demos; 02.DesignTime holds every one of them — AdminCRUD, LiveMonitor, Portal, HTMX, Grid, Site, Components, Helpdesk, ShopAssistant, WebBroker and WebBrokerHTML, alongside the ERP demo that started the pattern — rebuilt entirely on forms with the Design Surface. Compare the two folders for the same demo and you get the same page from two different authoring styles.

Upgrading

The Design Surface ships as part of the sgcHTML pack in sgcWebSockets 2026.9.0, no migration needed for existing runtime-built pages. Grab the free trial to try it, and browse the full component set on the components hub.

Questions, feedback or migration help? Get in touch — you will get a reply from the people who wrote the code.