Create, preview and publish your first app

Build a first project with the AI assistant in Fliplet Studio, check it in the preview, and publish it to a web address.

In this quickstart, you describe an app in your own words, the AI assistant in Fliplet Studio builds it as a project, and you publish that project to a web address you can share. A project is the thing you build and edit in Fliplet Studio.

Prerequisites

This quickstart is for builders using Fliplet Studio, and it publishes to the web.

Sign-in: You need to sign in to Fliplet Studio at https://studio.fliplet.com/home.
Verified email: Publishing needs a verified email address.
Plan: By default, the Free plan doesn't include web publishing, and every other plan does.
Publisher role: Publish shows only for a project's publishers. The person who creates a project gets that role.
Credits: By default, creating a project uses 15 credits, a first publish uses 400 credits, and a first web address uses 10 credits. The AI assistant's work uses credits too, and your balance shows in the chat. Fliplet refuses a first publish if your organization doesn't have enough credits.

The 15 credits for a project and the 400 credits for a published project are charged again at each cycle reset.

Part 1: Describe your app

Open Fliplet Studio Home.
In the box under What should we build?, enter what you want to build. For example, enter Create an incident reporting software for your teams.
Select Start Building.

Checkpoint: Studio creates a new project and opens it, and your description goes to the AI assistant in the chat.

Part 2: Approve the plan

The AI assistant may ask questions before it builds. Before the first build, it shows a plan card in the chat, and it starts building once you approve the plan.

Answer the questions the AI assistant asks in the chat.
Read the plan card in the chat.
Select Approve & Build on the plan card. [UNVERIFIED: Studio UI, label seen only in code because showing the plan card needs a prompt to be sent]
If the AI assistant stops partway and asks you to check parts of the project, try them in the preview and answer on the check card in the chat.
If the AI assistant then offers the next part of the build, select its first option.

If something on the check didn't work, the AI assistant asks what happened instead of offering the next part. You can also stop at the offer: the work so far is saved, you can ask to continue at any time, and you can go on to Part 3 from there.

Checkpoint: When the last part of the build is done, the AI assistant says in one sentence what it built and asks what you'd like to do next. Your project shows in the preview, and Publish appears in the project header.

Part 3: Check it in the preview

The preview runs your project in Fliplet Studio, including its own navigation.

Select Mobile (the phone icon) to see the project at phone size.
Select Desktop (the monitor icon) to see the project at desktop size.
In the chat box, enter one change you want. For example, enter Add a short welcome message to the first screen.
Select Send.

Checkpoint: The preview refreshes when the AI assistant deploys the change. Studio also saves a version after each AI change, which you can find in Version history.

Part 4: Publish to the web

Publish shows as a rocket icon when the project header is narrow. You don't enter a web address: Fliplet creates one from your organization name, your project name, and a random ID.

Select Publish.
Select Web in the Publish window.
Select Publish to Web.
If a dialog offers to continue to another platform, select Stay here. [UNVERIFIED: Studio UI, this dialog and label are seen only in code because showing them needs a publish]
Select Open on the Web card.

[SCREENSHOT: the Web card in the Publish window, with the Published badge and YOUR PROJECT URL]

Checkpoint: The Web card shows the Published badge in place of Not published, YOUR PROJECT URL shows your web address, and the live project opens in a new browser tab.

What you made

You now have a project in Fliplet Studio that you can keep editing, and a published copy at your web address. When you publish, Fliplet takes a snapshot of the project and serves that to your users.

Edits you make after publishing don't reach users until you publish an update. Data edits are the exception: they're live immediately, with no publish needed.

Next steps

To send later edits to users, select Configure update on the Dashboard of the Publish window. An update to a project that's already published doesn't add a new 400-credit charge. For more, see Update, unpublish or retire an app.
To change your web address, or to find out who can open it, see Publish a responsive web app.
To publish somewhere else, select Fliplet Hub, iOS, or Android in the Publish window.
If the AI assistant doesn't build what you expected, see AI Builder does not produce the expected result.
If publishing doesn't work, see Web publishing and custom-domain problems.