Get Started

Use this guide to prepare access and quickly start your Visor development setup.

Prerequisite Requirements

Before you start development, you must have access to both accounts below:

Required to manage content, data, and publishing workflow from the Visor portal.

Visor Studio Access

Required to fork and bootstrap your frontend development repository.

Visor GitLab Template Access

For account setup and bootstrapping, contact Xtremax: https://www.visor.global/#contact

Quick Start From Template

Fork the template

Manually fork the template repository:

https://gitlab.com/xtremax2/visor-gen2-1-daas-visor-dev-code

Use the Fork button in the top-right area of the GitLab project page.

Fork the template in GitLab

Confirm repository ownership

After forking, confirm that the new repository is under your team or organization namespace and that your development team has the required access.

Clone your fork locally

Use your fork URL and clone it to your local machine.


git clone <your-fork-url>
cd <your-fork-folder>

Configure environment variables

Create a .env.local file in the project root and configure:


# DAAS Configuration (Data as a Service - replaces Directus)
NEXT_PUBLIC_DAAS_URL=https://visor-daas.dev.xtremax.com
NEXT_PUBLIC_DAAS_STATIC_TOKEN=<your-daas-static-token>
NEXT_PUBLIC_VISOR_URL=https://visor-v2.dev.xtremax.com
NEXT_PUBLIC_TENANT_ID=<your-tenant-id>
NEXT_PUBLIC_BUILD_MODE=ssr

The most critical values are NEXT_PUBLIC_DAAS_STATIC_TOKEN and NEXT_PUBLIC_TENANT_ID. Keep these in sync with the values provided during onboarding.

If the Xtremax Visor team already forked and bootstrapped the project for you during onboarding, you can skip the fork and clone steps and continue directly with environment variable validation and project run.

Run the project


npm install
npm run dev

Verify local setup

If everything is configured correctly, your Next.js head should be running on http://localhost:3000. Open it in your browser and you should see the homepage rendered from Visor content.

Local Next.js head running successfully

Verify edit mode in Visor

Dev Mode routes the Visor preview to your local Next.js server instead of the live deployment. This lets you see content changes reflected in real time during development.

To confirm the full integration is working, you can verify that Visor Studio can preview your local head in edit mode:

Log in to Visor Studio using the credentials or Active Directory account from your onboarding.
Navigate to the Page Builder module from the left sidebar.
Open the Pages list and select the home page to enter the detail view.
In the top-right area of the editor, toggle on Dev Mode (the </> icon).
Visor will switch the preview iframe to use your local URL (http://localhost:3000). You should see your locally running head rendered inside Visor Studio.

Local head previewed in Visor Studio dev mode

Choose what you want to continue with next:

Continue to the Modules section to learn Page Builder, Dynamic Data, Services, Configuration, and Files.

Understand Modules in Visor

Continue to DSS Base Template documentation to understand the frontend foundation and integration flow.

Understand DSS Base Template