CLI

Getting started with Tipe using the CLI is fast and easy.

Install the CLI

With NPM

npmi @tipe/cli -g

With YARN

yarnglobaladd @tipe/cli

Initialize Tipe

Be sure to change directories into your project where you'd like to install tipe. Next, just run the init command from the root of your project's directory.

tipe init

After the init command has finished, you will have the following:

1. An account on Tipe
2. A Tipe project
3. An environment for your project
4. Some seeded content in your environment
5. A seeded schema in your app directory that matches the seeded content in tipe.
6. The Tipe editor installed into your app and ready to be used.

Query your content

Now Let's fetch some content from tipe and use it in your pages. Go to your index page or any page where you want to use some tipe content. Don't worry, at this point, you'll be using seeded content that we created for you, you'll have the chance to change your schema and create new content.

In your page you'll need to import a few things.

import { getStaticContent, EditButton } from '@tipe/next'

To fetch the content, you can use getStaticContent.

export const getStaticProps = getStaticContent({ query: { type: 'homePage', limit: 1 } })

We will then use the props that getStaticContent provides our page component with to render our content and setup our button to edit the page.

const MyHomePage = ({ documents, editUrl }) => {
    return (
        <div>
            <h1>{documents[0].fields.title}</h1>
            <EditButton editUrl={editUrl} />
        </div>
    )
}

export default MyHomePage
export const getStaticProps = getStaticContent({ query: { type: 'homePage', limit: 1 } })

You should now be able to see some content from tipe in your h1 on your page. You will also see an edit button on the bottom right 🎉