"Visual Meteor" coming soon :)

Preview video is here: https://youtu.be/8Gr2oioZDG8

Visual UI Designer: drag & drop elements, attach events… and you got Blaze and/or React code. Control structures like {{#if ... }} ... {{else}} {{/if}} and {{#each}} ... {{/each}} can also be assembled in visual designer with a mouse clicks (I’ll record new video soon).

Not deployed yet, but I just want to share excitement with you (and to hear some comments)

:stuck_out_tongue:

31 Likes

Have you developed it in Meteor?

Sure. It’s Meteor application. https://www.meteorkitchen.com (visual UI designer from the video is not deployed yet)

1 Like

Awesome! Can’t wait to see more! :thumbsup:

2 Likes

Moving forward and got two more preview videos:

Preview #3:

Conditional rendering. This video clearly shows how both React and Blaze code is dynamically generated while you work in visual designer:

Preview #2:

Loop and conditional rendering (bug is recorded! Condition was wrong, so text “No fruits here” was not shown)

Enjoy! :slight_smile:

2 Likes

It looks amazing. Definitely a step forward

1 Like

Very nice stuff! Definitely will help to have tools like this available for designers.

1 Like

This is just awesome!

1 Like

its the best i see in years!. we need a fast knowhow of generates proyects!!! good job

1 Like

Cool. Just make sure you sell some premium features or enable donations to make it sustainable.

I am ready to pledge some Early Bird Eur49 for premium features immediately. )

BTW, there used to be active community of visual Javascript tool WaKanda.Org You may be interested to have a look at them. Eventually, they sold their souls to Angular hoping for venture capital to buy them. And even deleted forum after community opposed that. No true developments since then.

Thank you @Volodymyr !

Actually, donations are enabled https://www.meteorkitchen.com/contribute Thanks to everyone who donate, got total ~500 USD in two years - enough to pay hosting expenses, but that doesn’t power the project.

Paid premium features - I plan that, but I think kitchen is not ready/good enough yet, so… powered by enthusiasm (and coffee - a lot of :slight_smile: ).

:rocket:

1 Like

Good luck! I look forward to seeing more of it.

1 Like

Is there going to be a way to validate form controls within Visual Meteor?

This is amazing guys … fabulous job
keep it up …

1 Like

@aadams sorry, I don’t understand your question, can you clarify please?

Sure. Simple validation would be

If RadioControl1 === ‘Yes’

Then FieldInputControl text/value is “Required” (in this case the form will throw on submit attempt)

Else FieldInputControl is not required (in this case the form can be save without any text/value on this control).

Basically I’m talking about client side dependencies and relationships between form controls. We can do this today with Blaze and SimpleSchema for example.

Really cool project! Can’t wait to check it out further.

Random question. What have you used for the drag and drop front end to build the source code? I want to develop something similar for an in-house application I have to use at work. Currently we build our views in raw XML :slight_smile:

Ah, ok, I understand. There is multiple ways:

  • Meteor Kitchen can generate SimpleSchema automatically

  • There is built-in getFormData function which reads the form and performs validation

  • There is built-in form component similar to autoform (instead assembling form manually as shown in the video, you can drop “form” component, choose collection and form will be rendered and validated according to collection fields definition)

  • you can add other package into app and perforn validation with it.

Update on progress got more features implemented and improved UI designer. I’m close to deploy first “alpha” release - maybe in next 7-10 days.

Stay tuned! :slight_smile:

6 Likes

@ashhimself I’m using “gasoline-turbo”: https://www.npmjs.com/package/gasoline-turbo

My mini project that generates Blaze and React source code from json. It is independent from meteor-kitchen btw.

I wish to implement Angular too, but I am noob for Angular, so contributions are highly welcome.

Drag and Drop part (visual UI for gasoline-turbo) is less or more trivial, there is example app, but I didn’t uploaded the source code - I will tonight when I reach my computer.

New preview video: playing with code like with LEGO blocks: https://youtu.be/JQOkLFA28eU

Added Import from Blaze. Still not deployed, moving slowly but moving forward…

6 Likes