Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

Gets the site display name.

Retrieves the site display name, which is the name that
 has been entered in the **Website Settings** section of the site's [**Dashboard**](https://support.wix.com/en/article/wix-dashboard-overview).

import wixSiteFrontend from 'wix-site-frontend';

const siteName = wixSiteFrontend.getSiteDisplayName(); // "My Site"

Get the site display name

getSiteDisplayName

string

Returns information about the site's pages, prefixes, and lightboxes.

The returned `SiteStructure` object is a flattened representation of the site. 
 The structure does not include the headers and links from the site's **Pages** menu.

import wixSiteFrontend from 'wix-site-frontend';

// ...

const structure = wixSiteFrontend.getSiteStructure();

/*
*  {
*    "pages": [
*      {
*        "name": "Home",
*        "type": "static",
*        "url": "/home",
*        "isHomePage": true
*      },
*      {
*        "name": "Page 1",
*        "type": "static",
*        "url:" /page-1"
*      },
*      {
*        "name": "Page 2",
*        "type": "static",
*        "url": "/page-2"
*      },
*      {
*        "name": "Parent Page",
*        "type": "static",
*        "url": "/parent-page"
*      },
*      {
*        "name": "Child Page",
*        "type": "static",
*        "url": "/child-page"
*      },
*      {
*        "name": "router-page",
*        "type": "template",
*        "prefix": "router"
*      },
*      {
*        "name": "MyCollection (Title)",
*        "type": "template",
*        "prefix": "MyCollection"
*      },
*      {
*        "name": "MyCollection (All)",
*        "type": "template",
*        "prefix": "MyCollection"
*      },
*      {
*        "name": "Dashboard Page",
*        "type": "static"
*      },
*      {
*        "name": "Shop",
*        "type": "template",
*        "url": "/shop",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Product Page",
*        "type": "template",
*        "url": "/product-page",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Thank You Page",
*        "type": "template",
*        "url": "/thank-you-page",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Cart",
*        "type": "template",
*        "url": "/cart",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Members",
*        "type": "template",
*        "url": "/members",
*        "applicationId": "14ad9202-3dd3-128a-57bd-e5675fd7e313"
*      }
*    ],
*    "prefixes": [
*      {
*        "name": "router",
*        "type": "router",
*        "prefix": "/router"
*      },
*      {
*        "name": "MyCollection",
*        "type": "dynamicPages",
*        "prefix": "/MyCollection"
*      },
*      {
*        "name": "MyCollection",
*        "type": "dynamicPages",
*        "prefix": "/MyCollection"
*      },
*      {
*        "name": "Shop",
*        "type": "app",
*        "prefix: "/shop",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Product Page",
*        "type": "app",
*        "prefix": "/product-page",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Thank You Page",
*        "type": "app",
*        "prefix": "/thank-you-page",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Cart",
*        "type": "app",
*        "url": "/cart",
*        "applicationId": "1380b703-ce81-ff05-f115-39571d94dfcd"
*      },
*      {
*        "name": "Members",
*        "type": "app",
*        "prefix": "/members",
*        "applicationId": "14ad9202-3dd3-128a-57bd-e5675fd7e313"
*      }
*    ],
*    "lightboxes": [
*      {
*        "name": "Welcome (Full Screen)"
*      }
*    ]
*  }
*/


This example gets the structure of the site with the following in its pages menu:
 ![Site Structure](images/site_structure.png "Site Structure")

Get information about the site's pages, prefixes, and lightboxes

getSiteStructure

An object that contains information about the site's pages, prefixes, and lightboxes.

SiteStructure

The items within the site to prefetch resources for.

prefetchItems

PrefetchItems

Optimizes resource fetching of pages and lightboxes in the site so they will load faster.

Use the `prefetchPageResources()` function to optimize resource fetching of pages and
 lightboxes you think your site visitors are likely to visit next. When the site
 visitor navigates to those pages or lightboxes, they will load quicker than usual
 since some of their resources have already been retrieved.

 You can only prefetch resources from pages or lightboxes within the current site.

 A prefetch is considered successful if the specified pages and lightboxes exist in
 the current site. If any of the specified pages or lightboxes do not exist, the 
 prefetch operation returns an error status and lists of the pages and lightboxes
 that were not found.

const response = wixSiteFrontend.prefetchPageResources( {
  "lightboxes": ["First Box", "Second Box"],
  "pages": ["/first-page", "/second-page"]
} );

if(response.errors) {
  // handle errors
}

/*
 * response is:
 *
 * {
 *   "message": "success"
 * }
 */

Prefetch resources successfully

const response = wixSiteFrontend.prefetchPageResources( {
  "lightboxes": ["My Lightbox", "Fake Lightbox"],
  "pages": ["/my-page", "/nonexistent-page"]
} );

if(response.errors) {
  // handle errors
}

/*
 * response is:
 *
 * {
 *   "message": "some resources not found",
 *   "errors": {
 *     "lightboxes": ["Fake Lightbox"],
 *     "pages": ["/nonexistent-page"]
 *   }
 * }
 */

Prefetch resources unsuccessfully

prefetchPageResources

PrefetchResult

The prefix of the router to get the sitemap for.

routerPrefix

Returns the sitemap for a router or dynamic page prefix.

The `routerSitemap()` function returns a Promise that resolves to a list of
 [`WixSitemapEntry`](wix-router.WixRouterSitemapEntry.html) objects. Each
 [`WixSitemapEntry`](wix-router.WixRouterSitemapEntry.html) includes
 information about a page, such as its URL, title, and name.

 A sitemap is used by search engines to find the links to the site's pages.

import wixSiteFrontend from 'wix-site-frontend';

// ...

wixSiteFrontend.routerSitemap("routerPrefix")
  .then( (routerSitemap) => {
  	const sitemap = routerSitemap;
  } );

/*
 * sitemap:
 *
 * [
 *   {
 *   	"url": "Ash",
 *   	"lastModified": null,
 *   	"changeFrequency": "",
 *   	"priority": null,
 *   	"title": "Ash Stowe",
 *   	"pageName": "Ash's Page"
 *   },
 *   {
 *   	"url": "Aiden",
 *   	"lastModified": null,
 *   	"changeFrequency": "",
 *   	"priority": null,
 *   	"title": "Aiden Johnson",
 *   	"pageName": "Aiden's page"
 *   },
 *   {
 *   	"url": "Jess",
 *   	"lastModified": null,
 *   	"changeFrequency": "",
 *   	"priority": null,
 *   	"title": "Jess White",
 *   	"pageName": "Jess's page"
 *   },
 *   {
 *   	"url": "Morgan",
 *   	"lastModified": null,
 *   	"changeFrequency": "",
 *   	"priority": null,
 *   	"title": "Morgan James",
 *   	"pageName": "Morgan's Page"
 *   }
 * ]
 */

Get the sitemap for a prefix

routerSitemap

WixRouterSitemapEntry

Fulfilled - A list of sitemap entries.
Rejected - The error that caused the rejection.

# Introduction
To use the site module, import `wixSiteFrontend` from the `wix-site-frontend` module:

   ```javascript
   import wixSiteFrontend from 'wix-site-frontend';
   ```

 The APIs in `wix-site-frontend` can only be used in front-end code.

velo_wix-site-frontend

Gets how frequently the page is likely to change.

The value of the `changeFrequency` property provides general information to
search engines and may not correlate exactly to how often they crawl the page.

Valid values:

+ `"always"`
+ `"hourly"`
+ `"daily"`
+ `"weekly"`
+ `"monthly"`
+ `"yearly"`
+ `"never"`

changeFrequency

Gets when the page data was last modified.

lastModified

pageName

Gets the priority of this URL relative to other URLs on your site.

The value of the `priority` property lets search engines know which pages
you deem most important. Its value does not affect how your pages are
compared to pages on other sites.

Valid values range from 0.0 to 1.0.

The default priority of a page is 0.5.

priority

number

title

Gets a code representing the site's currency.

The retrieved currency code corresponds to the currency that has been
 entered in the General Info section of your site's Dashboard.

 The currency is used your site, apps (e.g. Wix Stores, Wix Bookings), and other 
 Wix features.

import wixSiteFrontend from 'wix-site-frontend';

// ...

const currency = wixSiteFrontend.currency; // "USD"

Get the site's currency

currency

Gets information about the current page or lightbox.

import wixSiteFrontend from 'wix-site-frontend';

// ...

const currentPage = wixSiteFrontend.currentPage;

/*
 *  {
 *    "name": "Home",
 *    "type": "static",
 *    "url": "/home",
 *    "isHomePage": true
 *  }
 */

Get information about the current page

import wixSiteFrontend from 'wix-site-frontend';

// ...

const currentLightbox = wixSiteFrontend.currentPage;

/*
 *  {
 *    "name": "Welcome (Full Screen)"
 *    "type": "lightbox"
 *  }
 */

Get information about the current lightbox

currentPage

StructurePage

StructureLightbox

Gets a code representing the site's language.

The retrieved language code corresponds to the main site language 
 as found in the General Info section of your site's Dashboard.

 > **Note:** If you have a multilingual site, and it is being viewed in a language
 that is not the main site language, the `language` property still returns
 the main site language. To work with the languages of a multilingual site,
 use the [Multilingual API](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/multilingual/introduction).

import wixSiteFrontend from 'wix-site-frontend';

// ...

const language = wixSiteFrontend.language; // "en"

Get the site's language

language

Gets the site's regional settings.

The retrieved regional settings corresponds to the regional settings
 that has been entered in the General Info section of your site's Dashboard.

 The regional settings are used to determine how numbers, dates, and currencies 
 are displayed on your site.

import wixSiteFrontend from 'wix-site-frontend';

// ...

const regionalSettings = wixSiteFrontend.regionalSettings; // "en-us"

Get the site's regionalSettings

regionalSettings

Gets the site revision ID.

The site revision ID is a unique identifier for the current revision of
 your site. Each time you manually save your site or publish your site
 following a change, a new revision is created.

You can view and manage your site revisions in your [Site History](https://support.wix.com/en/article/viewing-and-managing-your-site-history).
You can use [site monitoring](https://support.wix.com/en/article/about-site-monitoring#site-revisions) to
monitor and debug new revisions of your site.

 > **Notes:** 
 > + Since publishing your site may change the revision ID, the ID when
 >   previewing your site may be different than the ID for the published site.
>
>
> + The site revision ID is guaranteed to be unique, but not meaningful.
>   Therefore, you cannot predict future revision IDs before they are created.

import wixSiteFrontend from 'wix-site-frontend';

// ...

const revision = wixSiteFrontend.revision; // "4x2y"

Get the site revision ID

revision

Gets the site's timezone.

The retrieved timezone is the timezone that has been
 entered in the General Info section of your site's Dashboard.

 The timezone is used your site, apps (e.g. Wix Stores, Wix Bookings), and other 
 Wix features.

import wixSiteFrontend from 'wix-site-frontend';

// ...

const timezone = wixSiteFrontend.timezone; // "America/New_York"

Get the site's timezone

timezone

wixRouterSitemapEntry

The names of the lightboxes in your site to prefetch 
 resources for.

 > **Note:** Pages are listed by relative or absolute URL, but lightboxes are listed by name. 
 See [`wix-location.to()`](wix-location.html#to) to learn how to find a page's relative 
 URL. You can find a lightbox's name by selecting the lightbox and clicking the settings button.

lightboxes

The relative or absolute URLs of the pages in your site
 to prefetch resources for.

pages

errors

PrefetchResultError

message

The names of the lightbox for which prefetch failed.

The names of the pages for which prefetch failed.

Prefix

If the prefix is an app's prefix, the `applicationId` property is the app's ID.

applicationId

name

prefix

The type of the prefix.
 
 A site's routers, dynamic pages, and app pages all have prefixes.

 One of: 

 + `"dynamicPages"`
 + `"router"`
 + `"app"`

type

The pages of the site.
 Pages can be regular pages, dynamic pages, router pages, or pages from an app.

The prefixes of the site's routers and dynamic pages.

prefixes

If the page is an app page, the `applicationId` property is the app's ID.

If the page is the Home page, `isHomePage` is `true`. Otherwise, it does not exist.

isHomePage

boolean

If the page is a router or dynamic page, the `prefix` property is the page's prefix.

The type of the page: `"static"` or `"template"`.

The URL of the page. If the page is a `static` page the `url` property is the page's SEO URL.