Skip to main content
In this guide, you’ll learn how to:
  • Start a project using a written idea.
  • Use a Figma design to generate a project.
  • Upload an image to visually guide Rocket and kickstart your build.

​
Before you begin

You’ll need:
  • You’re signed in to Rocket.

​
Project visibility: Public vs Private

  • Free users:
    All projects are Public. Public projects appear under Built with Rocket in Resources on the landing page before you sign in. Anyone can view the preview. To make a project Private, upgrade to a paid plan.
    Homepage showing Built with Rocket gallery under Resources for public project discovery.

    Built with Rocket

  • Paid users:
    New projects are Private by default. You can switch to Public at any time to share more broadly.
Change visibility in two places:
  • Before you start a project:
    On the homepage, a visibility toggle appears at the right side of the input field. Paid users can set Public or Private here.
    Homepage visibility toggle next to the input field for choosing Public or Private before starting a project.

    Visibility on homepage

  • Inside an existing project:
    Open the dropdown next to the app name and select the visibility you want.
    Project header with a dropdown next to the app name for switching visibility.Project header with a dropdown next to the app name for switching visibility.

    Visibility in project

​
Let’s build your first project

Choose the method that fits your workflow.

​
Method 1: Start from an idea

1

Go to Rocket

Visit rocket.new and sign in.
Homepage with the idea input field ready to receive a prompt.

Signed-in Homepage

2

Describe what you want to create

Type your idea in the chat prompt. Be clear about the goal and key features.Example: Users share one thing they’re grateful for each day and link entries in a visual chain. Show a timeline view with color-coded links.
Chat prompt where you enter your app idea for Rocket to build from.

Enter idea

3

Select a use case

Choose the type of build. Options include Mobile App, Web App, Internal Tool, Website, Dashboard, and Landing Page.
Prompt asking you to select a usecase.Prompt asking you to select a usecase.

Choose use case

4

Choose platform for Internal Tool

If you selected Internal Tool, pick Web or Mobile.
Prompt asking you to choose Web or Mobile to continue building the internal tool.Prompt asking you to choose Web or Mobile to continue building the internal tool.

Select platform

5

Select your framework

Rocket recommends a framework based on platform. You can accept the default or customize it.For Web App:
Default stack:
  • React
  • JavaScript
  • Tailwind CSS
You can:
  • Click Use default framework to proceed.
    Dialog showing the default Web App stack with React, JavaScript, and Tailwind CSS, and a button to proceed.Dialog showing the default Web App stack with React, JavaScript, and Tailwind CSS, and a button to proceed.

    Default web stack

  • Or choose Customize framework to adjust the stack.
    Framework customization screen where you can modify the default Web App stack.Framework customization screen where you can modify the default Web App stack.

    Customize web stack

For Mobile App:
Rocket uses Flutter.
6

Choose your screens

Review the suggested screens and deselect any you do not need.
Checklist of suggested screens with checkboxes to include or exclude each one.Checklist of suggested screens with checkboxes to include or exclude each one.

Select screens

7

Watch Rocket build

Rocket generates your app and shows progress for each screen.Status icons:
  • Completed.
  • In progress.
  • Failed.
Screen list showing build progress with Completed, In progress, and Failed indicators.Screen list showing build progress with Completed, In progress, and Failed indicators.

Build progress

Retry a failed screen: Click Retry next to Failed.

​
Method 2: Import from Figma

Turn designs into production-ready code. Convert your Figma files into working apps for web or mobile. Follow these guides:

Create mobile applications with Figma

Create web applications with Figma

​
Method 3: Upload an attachment

Guide Rocket with an image. You can upload a UI mockup, wireframe, or screenshot. This is useful when you want to:
  • Add visual context to your prompt.
  • Start from “Create an app like this.”
Notes:
  • Supported formats: .png, .jpg, .jpeg.
  • Clear UI screenshots or mockups work best.
1

Attach an image

Click at the lower left of the input box to upload an image. You can also drag and drop or paste an image into the chat box.
Keep the file under 5 MB to speed up processing.
Attach button near the input box for uploading an image to guide app generation.

Attach image

2

Add instructions

Describe what you want built. Examples:
  • Create an app like the uploaded image.
  • Use this layout to build a sign-up form.
Example:
Upload a dashboard screenshot and say: Use this as a reference to build the my dashboard app.
3

Generate the app

Press Enter. Rocket builds from your image and prompt.From here, continue as in Method 1, starting at Select your framework. You will choose a stack, select screens, and watch the build progress.

​
Method 4: Use a template

1

Browse templates

Open the menu in the top right and select Templates which autoscrolls to the templates section.
Homepage with profile menu open and Templates selected.

Templates navigation

You can also scroll the homepage after sign-in to find templates below.
Scrolling the homepage to view available templates.Scrolling the homepage to view available templates.

Templates on scroll

Templates are grouped by category:
  • Landing Page
  • Web App
  • Dashboard
  • Mobile App
  • Internal Tool Web
  • And more.
2

Preview a template

Click Learn more to view details, included pages, and layout screenshots.
Template detail view showing screenshots and included pages.Template detail view showing screenshots and included pages.

Template details

3

Use the template

Click Use this template or Make this template yours. Rocket opens the app generation flow with code and preview.
Success check: You land in the chat with your template loaded and a message saying “Template name cloned successfully.”
Note: Using a template does not consume tokens. It is the fastest way to launch a production-ready app.
Stay in the flow. We’ll notify you when it’s ready.
If your build takes longer than a few moments, you’ll hear a sound when the preview is ready. You do not need to keep the tab active.

You did it!

Your Rocket project is live, created from your idea or design.
Need help? We’re here for you.
Email us at support@rocket.new or join our Discord community to get help, share ideas, and connect with other creators.
⌘I