Home

CLI

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

Install the CLI

With NPM

npm i @tipe/cli -g

With YARN

yarn global add @tipe/cli

Initialize Tipe

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

tipe init

After the initcommand has finished, you will have the following:

  1. A 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 seeeded 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 you 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 {getStaticCotent, 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 getStaticContentprovides 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}
<EditButton editUrl={editUrl} />
</div>
)
}

All together

import {getStaticCotent, EditButton} from '@tipe/next'
const MyHomePage = ({documents, editUrl}) => {
return (
<div>
<h1>{documents[0].fields.title}
<EditButton editUrl={editUrl} />
</div>
)
}
export default MyHomePage
export const getStaticProps = getStaticContent({query: {type: 'homePage', limit: 1}})

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