Desech Studio

No-code visual html/css editor

3 followers

No-code visual html/css editor

3 followers

Desech Studio is a free modern nocode visual html/css editor which enables you to import your Figma, Sketch, AdobeXD design file to generate a clean html structure positioned with CSS grids. Then you can integrate it with React, Angular, Vue or Material Design

Free Options

Launch tags:

Design Tools•Developer Tools

Launch Team

Catalin Luntraru

Desech Studio

Maker

This is a product that I have worked on for quite some time and I'm excited to show it to the world. Desech Studio will always be free, with offline support and privacy conscious. Future plans are to integrate with Wordpress, and then implement features that will allow you to not need design software, and just design your application directly in Desech Studio. I have also recently posted a full HTML/CSS tutorial on youtube, learning web development in a visual way instead of using code.

Report

4yr ago

Joseph Abraham

SaaS for Greater Good

@catalin_luntraru : Looks great! Congrats on the launch! How does it compare with webflow?

Report

4yr ago

Catalin Luntraru

Desech Studio

Maker

@saascoach Thank you. Compared to webflow, with Desech Studio there's no limit to the html/css you can build. - You can have any html tag you want, while webflow only offers some tags. - You can create any custom css selector you want, while with webflow you can only have 3 selectors (hover, pressed, focus). - You can add any css property and value you want, while webflow restricts that only to a bunch of them. - As for responsive, you can go desktop first or mobile first and have any break points you want, while webflow only gives you some break points and forces the desktop first mode. And I think the most important thing, is that with Desech Studio you can import your adobexd, figma or sketch file, and you can also integrate the code with react, angular, vue and material design. One final point, you can visually modify your html/css with Desech Studio for the entire life of your project because it stays in sync with your code, while with webflow, you can only export the html/css and then copy paste it in your code base. Ultimately, Desech Studio is aimed at professional developers and designers, while Webflow is more a hybrid website builder that only gives you a taste of the power of html/css.

4yr ago

Looks great!

4yr ago

It's not 100% clear on the website. How does the export work?

Report

4yr ago

Catalin Luntraru

Desech Studio

Maker

@muslim1 Indeed, we will try to make it more obvious, thank you. Have a look at the presentation video, either here on product hunt or on the website at minute 5:39. I will link the video again here with the timestamp. Let's take for example that you want to integrate with react. First you install the react plugin inside Desech Studio which is in Settings > Plugins. This is a one time thing, once installed you have it. Then when you create a new project, you can set the `Export Code Plugin` option to `React` instead of the default `Static`. Now, when you save the files inside Desech, it will also create an `_export` folder where the react code will sit. The react code is generated with the standard `create-react-app`. Have a look at the github repo at https://github.com/desech/studio... . So how does all this work? You will manage your html/css files visually with Desech Studio for the entire project lifetime, while the javascript code, you will manage it with your favorite code editor. Desech only changes the blocks of code that deal with the html/css. It will never touch the outside blocks where you add code, so you are free to add whatever logic you want and need outside of it. This means that you can npm install anything you want, add storybooks, etc. You can also use your own code base by creating your own plugin in the plugins folder of Desech Studio, which you can create it by copy/pasting the existing react code and just change the base js files. Then you will use that in your project settings, instead of the standard React plugin. This also applies to angular and vue.

Report

4yr ago

Axel Norvell

Could this tool be integrated with an existing, complex React single-page app to add new pages (routes), move/add in new components around, edit copy, etc? Or does it heavily rely on there being an html file foundation to work?

Report

4yr ago

Axel Norvell

I tested it out. Seems like it does rely on an HTML/CSS structure, but can export that HTML/CSS classes just wrapped within React. One piece of a feedback for the Desche team - consider spending a bit of polish on the visual builder UX. For example, hitting "backspace" doesn't delete an element as one might expect. That's probably the most annoying UX issue I noticed right away. It would be cool if this tool was aware of React components and let you bring them into the visual builder as well. Our components rely on Styled Components for styling, so not sure if there's a way for Desche to know of styled components where the CSS is embedded inline with the React components.

Report

4yr ago

Catalin Luntraru

Desech Studio

Maker

@axel_norvell Hey Axel. Unfortunately because how Desech works, you can't work with existing projects, only new projects. Indeed the project is based on html/css and then it exports to react.

Report

4yr ago

Catalin Luntraru

Desech Studio

Maker

> For example, hitting "backspace" doesn't delete an element as one might expect. @axel_norvell Desech is very green, so we value all the feedback we get. We pushed the requested feature, and other fixes and improvements, in today's update (version 1.1.2). The next update will greatly increase the import/export process since most people are interested in that. > It would be cool if this tool was aware of React components and let you bring them into the visual builder as well. Desech doesn't parse the react code, instead it converts the html/css built with Desech into React code and components. So the direction is from html/css to react, not the other way around. The benefit from this is that you can easily switch your project from react to vue if you want to, and then you will only have to deal with the js code, while the components, html and css stay the same, and they just get converted to what is needed.

Report

4yr ago

Brand API — Speed up your onboarding with 1 API call

Speed up your onboarding with 1 API call

Promoted

Desech Studio

No-code visual html/css editor

No-code visual html/css editor

Desech Studio

No-code visual html/css editor

No-code visual html/css editor

Similar Products

Do you use Desech Studio?

Do you use Desech Studio?

You might also like