Live CSS preview Pro

Pro · This feature is part of Snipfire Pro. Plans

The live preview shows a page of your site beside the editor and applies the stylesheet you're writing as you type, without saving. It works for CSS, SCSS and LESS snippets.

Open it #

1. Open a CSS, SCSS or LESS snippet (a new, unsaved one works too).
2. Click Live preview beside the editor.

The preview loads your home page. To preview another page, type its path in the box at the top (for example /shop/) and click ↻. Links you click inside the preview stay in the preview.

Pick Full width, Tablet or Phone to check the layout at other widths. × closes the preview.

As you type #

A moment after you stop typing, Snipfire compiles the code on your server, with the same compiler, partials and settings form values as when you save, and swaps the snippet's stylesheet in the preview for the result. The status line under the bar says Updating…, then Showing your unsaved CSS. Save to put it live.

• Nothing is saved and visitors see nothing until you click Save.
• A compile error shows in the status line with its line number. The preview keeps the last CSS that compiled, so it doesn't jump while you type.
• The page is shown as visitors see it, without the WordPress admin bar. You're still logged in, so pages that differ for logged-in users (a shop's account page, for example) show your version.
• Conditions aren't applied in the preview. The CSS is shown on whichever page you load, even one the snippet's conditions leave out.

Who can use it #

Anyone who can edit CSS snippets: administrators, and with team access, roles with CSS, JS and HTML (no PHP) or Full, including PHP.

For developers #

The preview compiles through POST /snipfire/v1/live-css. The preview frame loads the page with ?snipfire_live=1, which hides the admin bar for people with CSS access. See REST API.