Flareum Live Preview

Shows the styles you edit in Flareum on every open page built with them, as you edit.

Flareum Live shows your Flareum edits on your real website while you make them. Change a color, a font or a size in Flareum, and every open page built with that project repaints as you edit, in production, on staging or on localhost. Nothing to export, rebuild or deploy. How it works 1. Open your project in Flareum. 2. Open your site in another tab or window of the same browser. 3. Edit in Flareum. Every page that uses the project's CSS variables repaints as you go, with no need to save first. On each page it paints, a small pill says whether you're seeing your edits or the site's own styles, and how long the last change took to render, send and paint. Switch it off to compare with the site as it ships, or drag it out of the way. Close the Flareum tab or open another project, and every page goes back to its own styles. Only the pages you build with Flareum Flareum Live paints a page only when it already defines one of the project's CSS variables. Every other page stays exactly as it is. It changes nothing in your code or on your server. Your edits sit on top of the page, in your browser, until you close Flareum. Private by design • Your edits pass from the Flareum tab to your other tabs inside Chrome. The extension sends nothing to any server. • The extension needs no account, key or sign-in of its own. • It collects no data and has no analytics. • Before your styles are applied, anything that would load from another site (url() and @import) is removed. What you need • A Flareum project you can edit. • A site that uses the project's variables. In Flareum, open Live editing preview and choose How to connect? to set it up.