Starting App

Editing HTML & CSS

Editing Media Screen & Animation.

Set Up Project Configuration

1.Save Current DOM Tree

ON: Xpressive generates html code when you save.
OFF:Xpressive never generates html code when you save.

2.Minify

ON:The whole html code will be minified when you save.
OFF:The whole html code will be indented.

3.Replace DOM Element

When you save your code, you can rewrite attributes of DOM Element and its child into other code by writing some code in the text-box of Replace DOM Element. Why and When do we need this feature? Because of the mechanism of Xpressive, it generates and saves the reliable code from live DOM Tree shown via Webkit. It`s why sometimes the code you get is not the code you want it as initialized code.

For exsample, 

1.Code in my html file need to be like this.<div style="display:none">my view</div>
2.The attribute is changed by my javascript when I run it.<div style="display:block">my view</div>
3.So I reset the style attribute as I want it in html file.<div style="display:none">my view</div>

So using this feature means resetting and cleaning up your html code when you save. 

How To Set Up

Replacing Attribute

Before

<div style="display:block">my view</div>

After

<div style="display:none">my view</div>

By This Setting

div{
style:'display:none' }

Replace Class [Remove Unnecessary Selector]

Before

<div class="myClass myClass2">my view</div>

After

<div class="myClass">my view</div>

By This Setting

div{
class:'myClass' }

Replace Class [Remove Class Attribute Itself]

Before

<div class="myClass invisible">my view</div>

After

<div>my view</div>

By This Setting

div{
class:'null' }

Element Never Be Saved (Ignoring Element)

Before

<script src="a.js" async ></script>

Afterempty


By This Setting

script[async]{ ignore:true }

Replacing Child Content

Before

<div style="display:blockempty"></div>

After

<div style="display:none"><a>button</a></div>

By This Setting

div{ contentName:'myDefaultCode'}

With Using A Snip In User Snipet


1.Save Current Style

ON: Xpressive generates style code when you save.
OFF:Xpressive never generates style code when you save.

2.Minify

ON:The whole style code will be minified when you save.
OF:THe whole style code will be indented.

3.Use Vendor Prefix

You can add each vendor prefix for whole css property by cheking each check box.

Format Embeded Javascript

ON: Xpressive will format the indent of embed javascript code when you save.
OFF: Xpressive will never format the indent of embed javascript code when you save.

Port Number Setting

You can change the port number of Xpressive internal preview server for just in case.