---
name: Move Elems
tags: stable, feedback-wanted
description: Moves elements within the DOM structure during rendering.
---


# Move Elems (paged.js)

This plugin moves elements within the DOM structure during rendering. Usefull with other script like [Full page](https://gitlab.com/csspageweaver/plugins/fullPage) or [Float page](https://gitlab.com/csspageweaver/plugins/floatPage).

This plugin moves elements relative to their sibling elements in the DOM — either forward or backward — based on the integer value you provide.

You need to use [csstree.js](https://github.com/csstree/csstree) in order to transform custom properties. 
If you use CSS Page Weaver is inclued by default


## How to install

**With CSS Page Weaver**

Register the `moveElems` plugin in your `manifest.json`:

```json
[
    "moveElems",
    // other plugins

]

```

⚠️ It’s recommended to load this plugin first to prevent any conflicts with other plugins.


**Without CSS Page Weaver**

Include both csstree and the fullPage script in your HTML `<head>`:

```html
<script src="js/csstree.min.js"></script>
<script type="module" src="path/to/fullPage/floatPage.js"></script>
```

Don’t forget to update the path to the paged.esm.js module in the import statement before using the script.

```js
import { Handler } from '/path/to/paged.esm.js'
```


## How to use it

In your CSS, add the following custom property to the elements you want to move, using an ID or class:

```css
elem{
    --x-move-elem: 2;
}
```


In this example, the element will be moved after its second next sibling.
You can also use negative values to move elements backward, e.g.:

```css
elem{
    --x-move-elem: -3;
}
```

This would move the element before its third previous sibling.


## Credits

- [pagedjs.org](https://www.pagedjs.org/)
- [csstree.js](https://github.com/csstree/csstree)

MIT licence, Julie Blanc, 2025


