Sitejet Builder is visual-first but not visual-only. Full HTML5, CSS/SCSS and JavaScript access means designers and developers can deliver bespoke work inside Sitejet that would normally require a custom WordPress theme or a hand-rolled build. This guide covers when to drop to code, how to open the code editor, the tab structure, working with SCSS brand variables and custom JavaScript for UK SME sites.
Why use custom code? · Opening the code editor · Code editor tabs at a glance · Working with CSS and SCSS · The Config tab — brand variables · Custom JavaScript · Custom HTML blocks · When to use code vs the visual editor · FAQ
For 90% of UK SME websites, the visual editor plus presets cover every need. The remaining 10% call for code — custom schema markup, third-party tracking pixels, bespoke animations, unusual layout tweaks, integration with APIs that have no native Sitejet block. Having the option means you are never blocked by tool limits.
For UK agencies delivering client work, code access also unlocks agency-specific design systems (snippet libraries, custom components, white-label styling tweaks).
Two entry points:
Sitejet uses SCSS under the hood. Write standard CSS or SCSS:
.cta-button {
background: var(--primary-colour);
border-radius: 9999px;
transition: transform 0.2s ease;
}
.cta-button:hover {
transform: translateY(-2px);
}
Target elements by their auto-generated ID (shown in Advanced tab) or by custom classes you add.
Brand variables are SCSS variables set in the Config tab and used throughout your site:
$primary-colour: #00695c;
$accent-colour: #ff6b35;
$heading-font: 'Inter', sans-serif;
$body-font: 'Source Sans 3', sans-serif;
$border-radius: 8px;
Change a variable and every element using it updates. This is how you keep visual consistency across 30+ pages.
Use custom JS for:
// Example: simple scroll-based animation
document.querySelectorAll('.reveal').forEach(el => {
new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) entry.target.classList.add('revealed');
});
}).observe(el);
});
Keep JavaScript lean. Every script has a Core Web Vitals cost.
For page-specific custom HTML (e.g. a bespoke booking widget on one page), use the Custom HTML element — drop onto the page, paste code into the element properties. Scoped to that page; no global pollution.
Default to the visual editor. Drop to code only when:
Do not use code to replicate things the editor already does — it creates maintenance debt.
Q: Do I need to know how to code to use Sitejet?
A: No. Code access is optional. The visual editor covers every need for 90% of UK SME sites.
Q: Will custom code break my site?
A: It can. Always test in preview before publishing. Use version control (Sitejet’s revision history) so you can roll back.
Q: Can I add a Google Ads conversion tag?
A: Yes — paste the tag into Custom Code → HTML body. Fire events on form submission or thank-you page load.
Q: Can I use TypeScript?
A: No — plain JavaScript only inside Sitejet. For TypeScript, compile externally and paste the JS output.
Q: What about external libraries like jQuery or GSAP?
A: Load from a CDN in Custom Code → HTML head. Sitejet does not load these by default to keep pages fast.
Q: Does custom code survive a template change?
A: Code in Config and Site-wide Custom Code survives. Code inside individual elements is tied to those elements and may not carry across.