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 base URL of the current page.

Premium sites:
 ![Premium site baseUrl](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_baseurl.png "Premium site baseUrl")

 Free sites:
 ![Free site baseUrl](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_baseurl.png "Free site baseUrl")

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

let baseUrl = await wixClient.location.baseUrl();
// Premium site: "https://domain.com/"
// Free site: "https://user_name.wixsite.com/zoo/"
```

Get the base URL of the current page

baseUrl

string

The name of the function or
 the function expression to run when the location changes.

handler

LocationChangeHandler

Adds an event handler that runs when an application page's URL changes.

The event handler set by the `onChange()` function runs when the location is changed
but the change doesn't trigger navigation. This situation occurs when navigating between
subitems on a page that is managed by a full-page application.

For example, a store product page is a full-page application. When a product page's path
changes because it is switching between items, no actual navigation is taking place. You
can use the `onChange()` event handler to determine when a new product is displayed and
perform any necessary partial updates on the current page.

The `onChange()` function can only be used when browser
[rendering](https://support.wix.com/en/article/velo-about-the-page-rendering-process) happens,
meaning you can only use it in frontend code after the page is ready.

To determine if a page is managed by a full-page application, use the `wix-site-frontend`
[`currentPage`](site.html#currentPage) property or [`getSiteStructure()`](site.html#getSiteStructure)
function to retrieve a `StructurePage` object that
corresponds to the page. If the object contains an `applicationId` value, then the
page is managed by a full-page application.

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

await wixClient.location.onChange((location) => {
  let newPath = location.path;
});
```

Get the new location path

onChange

void

Gets the path of the current page's URL.

The path for a regular page is after the  [`baseUrl`](location/baseurl)
If the page is a dynamic page or router page, the [`prefix`](location/prefix) appears after the base URL, before the path.


 Premium sites:
 Path for a regular page, without a prefix: ![Premium site path](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_path.png "Premium site path")
 Path for a dynamic or router page with a prefix: ![Premium site path](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_path_with_prefix.png "Premium site path with a prefix")

 Free sites:
  Path for a regular page, without a prefix: ![Free site path](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_path.png "Free site path")
  Path for a dynamic or router page with a prefix: ![Free site path](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_path_with_prefix.png "Free site path")

```javascript
import { location } from "@wix/site-location";
import { createClient } from "@wix/sdk";
import { site } from "@wix/site";

const wixClient = createClient({ host: site.host(), modules: { location } });

let path = await wixClient.location.path(); // ["elephant"]
```

Get the path of the current page's URL

path

Gets the prefix of a dynamic page's or router page's URL.

Only dynamic pages and router pages have a prefix. The value of the
 `prefix` property for other page types is always `undefined`.

 Premium sites:
 ![Premium site prefix](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_prefix.png "Premium site prefix")

 Free sites:
 ![Free site prefix](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_prefix.png "Free site prefix")

 To learn more about dynamic page prefixes, see [About URL Prefixes and Page Grouping of Dynamic Pages](https://support.wix.com/en/article/about-url-prefixes-and-page-grouping-of-dynamic-pages).

 To learn more about router page prefixes, see [About Routers](https://support.wix.com/en/article/about-routers#url-prefix).

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

let prefix = await wixClient.location.prefix(); // "mammals"
```

Get the prefix of the current page's URL

prefix

Gets the protocol of the current page's URL.

Premium sites:
 ![Premium site protocol](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_protocol.png "Premium site protocol")

 Free sites:
 ![Free site protocol](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_protocol.png "Free site protocol")

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

let protocol = await wixClient.location.protocol(); // "https"
```

Get the protocol of the current page's URL

protocol

Gets an object that represents the query segment of the current page's URL.

Premium sites:
 ![Premium site query](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_query.png "Premium site query")

 Free sites:
 ![Free site query](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_query.png "Free site query")

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

let query = await wixClient.location.query(); // {"species": "african-elephant"}
```

Get the query of the current page's URL

```javascript
import { location, queryParams } from "@wix/site-location";
import { createClient } from "@wix/sdk";
import { site } from "@wix/site";

const wixClient = createClient({ host: site.host(), modules: { location, queryParams } });

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("addButton").addEventListener("click", async (event) => {
    const key = document.getElementById('addKey').value;
    const value = document.getElementById('addValue').value;
    if (key && value) {
      const toAdd = { [key]: value };
      await wixClient.queryParams.add(toAdd);
      document.getElementById('addKey').value = '';
      document.getElementById('addValue').value = '';
    }
  });

  document.getElementById("removeButton").addEventListener("click", async (event) => {
    const paramToRemove = [document.getElementById('removeKey').value];
    await wixClient.queryParams.remove(paramToRemove);
    document.getElementById('removeKey').value = '';
  });

  document.getElementById("getButton").addEventListener("click", async (event) => {
    const query = await wixClient.location.query();
    if (query) {
      document.getElementById('getText').value = JSON.stringify(query, null, 2);
    }
  });
});
```

Note: It's easiest to test this example in a published version of your site. If you test using preview, you will see a lot of extra query parameters from the Editor URL.
 You can test out the code in our [example template](https://manage.wix.com/edit-template/from?originTemplateId=a0d93d05-628d-47e1-9476-337899e39c10&templateId=4d236c8a-3fe4-4aa1-87fa-d5663d866420&autoDevMode=true).

Add, update, remove, and get URL query parameters

query

object

The URL of the page or website to navigate to.

Options to use when navigating to the specified URL, such as scrolling options.

options

NavOptions

Directs the browser to navigate to the specified URL.

The `to()` function navigates the browser to another web page.

 The `to()` function can only be used when browser
 [rendering](https://support.wix.com/en/article/velo-about-the-page-rendering-process) happens,
 meaning you can only use it in frontend code after the page is ready.

 The following link patterns are supported:

 + `/localPageURL`: Another page on your site.
 + `/localPageURL#`: Another page on your site scrolled to the
    element with the specified ID. The element must be an element that supports
    the [`scrollTo`](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/docs/velo/api-reference/$w/node/scroll-to) function.
 + `/localPageURL?queryParam=value`: Another page on your site with query parameters.
 + `/`: Your site's home page.
 + `http(s)://`: An external web address.
 + `wix:document://`: A document stored in the Media Manager.
 + `mailto:@?subject=`: An email.
 + `tel:`: A phone number.


 To find the local URL of a page on your site in the Editor:

 + Regular page: See the **SEO** tab of the **Page Settings** panel.
 + Dynamic page: See the **Page Info** tab of the **Page Settings** panel
   for the URL structure. The actual URL used for navigation needs to contain
   values where the placeholders are.

   For example, if the URL structure of your dynamic page looks like:

   ![Dynamic Page URL](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_dynamic_url.png "Dynamic Page URL")

   and you have an item with the title "Waffles", the local URL to that page
   is /Recipes/Waffles.
 + Router page: You cannot navigate directly to a specific router page. You
   can navigate to a URL with the router's prefix and the router code
   decides which page to route to.

 By default, when navigating to a new URL for a Wix page, the page scrolls to the top. Set
 the `disableScrollToTop` navigation parameter property to `true` if you want the
 page to remain at the current Y-axis position as the previously-viewed page.

 The `to()` function attempts to properly encode the URL parameter that
 is passed to it. For example, `.../some page` is encoded to
 `.../some%20page`. However, some URLs do not have one unambiguous encoding.
 In those cases it is up to you to encode the URL to reflect your intentions.
 Because of these situations, it is a best practice to always encode URLs
 before you pass them to the `to()` function.

 Note that Wix URLs do not contain spaces. A page which has spaces in its
 name has its spaces replaced with dashes (`-`). Similarly, a dynamic page
 whose URL contains the value of a field in your collection with spaces
 has its spaces replaced with dashes (`-`).

 > **Note:** The `to()` function does not work while previewing your site.

```javascript
import { createClient } from "@wix/sdk";
import { site } from "@wix/site";
import { location } from "@wix/site-location";

const wixClient = createClient({
  host: site.host(),
  modules: { location }
});

// ...

await wixClient.location.to("/about-me");
```

Navigate to a local link, without automatically scrolling to the top

```javascript
import { createClient } from "@wix/sdk";
import { site } from "@wix/site";
import { location } from "@wix/site-location";

const wixClient = createClient({
  host: site.host(),
  modules: { location }
});

// ...

await wixClient.location.to("/long-page#downUnder");
```

This example assumes you have a page named **Long Page** that has an element
 with the ID `downUnder`.

Navigate to an external web link

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

// ...

await wixClient.location.to("mailto:a@b.com?subject=Something%20Intersting");
```

Open a new email window

```javascript
import { location } from "@wix/site-location";

const wixClient = createClient({ host: site.host(), modules: { location } });

// ...

await wixClient.location.to("wix:document://v1/9bec_52fb06ea/filename.xls");
```

Open a document

```javascript
import { createClient } from "@wix/sdk";
import { site } from "@wix/site";
import { location } from "@wix/site-location";

const wixClient = createClient({
  host: site.host(),
  modules: { location }
});

// ...

await wixClient.location.to("tel:+1-555-555-5555");
```

Make a phone call

Gets the full URL of the current page.

Premium sites:
 ![Premium site URL](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_premium_url.png "Premium site URL")

 Free sites:
 ![Free site URL](https://wixmp-833713b177cebf373f611808.wixmp.com/images/velo-images/media_url_free_url.png "Free site URL")

```javascript
import { createClient } from "@wix/sdk";
import { site } from "@wix/site";
import { location } from "@wix/site-location";

const wixClient = createClient({
  host: site.host(),
  modules: { location }
});

// ...

let url = await wixClient.location.url();
// Premium site: "https://www.domain.com/animals/elephant?species=african-elephant#desc"
// Free site: "https://user_name.wixsite.com/zoo/animals/elephant?species=african-elephant#desc"
```

Get the full URL of the current page

# Introduction
To use the location module, import wixLocationFrontend from the @wix/site-location module:

   ```javascript
   import wixLocationFrontend from '@wix/site-location';
   ```

 The setter functions in `@wix/site-location` can only be used when browser 
 [rendering](https://support.wix.com/en/article/velo-about-the-page-rendering-process) happens,
 meaning you can only use them in frontend code after the page is ready. 
 You can use the getter functions for both server-side or browser rendering.


 The URL is broken into:
 + [`baseUrl`](location/baseurl)
 + [`prefix`](location/prefix), for routers and dynamic pages only.
 + [`path`](location/path)
 + [`query`](location/query)

#### Premium Sites

For premium sites, the URL of the incoming call has the following format:
**`https://www.domain.com/myPrefix/myPath?myQuery=myValue`**

+ **baseUrl**: &nbsp;&nbsp;&nbsp;&nbsp;`https://www.domain.com`
+ **prefix**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`myPrefix`
+ **path**:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `myPath`
+ **query**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`myQuery=myValue`

**Example**: 
**`https://domain.com/animals/elephant?species=african-elephant`**
+ **baseUrl**: &nbsp;&nbsp;&nbsp;&nbsp;`https://domain.com/`
+ **prefix**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`animals`. Only for routers and dynamic pages. 
+ **path**:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `elephant`
+ **query**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`species=african-elephant`

#### Free Sites

For free sites, the URL of the incoming call has the following format:
**`https://user_name.wixsite.com/mysite/myPrefix/myPath?myQuery=myValue`**

+ **baseUrl**: &nbsp;&nbsp;&nbsp;&nbsp;`https://user_name.wixsite.com/mysite`
+ **prefix**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`myPrefix`
+ **path**:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `myPath`
+ **query**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`myQuery=myValue`

**Example**: 
**`https://user_name.wixsite.com/zoo/animals/elephant?species=african-elephant`**
+ **baseUrl**: &nbsp;&nbsp;&nbsp;&nbsp;`https://user.wixsite.com/zoo`
+ **prefix**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`animals`. Only for routers and dynamic pages. 
+ **path**:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; `elephant`
+ **query**: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`species=african-elephant`

 > Learn more about @wix/site-location in [Getting Started](https://www.sbdautomotive.com/ja/wg-cgi/dev.wix.com/docs/velo/articles/getting-started/location-api) and on [Wix Learn](https://www.wix.com/learn/online-course/coding-with-velo/velo-frontend#use-wix-location-api).

site-location

Adds query parameters to the current page's URL.

Adds one or more query parameters to the current page's URL.

 The `add()` function can only be used when browser
 [rendering](https://support.wix.com/en/article/velo-about-the-page-rendering-process) happens,
 meaning you can only use it in frontend code after the page is ready.

 If a specified key already exists as a query parameter, the
 newly specified value will overwrite the key's previous value.

 Calling the `add()` function triggers the [`onChange()`](location.html#onChange)
 event handler if it has been registered.
 > **Note:** To retrieve the page's current query parameters, use the
 [`query`](location.html#query) property.

Removes query parameters from the current page's URL.

Removes one or more query parameters to the current page's URL.

 The `remove()` function can only be used when browser
 [rendering](https://support.wix.com/en/article/velo-about-the-page-rendering-process) happens,
 meaning you can only use it in frontend code after the page is ready.

 If a specified key does not exist as a query parameter, it
 is ignored.

 Calling the `remove()` function triggers the [`onChange()`](location.html#onChange)
 event handler if it has been registered.
 > **Note:** To retrieve the page's current query parameters, use the
 [`query`](location.html#query) property.

remove

QueryParams

Location

event

Whether the page scrolls to the top when navigating to the specified URL for a Wix page. Defaults to `false`. When `true`, the page remains at the same Y-axis position as the previously-viewed page. This setting does not affect scrolling for external URLs.

はじめに

Premium Sites

Free Sites