Skip to main content

Developers - Helpers



To install the Perfection Helpers in your application, you can use the Helpers NPM package.

Install the NPM package as follows

>_ Terminal
npm install @perfectiondev/oversite-helpers

Create a client

Before continuing, make sure you already have an .env file wwhere you store your Perfection Site Name, API Key and Subscription ID. This file should be localted at the root folder of your project.

Secondly, import @perfection/oversite-helpers module and create a reusable oversiteHelpers client as follow:

import OH from "@perfectiondev/oversite-helpers";

export class oversiteHelpers {
static instances = new Map();

static init = async (pageId) => {
const helpers = oversiteHelpers.instances.get(pageId);
const isPreview = process.env.NEXT_PUBLIC_PERFECTION_PREVIEW == "true" ? true : false;

if (helpers) await helpers.usePage(pageId);
else {
const result = await OH.init({
preview: isPreview,
await result.usePage(pageId);
oversiteHelpers.instances.set(pageId, result);
static section = { parts: (partsFn, sectionId) => (typeof partsFn === "function" ? partsFn(sectionId) : (selector, defaultClasses) => defaultClasses) };

Initialize the client

Lastly, load this file into your pages/routes, initiate it by passing the same unique pageId set in your Page data-pf attribute.

import { oversiteHelpers } from "./clients/oversiteHelpers";

export default async function Page() {
await oversiteHelpers.init("YOUR_PAGE_ID");

return; // Your code

How to use

Get All Instances

Next, you need to get all the instances from your current page (with the same pageId set in your Page data-pf attribute)

const helpers = oversiteHelpers.instances.get("homepage");

Retrieve Section Styles

Now , it is time to retrieve styles for a given section with its sectionId, you can do this by doing so:

const section =, "sectionId");
const section_outer = section("outer", "default_classes");
const section_inner = section("inner", "default_classes");

Retrieve Components Styles

For a component, get its styles by passing its groupId and instanceId, just do the following:

const component ="groupId", "instanceId");
const component_h2 = component("h2", "default_classes");

About Performances

For getting style changes, we recommended that your pages retrieve styles server-side so that there is no impact on your live website otherwise this will be a bad user-experience with layout shifts.

If you're using a vanilla-renderer, we recommend using a template. For other frameworks, you can check the integration examples above to see how it should be implemented.

Integration Examples