How to use the Business Card Designer

Create a print-ready business card by placing text blocks on a real-size (mm) canvas, then export as a high-DPI PNG.

Runs locally in your browser

Quick workflow Canvas & view Text blocks Selection & alignment Exporting Keyboard shortcuts Tips Troubleshooting

Design model: text boxes automatically size to fit the text, with a consistent inner margin so the text doesn’t sit hard against the edges.

Use line breaks (press Enter in the editor) to create multiple lines—this designer does not auto-wrap long single lines.

Quick workflow

≈ 60 seconds

Choose a preset (US or EU) in the right panel.
Set background colour (optional).
Add text using Add text (top toolbar or right panel).
Edit text by selecting a block and clicking Edit text (or press Enter/F2).
Style the text (font, size in mm, colour, bold/italic, alignment, line height, letter spacing).
Position blocks by dragging (Shift+click for multi-select and drag a group).
Export PNG at 300 or 600 DPI.

Best practice

Keep important content inside the Safe area (3mm margin).
Use 300 DPI for most print services; use 600 DPI for very fine text.
Insert manual line breaks for clean layout control.

What you get

Accurate physical sizing (mm-based layout).
High-DPI export suitable for print workflows.
Undo/redo history for safe experimentation.

At a glance

Controls

Area	What it does
Top toolbar	Undo/redo, zoom, add/edit text, and an Instructions link.
Canvas	Select, multi-select, drag to move.
Right panel	Preset, background, guides, grid, snapping, styling.
Footer	DPI selector + Export PNG.
Nudge selection by grid	`←` `→` `↑` `↓`	Moves the selected element(s) by one grid square (uses the current Grid spacing value).

Square-corner preview: the on-screen card preview uses square corners to represent the actual print rectangle more literally.

Canvas & view

Layout & guides

Preset sizes

US: 3.5 × 2 inches (88.9 × 50.8 mm)
EU: 85 × 55 mm

Guides

Show safe (3mm): displays the recommended safe margin.
Show grid: overlays an adjustable grid.
Grid spacing (mm): controls the grid step size.

Zoom controls

− / +: zoom out/in
100%: reset zoom

Snap to grid

If enabled, moved selections will snap to the nearest grid intersection on release.
Group snapping preserves spacing within the group by snapping the group’s top-left bounds.

Text blocks

Content & typography

Add text

Click Add text (top toolbar or right panel).
A new text block is created, selected, and immediately enters edit mode.

Edit text

Select a text block and click Edit text.
Or press Enter / F2 when a single block is selected.
Exit editing by clicking outside (blur) or pressing Ctrl/Cmd + Enter.
Cancel edits with Escape.

Text styling (right panel)

Font
Size (mm) — physical units for predictable printing
B / I — bold/italic toggles
Text colour
Text align — left/center/right alignment
Line height — spacing between lines
Letter spacing (mm)

Wrapping: this designer does not auto-wrap long single lines. Insert line breaks in the editor to control wrapping precisely.

Selection, alignment & arranging

Move & align

Selecting

Click/tap a text block to select it.
Shift+click to add/remove blocks from the selection (multi-select).
Click the card background to clear selection.
Use Select all in the right panel to select every block.

Moving

Drag a selected block to move it.
When multiple blocks are selected, dragging moves the group together.
Arrow keys nudge the selection by one grid square.
Movement is constrained to stay within the card bounds.

Align actions

Left / Center / Right aligns selected blocks to the primary selection (first selected).
Center in card centers the selected block(s) as a group within the card.
Delete removes the selected block(s).

Exporting (PNG)

Print-ready output

DPI choices

300 DPI — standard for print, smaller file size.
600 DPI — sharper fine text, larger file size.

How export works

The app renders your design to an SVG at the chosen pixel dimensions.
The SVG is rasterized to a canvas and saved as PNG.
Text boxes are re-measured at export scale for accurate sizing.

Export steps

Choose 300 DPI or 600 DPI.
Click Export PNG.
Your browser downloads a file named like:
business_card_us_300dpi_1690000000000.png

Tip: If your print vendor needs bleed/cut marks, export here and add bleed/crops in a layout tool (e.g., Illustrator/InDesign) or request a PDF-export enhancement.

Keyboard shortcuts

Faster editing

Action	Shortcut	Notes
Undo	`Ctrl`/`Cmd` + `Z`	Disabled while editing text.
Redo	`Ctrl`/`Cmd` + `Shift` + `Z` or `Ctrl`/`Cmd` + `Y`	Disabled while editing text.
Edit selected text	`Enter` or `F2`	Requires exactly one block selected.
Commit edit	`Ctrl`/`Cmd` + `Enter`	Also commits on blur (clicking away).
Cancel edit	`Escape`	Exits editor without committing the last edit session.
Delete selection	`Delete` or `Backspace`	Ignored when typing in an input/editor field.
Multi-select	`Shift` + click	Toggles items into/out of selection.

Practical tips

Better results

Use the safe margin: keep names, phone numbers, and URLs inside the dashed safe area.
Pick legible sizes: for body text, 2.8–3.5 mm often prints well; names/titles can be larger.
Mind letter spacing: small positive spacing can improve readability for all-caps.
Align with intent: use left alignment for information-heavy layouts; centered for minimal designs.

Group moves: multi-select and drag to reposition a block group while maintaining spacing.
Grid spacing: 5 mm is a good default; try 2 mm for finer alignment.
Export check: after exporting, zoom into the PNG at 100% to verify spacing and line breaks.
Backgrounds: for dark backgrounds, increase font weight or size slightly for print clarity.

Troubleshooting

Common issues

Export doesn’t download

Ensure your browser allows downloads from local files.
Try another browser (Chrome/Edge are typically most permissive).
Disable overly aggressive privacy/download extensions for this page.

Text goes off the card

Insert a line break to shorten a long single line.
Reduce font size (mm) or letter spacing.
Move content inward using the safe guide.

Undo/redo not working

Undo/redo is disabled while the text editor is active. Click outside the editor first.

Selection feels “hard to click”

Each text block has a padded hit area—try clicking near the text.
Zoom in for finer selection.

This instructions page is static. Behaviour is defined by the designer’s current index.html.