Headless, framework-agnostic label design engine for the burnmark ecosystem. Runs identically in Node.js 24 and all modern browsers — no DOM, no Vue/React imports, no UI dependencies.

Design labels in full colour with text, images, barcodes, and shapes. Flatten to printer-specific capabilities (single-colour thermal, two-colour Brother QL, etc.) at output time. Render to 1bpp bitmaps, PNG, or PDF. Drive batch production from CSV. Print directly from Node scripts via the @thermal-label/* driver family.

pnpm add @burnmark-io/designer-core

pnpm add @burnmark-io/designer-vue @burnmark-io/designer-core vue

pnpm add @burnmark-io/designer-react @burnmark-io/designer-core react

import { LabelDesigner } from '@burnmark-io/designer-core';

const designer = new LabelDesigner({
  canvas: { widthDots: 696, heightDots: 0, dpi: 300 },
});

designer.add({
  type: 'text',
  x: 10,
  y: 10,
  width: 676,
  height: 40,
  rotation: 0,
  opacity: 1,
  locked: false,
  visible: true,
  color: '#000000',
  content: 'Hello, {{name}}!',
  fontFamily: 'Burnmark Sans',
  fontSize: 24,
  fontWeight: 'bold',
  fontStyle: 'normal',
  textAlign: 'left',
  verticalAlign: 'top',
  letterSpacing: 0,
  lineHeight: 1.2,
  invert: false,
  wrap: true,
  autoHeight: false,
});

const bitmap = await designer.renderToBitmap({ name: 'Piet' });

<script setup lang="ts">
import { useLabelDesigner } from '@burnmark-io/designer-vue';

const { document, bitmap, isRendering, canUndo, add, undo } = useLabelDesigner({
  canvas: { widthDots: 696, heightDots: 0, dpi: 300 },
});
</script>

Document, bitmap, and history state are reactive; a render is kicked off 200ms after the last change. See packages/vue/README.md.

import { useLabelDesigner } from '@burnmark-io/designer-react';

export function Editor() {
  const { document, bitmap, isRendering, canUndo, add, undo } = useLabelDesigner({
    canvas: { widthDots: 696, heightDots: 0, dpi: 300 },
  });
  // …
}

StrictMode- and SSR-safe; same render/selection/history semantics as the Vue composable. See packages/react/README.md.

Built with pnpm workspaces, TypeScript, Vitest, and changesets.

pnpm install
pnpm build
pnpm test
pnpm typecheck
pnpm lint

MIT © Mannes Brak