Tutorial Introductionn

Thank you very much for downloading Xpressive. With this software, you can intuitively write code in both CSS3 and HTML5. Take some time to learn how to use the application and then enjoy the "live design" process.

1.Selecting Elements

Choose an Element that is displayed in the Preview.

  1. Click on the Finger Icon Finger Icon that is in the Header or the DOM Inspector (or use the shortcut [⌘D] ),and enter Selection Mode.
  2. Click on an Element in the Preview

Point at me! I`m <p>.

2.Editing Style

1.Modifying Style

  1. Display the Style Inspector by clicking on the Style Inspector Icon in the Header. ※short cut [^⌘I]
    ※[⌥⌘] for hidden temprary.
  1. Select an Element and the Style information will be displayed in the Style Inspector.
  2. Select the Property in the Style Inspector that you would like to edit and then press the [return] in order to enter the Property Edit Mode.
  3. Enter the CSS Property variable into the Text Input.

If you press the Down Arrow while in Property Edit Mode, you will see a Candidate List showing you the various choices available to you. Using the Up/Down Arrow keys, you can change the variables for the options on the Candidate List in real time.

If there is an Edit icon by the Property, the GUI Editor will appear when you double click the Property. The GUI Editor is not available for Properties that do not have an Edit icon.

Color me red!

4.Duplicating a Declaration

  1. Select an Element and display the Style information in the Style Inspector.
  2. Select a Rule, and then choose (Duplicate Selector) from the Rule Menu. The Insert Sheet will be displayed.
  3. Enter the Selector that you would like to duplicated in the Selector Name input box.
  4. Select the File that you would like to modify.
  5. Select the Location for the duplicated Declaration.
  6. Press the OK button to confirm your changes.

Media Query and Keyframe can be duplicated in the same way.

3.Editing the Style Sheet

2.Changing the Name of a Rule

  1. Select an Element and display the Style information in the Style Inspector.
  2. Open the upper pane.
  3. Choose a Selector and press [return]. to enter Edit Mode.
  4. Type the new Rule Name and then press [return] to complete the change.

Media Query names can only be used once. It is not possible to enter a name if that name has already been used for another Media Query.

4.Editing the DOM

2.Deleting an Element

  1. Select an Element and press [delete].

3.Duplicating an Element

  1. Select an Element and press [⌘C] to copy. Select the Element that you would like to copy to and press [⌘V] to paste.

4.Moving Elements

  1. Drag an Element in the Dom Inspector to reorder it. You can select one or multiple Elements to reorder.

Please use the DOM Inspector to move Elements. You cannot move the Elements in the Preview.

5.Modifying Attributes

  1. Select an Element and press [return]. to enter the Edit Mode for that Element. Input the Element and its Variable into the Text Input box. Press [return]. to confirm the change.

6.Save as a Snippet

  1. Select an Element and drag it to the Element List.Or choose "Save This Element as a Snippet" from the Element Menu.

7.Organizing Snippets

  1. Choose a Snippet from the Snippet List and drag it to the Dom Inspector.

8.Ignore Option

It is possible to prevent Elements produced by JS in Runtime.
  1. Right-click on an Element in the Dom Inspector to display the Element Menu.
  2. Select "Do Not Save This Element". The selected element will be removed from the HTML when data is saved.

This setting will be saved until you delete or remove the Project.

5.General Edit

1.Saving Files

  1. All the processes explained above can be saved by just pressing [⌘S] .


  1. All the processes explained above can be undone and redone. Press
    [⌘Z] for Undo and [^⌘Z] for Redo.

If you reload the Preview, the editing history will be lost. If you lose your editing history, you can recover it in the Backup History.

3.Responsive Slider

  1. Select Menu->Preview->Show Responsive Rule to display the Responsive Ruler.
  2. Dragthe Slider to your desired size.

4.Responsive Short Cut

  1. Choose your desired size from the options in the Header.

The short cuts [⌘0] to [⌘4] have been assigned to this process.


  1. Select Menu->Preview->Take A Caputure.
  2. Select the destination you would like to save to in the Dialog and press [OK] .

6.Window Control

Xpressive has short cut commands that allows you to adjust the size and arrangement of Windows.

1.Moving Up and Down in the Dom Inspector

  1. The Previe and the Dom Inspector both have Short Cuts that allow you to control height. [^⌘↑][^⌘↓]

2.How to Switch to Deep Detect Mode/Light Tweak Mode

  1. Deep Detect Mode [^⌘1]
  2. Light Tweak Mode [^⌘2]

3.Opening and Closing the Finder Menu

  1. [^⌘L]

7.Project Setting

1.CSS Setting

  1. Please select the Vender Prefix Property that you want to export.
  2. Please select the css property that you want to treat as a Vender Prefix in your project.

3.JS Setting

It formats your Embeded Javascript in HTML file when you save.
  1. Just check it when you want to format your Javascript data.

We Hope You Will Enjoy Xpressive Life.

About Xpressive

Xpressive is designed for Website Designers and Front End Engineers who use OSX and want to achieve results as quickly as possible. In the ever-changing world of the web, what is the best way to design the User Interface more quickly? Many years of research have been spent and many prototypes have been developed trying to answer this question. Xpressive is a very effective and useful way to design web content, develop user interface, as well as develop customized frameworks.Looking to the future, the milestones we want to achieve include providing a variety of high quality web services, strengthening our relationship with Javascript, and supporting OSX web engineers and designers as they develop even better products.


Mac OSX 10.8 or Later.

Contact/Technical Support

Produced by Modulay

Modulay is a Software Design Company located in Tokyo, Japan that focuses on UI/UX Design. We pride ourselves on creating products that maximize user friendliness.

Back to Top