Show HN: Flexible Editor – An Open Source Flex-Box Based Layout Editor | Hacker News Reader

Show HN: Flexible Editor – An Open Source Flex-Box Based Layout Editor

briandiehr.com

40 pointsbtdiehr9 comments

This is an open sourced project I created over the weekend to play around with the idea of making a website creator using `flex-box` as the core building block.

I'd love to get feedback from people - what would be required to make this useful? Was there anything about the design you found particularly confusing?

Source here: https://github.com/BDiehr/briandiehr

Super great project I love it :) It could see this but with some more features such as:

- save / share

- inject custom css

- inject custom html (text, images etc..)

- react native syntax

- floating control panel (RHS, LHS, Separate window, or even injected into developer tools as a chrome extension)

- keyboard controls (sometimes selecting a small div is hard)

- highlight html/css as I highlight the visualization and vice verca

- History (undo, redo)

+SASS output. 77% of web developers can't be wrong!

Where is that number coming from?

I can't seem to get it to resize elements. I'm using chrome, and I have a simple layout, just the root and two children, but no matter what I do to the settings of the children, they won't resize.

I find the concept very useful though.

It would be nice to rename elements.

I don't think there's any benefit to an editor that exposes users to the flexbox API directly. I should be able to drag and drop and create panes entirely with my mouse without having to know about the underlying API.

I appreciate the comment and I definitely agree. A drag and drop interface is something I'm looking at as a next step, with this being the foundation upon which I use to build it. Glad to see someone else agrees!

I see that you're targeting website creation, but a react-native syntax output (https://facebook.github.io/react-native/docs/flexbox.html) would be nice for me. It's just slightly different (it seems, to me) than vanilla flexbox.

Interesting use case I hadn't thought of. I'm making it in React and then converting it all to standard HTML and CSS so it would be simple to do a standard `react` output instead.

Reply on news.ycombinator.com