# Editor

The **Editor** is the central workspace in DivMagic Studio where users can write, edit, and experiment with HTML, JSX, and Tailwind CSS code. It is designed for maximum productivity, offering a powerful environment that supports real-time code updates, syntax highlighting, and seamless transitions between different code types.

### HTML & JSX Support

* DivMagic Studio allows you to write both **HTML** and **JSX** in the Editor. If you're working on a static web page or a React-based project, the Editor seamlessly supports both languages.
* You can toggle between HTML and JSX modes, ensuring that the syntax is accurately reflected and parsed based on the type of project you're working on.
* Tailwind CSS is fully supported, allowing you to apply utility classes directly in your HTML/JSX for fast and efficient styling.

### Real-Time Updates

* One of the most powerful features of the Editor is its **real-time preview** functionality. As you write or modify code, the output is immediately rendered in the **Preview iFrame** (on the right).
* This eliminates the need for manual refreshing, allowing you to see instant feedback on changes. It speeds up development by providing a live, interactive coding experience.

### Font Selection

DivMagic Studio's **Font Selection** feature allows you to customize the appearance of your project by choosing from a wide range of fonts. This feature is available directly within the Editor through a convenient dropdown menu.

### Variation

The **Variation Button** is a powerful feature in DivMagic Studio designed to give your project a fresh look with the click of a button. When pressed, it randomly changes both the colors and fonts of your project, providing a quick and fun way to explore new design variations without having to manually update each style.