Nuevo: sgcCustomization HTML. Construimos tu aplicación web por ti. Describe la aplicación que necesitas y nuestro equipo la construye con sgcHTML + sgcWebSockets. Paquetes desde €149.
Descubre sgcCustomization HTML
Delphi 7 a 13, C++ Builder y .NET 110 componentes, diez familias

sgcHTML: componentes de UI web para Delphi, C++ Builder y .NET

Crea interfaces web completas y modernas directamente desde Delphi, C++ Builder y .NET. sgcHTML es un framework de componentes del lado del servidor con 110 widgets listos para usar: gráficos, cuadrículas, formularios, paneles, chat y más. Muchos se enlazan directamente a un TDataSet, generan marcado Bootstrap 5 y se mantienen interactivos mediante htmx. Tú escribes Object Pascal o C#, sgcHTML escribe el HTML, el CSS y el JavaScript.

DelphiC++ Builder.NETBootstrap 5 + htmxVinculación a datos / TDataSetSin JavaScript

¿Prefieres no construirlo tú mismo? Lo construimos por ti →

Panel de ERP construido con sgcHTML para Delphi, en una ventana de navegador: tarjetas KPI, un gráfico de barras de ingresos y un grid de facturas recientes.

Primeros pasos →

Una aplicación, construida solo con sgcHTML

Clientes, productos, proveedores y facturación, con gráficos de panel, administración basada en roles e inicio de sesión con passkey. Un ejecutable Delphi de 7,7 MB, sin DLL a su lado, que sirve un ERP web completo sobre SQLite.

Un ERP completo en un solo exe

ERP: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Clientes

ERP: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Facturas

ERP: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Informes

110 componentes, diez familias

Desde la navegación hasta las cuadrículas de datos, gráficos, formularios, superposiciones y chat de IA: todo el vocabulario de Bootstrap 5 como componentes nativos. Cada uno enlaza a su propia página con ejemplos para Delphi, C++ Builder y .NET.

NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout, Splitter.

Ver componentes →

Datos y Tablas

Grid, DataTable, TreeGrid, PivotTable, Calendar, Scheduler, Timeline, ActivityFeed, KanbanBoard, Gantt: ordenables, filtrables, exportables y vinculados a datasets.

Ver componentes →

Gráficos y Visualización

Chart (Chart.js), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram (flujo SVG), Map (Leaflet), QRCode, Barcode: visualizaciones basadas en tus propios datasets.

Ver componentes →

Formularios y Entradas

Form, Edit, Memo, CheckBox, RadioGroup, Select, MultiSelect, InputGroup, AutoComplete, DatePicker, TimePicker, ColorPicker, Slider, FileUpload, RichEditor, Rating, SignaturePad, Transfer.

Ver componentes →

Contenido y Diseño

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video, Badge, PDFViewer: tarjetas, medios y paneles de KPI para cuadros de mando.

Ver componentes →

Superposiciones y Avisos

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder, ContextMenu, ProgressBar, JobProgress, LogViewer: diálogos y superficies de estado.

Ver componentes →

Chat e IA

ChatBox, Chat (estilo WhatsApp), AIChat con selector de proveedor, streaming de tokens y citas de fuentes RAG, Presence para el estado en línea en vivo.

Ver componentes →

Autenticación

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys), UserManagement, RolesPermissions: flujos de inicio de sesión y pantallas de administración listos para usar.

Ver componentes →

Instrumentos y SCADA

Gauge, LinearGauge, LED, LEDBar, SegmentDisplay, Odometer, AnalogClock, Compass, VUMeter, Knob, ToggleSwitch, PushButton, NumericStepper, StripChart, Oscilloscope, Annunciator, SCADAPanel. Paneles de sala de control mantenidos en vivo por el servidor, con vinculación MQTT.

Ver componentes →

Infraestructura y motor

EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter: las piezas no visuales que sirven las páginas y las mantienen en vivo.

Ver componentes →

Ver la matriz de características completa →

Tú escribes Pascal o C#. sgcHTML escribe el front end.

sgcHTML convierte tu back end existente de Delphi, C++ Builder o .NET en un servidor de aplicaciones web. Cada componente es una clase nativa que emite HTML de Bootstrap 5; htmx mantiene la página interactiva y en directo sin una sola línea de JavaScript escrita a mano.

Componentes que renderizan HTML

Cada widget es una clase: TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form y 86 más. Configura sus propiedades y luego lee su propiedad HTML para obtener marcado Bootstrap 5 limpio y listo para servir.

Servido por tu propio servidor

Coloca un TsgcHTMLEngine_Server (o conecta el HTML a un TsgcWebSocketHTTPServer). Las peticiones llegan a tu manejador OnCommandGet; respondes con una página construida a partir de componentes. Sin stack web externo.

Alojamiento en WebBroker y DataSnap

sgcHTML no está atado al servidor sgcWebSockets. Sirve las mismas páginas construidas a partir de componentes desde cualquier aplicación WebBroker de Embarcadero mediante TsgcHTMX_Engine_Server_WebBroker, o desde un servidor DataSnap con envío en directo por WebSocket en el mismo puerto que tus endpoints REST.

Alojamiento en WebBroker y DataSnap →

Interactivo gracias a htmx

Añade un TsgcHTMX_Engine_Server y los clics, los envíos de formularios y las actualizaciones en directo van y vuelven a tus manejadores de eventos en Pascal/C#. El servidor intercambia fragmentos de HTML en el sitio. La sensación de una SPA, sin la cadena de compilación de JavaScript.

En tiempo real sobre WebSockets

Como htmx funciona sobre el servidor de sgcWebSockets, puedes enviar HTML en vivo a todos los navegadores conectados. Los paneles, los monitores y las ventanas de chat se actualizan en el instante en que cambian tus datos, dirigidos por el servidor y sin sondeo. Donde un proxy bloquea los WebSockets, la misma página puede recibir sus actualizaciones mediante eventos enviados por el servidor.

Temas y plantillas

TsgcHTMLTemplate_Bootstrap envuelve tu contenido en un documento responsive completo; TsgcHTMLThemeController y TsgcHTMLThemeBuilder proporcionan temas claro/oscuro y una hoja de estilos compartida. Bootstrap 5.3 y htmx se incluyen integrados: sin CDN en tiempo de ejecución.

Vinculación directa a base de datos

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline y Form se vinculan directamente a un TDataSet mediante LoadFromDataSet / DataSource. Apunta un componente a una consulta y renderiza las filas.

UI localizada, 17 idiomas

sgcHTML incluye texto de UI integrado (botones, etiquetas, mensajes de validación) en 17 idiomas: inglés, español, francés, alemán, portugués, italiano, neerlandés, sueco, noruego, polaco, checo, turco, ruso, chino, japonés, coreano y árabe. Elige uno con sgcHTMLSetLanguage y los componentes se renderizan en el idioma del visitante con los sistemas de escritura nativos correctos, incluidos CJK, cirílico y árabe. Los idiomas de derecha a izquierda, como el árabe y el hebreo, voltean toda la página automáticamente: se renderiza con dir="rtl", carga la hoja de estilos RTL de Bootstrap y refleja la barra lateral, la rejilla, los asistentes por pasos, el chat y los demás componentes, sin cambios de código.

Salida segura por defecto

Cada componente pasa su texto dinámico, atributos, JavaScript en línea y URLs por una codificación automática de HTML, atributos, JavaScript y URL, además de saneamiento de URL (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), de modo que los datos del usuario no pueden salir de su contexto e inyectar código. La protección contra XSS e inyección está activada sin trabajo adicional.

Idiomas de derecha a izquierda: árabe y hebreo

El árabe y el hebreo invierten toda la página de derecha a izquierda de forma automática: dir="rtl", la hoja de estilos RTL de Bootstrap y componentes reflejados, sin cambios de código.

Derecha a izquierda (RTL)

Una página en inglés, árabe y hebreo. Elige árabe o hebreo y todo el diseño pasa a derecha a izquierda, desde la barra lateral hasta la rejilla. Sin cambios de código, solo el idioma.

Textos de interfaz integrados (botones, etiquetas, mensajes de validación) en inglés, español, francés, alemán, portugués, italiano, neerlandés, sueco, noruego, polaco, checo, turco, ruso, chino, japonés, coreano y árabe. Elige uno con sgcHTMLSetLanguage.

Abrir la demo en vivo →

Lee el tema de ayuda sobre localización

Novedades de sgcHTML

Cada novedad está desactivada hasta que la usas, así que una página que no usa ninguna se renderiza exactamente igual que antes. La lista completa está en la matriz de características.

Tu página dentro de ChatGPT y Claude

Una herramienta MCP responde con una página en lugar de texto, construida con los mismos componentes que usas para cualquier página web y renderizada por ChatGPT, Claude y VS Code. Requiere la edición Enterprise o All-Access, o el pack sgcAI. Consulta MCPApp.

Generador de páginas con IA

Describe una página o entrega al diseñador una captura de pantalla, y construye la página con tus propios componentes. Responde a partir de un esquema construido desde tu registro, de modo que no puede nombrar una clase que no le hayas ofrecido, y no se aplica nada hasta que lo aceptas. Necesita las unidades de IA de la edición Enterprise o All-Access, o el pack sgcAI. Lee la guía.

CRUD como un único componente

El listado, la búsqueda, la paginación, el formulario, la eliminación y la ruta de escritura de una tabla como un único componente, sobre un dataset o sobre tu propio SQL. Lo crea un asistente del IDE. Consulta CRUD.

Hazle una pregunta a un grid

Una pregunta en lenguaje natural se convierte en filtros, ordenaciones, agrupaciones y resaltados, validados contra tus propias columnas antes de aplicar nada. Funciona sin clave de API mediante un analizador integrado, y con siete proveedores cuando las unidades de IA están en tu edición. Consulta AIAssistant.

Llega a un navegador cerrado

Eventos enviados por el servidor para redes que bloquean WebSockets, Web Push para un navegador que no está en ejecución, una bandeja de notificaciones y una tabla de preferencias. Web Push requiere la edición Enterprise o All-Access. Consulta WebPush.

Sesiones, enrutamiento y pruebas

Sesiones con cookie, tokens CSRF, limitación de inicios de sesión y protección de rutas por rol. Parámetros de ruta y filtros de método en las rutas, navegación de página única desde la plantilla de página, y utilidades para probar el marcado que produces. Consulta Auth.

Tag Helpers de Razor para ASP.NET Core

Si creas aplicaciones ASP.NET Core MVC o Razor Pages al estilo de Telerik o DevExpress, sgcHTML ahora habla el mismo idioma. Tag Helpers como <sgc-grid>, <sgc-form>, <sgc-dialog> y <sgc-chart>, y sus equivalentes fluidos bajo Html.Sgc(), generan HTML Bootstrap 5 en el servidor y hablan con tus controladores mediante htmx. No hay que aprender ningún framework de JavaScript ni escribir un origen de datos JSON. La capa Razor se distribuye en el paquete NuGet esegece.sgcHTML.AspNetCore Paquete NuGet, incluida la edición Community.

Una cuadrícula sobre IQueryable

<sgc-grid> pagina, ordena, filtra (texto y rango), busca y exporta a XLSX y PDF en el servidor. El controlador responde con this.SgcGrid(request, query), y EF Core convierte cada clic en SQL parametrizado. push-url mantiene la página, el orden y los filtros en la barra de direcciones, así que recargar y el botón Atrás funcionan.

Formularios enlazados con asp-for

<sgc-textbox>, <sgc-select>, <sgc-datepicker>, <sgc-checkbox> y <sgc-autocomplete> se enlazan a tu modelo con asp-for y muestran los errores de ModelState bajo cada campo. <sgc-form hx="true"> envía por htmx, y this.SgcRedirect(url) navega tras un guardado válido.

Cualquier elemento con sgc-dialog="name" carga su URL en un <sgc-dialog>. Tras un envío válido, this.SgcCloseDialog("edit-order", refresh: "orders") cierra el diálogo y recarga la cuadrícula, el patrón de edición emergente sin ningún script propio.

Gráficos en directo, sin SignalR

<sgc-chart> muestra datos estáticos, consulta una acción con refresh-every="5s", o pasa a live="true": un servicio en segundo plano llama a hub.BroadcastChartAsync(...) y todos los navegadores abiertos redibujan el gráfico por el WebSocket de sgcHTML. Los gráficos de Telerik y DevExpress necesitan la infraestructura de SignalR para el push del servidor, sgcHTML lo lleva integrado.

@* Views/Orders/Index.cshtml, page 1 renders inline from the model *@
@model IQueryable<OrderRow>

<sgc-grid name="orders" key="Id" items="Model"
          asp-action="Read" asp-export-action="Export" export="xlsx,pdf"
          page-size="15" sortable="true" filterable="true"
          searchable="true" push-url="true">
    <sgc-column field="Reference" searchable="true" />
    <sgc-column field="Customer" searchable="true" />
    <sgc-column field="OrderDate" title="Date" format="{0:yyyy-MM-dd}" filter="range" />
    <sgc-column field="Total" format="{0:N2}" align="right" filter="range" />
    <sgc-column field="Paid" />
</sgc-grid>
// Program.cs
builder.Services.AddControllersWithViews();
builder.Services.AddSgcHtml(o => o.ServeRootPage = false);  // the MVC app owns "/"
builder.Services.AddSgcHtmlRazor();   // SgcDataRequest binder, grid state, /sgcHTML.css
// ...
app.UseWebSockets();   // before UseSgcHtml, needed by live charts
app.UseSgcHtml();
app.MapDefaultControllerRoute();

// Controllers/OrdersController.cs
public class OrdersController : Controller
{
    private readonly ShopDb FDb;

    public OrdersController(ShopDb db) { FDb = db; }

    // An IQueryable projection: EF Core turns paging, sort and filters into SQL.
    private IQueryable<OrderRow> Rows() =>
        FDb.Orders.AsNoTracking().Select(o => new OrderRow
        {
            Id = o.Id, Reference = o.Reference, Customer = o.Customer.Name,
            OrderDate = o.OrderDate, Total = o.Total, Paid = o.Paid
        });

    public IActionResult Index() => View(Rows());

    // Every page, sort, filter and search click of the grid lands here.
    public IActionResult Read(SgcDataRequest request) => this.SgcGrid(request, Rows());

    // The toolbar export links: the filtered and sorted rows as XLSX or PDF.
    public IActionResult Export(SgcDataRequest request) =>
        this.SgcGridExport(request, Rows(), "orders");
}
@* The same grid with the fluent builder, the twin of Html.Kendo().Grid<T>() *@
@(Html.Sgc().Grid<OrderRow>("orders")
    .Key(o => o.Id)
    .Columns(c =>
    {
        c.Bound(o => o.Reference).Searchable();
        c.Bound(o => o.Customer).Searchable();
        c.Bound(o => o.OrderDate).Title("Date").Format("{0:yyyy-MM-dd}").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Total).Format("{0:N2}").Align("right").Filter(SgcGridFilterKind.Range);
        c.Bound(o => o.Paid);
    })
    .Items(Model)
    .Read("Read")
    .Export(SgcExportFormat.Xlsx, SgcExportFormat.Pdf)
    .ExportAction("Export")
    .Pageable(15)
    .Sortable().Filterable().Searchable().PushUrl())
@* _Layout.cshtml: live="ws" opens the WebSocket that live charts listen to *@
<sgc-scripts live="ws" />

@* The view *@
<sgc-chart name="live-orders" type="line" height="260" live="true">
    <sgc-series name="Orders / s" data="new double[] { 0 }" color="#dc3545" />
</sgc-chart>
// builder.Services.AddHostedService<LiveSalesFeed>();
public sealed class LiveSalesFeed : BackgroundService
{
    private readonly ISgcHtmlHub FHub;
    private readonly Queue<string> FLabels = new Queue<string>();
    private readonly Queue<double> FValues = new Queue<double>();

    public LiveSalesFeed(ISgcHtmlHub hub) { FHub = hub; }

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        var oRandom = new Random();
        while (!stoppingToken.IsCancellationRequested)
        {
            await Task.Delay(1000, stoppingToken);
            FLabels.Enqueue(DateTime.Now.ToString("HH:mm:ss"));
            FValues.Enqueue(oRandom.Next(0, 20));
            if (FValues.Count > 20) { FLabels.Dequeue(); FValues.Dequeue(); }

            // One WebSocket message redraws the chart in every open browser.
            await FHub.BroadcastChartAsync("live-orders", FLabels.ToArray(),
                new SgcChartSeries("Orders / s", FValues.ToArray(), "#dc3545"));
        }
    }
}

¿Vienes de Telerik UI for ASP.NET Core o DevExpress? [DataSourceRequest] pasa a ser SgcDataRequest, ToDataSourceResult pasa a ser this.SgcGrid(request, query) (o query.ToSgcDataResult(request) solo para los datos), y Html.Kendo().TextBoxFor(m => m.X) pasa a ser Html.Sgc().TextBoxFor(m => m.X). La demo MVC ejecutable, 22.RazorMvc, es el ejemplo de pedidos de Telerik escrito con sgcHTML sobre EF Core.

Un panel web en unas pocas líneas

Inicia un servidor HTTP, conecta el motor htmx y responde a las peticiones con una página construida a partir de componentes. La misma API en Delphi, C++ Builder y .NET.

uses
  sgcWebSocket_Server, sgcHTMX_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;

// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;

FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer;        // realtime htmx over WebSocket

FServer.Active := True;

// 2. Build the page from components
function TForm1.BuildDashboard: string;
var
  oChart: TsgcHTMLComponent_Chart;
  oPage: TsgcHTMLTemplate_Bootstrap;
begin
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
  try
    oChart.ChartType := ctBar;
    oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
    oChart.AddDataset('Revenue', [1200, 1900, 1500],
      '#7C3AED', 'rgba(124,58,237,.25)', True);

    oPage.Title := 'Dashboard';
    oPage.BodyContent := oChart.HTML;   // component -> HTML
    Result := oPage.GetHTML;            // full Bootstrap document
  finally
    oPage.Free;
    oChart.Free;
  end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,
//           sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp

// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;

FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer;          // realtime htmx over WebSocket

FServer->Active = true;

// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
  TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
  TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
  try
  {
    oChart->ChartType = ctBar;
    oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
    oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
      "#7C3AED", "rgba(124,58,237,.25)", true);

    oPage->Title = "Dashboard";
    oPage->BodyContent = oChart->HTML;   // component -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;

var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server;            // realtime htmx over WebSocket

server.Active = true;

// 2. Build the page from components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}

sgcHTML en dos minutos

Construye una interfaz web completa desde Delphi con componentes de servidor, marcado Bootstrap 5 y htmx, sin ningún paso de compilación de JavaScript.

Componentes de alto nivel o nodos de bajo nivel

Recurre a los componentes listos para usar cuando quieras un widget en una sola línea, o baja a la capa de nodos cuando necesites control total sobre el marcado.

Capa de componentes

Los 110 widgets TsgcHTMLComponent_*. Configura propiedades, opcionalmente vincula un dataset y lee HTML. Muchos también exponen un método estático Build(...) para un uso en línea de una sola línea.

Capa de nodos / composición

Primitivas como TsgcHTMLContainer (con un indicador Void para etiquetas autocerradas), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton y TsgcHTMLTable se componen en cualquier diseño y luego se renderizan con TsgcHTMLTemplate_Bootstrap. El conjunto de nodos también incluye bloques de construcción de Bootstrap como TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode y TsgcHTMLImage.

Constructor visual de páginas

TsgcHTMLPageBuilder con su editor en tiempo de diseño te permite ensamblar páginas en el IDE, mientras que TsgcHTMLThemeController gestiona los temas claro/oscuro en toda la aplicación.

Dónde se ejecuta sgcHTML

DestinoDetalles
Delphi 7 a 13Delphi 7, 2007, 2009, 2010, XE hasta XE8, 10 Seattle hasta 10.4 Sydney, 11 Alexandria, 12 Athens y 13 Florence. Se admiten Windows, macOS y Linux.
C++ BuilderC++ Builder (versiones equivalentes)
.NET.NET 8, .NET 9, .NET 10, .NET Standard 2.0, en hosts Windows, Linux y macOS, con Razor Tag Helpers de ASP.NET Core.
AlojamientoEl servidor HTTP de sgcWebSockets, cualquier aplicación WebBroker, un servidor DataSnap o ASP.NET Core.
NavegadorRecursos de Bootstrap 5 y htmx integrados. No se necesita CDN en tiempo de ejecución.

sgcHTML es una biblioteca del lado del servidor: el teléfono recibe HTML por la red, por lo que Android e iOS no son destinos de compilación.

Quince aplicaciones reales, funcionando ahora mismo

Cada pantalla que ves aquí es una aplicación Delphi que sirve su propio HTML a través de sgcHTML. Sin cadena de compilación de JavaScript, sin un proyecto de front end aparte. Entra con las credenciales que ya vienen rellenadas en cada pantalla de inicio de sesión.

ERP: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

ERP

Clientes, productos, proveedores y facturación, con gráficos de panel, administración por roles e inicio de sesión con passkey.

Abrir la demo en vivo →
Informes & BI: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Informes & BI

Paneles, un catálogo de informes, un generador de tablas dinámicas ad hoc y una vista de exploración sobre 27.000 líneas de pedido, consultadas en el mismo proceso.

Abrir la demo en vivo →
Punto de venta: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Punto de venta

Una caja táctil con categorías, promociones, ventas aparcadas, gestión de turnos y una pantalla de cliente en vivo.

Abrir la demo en vivo →
Almacén (WMS): una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Almacén (WMS)

Entradas, salidas, stock disponible, movimientos y recuentos cíclicos, más un diseño de terminal portátil para escáneres.

Abrir la demo en vivo →
Servicio de campo: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Servicio de campo

Un tablero de asignación, un planificador Gantt y un mapa de técnicos en vivo para programar personal y órdenes de trabajo.

Abrir la demo en vivo →
Consola de administración: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Consola de administración

Búsqueda mientras escribes, alta y edición en línea, y borrado, todo intercambiado como fragmentos htmx sin recargar la página.

Abrir la demo en vivo →
Monitor en vivo: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Monitor en vivo

Métricas del servidor enviadas por WebSocket a fragmentos htmx fuera de banda, que actualizan tarjetas KPI y gráficos en tiempo real.

Abrir la demo en vivo →
Portal de clientes: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

Derecha a izquierda (RTL)

Una página en inglés, árabe y hebreo. Elige árabe o hebreo y todo el diseño pasa a derecha a izquierda, desde la barra lateral hasta la rejilla. Sin cambios de código, solo el idioma.

Abrir la demo en vivo →
Portal de clientes: una aplicación web Delphi creada con sgcHTML, mostrada en un navegador.

Portal de clientes

Un área de autoservicio, tras un inicio de sesión, donde cada cliente ve sus pedidos, su perfil y sus tickets de soporte.

Abrir la demo en vivo →
SaaS multiinquilino: una aplicación web Delphi construida con sgcHTML, funcionando en un navegador.

SaaS multiinquilino

Un sitio público, una página de precios y un flujo de alta delante de un plano de control aislado por inquilino.

Abrir la demo en vivo →

Más demos en línea: IA, instrumentos y SCADA

AI Data Pack

Un grid, una tabla dinámica y un formulario controlados en lenguaje natural: filtros, ordenaciones y agrupaciones sobre 26.000 líneas de pedido, un asistente de columna con IA y pegado inteligente. Funciona sin clave de API.

Abrir la demo en vivo →

Shop Assistant

Una tienda construida enteramente con componentes de sgcHTML, con un asistente de chat flotante cuyas respuestas están ancladas en el catálogo de productos. La versión en línea no necesita ninguna clave de API de LLM.

Abrir la demo en vivo →

MCP Apps

Una aplicación Delphi renderizada dentro de ChatGPT, Claude o VS Code: las herramientas MCP devuelven páginas de sgcHTML que el host muestra, y sus botones siguen funcionando ahí.

Abrir la demo en vivo →

Instruments

Una sala de control para un lazo de caldera simulado: medidores, pantallas, controles de operador, registradores gráficos y un osciloscopio mantenidos en vivo por el servidor, sin sondeo.

Abrir la demo en vivo →

SCADA / IoT

Un mímico de una planta de agua de refrigeración con depósitos, válvulas, bombas y flujo animado, además de medidores, un registrador gráfico y alarmas, todo controlado por MQTT. En línea funciona con una planta simulada.

Abrir la demo en vivo →

Ver todas las demos en línea →

Vídeos cortos, sin diapositivas

Cada clip es una grabación de pantalla de una de estas aplicaciones funcionando de verdad, con narración y subtítulos. No se descarga nada hasta que pulsas play.

El catálogo de componentes

El catálogo de componentes

El grid, con nueve comportamientos

Ordenación, filtrado, paginación, edición en línea, selección y enlace a datasets, todo gobernado desde Pascal.

Tiempo real sobre WebSocket

Métricas del servidor enviadas a fragmentos fuera de banda, que actualizan tarjetas y gráficos según cambian.

Una caja registradora sin capa REST

La demo de punto de venta leyendo la base de datos en proceso, sin ninguna API JSON de por medio.

Informes directos sobre los datos

Cuadros de mando, un constructor de tablas dinámicas y una vista de exploración sobre 27.000 líneas de pedido.

Cincuenta componentes en una aplicación

La demo de almacén, que va contando pantalla a pantalla la biblioteca de componentes en la que se apoya.

Planificador y técnico, uno al lado del otro

La misma aplicación en un tablero de escritorio y en un móvil, siempre sincronizadas.

Aislamiento multiinquilino, demostrado

Un único binario, una única base de datos, separación estricta por inquilino, demostrada en lugar de prometida.

Un portal de clientes

Pedidos de autoservicio, perfil y tickets de soporte detrás de un inicio de sesión.

CRUD en vivo sin recargar

Búsqueda mientras escribes, alta y edición en línea, y borrado, intercambiados como fragmentos htmx.

Un helpdesk con flujo de tickets

Un soporte con flujo de tickets

Un asistente de IA basado en tus datos

Un asistente de IA anclado en tus datos

Maquetación de todo el sitio

Navegación, barras laterales y composición de páginas construidas con el componente Site.

Integración en WebBroker

Encajarlo en WebBroker

WebBroker y DataSnap juntos

WebBroker y DataSnap juntos

Elige tu licencia

Todas las licencias incluyen el código fuente completo, 1 año de actualizaciones y un 70% de descuento en la renovación.

Delphi & C++ Builder

Incluye sgcWebSockets Core

€299 / desarrollador

1 año de actualizaciones

  • 110 componentes HTML/UI
  • Delphi & C++ Builder
  • Motor Bootstrap 5 + htmx
  • Vinculación a datos con TDataSet
  • Código fuente completo
  • Redistribución binaria gratuita
Single — €299 Team — €449 Site — €749

.NET

.NET Framework, .NET Core y .NET 5+ (NuGet)

€299 / desarrollador

1 año de actualizaciones

  • Componentes HTML/UI del lado del servidor
  • Motor Bootstrap 5 + htmx
  • Código fuente completo
  • Redistribución binaria gratuita
Single — €299 Team — €449 Site — €749

sgcCustomization HTML

Construimos tu aplicación web por ti.

€149

Tres paquetes de pago único

Con sgcCustomization HTML describes la aplicación que necesitas y el equipo de eSeGeCe la construye por ti con los componentes sgcHTML + sgcWebSockets.

Descubre sgcCustomization HTML

sgcHTML es un pack de componentes independiente. El precio de arriba ya incluye el runtime sgcWebSockets Core sobre el que está construido, así que no hay nada más que añadir a tu pedido.

Empieza desde donde estás

¿Vienes de otro framework web?

¿Ya tienes una aplicación web construida con IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder o D2Bridge? Las guías paso a paso te acompañan en el traslado a sgcHTML, con una correspondencia de conceptos para cada framework. También hay un formulario de asistencia a la migración si quieres que nuestro equipo te ayude a planificar o a hacer el cambio.

Abrir las guías de migración →
Comparativa de frameworks →

¿Ya usas WebBroker o DataSnap?

Sirve las mismas páginas construidas con componentes desde cualquier aplicación Embarcadero WebBroker, o desde un servidor DataSnap con envío WebSocket en vivo en el mismo puerto que tus endpoints REST.

Alojamiento en WebBroker y DataSnap →

¿No quieres construirlo tú mismo?

Con sgcCustomization HTML describes la aplicación que necesitas y el equipo de eSeGeCe la construye para ti con los componentes sgcHTML + sgcWebSockets. Tres paquetes de pago único desde €149, y recibes un proyecto completo que puedes compilar, ampliar y personalizar con tus componentes licenciados.

Descubre sgcCustomization HTML →

Prueba sgcHTML

sgcHTML se incluye dentro de la prueba All-Access de sgcWebSockets. Un instalador, ambos productos.

Descargas de RAD Studio / Delphi

La versión de prueba funciona durante un tiempo limitado en una sola estación de trabajo. Incluye todos los componentes sgcHTML.

Descargar la prueba →

Descargas de C++ Builder

C++ Builder (versiones equivalentes)

Descargar la prueba →

Paquete NuGet

Instala directamente desde nuget.org para todos los destinos .NET.

Ver en NuGet →

Demos

Código fuente de los demos de sgcHTML para ASP.NET Core en GitHub.

Ver en GitHub →

Preguntas frecuentes

No. La biblioteca emite marcado Bootstrap 5 y atributos htmx, y htmx es lo que hace que un botón envíe datos y cambie parte de la página sin recargar. Tú describes la interacción en Pascal y los atributos se generan por ti. Aun así puedes añadir tu propio script cuando quieras, mediante CustomHead y BodyEndHTML.

Lo escribes tú mismo en una respuesta HTTP. HTML es una propiedad string normal, así que sirve cualquier servidor. La demo incluida usa TsgcWSHTTPServer en una compilación Professional y recurre a TIdHTTPServer en caso contrario, define ResponseNo := 200 y ContentType := 'text/html; charset=utf-8', y asigna la cadena a ContentText.

TsgcHTMLComponent_Site, de la unit sgcHTML_Component_Site.pas. Renderiza una estructura de página completa, así que obtienes navegación, barra lateral, tema y área de contenido sin ensamblarlos tú. Constrúyelo, llama a AddMenu y AddContent o AddSection, y después lee la propiedad HTML. La demo Site incluida hace exactamente eso.

Cuando construyes la página con nodos, sí, porque el nodo escribe el texto y lo escapa. El riesgo aparece cuando te saltas los nodos y concatenas marcado tú mismo, por ejemplo mediante AddContent con una cadena construida a partir de datos del usuario. Prefiere las units de nodos para cualquier cosa que lleve datos del usuario.

No, y es deliberado. SGC_HTML se define en la línea 885 dentro de {$IFNDEF ANDROID} en la línea 883 y {$IFNDEF IOS} en la línea 884, así que en esos destinos cada unit de sgcHTML se compila a una unit vacía. Es una biblioteca del lado del servidor: el teléfono recibe HTML por la red, y por eso el destino móvil no necesita el renderizador. Windows, macOS y Linux son compatibles.

La descarga incluye más de quince demos de runtime en Demos\60.HTML\01.RunTime, entre ellas un panel de ERP, un helpdesk, un punto de venta, un almacén, una app de informes y una app de servicio en campo. La galería tiene un vídeo corto de cada una.

Ayuda y recursos

Ayuda en línea

Cada componente, con ejemplos para Delphi, C++ Builder y .NET.

Ayuda en línea →

Primeros pasos

Inicia un servidor HTTP, conecta el motor htmx y responde a las peticiones con una página construida a partir de componentes.

Inicio rápido →

Guía en PDF

La guía Getting Started: diseña una página en un formulario VCL, ejecuta código Delphi desde las acciones de la Surface y sigue las seis demos QuickStart.

Guía Getting Started (PDF, en inglés) →

Matriz de características

110 componentes, diez familias

Ver la matriz de características completa →

Galería

Quince aplicaciones reales, funcionando ahora mismo

Galería →
3,000+Desarrolladores
20+Años
761+Componentes
30+Integraciones de API
5Plataformas
Garantía de devolución de 30 días¿No estás satisfecho? Solicita un reembolso completo en los 30 días posteriores a la compra. Ver política de reembolso

Lanza una UI web sin salir de tu IDE

La confianza de desarrolladores de Delphi, C++ Builder, Lazarus y .NET que construyen aplicaciones en tiempo real en todo el mundo.

Otros productos de eSeGeCe

Combina sgcHTML con nuestras otras bibliotecas de componentes para Delphi, C++ Builder y .NET.

sgcWebSockets

Componentes empresariales de WebSocket, HTTP/2, MQTT, AMQP, WebRTC e IA/LLM. Añade mensajería en tiempo real y la pila de red completa a tu aplicación sgcHTML.

Más información →

sgcQUIC

Componentes cliente y servidor QUIC y HTTP/3 para Delphi, C++ Builder y .NET. Sirve la UI renderizada de sgcHTML sobre HTTP/3 para cargas de página con menor latencia en redes con pérdidas.

Más información →

sgcWebRTC

Motor WebRTC completo para Delphi y C++ Builder: llamadas de audio/vídeo, canales de datos y compartición de pantalla. Un complemento para sgcWebSockets Enterprise.

Más información →

sgcSign

Firmas digitales empresariales: XAdES, PAdES, CAdES y ASiC con 10 proveedores de claves y 21 perfiles por país de la UE.

Más información →

sgcOpenAPI

Parser de OpenAPI 3.0 y generador de SDK. Convierte cualquier especificación OpenAPI en un cliente Delphi fuertemente tipado en segundos.

Más información →

sgcBiometrics

Componentes nativos de Windows Hello, huella dactilar y Windows Biometric Framework para Delphi y C++ Builder.

Más información →

sgcIndy

Componentes Indy TCP/IP actualizados con TLS moderno, IPv6 y compatibilidad con HTTP/2 para Delphi 7 a 13.

Más información →

sgcAI

15 componentes de IA, LLM y MCP para Delphi y C++ Builder. Un único componente de chat llega a OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok y Mistral. Producto independiente, incluye el runtime de sgcWebSockets Core.

Más información →

sgcMQ

Componentes cliente de MQTT 3.1.1 y 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka y STOMP para Delphi y C++ Builder. Producto independiente, incluye el runtime de sgcWebSockets Core.

Más información →

sgcCrypto

Biblioteca de criptografía de propósito general para Delphi y C++ Builder: cifrado simétrico y asimétrico, funciones hash y algoritmos post-cuánticos. Se incluye gratis desde sgcWebSockets Standard.

Más información →

sgcSocial

Clientes de WhatsApp Business Cloud API y de Telegram TDLib. Producto independiente, incluye el runtime de sgcWebSockets Core.

Más información →