How to Use Tempo

Getting started with Tempo

In this guide, you'll learn how to set up Tempo, a visual IDE for React, and create your first layout. By the end, you’ll be able to collaborate effectively with your team, even if you’re not a coding expert.

Step 1: Sign up and set up

1. Go to Tempo's website.
2. Click on the "Get Started" button located on the homepage.
3. You can sign up using your email or a third-party account like Google. Follow the prompts to create your account.
4. Once signed in, you’ll be taken to your dashboard. Here, you can start a new project by clicking the "+ New Project" button.

Step 2: Your first layout

1. After creating your project, you’ll see the visual editor interface.
2. On the left sidebar, drag and drop elements (like buttons, images, and text boxes) onto the canvas in the centre.
3. Click on each element to customise properties such as size, colour, and text in the right-side properties panel.
4. Once your layout is ready, click on the “Preview” button at the top right to see how it looks in an actual browser view.
5. If you're happy with it, click the "Export Code" button to download your layout as React components.

Step 3: Get better results

1. Use the "Grid" feature from the top menu to align your elements neatly. This helps maintain a clean layout.
2. Familiarise yourself with the "Style" tab in the properties panel to adjust margins and paddings for a polished look.
3. Regularly save your work by clicking the “Save” button in the top right corner.
4. For more complex layouts, consider using the “Components” library on the left sidebar to access pre-made components that you can easily integrate.

Pro tip

Most beginners overlook the "Collaboration" feature in the top menu. You can invite team members directly by clicking on “Invite” and entering their email addresses. This allows real-time collaboration and feedback.

Common mistake to avoid

Avoid dragging elements too close together without using the grid. This can lead to misaligned layouts that are hard to fix later. Always use the grid for alignment as you build your design.