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)

links

Sets the page's SEO-related link tags.

Use the `setLinks()` function to set a page's SEO-related link tags which provide additional
 SEO information about your page. For example, you can set a link to a canonical
 or alternate version of the current page.

 The links you set overwrite any link information set earlier.

> **Notes:**
> * You should always set the links inside the [`onReady()`]($w.html#onReady) event handler to ensure search engines can read it.
>
> * You cannot add a stylesheet link using the `setLinks` function.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

$w.onReady( () => {
  wixSeoFrontend.setLinks(
    [
      {
        "rel": "canonical", 
        "href": "http://mysite.com/cononical_version"
      }, {
        "rel": "author", 
        "href": "http://mysite.com/janedoe"
      }
    ]
  )
  .then( () => {
    console.log("links set");
  } )
  .catch( () => {
    console.log("failed setting links");
  } );
} );

Get a page's link tags

setLinks

void

metaTags

Sets the page's SEO-related meta tags.

The `setMetaTags()` function creates SEO-related meta tags in the head of the page.

 The keys in the specified `metaTags` objects represent the keys in the tag, while the values in the
 `metaTags` object represent the values in the tag.

 For example:

 ```javascript
 {
   "property": "og:image",
   "content": "https://.../Wix+logo.jpg"
 }
 ```

Produces:

 ```html
 
 ```

 When setting `og:image` meta tags, the `content` can be and external image URL
 or a Media Manager image URL as described [here]($w.Image.html#src).

 The meta tags you set overwrite any meta tag information set earlier.
> **Notes:**
> * Do not use `setMetaTags()` to create tags for the title. Use the [`setTitle()`](#setTitle) function instead.
>
> * You should always set the `metaTags` inside the [`onReady()`]($w.html#onReady) event handler to ensure search engines can read it.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

$w.onReady( () => {
  wixSeoFrontend.setMetaTags(
    [
      {
        "name": "robots",
        "content": "noindex"
      }, {
        "property": "og:image",
        "content": "wix:image://v1/6...2.jpg/a.jpg#originWidth=970&originHeight=120"
      }
    ]
  )
  .then( () => {
    console.log("meta tags set");
  } )
  .catch( () => {
    console.log("failed setting meta tags");
  } );
} );

Set a page's meta tags

setMetaTags

List of structured data objects in the JSON-LD format as defined by [schema.org](https://schema.org/docs/schemas.html).

structuredData

Sets the page's structured data.

The structured data on your page helps search engines understand more about
 your page and your business so they can display a richer snippet of your pages
 in search results.

 The structured data you set overwrites any structured data information set earlier.

 > **Note:**
  You should always set the structured data inside the [`onReady()`]($w.html#onReady) event handler to
  ensure search engines can read it.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

$w.onReady( () => {
  wixSeoFrontend.setStructuredData(
    [ 
      {
        "@context": "http://schema.org",
        "@type": "Organization",
        "name": "My Organization Name",
        "url": "https://www.myorgdomain.com"
      },
      {
        "@context": "http://schema.org",
        "@type": "Person",
        "email": "mailto:john.doe@somedomain.com",
        "jobTitle": "Professor",
        "name": "John Doe",
        "telephone": "(555) 555-555"
      }
    ]
  )
  .then( () => {
    console.log("structured data set");
  } )
  .catch( () => {
    console.log("failed setting structured data");
  } );
} );

Set a page's structured data

setStructuredData

Fulfilled - When the structured data is set.

title

string

Sets the page's title.

Setting a proper `title` is important to let search engines determine the topic of your page.
> **Note:**
 You should always set the title inside the [`onReady()`]($w.html#onReady) event handler to
 ensure search engines can read it.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

$w.onReady( () => {
  wixSeoFrontend.setTitle("New Title")
    .then( () => {
      console.log("title set");
    } )
    .catch( () => {
      console.log("failed setting title");
    } );

} );

Set a page's SEO title

setTitle

# Introduction
To use the SEO API, import `wixSeoFrontend` from the `wix-seo-frontend` module:

   ```javascript
   import wixSeoFrontend from 'wix-seo-frontend';
   ```

velo_wix-seo-frontend

Gets the page's SEO-related link tags.

Use the `links` property to get a page's SEO-related link tags which provide additional
 SEO information about your page. For example, the tags may contain a link to a canonical
 or alternate version of the current page.

> **Note:** 
 You should always invoke the `wixSeoFrontend.links` getter outside of the [`onReady()`]($w.html#onReady) event handler to
 ensure receiving the proper response.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

let links = wixSeoFrontend.links;

/* links:
 *
 * [
 *   {
 *     "rel": "canonical", 
 *     "href": "http://mysite.com/canonical_version"
 *   }, {
 *     "rel": "author",  
 *     "href": "http://mysite.com/janedoe"
 *   }
 * ]
 */

import wixSeoFrontend from 'wix-seo-frontend';

// ...

let metaTags = wixSeoFrontend.metaTags;

/* metaTags:
 *
 * [
 *   {
 *     "name": "robots",
 *     "content": "noindex"
 *   }, {
 *     "property": "og:image",
 *     "content": "wix:image://v1/6...2.jpg/a.jpg#originWidth=970&originHeight=120"
 *   }
 * ]
 */

Get a page's meta tags

MetaTag

Gets the page's structured data.

The structured data on your page helps search engines understand more about
 your page and your business so they can display a richer snippet of your pages
 in search results.

 Set the structured data with a list of structured data objects in the JSON-LD format
 as defined by [schema.org](https://schema.org/docs/schemas.html).
> **Note:**
 You should always invoke the `wixSeoFrontend.structuredData` getter outside of the [`onReady()`]($w.html#onReady) event handler to
 ensure receiving the proper response.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

let structuredData = wixSeoFrontend.structuredData;

/* structuredData:
 *
 * [ 
 *   {
 *     "@context": "http://schema.org",
 *     "@type": "Organization",
 *     "name": "My Organization Name",
 *     "url": "https://www.myorgdomain.com"
 *   },
 *   {
 *     "@context": "http://schema.org",
 *     "@type": "Person",
 *     "email": "mailto:john.doe@somedomain.com",
 *     "jobTitle": "Professor",
 *     "name": "John Doe",
 *     "telephone": "(555) 555-555"
 *   }
 * ]
 */

Get a page's structured data

object

Gets the page's title.

The `title` is an important factor that lets search engines determine the topic of a page.
> **Note:** 
 You should always invoke the `wixSeoFrontend.title` getter outside of the [`onReady()`]($w.html#onReady) event handler to
 ensure receiving the proper response.

import wixSeoFrontend from 'wix-seo-frontend';

// ...

let title = wixSeoFrontend.title; // "Page Title"

Get the SEO title

href

The relationship of the linked resource to the current page.