
Show HN: Flexible Editor – An Open Source Flex-Box Based Layout Editor - btdiehr
http://briandiehr.com/#/layout-editor
======
btdiehr
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](https://github.com/BDiehr/briandiehr)

~~~
jastanton
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)

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

~~~
jastanton
Where is that number coming from?

------
stevebmark
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.

~~~
btdiehr
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!

------
grittathh
I see that you're targeting website creation, but a react-native syntax output
([https://facebook.github.io/react-
native/docs/flexbox.html](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.

~~~
btdiehr
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.

