CardPen is a web-only playing card generator intended to generate PNG images at any DPI, or printable HTML pages of playing cards from a spreadsheet of card descriptions, CSS, and a simple Mustache or Handlebars template. CardPen also includes support for Google or other web fonts, adjustable card bleed, various page sizes, and any card size.
- Open CardPen. (Download this repository or use the online version.) It will open the basic example (Pico).
- You can edit the basic example or (under Project) clear it with the New button, or load a different example.
- When editing, you can write your CSV, CSS, and template from scratch, or, alternately, upload your own CSV, CSS, and/or mustache template file. (You only need to upload once. The css is always optional.)
- The csv file should have a header row plus a row for each card. The header names for the columns are available in the template.
- Click the HTML button to see the HTML output of your CSV/CSS/template combination.
- Click the Print button to print the HTML, being sure to turn off any scaling, headers, and footers.
- Click the Images button to generate the PNG images. A Zip Images button appears above the images in the output frame; when all images have appeared, click it to download a zip file of the images. You can also right-click and save or open the images individually if you prefer.
For more information, see the documentation.
Although it is possible to open CardPen in your browser as an html file (index.html), it really should be served by a webserver, due to various browser security issues. There is a public server at cardpen.mcdemarco.net).
To make it easier to work with your own image files, you can run CardPen on your own computer (instead of using the public install). Check out CardPen locally, and, if you have your own webserver, just stick CardPen under it somewhere; it doesn't need to be at the root. If you don't already have a webserver, you can use a node webserver included with the package. To set it up, install npm (the Node.js package manager), then, at the command line in the CardPen directory, run the following two commands:
npm installnpm start
The second command will return the new URL for your local CardPen (most likely http://localhost:8080).
Place any images you need for your cards in the images/ directory.
Everything works in Chrome. The image exporter doesn't work in Safari or iOS, but basic HTML generation should still work. YMMV with other browsers.
CardPen doesn't have much of a build process; it uses simple npm scripts instead of a build tool.
The build command, npm run build, just converts the docs from markdown to html:
npm installnpm run build
CardPen is by mcdemarco.
CardPen was inspired by vaemendis' hccd, a Java-based HTML/CSV/CSS card design program, and CodePen, an online HTML/CSS/JavaScript development environment.
CardPen uses Handlebars and/or Mustache for templating, Papa Parse for csv parsing, dom-to-image (with pr#103 for dpi settings, the fix for issue #95, and a workaround for issue #50) for image generation, FileSaver for saving, CodeMirror for editing, and bind (commit 0cdcdb36f3 with pr#16) and underscore under the hood.
The basic example makes very simple cards for the game Pico. The examples directory contains a copy of the Pico example, an oval version of the Pico example, three more complicated examples for a retheme of the game Sleuth, and copies of the BGG examples (for IDKWDYWTP). There are also a couple of examples for hccd that should work with CardPen.
CardPen uses the BoardGameGeek API to fetch your game collection for generating IDKWDYWTP-style decks. Due to an issue with the API, CardPen needs a proxy for CORS like crossorigin.me in order to fetch your collection; the BGG example is already set up to use such a proxy.
The UI backgrounds are Low Contrast Linen by Jordan Pittman and Fabric (Plaid) by James Basoo from Subtle Patterns. The help page CSS was inspired by Firefox's Reader View and Edward Morbius' website. Some images in the examples are from Game-icons.net; the pyramid images in the Xendo example are from Lou Lessing's Pyramid Arcade Font. The card icon is from the EmojiOne Project, version 2 (CC BY 4.0).
