Getting started

This article explains how to get started with Contza. By end of this page, you will have Contza ready to be used in your React application.

Create Contza website

Let's start things by Creating a Contza account (opens in a new tab). After you have logged in to your account make sure you are on My websites (opens in a new tab) page. Then click "Create website" button on the top right corner. Give the website a name and a slug. Slug is just a human readable identifier for the website.

Install packages

Install Contza React component library (required).

yarn add @contza/react

If you would like to use features such as Static site generation (SSG) or Server-side rendering (SSR), you should also install @contza/client (optional).

yarn add @contza/client

Setup Contza Provider

Wrap you React application with <ContzaProvider /> component. Contza Provider basically shares it's context with all the other Contza components.

Finalize the installation by adding the websiteId prop for ContzaProvider. You can found it from My Websites -> Your Website -> Settings -> API Access

import React from "react";
import { ContzaProvider } from "@contza/react";
 
const App = () => {
  return (
    <ContzaProvider websiteId="your-website-id">
      {/* Rest of the app */}
    </ContzaProvider>
  );
};
 
export default App;

Congratulations, you now have Contza fully setup to your project.

Now you can start adding Contza components to make your content editable!