graphql
react

Element Quick Action

The Windframe Editor Quick Action feature allows you to perform various actions quickly and efficiently, saving you time and enhancing your workflow. With Quick Actions, you can access commonly used functions and tools without navigating through menus or searching for specific options. This feature is designed to streamline your editing process and make it more intuitive.

How to access the Element quick action

To use the Quick Action feature in the Windframe Editor, follow these steps:

Step 1: Open Windframe and navigate to the editor.

Step 2: Upload or select a template

Step 3: Select any component on your template you want to edit and you will see the element quick action panel.

Element Quick action panel

Here are some common Quick Actions available in Windframe:

Delete Button

The Delete button within the Element Quick Action Panel allows you to remove selected elements from your design.

Delete element

Export Button

The Export button within the Element Quick Action Panel enables you to export the code of selected elements. This is useful when you want to extract the code of specific elements for further customization or use in other projects. export quick code

Add Element Button

The Add Element button within the Element Quick Action Panel allows you to easily add new elements to your design.

Add Element button

Move Up Button

The Move Up button within the Element Quick Action Panel enables you to change the stacking order of elements by moving them up. This is useful when you want to bring an element forward in the visual hierarchy.

move up element

Move Down Button

The Move Down button within the Element Quick Action Panel enables you to change the stacking order of elements by moving them down. This is useful when you want to take an element backward in the visual hierarchy.

move down element

Copy Code Button

The Copy Code button in the Element Quick Action Panel allows you to quickly copy the code of selected elements to your clipboard. This is handy when you want to reuse or share the code of specific elements.

Copy code Button

Drag Button

The Drag button within the Element Quick Action Panel enables you to easily move elements to new positions on the canvas.

Drag button .

Ask AI Edit

The "Ask AI Edit" button within the Element Quick Action Panel enables users to utilize AI in editing of the selected element within their projects using prompts. It comes with some predefined prompts. Whether you need to center your element, enable light mode, apply responsiveness or add color, the "Ask AI Edit" button provides a seamless and efficient editing experience.

Ask-AI-edit

Section Code Editor

The Windframe section code editor is a powerful tool that allows you to select and edit specific parts of your user interface (UI). This feature is particularly useful when you want to make changes to a particular UI component without affecting the rest of your project.

Section-Code-editor .

To learn in detail on how to use the section code editor you can check out this link