getting-started

Quickstart

Last updated Invalid Date

Tipe is super easy to get started with. This guide will show you how to hook up a plain JavaScript app to your Tipe Org and assumes you have nothing in your project, just a local empty folder.

Set up a Document in Tipe

This section includes written, step-by-step instructions with screenshots for the first part of the Quickstart followed by a video walkthrough of the same steps.

Step-by-step instructions

First, make sure you have a Tipe account. When you sign up, Tipe will walk you through creating an Org. Once you're in the Tipe dashboard, create a Document called Home page.

Create New Document Screenshot

In your new blank Document, name it by clicking on New Document. Add a Simple Text Block with some content; for example "My new header". To add elements to your Document, click on plus icon.

New Document Screenshot

Setting up a Document video

Add Blocks to your Document

This section offers written instructions followed by a video that shows the same process.

Step-by-step instructions

Add a Group Block called hero. Within the hero Group Block, add three Simple Text Blocks; one each for a header, some text, and a CTA. Call them heading, description, and cta. Add some content to each Block. Any words will do — you just need something to pull into your app later. Save.

Video walkthrough of adding Blocks

Set up your local app

After setting up a Document and some Blocks in Tipe, you must configure your local app.

Create an index.html

In your empty project folder, create an index.html and add the following markup:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
  <title>Getting Started</title>
</head>
<body>
  <section class="hero">
    <div class="hero-body">
      <div class="container">
        <h1 id="hero-title"></h1>
        <h2 id="hero-description"></h2>
        <button id="hero-cta"></button>
      </div>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h1 class="title">Section1</h1>
      <h2 class="subtitle section-1"></h2>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h1 class="title">Section2</h1>
      <h2 class="subtitle section-2"></h2>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <h1 class="title">Section3</h1>
      <h2 class="subtitle section-3"></h2>
    </div>
  </section>

  <script src="./index.js"></script>
</body>
</html>

Then, create an index.js file and paste the following into it. You'll need your API Keys. If you need help, see the Authentication guide:

GraphQL
// Tipe GraphQL API
var DOCUMENT_ID = '5aff07b402d8b70013bfe543';
var YOUR_ORG_SECRET_KEY = 'xxxxxxxxxxxxxxx'; // <---- add your Secret Key here
var YOUR_API_KEY = 'xxxxxxxxxxxxx'; // <---- add your API key here

var variables = { id: DOCUMENT_ID }
var query = `
query API($id: ID!) {
  Homepage(id: $id) {
    title
    hero {
      heading
      description
      cta
    }

    _meta {
      id
      name
      updatedAt
      createdAt
      published
    }
  }
}

`

// you need to include a "fetch" polyfill for Safari'
window.fetch('https://api.tipe.io/graphql', {
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': YOUR_API_KEY,
    'Tipe-Id': YOUR_ORG_SECRET_KEY
  },
  body: JSON.stringify({ query: query, variables: variables })
})
  .then(function (res) { return res.json() })
  .then(function (result) {
    var data = result.data;
    console.log(data)
    document.title = data.Homepage.title;
    document.querySelector('#hero-title').textContent = data.Homepage.hero.title;
    document.querySelector('#hero-description').textContent = data.Homepage.hero.description;
    document.querySelector('#hero-cta').textContent = data.Homepage.hero.cta;
  });

This is an example of what Tipe generates for a Document when you click Run GraphQL. For more detailed information, see Generating the Document API in Using Blocks.

Test your project

In the terminal within your project directory, type:

bash
open index.html

When you make changes

Whenever you change the contents of your Document by adding or removing Blocks, you'll need to go to the API tab and get the new code so you can query correctly. Click the API tab and press Run GraphQL. Notice the code that Tipe generates. Click the Copy Example Code button. In your project, add it to your index.js.


Go further

Documents

Covers the basics of Documents.


Blocks

An intro about how Blocks work in Documents.


Folders

Folders help you organize Documents in a familiar file system model.