CSS3 Live Design Tool for Mac OSX


Live Design

With Xpressive, you can rapidly and easily create web content. Xpressive has many intuitive editing features for HTML5 and CSS3. Edit, tweak, and save coding changes directly while you preview your web content. Your ideas will become reality as soon as you think of them.

In the past, it was necessary to repeatedly stop coding in order to preview changes. It was a cycle of endless rebuilding. But now there is a new process – “live” design. Let`s begin the new process of "live" design with Xpressive.

In order to debug HTML and CSS, it was necessary to use the preview in your browser or coding tool. It was necessary to reload pages and rewrite code many times. If your coding skill was not high, this process could be very stressful and take a lot of time.

Xpressive’s visual editing capabilities create an instant feedback loop. This feedback loop connects the user and the code directly. As a result, you can achieve your results much more quickly. Designers and front-end engineers can have less stress.

Style Inspector Saves Your Code

Use your mouse to see style details for any element in the preview just like Web Inspector in Safari and Chrome. Make style changes directly in Style Inspector, and update the style sheet without damaging any code. As well, with the Direct Insert function, you can directly edit, insert and eliminate elements in Style, Media Query, and Keyframe. With Direct Insert, it is not necessary to open the code. Changes will be inserted into the code directly.

Easy Timeline For Keyframes

If you have an animation in your website, you can easily edit it on a simple timeline. You can compare several different Keyframes on the timeline. Of course, after you edit code, Xpressive will output the code according to the on/off vendor prefixes. If you have a complex animation, you can still manage it easily with the Keyframes Timeline and the Style Inspector.

Quick Responsive Monitoring

Xpressive has tools to help you see how your web contents will display on a variety of different devices. There is a responsive slide ruler as a well as a shortcut [⌘0]~[⌘4] to control size. With these tools, you can modify screen size. It is not necessary to resize your browser window. Easily monitor how your grids will display in different displays.

Live DOM Edit

The DOM Inspector shows you how a browser will read your HTML. You can click on the preview, and the DOM Inspector will immediately find the element you need. The DOM Inspector works with even the most complicated code. When you select an element, this tool will not lose it. It doesn’t matter how complicated the code becomes. Use the Drag & Drop to add elements from the Snippet and Element List. This way you can design a truly dynamic DOM Document.

Power of CSS3 & SVG Graphics

Visual feedback saves you time, but it has other beneficial effects. For example, until now, only simpler graphics could be created in this way. Now, much more complicated graphics can be created. Xpressive is a best app to treat the power of css3 and beauty of scalable vector graphics.

CODEPEN@Xpressive_Team for More Examples.

Webkit Playground

Xpressive has a powerful Preview which utilizes the Safari rendering engine and the reliability of Webkit . Rendering in XPressive's Preview will give the same result as rendering in Safari.
The data you treat in Xpressive conform to web standard and it is very clean.

And Many Nice Features To Assist Your Design

Optimize Vendor Prefix

Vendor Prefix and Minify settings can be configured for each project. With simple settings, the program can output the code for optimized product quality levels. Detail

User Snippets Library

All the code used in Xpressive is saved as reusable snippets. Detailed settings are allowed for contents, style, summary, language, etc. No matter how complicated the snippet is, it can easily be accessed and managed. Detail

Launch Other Browsers Directly

You can directly view previews on other browsers installed on the OS like Safari and Chrome. If Windows virtualization software is installed, IE can also be used. Also, if XCode is installed, a full preview is possible in the iOS Simulator. Detail

Jump Bars

While one element is selected on the preview screen, you can change your focus to another element. With the jump bar, you can even directly select structurally complex elements, or elements that are not displayed on the screen. Detail

Backup History

A backup of the source code is made so that a variety of tests can be done. It is possible to immediately restore backups. Highly volatile web data can also easily be restored. Detail

Style Manager

Manage all the style sheet data included in the HTML. The Selector is very simple to use, and reference numbers for the Elements will be displayed. Unused Elements can be bulk deleted or rearranged using the Drag&Drop. Detail

Finder Menu

The Finder Menu has a variety of functions to assist you in easily managing your project. Modifications to code and images made in other applications will be automatically detected and implemented. Detail

Short Cuts

In order to make editing quicker and easier, a large number of shortcuts have been prepared. Mastering these shortcuts will result in even faster coding.

Markup Ignore Option

When websites and applications become more complex, they will automatically generate new HTML tags. There are many things that can cause new HTML tags to be created. The Ignore Option allows you to exclude unwanted run-time data from your HTML code. No matter how complicated your website or application becomes, the original source code will always be preserved.

Screen Capture

Export screen captures at the size shown in the preview quickly.

Attribute Inspector

List the attribute values of selected elements and then add to, modify, or eliminate them.

Code Editor

The Code Editor will allow you to edit programs like Javascript in a traditional non-“live” way. You can also use it as a plain text editor. Detail


Download the whole web page and resources to the local with keeping the thier relative path.

Quick Startup With Excellent Frameworks.

You can download excellent CSS / Javascript / Animation frameworks directly to the project directories of programs like Bootstrap and 960grid and then use them immediately.

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.