Introduction to Code Editing

In addition to making changes on the page, and using the Inspector, you can also make changes directly to the HTML and CSS code in Flux, and see the changes appear right away.

Editing code

The Code Editor in Flux is toggled using the Code button on the toolbar, or the Code Editor entry in the View menu.

The Code Editor in Flux works very much like the Inspector, choose the element you wish to edit on the page, such as a DIV or a CSS rule, and the relevant code will appear in the editor.

New to Version 4 is FreeCode, this is a very important feature for those wishing to edit code by hand, and is explained in more depth in the FreeCode section of this manual.

When I make changes, the change doesn't come out the way I typed it?

When Flux is not in FreeCode mode, it will interpret your code, formalize it, and correct any mistakes. However, Flux cannot always predict your intend, and undesirable code changes can be made. If this is the case, then convert your page to FreeCode mode, and this problem will no longer occur.

Other Features of the Code Editor

At the top left of the Code Editor area, there is a little drop down menu with a 'gear' symbol. From this menu you can access a number of helpful features.

Editor in separate Window - Users with multiple screens may wish to have the Code Editor in a separate window, so it can be moved to a different screen.
Arrange Vertically - By default, the Code Editor will appear under the page you are editing,with this option enabled, the page and the Code Editor will appear side by side.
Show Invisible Characters - This will display characters that are usually inivisble, such as spaces.
Tidy Code - This will format your code so it is easier to read, note that the results may be different in FreeCode mode.

Snippets

You can also access Snippets from the menu, which is explained in more details in the Snippets section of this manual.