top | item 6753219

Frontend: The web visual editor

70 points| marizmelo | 12 years ago |kickstarter.com | reply

Kickstart campaign for the most advanced open-source web editor for your browser.

67 comments

order
[+] sorich87|12 years ago|reply
A shameless plug for my own similar open source project with an already functional version http://www.brickseditor.com/. It uses Bootstrap for the layout but there are plans to support other frameworks. It's built on AngularJS. I'm currently working on it full time. Maybe there could be some way we could collaborate if this Kickstarter isn't successful?
[+] pan69|12 years ago|reply
The Database section needs a bit of work. When I click on Database I'm stuck. I HAVE to create a table which I then cannot rename. When I delete the table I'm in the same situation, lock down.

Other than that, very nice.

[+] tmikaeld|12 years ago|reply
Very nice! Yours is much more than just a front-end editor, yours create complete apps.

EDIT: And yours is not MIT licensed and has separate commercial licenses.

[+] marizmelo|12 years ago|reply
Sorry sorich87, I've never heard about your project. I did not create Frontend using Bootstrap (you can plug yourself anyways). The project is built using AngularJS + NodeJS + Vagrant + MongoDB (with support for other databases).
[+] mmsimanga|12 years ago|reply
I looked through the site and peeked at the sample application. I am just posting to say, I like the concept of your application. Good luck!
[+] BenjaminN|12 years ago|reply
Why would you do a 10 minutes introduction video ! I can't watch anything longer than 2 minutes.
[+] ishener|12 years ago|reply
looks very nice. I especially like that it's fast
[+] alco|12 years ago|reply
It pains me to see how he repeats the same action for each subtitle-block element, doing the same thing 3 times total. Imagine you had a scrollable area with 20 blocks.

If it's a mockup editor, then it should be easy to customize from JS to make anything useful from the mockup.

If it's a site builder, better add support for templates, so that one would then be able to drag and drop data (e.g. json) onto the canvas and bind it to a template to automatically populate a whole set of elements at once.

P.S. No matter how slick your UI is, if it's not programmable, it's not useful.

[+] marizmelo|12 years ago|reply
The system has a code editor for your convenience @alco. I will try to make that more clear.

Also, you will be able to select multiple elements and parent elements and apply the same actions.

[+] bbx|12 years ago|reply
Although Frontend is impressive, the target market is a bit blurry. As a front-end developer, I don't see myself using such a tool. And non tech-savvy people would probably feel a bit overwhelmed and would still have issues designing a decent layout considering it's not their job.

For some time, I've had in mind a service where people could easily build their websites. A bit like Squarespace (which is amazing) but with a different interface. For many clients who only need a homepage, a contact page, an about page, and some content pages, I usually end up building a custom WordPress theme because its admin interface is efficient and user-friendly, and because I have much experience in it. But still, I don't consider it the best tool for the job.

I'm not a great programmer, but I have UI, UX, and front-end skills. I'll probably try to develop a workable draft of this app I have in mind, but if anyone is interested in building an easy-to-use platform for non tech-savvy people, feel free to contact me. I have some ideas about how the workflow should be and what features it should have.

[+] marizmelo|12 years ago|reply
Hi bbx, Sorry if I could not make clear the market for the product.

Frontend is suppose to be an open-source general purpose web editor.

Beginners can use the visual mode, expert can access the source code to make things better. An ORM database plugin is on its way, along with other many cool features.

I am waiting to see how the project goes before I release the stretch goals on Kickstarter.

We hope you join us too.

[+] madoublet|12 years ago|reply
I am working toward a similar goal with my open source project (respondcms.com): allow the developer/designer to focus on design while allowing the end-user to focus on creating content.
[+] Xdes|12 years ago|reply
>easy-to-use platform for non tech-savvy people

Hasn't this been beaten to death by now? There are a handful of decent "free" website editors out there already. They tend to produce generic and unprofessional websites because the target market isn't going to pay to have a decent theme.

[+] dools|12 years ago|reply
Hey I emailed you. Not sure if I "decoded" your address correctly from your profile. If not my email is in mine so say g'day :)
[+] eonil|12 years ago|reply
Looks cool. But nothing related to Photoshop. They can say this something like iWeb or DreamWeaver, but not Photoshop at all.
[+] jwarren|12 years ago|reply
Bro, do you even Bootstrap? Edit: Sorry, it's not Bootstrap, it's their own framework. Though visually it's very similar.

But seriously, I'm not sure who this is for. It looks like there's quite a technical hurdle to setting it up - node.js and vagrant aren't easy to install for a novice user, and they aren't suitable for any shared hosting environment that I've come across.

I imagine (possibly incorrectly) that the market for simple point and click interfaces wouldn't necessarily overlap with that of people who are comfortable setting up complex hosting environments.

Now, as an online subscription model, I think it could be quite competitive. That's an entirely different route which definitely has a market.

[+] marizmelo|12 years ago|reply
Hey jwarren. Thanks for the comment.

Online system is definitely an option down the road.

About the setup. Basically the only thing you need to install is vagrant. The Frontend VM has all the files and tools required to run the application on your machine.

1. Install Vagrant (with our installer);

2. Run VM

3. You are ready to go.

[+] kayoone|12 years ago|reply
The open source part of it is cool, but i still have a couple of issues with it:

+ why do you need 75K as a minimum ? Sounds a bit high, even for 2 people

+ They say its built with node, but what about the frontend of frontend ? Only jquery ?

+ does it support bootstrap or other layouting frameworks?

+ when will they let people contribute to it ?

Id really like something like this being open source, but in that case i feel it would need some more flexibility to be integrated into CMSes and Frameworks. Abstracted reusable components to plug it into existing systems, some kind of Content Repository integration for versioning etc. If thats the plan, ill fund in a heartbeat. If its meant just as a downloadable tool to built basic websites it wouldnt have much appeal to me though.

[+] marizmelo|12 years ago|reply
Hey kayoone. Let's see:

1. The goal was set after carefully look other software project costs on Kickstarter. Also, 75k is the average income for a software engineer here in Silicon Valley (the living cost here is crazy);

2. The front-end of Frontend is built using AngularJS, our own JS Library, JQuery, JQuery-UI (just for the visual editor, not included on production projects), and QUnit/Jasmine.

3. It uses xtyle framework (also open-source) by default, but you can choose to use Bootstrap;

4. We will first open the Github repository for early backers. After the project is done the repository will be open for everybody else.

Integration with frameworks and CMS systems are on its way. We are planning to release a list of stretch goals for the project.

[+] camus2|12 years ago|reply
> Abstracted reusable components to plug it into existing systems,

The problem is stuffs like that are supposed to run in the browser, the more bloated your code base is the worst performances you'll get.

Doesnt mean everything should be tightly coupled, my point is no matter what people say web apps are not desktop apps, web apps are slow,sometimes you need to trade decoupling for performances.

I think the last time a product like that got kickstarted it "won" more that 100K , so of course people are going to seek a similar amount of money for these kind of projects, though i dont believe these tools are that usefull in reality.

[+] ilaksh|12 years ago|reply
It is a CMS in itself. How is 75k high for two people? Are they supposed to commit to living below the poverty line?
[+] glazskunrukitis|12 years ago|reply
Have you seen Webflow[0] and Froont[1]?

[0] https://webflow.com/

[1] http://froont.com/

[+] marizmelo|12 years ago|reply
Yes, they are great. I have met with the Webflow team (great guys).

The differences:

1. Frontend is open-source;

2. Database integration;

3. Plugins (components) create by users;

Other differences will appear on the stretch goals.

[+] tmikaeld|12 years ago|reply
Yes, but they are not open source.

Have you seen divshot, jetstrap or easel?

You probably have, are they open source? NO!

[+] ilaksh|12 years ago|reply
Do the components include back-end Node.is code also? If so I really hope your project becomes popular and is open source. Because I think that developers should code components not UIs or reinventing Crud or email sign up forms. So this is the right direction for developers not just designers or novices. The popular approach with a lot of manual code for basic things like layout and other things is very dumb. Components are the way to go.
[+] marizmelo|12 years ago|reply
Components should be easy to plugin on the system using any available APIs out there. Facebook Login, Twitter Feeds, Database integration, etc. Our goal is not to build a simple visual editor. We want to create an ecosystems for developers, designers, and regular users. This is just a "kickstart".
[+] mooted1|12 years ago|reply
Webflow, an existing product, is much more powerful and pretty affordable. Macaw, if it's as awesome as it looks in the demo, may be better than Webflow.

This, this is thoroughly underwhelming. Sorry.

If open source is your biggest differentiator, I think you should emphasize this. Being able to use this as a part of other environments would make it much more compelling. Maybe change up the kickstarter page?

[+] marizmelo|12 years ago|reply
Webflow is great and Macaw seems amazing, but let me try to make the difference clear here:

Frontend vs Webflow:

1. Frontend is open-source (as you mention);

2. Frontend has a databased integration (ORM);

3. Frontend let users create their own components and templates and plugin on the system;

4. You can develop locally (for speed) and push projects to the web whenever you are done;

6. You can host frontend on your own server online and deploy projects from there;

Frontend vs Macaw:

1. Frontend runs on the browser, there is not "preview" process;

2. Frontend is open-source;

3. Frontend let users plug their own components and templates;

4. You can develop locally and push projects whenever you are done;

5. You can host frontend on your own server online and deploy projects from there;

6. Frontend is responsive (mobile ready), with Macaw you need to check if your project will work on mobile first (and on tablet);

More differences will appear on the stretch goals.

Thank you for the comment.

[+] kanakiyajay|12 years ago|reply
1.How is it different from macaw or Adobe Muse ? 2.I did not understand why are you using a custom web framework xtyle , instead why not go for Bootstrap ?. Its already used by millions and you also save a lot of time. 3.Components feature sounds exciting , but how much similar is it to angular directives. 4.What is target market ? front-end developers or non-tech people?
[+] marizmelo|12 years ago|reply
Macaw and Muse are commercial tools. Frontend was created as an open-source alternative.

We use xtyle by default, but you can for sure use Bootstrap (its your choice).

Components are anything you can plugin on the system (including directives if you are an Angular developer). The target market are front-end developer, designers, and non-tech.

[+] dsego|12 years ago|reply
What is so f'ing special about bootstrap?
[+] meerita|12 years ago|reply
This is Microsoft Frontpage all over again.

I'm sure they will have market: people who don't have the money to contract serious developers, and some novel developers who may like this idea, but in the end, I think it's a product with few possibilities.

[+] elsurudo|12 years ago|reply
Looks to me like it works pretty much just like Squarespace (except self-hosted and open). The way Squarespace makes it easy for non-web-designer folk to put together nice-looking websites is excellent, so it's a good model to work from.
[+] izolate|12 years ago|reply
It irks me that this is called Frontend. It's not, it's design. Call it Design. Or Frontpage 2013. Whatever. Frontend is a development skill, which requires intricate knowledge of markup and javascript languages/frameworks.
[+] skrebbel|12 years ago|reply
Oh come on. "Frontend" isn't a skill. It's a piece of software that makes interfacing with another piece of software easier.

There have been frontends long before there was HTML.

[+] incimou|12 years ago|reply
What about https://rukzuk.com/en/ ? Not open source but the only tool I found which has integrated CMS. Website says it's even extendable with custom code.
[+] tmikaeld|12 years ago|reply
It's a really nice tool, but it's a SAAS - no go for us.
[+] pter_s|12 years ago|reply
The video looks promising.
[+] joosters|12 years ago|reply
The reward structure is odd. For example, the 'super backer' $1000 level is limited to 200, yet the rewards given (e.g. The memory stick) are unlimited in the previous levels. Why artificially limit yourself to 200?
[+] marizmelo|12 years ago|reply
You are right Joosters, thank you for your comment. We will work on the rewards.
[+] korussian|12 years ago|reply
This seems to be more or less exactly the same as http://jetstrap.com
[+] ilaksh|12 years ago|reply
Looks like its different because its not for building only front ends but actually fully functional websites on Node.us. and its open source.
[+] sycren|12 years ago|reply
The product looks amazing but the Kickstarter reward levels need to be rethought.
[+] marizmelo|12 years ago|reply
I agree sycren. We are first timers on Kickstarter, but we will work on that. Thank you for the comment.
[+] duiker101|12 years ago|reply
there are many of this apps already, and while there are a couple that are nice my question is: has anyone actually ever used any of this for something serious?
[+] porker|12 years ago|reply
Yes but this one is slightly different being open source - it means (rather than everyone re-inventing the wheel) it can be integrated into Drupal, Wordpress, any other CMS... which I for one would be in favour of, as it would level the playing field again.
[+] brickcap|12 years ago|reply
Nice. What technologies are you using to build Frontend?