Overview
Code mode is a tab of the PDF Builder in the Form Builder (Beta), which users with the Administrator access level open from Settings. It gives you full control of the template's markup and styles — useful for pixel-accurate, brand-exact layouts that go beyond the drag-and-drop editor. Code mode uses HTML and CSS. The template also uses Vue syntax for data: {{ key }} shows a field's value, v-if shows an element only when a condition is met, and v-for repeats an element for each item in a list.
Using Code mode
In the PDF Builder, switch the top tab bar to Code.
Two code editors open side by side: TEMPLATE on the left holds the template's HTML, and CSS on the right holds the base styles.
Edits apply after a short pause and update the canvas and preview automatically.
Switch to Preview at any time to see the full rendered output with page breaks and headers/footers.
Tips
The CSS editor styles the whole template; per-element overrides from the visual CSS Editor are applied on top.
Page size, orientation, and margins set in Settings apply in Code mode too.
A manual save isn't a restore point: SAVE updates the form's current draft (or starts a new draft if the form doesn't have one), and you can revert the form only to a version that was published. See Using Template Version History.
FAQ
Q: Can I switch between Code mode and the visual editor?
A: Yes — they edit the same template. Changes in one are reflected in the other.
Related Articles