Help Center › Pure HTML Editor

Write HTML and CSS directly to build a fully custom digital business card template, with live preview and automatic data binding via placeholders.

---

Key Benefits

• Total design freedom — no grid constraints, no locked sections; every pixel is under your control
• VS Code-grade editing — the editor is powered by Monaco (the same engine as Visual Studio Code), so you get syntax highlighting, code folding, and bracket matching
• Live data preview — switch between real profiles while editing so you always see accurate content, not placeholder text
• Reusable at any scope — a template you build can be assigned to a single profile, an entire team, or the whole company
• Portable, semantic output — the rendered page is plain HTML, so it works on any device and can be saved as a vCard or shared via NFC/QR link without any special dependencies

---

When to Use Pure HTML vs the Visual Builder

| Situation | Recommended tool |

|---|---|

| You are comfortable with HTML and CSS | Pure HTML Editor |

| You need a layout the Visual Builder cannot produce (e.g. a two-column card, custom typography, a background image with overlaid text) | Pure HTML Editor |

| You want to reuse an existing HTML/CSS design or brand template | Pure HTML Editor |

| You prefer a drag-and-drop, no-code approach | Visual Builder |

| You want quick styling changes to a standard layout | Visual Builder or Custom CSS |

| You are not confident with HTML | Visual Builder |

Both editors produce templates that can be assigned at the same scopes (profile, team, company) and both support the same placeholder system.

---

How to Access

---

Interface Overview

Monaco Code Editor

The main editing pane. Type your HTML (and a block for CSS) here. The editor provides:

• Syntax highlighting for HTML, CSS, and inline styles
• Code folding on
  blocks and sections
• Bracket and tag matching
• Undo/redo history for the session

There is no separate CSS tab — write your styles in a block inside the HTML, or use inline style="" attributes.

Placeholder Panel

A categorised, scrollable list of every available placeholder. Clicking any placeholder inserts it at the current cursor position in the editor. Placeholders are grouped into four categories:

• Profile — individual user data (name, job title, contact details, profile photo, etc.)
• Team / Department — team-level data (team email, logo, links)
• Company — company-wide data (company name, logo, links)
• Combined / Actions — merged link lists and utility values like {{vcard_url}}

See [Placeholder Reference](./04-pure-html-placeholders.md) for the full list and what each one outputs.

Live Preview

The preview panel re-renders your template every time you pause typing. Two controls sit above the preview:

• Profile selector — choose any profile you have access to; the preview replaces placeholders with that profile's real data so you can check how it looks with actual content
• Viewport toggle — switch between a mobile-width and desktop-width view to test responsiveness

If the preview shows a blank area where you expect content, the most common causes are: the selected profile has no data for that placeholder, or there is a syntax error in your HTML.

---

Step-by-Step: Creating a Template from Scratch

1. Open a new template

Follow the access steps above and choose Pure HTML when prompted for the template type.

2. Start with a minimal HTML skeleton

`html

body { margin: 0; font-family: sans-serif; }

.card { max-width: 480px; margin: 0 auto; padding: 24px; }



{{full_name}}

{{job_title}} — {{company}}

{{work_email}}

{{social_links_html}}

Save contact

`

This gives you a working card immediately. Build out from here.

3. Insert placeholders

Either type them manually (they are case-sensitive and must use double curly braces), or click a placeholder in the Placeholder Panel to insert it at the cursor. A typo in a placeholder name means it will render literally — {{frist_name}} will appear as the text {{frist_name}} on the live card.

4. Style with CSS

Write your styles in a block at the top of the document. There is no separate CSS pane.

`html

.card-header {

background: #1a1a2e;

color: #fff;

padding: 32px 24px;

text-align: center;

}

.card-header img {

width: 96px;

height: 96px;

border-radius: 50%;

border: 3px solid #fff;

object-fit: cover;

}

.card-body { padding: 24px; }

h1 { margin: 12px 0 4px; font-size: 1.4rem; }

.role { color: #666; font-size: 0.95rem; margin: 0 0 16px; }

`

5. Check the preview with real data

Select a profile from the profile selector. If a field is empty (for example, the profile has no hero image), the placeholder renders as an empty string — an tag with an empty src will show a broken image icon. See the FAQ below for how to handle this.

6. Save and assign

Click Save, give the template a name, and choose whether to assign it at:

• Profile scope — only this profile uses the template
• Team scope — all profiles in the team inherit it (unless a profile has its own override)
• Company scope — all profiles in the company inherit it (lowest priority in the inheritance chain)

---

Using Placeholders

Placeholders follow the format {{placeholder_name}}. They are replaced with the profile's data at render time. A few key examples:

`html

{{full_name}}

{{job_title}}

{{mobile}}

{{work_email}}



{{social_links_html}}

Download vCard

`

For the complete reference — including team and company placeholders, and notes on what each one outputs — see [Placeholder Reference](./04-pure-html-placeholders.md).

Important: Conditional blocks such as {{#if work_email}}...{{/if}} are not supported. If a field is empty the placeholder renders as an empty string. Use CSS techniques (see FAQ) to handle optional content gracefully.

---

HTML Tips

• Use standard HTML5 elements:
  ,
  ,
  ,
  , , ,
  ,
• FontAwesome icons are available — you can use classes such as if your template includes FontAwesome, or use Unicode/SVG icons directly
• Keep your structure semantic: one
  per card (usually the person's name), then
  /
  for secondary information
• Avoid deeply nested
  structures — they are harder to debug and slower to render on low-end phones
• All links to external resources (fonts, icon libraries) must use https:// — mixed content will be blocked
• The rendered page is served inside an iframe on the public profile page; keep your CSS scoped so it does not accidentally affect the parent page

---

CSS Tips

• Write all styles in a single block at the top of your template
• Mobile-first — the majority of NFC card taps happen on phones; design for a narrow viewport first, then use @media (min-width: 600px) for wider screens
• Avoid fixed pixel widths for the top-level container; use max-width with width: 100% so the card scales correctly:

`css

.card { max-width: 480px; width: 100%; margin: 0 auto; }

`

• Use box-sizing: border-box to avoid padding pushing elements outside their containers:

`css

, ::before, *::after { box-sizing: border-box; }

`

• Test dark mode — some phone browsers apply dark mode to iframes; use color-scheme: light in your block if you want to lock your design to light mode:

`css

:root { color-scheme: light; }

`

• Use object-fit: cover on profile images to prevent distortion when the image aspect ratio does not match your container

---

Save and Assign

• Click the Save button in the top-right of the template editor
• Enter a descriptive name (e.g. "Dark card — developer team")
• Choose the assignment scope:
• This profile only — profile-level override; other profiles are unaffected
• This team / department — all profiles in the team inherit the template unless they have a profile-level override
• This company — the company-wide default; the lowest priority in the inheritance chain
• Click Confirm — the template is saved and immediately active for any scope you assigned it to

To edit later, open Templates, find your template in the list, and click Edit.

---

Tips and FAQ

Can I use JavaScript in a template?

You can write blocks, but behaviour depends on how the profile is rendered. Scripts may be stripped or sandboxed in some contexts (for example when the profile is embedded or shared as a static snapshot). Stick to HTML and CSS for reliable cross-context behaviour.

What if I break the HTML and nothing renders?

The live preview will show an empty or broken layout. Open your browser's developer tools on the preview frame to see any console errors. The most common issues are: unclosed tags, missing " on attribute values, and misspelled placeholder names. Your last saved version is always available — refresh the editor to revert to it.

How do I use team or company data?

Team and company placeholders (e.g. {{department}}, {{team_logo_url}}, {{company}}) are always available regardless of which profile is being viewed. They pull from whichever team or company the profile belongs to. See [Data Sources and Binding](./pure-html-editor/data-sources.md) for a full explanation.

How do I hide a section when a field is empty?

Conditional blocks are not supported. The cleanest workaround is to use CSS: wrap the optional content in a

and add a CSS rule that hides empty elements:
`css
/ Hides any tag with no href value or an empty href /
a[href=""], a:not([href]) { display: none; }
/ Hides tags with empty src /
img[src=""] { display: none; }
`
This will not work for all cases (for example a
tag containing empty text is still visible). For critical optional sections, accept that they may appear blank, or ask your team to ensure data is populated before the card is shared.
Can I import external fonts?
Yes. Add a to a Google Fonts stylesheet (or any https:// font CDN) at the top of your template:
`html
`
Then reference the font in your CSS as normal. Be mindful that external font requests add a small load time on first view.
Can I use the same template for multiple teams?
A template is created once and can be assigned to a team or company. If you assign it at company scope, every team in the company inherits it. You cannot assign one template to two different companies simultaneously — duplicate the template and assign each copy separately.
The profile image is showing as broken — why?
The profile you are previewing likely has no profile photo uploaded. Either upload a photo in the profile settings, or add a CSS fallback:
`css
img[src=""] { display: none; }
`
---
Related
• [Placeholder Reference](./04-pure-html-placeholders.md)
• [Data Sources and Binding](./pure-html-editor/data-sources.md)
• [Template Visual Builder](./template-visual-builder.md)
• [Custom CSS Editing](./custom-css.md)