Live editor zplCore Designer

Example

Docs

About

The zplCore Designer is the embeddable label editor of zplCore.com: design JSON and data (JSON records) in, design JSON, ZPL, PDF and PNG out. What you see on the canvas is what the printer prints, rendered by the same engine. Nothing is stored on the server and there is no login: the design stays in this browser (local storage) until you download it. Demo limits: requests up to 256 KB, 50 records, 300 elements, images up to 192 KB, 300 requests per minute. No printing in the editor – your application prints. Documentation · Licensing

Embed the zplCore Designer

Host the editor yourself – in your ASP.NET Core app (NuGet) or as a container – and embed it in any web or desktop app. Your app keeps the design; the editor only edits it.

dotnet add package ZplCore.Designer

// Program.cs
builder.Services.AddZplCoreDesigner(o =>
{
    o.Fonts.AddDirectory("fonts");            // optional: your TTF printer fonts (E:NAME.TTF)
    o.Limits.MaxRecordsPerRequest = 500;
});

var app = builder.Build();
app.UseAuthentication();
app.UseAuthorization();
app.MapZplCoreDesigner("/designer")
   .RequireAuthorization();                  // your auth – the designer brings none of its own

// editor UI: https://your-app/designer/   render API: /designer/api/…

docker run -d -p 8080:8080 --read-only --tmpfs /tmp \
  -e ZPLCORE_DESIGNER__AUTH__MODE=apikey \
  -e ZPLCORE_DESIGNER__AUTH__APIKEYS__0=<a key of at least 16 characters> \
  -e ZPLCORE_DESIGNER__ALLOWEDORIGINS__0=https://app.example.com \
  -v ./fonts:/fonts:ro \
  zplcore/designer

# editor UI: http://localhost:8080/designer/   health: /healthz, /readyz

<!-- your page: a container with a height -->
<div id="editor" style="height: 720px"></div>

<script src="https://labels.example.com/designer/sdk/zplcore-designer.js"></script>
<script type="module">
  const editor = await ZplCoreDesigner.mount('#editor', {
    baseUrl: 'https://labels.example.com/designer/',
    design,                                   // design document or label JSON
    data: [{ name: 'Anna', ean: '9506000134352' }],
    locale: 'en', theme: 'auto', unit: 'mm',
    requestHeaders: { 'X-Api-Key': key },     // container with API key (never in a URL)
    onChange: (doc) => save(doc)              // user edits, debounced
  });

  const zpl = await editor.getZpl();          // also getDesign(), getPdf(), getPng(), setData(rows) …
</script>

<script src="/designer/sdk/zplcore-designer.js"></script>   <!-- defines <zplcore-designer> -->

<zplcore-designer base-url="/designer/" locale="en" theme="auto"
                  style="display: block; height: 720px"></zplcore-designer>

<script>
  const el = document.querySelector('zplcore-designer');
  el.data = rows;
  el.addEventListener('zplcore-change', (e) => save(e.detail.design));
</script>

dotnet add package ZplCore.Designer.Blazor

@* the editor itself runs on a ZplCore.Designer host or the container *@
<ZplCoreDesigner @bind-Design="design" Data="rows" BaseUrl="/designer"
                 Locale="en" Theme="DesignerTheme.Auto" Height="80vh" />

@code {
    JsonObject? design;
    object[] rows = [new { name = "Anna", ean = "9506000134352" }];
}

All options, the render API and the JavaScript API: zplCore Designer documentation · Licensing: Pricing