4 ms·

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

40 points by btdiehr 11y ago

grittathh 11y ago
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 11y ago
  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.
btdiehr 11y ago
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 11y ago
  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 11y ago
    +SASS output. 77% of web developers can't be wrong!
    - jastanton 11y ago
      Where is that number coming from?
- springogeek 11y ago
  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.
stevebmark 11y ago
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 11y ago
  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!

40 points by btdiehr 11y ago

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 11y ago
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.

btdiehr 11y ago

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 11y ago
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 11y ago
  +SASS output. 77% of web developers can't be wrong!
  - jastanton 11y ago
    Where is that number coming from?
springogeek 11y ago
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.

stevebmark 11y ago

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 11y ago
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!