Go Headless

Build Apps

Client

API Preview

Develop Websites

REST

Velo

GraphQL (Alpha)

Gets the viewport currently selected in the Editor.

The `getCurrentViewport()` function returns a Promise that resolves to an object containing details about the currently selected viewport. To use this function on an inner (nested) widget, use [`getScopedWixEditor()`](#getScopedWixEditor).

import wixEditor from 'wix-editor';

// ...

wixEditor.getCurrentViewport()
  .then(viewport => {
  // Your code that uses the 'viewport' value goes here
  }); 
  
/* For example, `viewport` can be: 
  {
    type: "DESKTOP",
    range: {
      minWidth: 1001,
      maxWidth: undefined
    }
  }
*/

Get the current viewport

getCurrentViewport

Viewport

Fulfilled - Object with the current Editor viewport.

A string of one or more nested widget selectors, which can include a few levels of nesting from outer to inner, separated by spaces. For example: `("#nestedWidget1")`, or `("#nestedWidget1 #nestedWidget2")`.

Selector

string

Gets the `wix-editor` module scoped of an [inner (nested) widget](https://support.wix.com/en/article/wix-blocks-creating-and-managing-widgets-within-widgets).

The `getScopedWixEditor()` function lets you use `wix-editor` functions on inner (nested) widgets. It receives a selector of an inner widget and returns a promise that resolves with an object representing the scope of the inner widget.

import wixEditor from 'wix-editor';

// ...

wixEditor.getScopedWixEditor("#nestedWidget1 #nestedWidget2") ////nestedWidget2 is inside nestedWidget1
  .then(nestedWidget => {
    nestedWidget.removeElement("#title1"); //removes title1 from nestedWidget2
});

Removes an element in an inner (nested) widget

getScopedWixEditor

object

Fulfilled - The `wix-editor` module scoped to the nested widget.

selector

Checks if an element is removed from the widget.

The `isRemoved()` function returns a Promise that resolves to `true` if the element is removed.

The element selector is a string with the hash symbol (`#`) followed by the ID of the item you want to select (e.g. `"#myElement"`). To use this function on an inner (nested) widget, use [`getScopedWixEditor()`](#getScopedWixEditor).

import wixEditor from 'wix-editor';

// ...

wixEditor.isRemoved('#title')
  .then(isRemoved => {
    // Your code that uses the 'isRemoved' value goes here
  });

Check if an element is removed

isRemoved

void

Fulfilled - `true` if the element was removed and `false` if it exists.

Gets a list of all removed widget elements.

The `listRemovedElements()` function returns a Promise that resolves to a list of selectors of removed elements that are part of the widget with which the panel is associated, for example: `[‘title’, ‘description’]`. To use this function on an inner (nested) widget, use [`getScopedWixEditor()`](#getScopedWixEditor).

import wixEditor from 'wix-editor';

// ...

wixEditor.listRemovedElements()
  .then(allRemovedElements => {
    // Code to execute with the allRemovedElements array 
  })
  
// For example, allRemovedElements can be: ["#title", "#button1"]

Get all the removed elements

listRemovedElements

Fulfilled - A list of of selectors of removed elements.

options

DashboardOptions

Opens the [Dashboard](https://support.wix.com/en/article/about-your-wix-dashboard) for the current site.

The `openDashboardPanel()` function returns a Promise that resolves when the Dashboard is open.
The `url` parameter specifies the page to open within the Dashboard.

import wixEditor from 'wix-editor';

// ...

wixEditor.openDashboardPanel({ url: 'blog' })
  .then(() => {
    // Code to execute after opening the dashboard panel
  })

Open a dashboard panel

openDashboardPanel

Removes a widget element from the stage.

The `removeElement()` function returns a Promise that is resolved when the element is removed. You can only remove elements that are part of the widget with which the panel is associated.  
The element selector is a string with the hash symbol (`#`) followed by the ID of the item you want to select (for example, `"#myElement"`). To use this function on an inner (nested) widget, use [`getScopedWixEditor()`](#getScopedWixEditor).

// In this example, we use a toggle switch to remove or restore an element in our widget.

import wixEditor from 'wix-editor';

$w.onReady(async function () {
 $w('#toggleSwitch').onClick(async (event) => {
   if (event.target.value) {
      await wixEditor.removeElement('#title');
   } else {
     await wixEditor.restoreElement('#title');
        }
  });
});

Use a toggle switch to remove/restore a widget element

removeElement

Restores (shows) a widget element on the stage.

The `restoreElement()` function returns a Promise that is resolved when the element is restored. You can only restore elements that are part of the widget with which the panel is associated.

The element selector is a string with the hash symbol (`#`) followed by the ID of the item you want to select (for example, `"#myElement"`).  To use this function on an inner (nested) widget, use [`getScopedWixEditor()`](#getScopedWixEditor).

import wixEditor from 'wix-editor';

// ...

wixEditor.restoreElement('#title');

Show an element

restoreElement

Fulfilled - when the element is restored.

# Introduction
> **Important**:
> This module is available only in Wix Blocks. [Wix Blocks](https://support.wix.com/en/article/wix-blocks-check-out-our-articles) is an editor for building Wix apps. 

The Editor API is used within the code of panels built with the [Blocks Panel Builder](https://support.wix.com/en/article/creating-custom-panels-for-your-widgets-action-bar-buttons).
It enables your panel to interact with the Wix editors by removing or restoring widget elements, opening Dashboard panels, and more.
To use the Editor API, import `wixEditor` from the `wix-editor` module:

```javascript
import wixEditor from 'wix-editor';
```

velo_wix-editor

The relative URL to open in the Business Manager.

object representing the current viewport's range.

viewportRange

Type of viewport (`DESKTOP`, `MOBILE`, or `TABLET`)

type

Maximum range in pixels for the current viewport.

maxWidth

number

Minimum range in pixels for the current viewport.

getCurrentViewport( )