# Getting Started

Get started by installing DivMagic

**Chrome:** [<mark style="color:blue;">**Install for Chrome**</mark>](https://chromewebstore.google.com/detail/divmagic-copy-style-from/okpadhgilncoodafepkdmlneojcehclf)

**Firefox:** [<mark style="color:blue;">**Install for Firefox**</mark>](https://addons.mozilla.org/en-US/firefox/addon/divmagic/)

Chrome version works on Chrome, Edge, Brave, and other Chromium-based browsers.

## See it in action

Completely transforming Hacker News to Tailwind CSS with one click

<figure><img src="/files/Fo1vPKJb2CCGLTvmK6P0" alt=""><figcaption></figcaption></figure>

[<mark style="color:blue;">Click to watch</mark>](https://www.youtube.com/watch?v=ZWcrENOpbY0)


# Component Format

Change the component format of DivMagic between HTML and JSX. The code you copy will be in the format you choose.

This setting applies to the CSS selection as well. If you choose JSX, the CSS code will also be in JSX format.

**Default Value: HTML**

<figure><img src="/files/SdNlYE9V90upbn46gQMJ" alt=""><figcaption></figcaption></figure>

Both HTML and JSX options produce the same result. The difference is in the format of the code.


# Style Format

Change the output style of DivMagic. There are four options: Tailwind CSS, Inline CSS, External CSS, Local CSS

**Default Value: Inline CSS**

<figure><img src="/files/GtUNY3dFCdWY2HqfQ4LU" alt=""><figcaption></figcaption></figure>

### Tailwind CSS

This is the default option. The output code will use Tailwind CSS classes.

### Inline CSS

This option will output the code with inline CSS styles.

***

All options provide the same output, just in different formats. The choice is yours.


# DevTools

You can access DivMagic directly from your browser's development tools. This section will guide you on how to use this feature.

TODO: Upload DevTools Video

## How to use DivMagic with DevTools

1. **Open Developer Console:** Navigate to your browser's developer console by right-clicking on your page and selecting 'Inspect' or simply using the shortcut
2. **Locate DivMagic Tab:** Once inside the developer console, find the 'DivMagic' tab located next to the other tabs like 'Elements', 'Console', etc.
3. **Select an Element:** Navigate to the webpage you want to copy from, and use the DivMagic tab in the dev tools to select and capture any desired element.
4. **Copy & Convert:** Once an element is selected, you can copy its styles, transform it into reusable CSS, Tailwind CSS, React, or JSX code, and more — all from within the DevTools.

<mark style="color:red;background-color:red;">If DevTools tab does not show up on your browser, make sure you enabled it from the popup and open a new tab and try again</mark>

### **Permissions Update**

With the addition of DevTools, we've updated the extension permissions. This allows the extension to add the DevTools panel seamlessly on all websites you visit and across multiple tabs.

#### ⚠️Note

When enabling DevTools Panel from the extension popup, Chrome and Firefox will display a warning that says the extension can 'read and change all your data on the websites you visit'. While the wording is alarming, we assure you that:

Minimal Data Access: We only access the bare minimum of data required to provide you the DivMagic service.

Data Security: All data accessed by the extension remains on your local machine and is not sent to any external servers. The elements you copy are generated on your device and are not sent to any server.

Privacy First: We're committed to safeguarding your privacy and security. For more details, you can view our Privacy Policy.

We appreciate your understanding and trust. If you have any concerns or questions, feel free to reach out to our support team.


# Copy Mode

Change the copy mode of DivMagic. There are two options: Exact Copy and Adaptable Copy.

**Default Value: Adaptable Copy**

<mark style="background-color:green;">We highly recommend using 'Adaptable' Copy for most use-cases. See the explanation below for more details.</mark>

<div align="left" data-full-width="false"><figure><img src="/files/u9xEwp0fWCNlZgTuZEA8" alt="" width="531"><figcaption></figcaption></figure></div>

### Adaptable Copy <a href="#adaptable-copy" id="adaptable-copy"></a>

Adaptable copy mode is DivMagic's innovative approach to capturing web elements in a way that's optimized and ready for integration into your projects.

Designed to be the default option, it's recommended for a wide range of use cases due to its intelligent style optimization.

<mark style="background-color:blue;">Using the Adaptable copy mode might occasionally result in styles that look slightly different from the source. However, this deviation is intentional.</mark>

<mark style="background-color:blue;">DivMagic aims to provide an output that's not just a direct copy, but an improved and adaptable version of the original. It gives you a foundation to build upon, rather than a rigid style to work around.</mark>

**How does it work?**

Instead of capturing every single style attribute associated with an element, Adaptable mode performs an analysis of the styles and selectively retains only those necessary.

This results in a cleaner, more compact, and manageable code output.

**The goal of DivMagic is to make your development process significantly easier and faster. Adaptable copy mode is a key part of that.**

**Benefits:**

Optimized Output: Reduces the overall code volume, making it easier for you to customize the output for your own needs.

### Exact Copy <a href="#exact-copy" id="exact-copy"></a>

Exact mode provides a rigid copy of styles. It's built for use cases where you need to capture every single style attribute associated with an element.

In cases where Adaptable Copy mode is not producing the desired output, you can try using Exact Copy mode.

### Balanced Copy

Balanced copy mode strikes a middle ground between Adaptable and Exact copy modes. It aims to retain the flexibility and optimizations of Adaptable Copy while ensuring a closer adherence to the original styling than Adaptable alone.

In this mode, DivMagic performs a more selective capture of styles than Exact Copy, ensuring that important visual aspects are preserved without including all minor style details. This results in a more precise output than Adaptable mode, but with less code bloat compared to Exact mode.

Balanced mode is ideal when you need a reliable representation of an element’s styles, but also want to avoid overloading your project with unnecessary styling rules.


# Media Query

Add Media Query CSS to the copied code for responsive design. There are two options: On and Off

**Default Value: On**

<div align="left"><figure><img src="/files/EawcD74AglsUmeRUlYAJ" alt="" width="319"><figcaption></figcaption></figure></div>

## Media Query On

This option will add Media Query to the copied code for responsive design.

It works with all Component Format and Style Format options.

#### Media Query with Tailwind CSS

If you choose Tailwind CSS, Media Query will be added to the Tailwind CSS classes. If there is a Media Query style that is not supported by Tailwind CSS, it will be added as a global style.

#### Media Query with Inline CSS

If you choose Inline CSS, Media Query will be added as a global style because Inline CSS doesn't support Media Query styles.

#### Media Query with External CSS

If you choose External CSS, Media Query will be added to the External CSS.

#### Media Query with Local CSS

If you choose Local CSS, Media Query will be added to the Local CSS.

### Media Query Off

This option will not add Media Query to the copied code.


# Edit Mode

The **Edit Mode** in DivMagic’s browser extension provides a powerful, real-time editing experience for updating the styles of any element on a webpage. With Edit Mode, you can visually modify CSS properties directly in the browser, making it easier to experiment with design tweaks or test style changes without needing to dig into the codebase.

<div align="left"><figure><img src="/files/sI7H8q1wKuPqxQgVK2Xa" alt="" width="304"><figcaption></figcaption></figure></div>

### Key Features of Edit Mode:

#### Instant Style Editing:

* When you activate Edit Mode, you can select any element on the page, and its current styles will appear in a panel (as shown in the screenshot).
* The panel displays the active CSS properties for the selected element, such as color, font size, background color, and more.

#### Add, Modify or Remove Styles:

* You can easily update existing styles by modifying the values in the style panel.
* If you need to add a new CSS property, simply enter the CSS attribute and value in the **Add styles** section at the bottom of the panel, and the change will instantly apply to the element.
* You can also remove any applied styles by clicking the **X** next to a property, instantly reflecting the change on the page.

#### Real-Time Visual Feedback:

* Every change made in Edit Mode is applied immediately, so you can see the results of your updates in real time without needing to refresh the page.
* This visual feedback helps users experiment with different design options quickly and fine-tune the look of any webpage element.


# Introduction

Welcome to the DivMagic API documentation. This guide will help you integrate with our API and utilize its features effectively.


# Getting started

Follow the step-by-step instructions to start using DivMagic API

### Generating an API Key

To use our API, you need to generate an API key. Follow these steps to create your key:

1. [**Log in**](https://divmagic.com/login) to your account
2. Navigate to the Dashboard
3. On the side menu, click on API section
4.

```
<div align="left"><figure><img src="/files/wL7MCgtkN0PVpIatmaaV" alt="" width="251"><figcaption></figcaption></figure></div>
```

5. Click on "Generate API Key" button

### Get credits

If your API Status is *<mark style="color:red;">Inactive</mark>* or you ran out of credits, you can purchase credits from [**this link**](https://buy.stripe.com/6oEeWScPn1oT1ZS4gw) or click "Get now" button on the API section


# Sample Requests

### cURL Example

{% code overflow="wrap" %}

```sh
curl -X POST -H "Content-type: application/json" -d '{"apiKey":"YOUR-API-KEY","url":"pocket.tailwindui.com","settings":{"componentFormat":"html","styleFormat":"tailwind"}}' https://api.divmagic.com/v1/magic
```

{% endcode %}

### JavaScript Example

```javascript
fetch('https://api.divmagic.com/v1/magic', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    'apiKey': 'YOUR_API_KEY',
    'url': 'ft.com',
    'settings': {
      'componentFormat': 'html',
      'styleFormat': 'tailwind'
    }
  })
})
  .then(response => response.json())
  .then(data => console.log(data));
```


# Request Parameters

You can specify the Component format and Style format within your request

| Parameter         | Supported Values                          |
| ----------------- | ----------------------------------------- |
| componentFormat   | "html", "jsx"                             |
| styleFormat       | "tailwind", "inline", "local", "external" |
| includeMediaQuery | true, false                               |

**For more information about request parameters, check the sections below:**

{% content-ref url="/pages/aoxcwlmI4Dcw35EW8y58" %}
[Component Format](/settings/component-format)
{% endcontent-ref %}

{% content-ref url="/pages/28wtnmMDfYScXAueULAF" %}
[Style Format](/settings/style-format)
{% endcontent-ref %}

{% content-ref url="/pages/6SjmcODd8CT2Yus2IZ0G" %}
[Media Query](/settings/media-query)
{% endcontent-ref %}


# Introduction

DivMagic Studio is an integrated development environment (IDE) designed to simplify the process of writing and testing HTML, JSX, and Tailwind CSS code. Whether you're building complex web application

### Overview

DivMagic Studio consists of three main sections:

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td></td><td></td><td></td><td><a href="/pages/aHcy2u2nTk4bF5Qfs6JH">/pages/aHcy2u2nTk4bF5Qfs6JH</a></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>


# User Panel

This section is located on the left side of the Studio. It gives you access to the [**Chatbot**](/studio/user-panel/chatbot) and [**Library**](/landing-pages/description)**.**


# Chatbot

Chatbot allows you to interact with ChatGPT without leaving the Studio page.

To use it, you have to provide your OpenAI key to the Chatbot.

![](/files/QCfyyennhH0Bnhh6NYUr)

When the key is saved, you can start a conversation with ChatGPT within User panel. You can select the model on the top left.

### Provide code context

You can enable providing code context to the ChatGPT from Chatbot settings menu. When it's enabled, your code from the editor will be included in your conversation with Chatbot.&#x20;

The context will not be displayed in the chat messages for simplicity, but you can ask Chatbot anything about your code. Whenever you send a message to the Chatbot, always the current state of the code will be included as context.


# Library

The **Library** section in the User Panel is where users can manage and access their saved components. It offers a streamlined experience for organizing and reusing components across multiple projects.&#x20;

You can navigate to the library by clicking on ***Components*** on the User panel.

<div align="left"><figure><img src="/files/SL4bsAwac3Ie0d7IZj0T" alt="" width="255"><figcaption></figcaption></figure></div>

In this section, you can find any component you saved. By clicking it, the component will be opened in the Studio.

<mark style="color:red;background-color:red;">**Note**</mark><mark style="color:red;background-color:red;">: The library can be also accessed through the dashboard. You can delete components  in the dashboard if you need.</mark>


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


# Description

The **Landing Pages** section in DivMagic Studio is a curated collection of thousands of landing pages from well-known websites. It offers a valuable resource for users seeking inspiration for their own designs by providing access to the HTML and CSS of real-world landing pages. This section empowers users to learn from the best and jumpstart their creative process.


# Introduction

DivMagic's WordPress integration allows you to effortlessly transfer your copied elements directly into the WordPress Gutenberg editor. This feature bridges the gap between web inspiration and WordPress content creation, making your workflow smoother and more efficient than ever.

{% embed url="<https://www.youtube.com/watch?v=m8Dbwlguz0M>" %}

### Why It's Useful?

* Time-Saving: Quickly transfer design elements from any website to your WordPress site without manual recreation.
* Preserve Styling: Maintain the original look and feel of copied elements, ensuring design consistency.
* Flexibility: Works with any element - from simple buttons to complex layouts.
* Gutenberg-Ready: Seamlessly integrates with the WordPress Gutenberg editor for a native editing experience.

### Key Features

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><strong>One-Click Transfer</strong></td><td>Copy entire sections with a single click.</td><td></td></tr><tr><td><strong>Responsive Design</strong></td><td>Copied elements maintain their responsive properties.</td><td></td></tr><tr><td><strong>CSS Optimization</strong></td><td>Automatically optimizes CSS for WordPress compatibility.</td><td></td></tr><tr><td><strong>Block Conversion</strong></td><td>Intelligently converts copied elements into appropriate Gutenberg blocks.</td><td></td></tr></tbody></table>


# Getting Started

To start using this feature, ensure you have the latest version of DivMagic installed. The WordPress integration is designed to work out of the box with no additional configuration required.

## How to Use

1. Click the hamburger menu icon next to the Copy button\
   ![](/files/B9Fqi8czFpFO41BEcoEe)<br>
2. Select Export to WordPress option\
   ![](/files/Vorbx7iDAe1Ymy6jqvlw)<br>
3. After the component is exported, you can find the exported elements on the block menu of the WordPress Gutenberg editor by searching for "divmagic"\
   ![](/files/TAGCmRleKryB6akrJnA5)<br>
4. That's all! You can start using your exported components by drag & drop into the editor now