Navigate Fliplet Studio

How to find a project in Fliplet Studio, move between Build, Design, and Code, open the project tools, and get back to Home.

Fliplet Studio is the website where you build and publish your projects. This page shows you how to find a project, move around inside it, and get back to Home.

This page applies to Fliplet Studio in a browser on a computer, for builders with Full Access or Editor Access. If you can't find something covers what changes with Preview Only access.

Before you start

Sign in to Fliplet Studio at https://studio.fliplet.com/signin.
Use a computer. Fliplet Studio is built for larger screens.
Check your access level. Each collaborator on a project has one of three levels: Full Access (edit and publish), Editor Access (edit), or Preview Only (preview).
Check which kind of project you have. This page covers projects with no Drag & Drop tag on their card, which open at /projects/ followed by the project ID. Projects tagged Drag & Drop open at /apps/ followed by the project ID, in what Home calls the classic drag & drop builder. This page doesn't cover that builder.

Open a project

Go to https://studio.fliplet.com/home.
If the Your projects list is long, enter the project name in Search my projects.
Select the project name.

To check it worked, look for the project name at the top of the window. The address ends in /projects/ and the project ID.

All lists your current projects, and Archived lists archived ones.

Switch between Build, Design, and Code

A project has three modes, and the buttons for them are in the header.

Mode	What you see
Build	The chat panel, with New conversation, Version history, and the chat box
Design	Theme settings, for colors, fonts, corner radius, and surface shadow
Code	The project's files under Explorer, a Search tab, and the code editor

If Design or Code has unsaved changes, or the AI is still working in Build, Studio asks what to do before it switches. Going ahead while the AI is working stops the build.

Select Build, Design, or Code in the header.

To check it worked, look for the highlighted mode. The address ends in /design for Design, /code for Code, and the project ID for Build.

Open a project tool

The project sidebar holds the tools for the project. Its buttons show only icons, so hover over one to see its name.

Button	What it opens
Settings	Project settings: General, SEO, API Tokens, Sign-in, SAML2, Manage Queue, and Reports
Data Sources	The data sources this project uses, with Show all data sources to see others
Files	The file manager
Actions	Action Builder, for "Automations and scheduled workflows for this project."
Analytics	Overview, Engagement, and Communications
Support chat	Live chat

Select a button in the project sidebar.
When you're done, select the close control at the top of the panel.

You can also close a panel with Esc, or by selecting outside it. Selecting the project name in the header opens the same Settings panel.

The SEO tab always shows, but its contents depend on your organization's plan. On self-serve plans, an upgrade button sits next to Support chat in the project sidebar. Enterprise and admin-assigned plans don't show it.

Use the preview controls

Once a project has a preview, it shows beside the panel in every mode, and its controls sit in the header. The controls include Refresh preview, Open in new tab, Full Screen, Mobile, Tablet, Desktop, a rotate button, and zoom.

Hover over the wrench icon to open Preview Control, which has Enforce security and Reset session. For how to test a project, see Preview and test an app.

Invite people and publish

Two buttons in the header lead to sharing and publishing.

Invite opens Manage Collaborators, with Invite and Manage access tabs.
Publish opens Publish your project, which lists Web, Fliplet Hub, and App stores. Opening it doesn't publish anything.

Find earlier versions

In Build mode, select Version history. The list replaces the chat and groups versions by date. The latest is marked Current, and earlier ones have Preview and Restore.

Go back to Home

If the AI is still working, or you have unsaved changes in Design or Code, Studio asks what to do before you leave. Going ahead while the AI is working stops the build.

Select Home in the project sidebar.

To check it worked, look for Your projects. The address ends in /home.

Use the Home top bar

The top bar on Home has Home, Data Sources, Files, your name with your organization, and a notifications bell. Data Sources and Files here aren't limited to one project. A Help button sits at the foot of the page.

Select your name to open a menu with Account settings, your organizations, and Log out. A check marks the current organization. Selecting another one switches to it and reloads Home.

Under All, with Full Access or Editor Access, each project card has Edit, Analytics, Notifications, and More. With Preview Only access, a card shows [UNVERIFIED: "Preview" label seen in code only] "Preview" in place of Edit, with no Analytics or Notifications, and a project with no Drag & Drop tag has no More.

On a project with no Drag & Drop tag, More has Rename, Duplicate, and Manage users. With Full Access, it also has Audit log and Archive.

If you can't find something

What's missing	Why
A project in Your projects	Clear the search, then check Archived. An archived project's card has a restore option in place of the usual links. See Create and manage projects. [UNVERIFIED: whether Your projects lists only the current organization's projects]
Publish in the editor	Editor Access shows everything in the editor except Publish.
Project sidebar tools, modes, chat, Invite, and Publish	Preview Only access leaves Home, the project name, and the preview with its controls. Support chat doesn't show either.
Preview controls, Invite, and Publish	These don't show until a project has a preview. In Build, the mode buttons don't show until then either.
The text on Invite, Publish, Build, Design, or Code	When the header is short of space, because of a narrow window or a wide chat panel, Invite and Publish become icons first, then the modes. Each icon has a tooltip.
The layout on this page	A project tagged Drag & Drop opens at `/apps/` followed by the project ID, which this page doesn't cover.