What I like

The amount of styling options is fantastic. Changing the style happens instantly and there are well thought out dropdowns, button groups, and input fields for different properties. The output CSS is shown, but cannot be edited.

Moving around and adding templates is an easy drag-and-drop action with some pre-populated text and images for inspiration. You can choose from all of the components that are used to create the two sample sites.

Each individual node of the component can be edited and styled to give you very granular control of how each part of the site will look.

You are able to save, preview, and download your site as well. When downloaded, the resulting file includes individual .jsx files for each component as well as a corresponding .less file.

Everything that is downloaded.

For the astute readers, you have noticed the data.source.js file which is where the components get their data to display. For example, here is the footer data.

export const Footer00DataSource = {

wrapper: { className: 'home-page-wrapper footer0-wrapper' },

OverPack: { className: 'home-page footer0', playScale: 0.05 },

copyright: {

className: 'copyright',

children: (

<span>©2018 <a href="https://motion.ant.design">Ant Motion</a> All Rights Reserved</span>),

},

};

In the Footer0.jsx file, here is what the React component renders.

<div {...props} {...dataSource.wrapper}>

<OverPack {...dataSource.OverPack}>

<TweenOne

animation={{ y: '+=30', opacity: 0, type: 'from' }}

key="footer"

{...dataSource.copyright}

>

{dataSource.copyright.children}

</TweenOne>

</OverPack>

</div>

As you can see, the component has no static data inside it, but instead uses everything in the dataSource object to set the className and content. Overall I do not know if this is better or worse, but is interesting nonetheless.

What I do not like

The style customization is nice, but this isn’t an editor for someone who isn’t already pretty familiar with CSS. Some of the options do not make sense to be put onto text, and other options do not make sense to put onto images. Settings like border will not appear to be working until you specify the width, color, and style which is confusing at first.

The amount of components you are able to add is only 24. There are three navs, four banners, fourteen different content containers and three footers. So not much customization there.

The editor does not allow any movement or addition of individual components on the pre-made templates. This leads to websites that are incredibly hard to differentiate from any other created by this editor. Also, when styling these components you can change the padding and margins around which seems to be at odds with the design principles in the first place.

What bugs me

When I was trying to create a landing page for our site to test out this editor, I spent a good amount of time adding, removing, and rearranging elements to get it just the way I wanted. I did not change any styling because I only wanted the complete layout to start with. There were some minor inconveniences along the way, but there was a huge problem.

After downloading and integrating the code within our existing development site, the output was of a version I previously had been working on. It seemed to not save anything I had done. Now this is clearly my fault — I should have done a better check of the files before blindly copy/pasting. This only wasted about an hour of my time, but I can’t recommend this for any serious work. I even tried downloading it again, but the same problem appeared.

This is still a work in progress

The direction this project is headed looks awesome! I know that eventually this editor will be great, but right now it will just be a very fun tech showcase!