×

Desech Studio

Nocode visual html/css editor for web programmers and designers

Desech Studio

Nocode visual html/css editor for web programmers and designers

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.

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.

If you have any questions, please post them here.
Desech Studio 2.0 is here. Components have been completely rewritten and now they work similar to Figma, Sketch, AdobeXD, but even better.

Desech Studio updates like Chrome or Firefox, where it downloads the update, and then on the next application opening it will update. Plugins, on the other hand, update when you open Desech Studio, so make sure to wait for the update notification and reopen the application, before opening a project, to make sure both the plugins and Desech Studio are updated. In the future this maneuvering will no longer be needed.

How to create components?
- To create a component, you open the File Manager panel inside Desech Studio, then right click the component folder and create a component file called "button" for example.
- Inside the component file you can add what ever html elements you want, for example you can keep the default block wrapper and inside of it, you add a text element which you can then change to a button, by using the Html section on the right side.
- Then you open the index page, make sure the File Manager panel is opened, and you can right click the "button.html" file from the component folder, and then "Add component to page"

What can you do with components?
- Now if you open the Elements panel, you can see your component, but also all its children elements, which you can now change by overwriting them completely.
- You can override the tag, inner text, attributes, properties, classes, css styles and even swap to a different component. The only thing you can't change is moving elements or adding new elements.
- Once you have a set of component overrides, you can save them as a variant. For example, you can change the Type attribute of the button to "Submit". Then select the component and in the Component section (right side) you can create a new variant, so let's set the name to "type" and the value to "submit" and Save.
- Now this component has a variant called type with 2 values: "submit" and Default.
- Let's change the variant value to Default to have it empty and then let's change the text color to a red color. Now the css has been overridden, and we can go to the component and create the variant "color" with the value "red".
- You can also mix and match between these 2 variants. Know that, if you want to create a new variant, you need to not have any other variants selected. So with no variants enabled, we can change the color of the button to a blue color. Now we can save it as a variant by using the existing "color" type, but with a different value set to "blue". Now the "color" variant has 2 options: red and blue.

Lots of customization options
- You can also punch a hole inside a component. Open a component, select a block element that has no children elements inside, and then in the Html section, there's a whirlpool icon. Clicking that will make that block the hole of the component. You can only have one hole per component.
- To understand holes better, think of them as this.props.children in React, <slot></slot> in Vue and <ng-content></ng-content> in Angular
- You can have a component with a hole and then inside that hole you can add 2 other components and then all this can be overridden by swapping one component to another component and then select some variants on this new component.
- You can also override variants too
- Swapping components is useful in situations where you have an icon component inside a card component, and then when you reuse that card component you change the text and also swap the icon component to a different component.

Integrations
- The component system is fully exported to React, Angular and Vue, and it's integrated with StoryBook by default. Inside Desech Studio you need to go to Settings > Plugins and install the plugin that you want. Then in File > Project Settings, or when you create a new project, you can set the export code to React, Angular, Vue or keep it as HTML/CSS.
- Now every time you save inside Desech Studio, an _export folder is created with all the exported files for your project, be that react, angular, etc.

Before integrating with React, Angular and Vue, please read the github readme pages:
- https://github.com/desech/studio-react
- https://github.com/desech/studio-angular
- https://github.com/desech/studio-vue

As it was previously, Desech Studio always overwrites things inside the desech comment blocks, but anything you add outside of these blocks is not touched by Desech Studio, so you are free to add what ever logic you need, while still being synced to what Desech Studio generates.

There are a couple of changes to how Desech Studio worked before the update:
- When you open an old project it will be automatically migrated to the new version, but there might be some issues, so make a backup first.
- Programming properties only work now when exporting the project to React/Angular/Vue. For the static Html/Css export, properties have no purpose and are ignored. If you have used properties for creating design logic like elements being selected, etc, now you can use the new component system with overrides and variants.
- Css classes with no style used to be deleted, but you could have created a property called "class" or "className" for React, and add your classes this way. You no longer need this hack. You can just add your classes from the selectors section without the worry of being deleted.
- Components and component holes no longer have <div>s to wrap them around, so please check your javascript DOM code for extra containers.
- If your existing project uses React/Angular/Vue, then first move the current `_export` folder somewhere else to back it up and then open your project with Desech Studio so the `_export` folder is re-created. Then check each component and add you custom logic where is needed. I know it might be a lot of work if you already have a lot of code, but the changes are so big that it's impossible to upgrade all this with a script.

Everything has been extensively tested and it was 4 months in the making, but we assume a couple of bugs slipped through, so please contact us with any issue.

If you have any questions, please check https://www.desech.com/support.html from where you can use our ticketing system, our subreddit, contact form or even directly email us at [email protected]

Join to leave a comment