---
title: Fliplet VS Code extension
description: "Install, authenticate, and use the Fliplet VS Code extension to develop Fliplet apps directly from your editor."
type: how-to
tags: [code, extension, setup, usage]
v3_relevant: true
deprecated: false
---
# Fliplet VS Code extension

Install, authenticate, and use the Fliplet VS Code extension to develop Fliplet apps directly from your editor.

## Setup

### Prerequisites

Before getting started, ensure you have the following installed on your machine:

- [Visual Studio Code](https://code.visualstudio.com/)
- Node.js (version 12 or higher)
- Fliplet CLI

### Installation

1. Open Visual Studio Code.
2. Navigate to the Extensions panel (`Ctrl+Shift+X`).
3. Search for `Fliplet` and click **Install**.
4. Once installed, you'll find the Fliplet icon on the Activity Bar. Click it to access the extension's features.

### Initial Configuration

To link the extension with your Fliplet account:

1. Open the Fliplet panel.
2. Click on the **Fliplet: Login** button.
3. Enter your Fliplet credentials to authenticate.

## Usage

### Working with Projects

1. Once you've logged in, you can find your projects in the Fliplet panel.
2. You can open project files in VS Code and make changes.

### Extending App Features

Developers can also use the Fliplet VS Code extension to manage and extend features like app navigation, custom themes, and data source integration. The integration with Fliplet Studio allows for real-time collaboration with your team.

## Video Tutorial

<iframe width="560" height="315" src="https://www.youtube.com/embed/BrFPgyxjut0?si=qA5rgAWIpErGLybB" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>