PRO Version

SVAR React Kanban comes in two editions. The open-source MIT edition covers most board-building needs. The PRO edition adds three capabilities that matter for larger, production-grade boards: dynamic loading, undo/redo history, and data export.

MIT vs PRO at a glance

The MIT edition ships on the public npm registry and is free for any project. The PRO edition is a commercial package available through a private registry or as a trial.

Capability	MIT	PRO
Columns, cards, drag-and-drop	Yes	Yes
Built-in editor, context menu, toolbar	Yes	Yes
Card customization (sections, custom body, CSS)	Yes	Yes
Filtering and sorting	Yes	Yes
Card limits and column rules	Yes	Yes
Virtualization (cards and columns)	Yes	Yes
Cover images	Yes	Yes
REST data provider (RestDataProvider)	Yes	Yes
Dynamic column loading (dynamicData)	-	Yes
Undo / redo history	-	Yes
Export to PDF, PNG, and xlsx (export-data)	-	Yes

Both editions share the same API surface, component names, and import paths. Code written against the MIT edition works unchanged after you upgrade to PRO.

PRO-only features

Dynamic column loading

Large boards don't need to load all cards up front. Set dynamicData to true and start with an empty cards array. The widget fires request-data as each column becomes visible, and you respond with provide-data to fill it in.

<Kanban
  cards={[]}
  columns={columns}
  dynamicData={true}
  onRequestData={({ id }) => loadColumn(id)}
/>

async function loadColumn(columnId) {
	const cards = await fetch(`/api/cards?column=${columnId}`).then(r =>
		r.json()
	);
	api.exec("provide-data", { id: columnId, cards });
}

Undo and redo

Enable history on the board to let users step backward and forward through card changes. Every mutating action (add-card, update-card, move-card, duplicate-card, delete-card) pushes a snapshot automatically.

const [api, setApi] = useState(null);

<Kanban cards={cards} columns={columns} history={true} init={setApi} />
{api && <Toolbar api={api} undo />}

The Toolbar with undo enabled shows undo/redo buttons that reflect the current history state. You can also trigger them programmatically:

api.exec("undo", {});
api.exec("redo", {});

Export to PDF, PNG, and xlsx

The export-data action assembles the visible board for export to a different media. For PDF and PNG, the widget posts board data to the SVAR export service (PRO version includes access to its sources, so it can be hosted locally), which returns the generated file:

import { version } from "@svar/react-kanban";

const url = "https://svar-export.webix.io/kanban/" + version;

api.exec("export-data", { url, format: "pdf", skin: "print" });

For xlsx, exported data can be routed to a lightweight client side library for server-less excel file generation:

import { writeWorkbook, downloadBlob } from "xlsx-writer-lite";

api.exec("export-data", {
	url: async (cfg, records) => {
		const blob = await writeWorkbook(records, cfg.excel.columns, {
			header: true,
		});
		downloadBlob(blob, "cards.xlsx");
	},
	format: "xlsx",
	excel: {
		columns: [
			{ id: "title", label: "Task", width: 50 },
			{ id: "status", label: "Status" },
		],
	},
});

For a UI-driven export flow, pair the board with ExportPopup from @svar/react-export-popup. The popup allows to configure the desired export format through UI wizard.

Trial version

The free 30-day trial package can be installed from the public registry:

# yarn
yarn add @svar-ui/trial-react-kanban

# npm
npm install @svar-ui/trial-react-kanban

PRO edition

See the license page for pricing and purchase details.

After purchase you'll receive an email with credentials for the private npm registry that hosts the PRO build. Log in to the registry first:

npm config set @svar:registry https://npm.svar.dev
npm login --registry=https://npm.svar.dev --scope=@svar --auth-type=legacy

Then install the package:

# yarn
yarn add @svar/react-kanban

# npm
npm install @svar/react-kanban

Both editions use the same package name and the same imports. The upgrade from MIT to PRO is a registry swap, not a code change.