JS-CardEditor is a React component used to create/edit card printing templates. It works with node.js and web browsers (once packaged with webpack).

Run demo from here

Related projects:

• js-cardrendering: the card rendering engine used by this project
• card-printing-worker: a node server providing REST API for bitmap generation/printing
• leosac-credential-provisioning: a complete professional card provisioning solution for both card encoding and printing

You need React >= 18

npm install @leosac/js-cardeditor --save

import { CardDesigner } from "@leosac/js-cardeditor";

/* Import bootstrap css if missing */
import "bootstrap/dist/css/bootstrap.min.css";

const App = () => (
  <CardDesigner enableDownload="true" enablePrint="true" />
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

git clone https://github.com/leosac/js-cardeditor.git
cd "js-cardeditor"
npm install

npm run build

npm start

npm run test

Several parameters can be optionally passed to the component.

- content [`Object`]: Card Template
- draggableFields [`Array`] (`{name : String, default_value: String}`): List of draggable fields
- formatVersion [`String`] (`Default: Undefined`): Force a specific format version for the output (default to latest version)
- enabledCardSizes [`Object` : Select cards templates you want to authorize. (more informations inside "Card Templates" section)
- enableDownload [`Boolean`] (`Default: false`): Enable/Disable Download features
- enableName [`Boolean`] (`Default:true`): Enable/Disable Name input
- maxNameLength [`Number`]: Set name max length
- enablePrint [`Boolean`] (`Default:false`): Enable/Disable Printing features
- enableUnprintable [`Boolean`] (`Default:false`): Active unprintable objects, like fingerprint
- onEdit [`Function`] (`Param 1: Snapshot): Function called at each template changed / field edition (created, removed, resized, moved...)
- onSubmit [`Function`] (): Enable the Submit button and trigger this function on submition

Parameter enabledCardSizes enable/disable templates size. To customize the allowed size list, create an Object like:

enabledCardSizes: {
  cr80: true,
  res_4to3: false,
  res_3to2 : false,
  res_16to9 : true,
  custom: false
}

Current list of supported sizes:

• cr80 : Standard card size
• res_4to3 : 4/3 visual
• res_3to2 : 3/2 visual
• res_8to5 : 8/5 visual
• res_5to3 : 5/3 visual
• res_16to9 : 16/9 visual
• custom : Allow custom size

The function can take a card template in parameter content, useful if you want to edit a card directly after loading.

It is recommended to use JSON format.

XML import and export is supported as well for compatibility reasons (.dpf files).

Jquery is being used for some specific aspects of this component. This is not a best practice as it may conflict with React DOM management. Ideally, it will be further removed on a later version.

This project has been created by Leosac SAS. The source code of this library is released under LGPLv3 license.