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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.divmagic.com/studio/editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
