Here are a couple of tips when building in Firecode

Browser tab setup

Open Firecode and create a new block. Then jump back to the edit mode tab and add that block to a page. Then open the page in Preview mode.

Now you have three tabs open:

  • Firecode
  • Preview mode
  • Edit mode

This is great. When changing something in Firecode you'll see the change instantly in Preview mode


When your website is in development and you click View Website all HTML/CSS code is published and changes are reflected outside of edit/preview mode.

Behind the scenes we have two different files:

Edit/Preview mode

  • style-development.css
  • development.html

Live mode

  • style-production.css
  • production.html

Having different files makes it calmer to work. Nothing is visible for visitors outside of edit mode. Then you click Publish/View website to make the changes live.

Tips: If you make a small CSS change and want to publish it live instantly. Open style.scss in Firecode and click the Publish button in the bottom right corner.