Skip to main content
Understand how Rocket works, then apply these best practices to prompt clearly, fix issues confidently, and ship without surprises.

​
How Rocket works

​
The mental model

Rocket turns your ideas, Figma designs (web only), templates, or images into working apps. Six ways to start: From an idea, from Figma (web), from a URL, from an attachment, using templates, or from a remix link.

​
What Rocket generates

Rocket creates a complete, working app:
  • Web apps: React or Next.js apps that run in browsers
  • Mobile apps: Flutter apps for iOS and Android
  • Full codebase: All source files, components, and configurations
  • Production-ready: Code you can deploy, customize, and scale

​
The workflow loop

Once your app is generated, you enter an iterative cycle: Chat to make changes, Preview to validate, Code View to take control, and Launch to share. Every step feeds back into the cycle. You can jump between chat, preview, and code view at any time.
  • Use Chat to request structure or logic changes
  • Use Preview to spot layout or visual issues quickly
  • Use Code View when you need precise control or handoff-ready code
Idea/Figma/Template → Generate → Chat → Preview → Code View → Launch
                                 ↑                                    ↓
                                 └────────── Iterate ─────────────────┘

​
Best practices

​
1. Be clear with prompts

Rocket builds what you ask for. The clearer your instructions, the better the result. What to include:
  • Exact page or screen name (e.g., /pricing, /auth/login)
  • What should appear or happen
  • What should stay untouched
Good prompt: 
Create a pricing page with three horizontally spaced plans. Each should have a name, price, feature list, and call-to-action.
Too vague: 
Make a pricing page with cards.

​
2. Start with templates

Rocket templates provide tested structure, proven layouts, and common patterns. Templates are free to use with no tokens required.
  • Browse from the homepage or profile menu
  • Get suggestions in chat when your prompt matches a known use case
  • Preview screens and structure before committing
Even if you do not use a template exactly, they are great for inspiration and understanding common app patterns. Explore templates.

​
3. Define app structure first

Plan your app architecture before building. A clear structure saves time and prevents messy refactoring. What to plan:
  • Main pages or screens and how they connect
  • User flows and navigation paths
  • Data models and relationships
  • Key features and where they live
  • Authentication and role-based access needs
Why it matters:
  • Build with purpose instead of adding features randomly
  • Navigation and routing make sense from day one
  • Data flows are logical and easier to connect to Supabase or APIs
  • Avoid major restructuring mid-build
Sketch a simple flow diagram or list your screens before your first prompt. Even a rough outline helps Rocket build a more coherent app structure.

​
4. Iterate in small steps

Build incrementally instead of creating everything at once. Small, focused changes are easier to test, debug, and refine.
  • Start with core functionality, then add features one by one
  • Build one screen or component at a time
  • Test each addition before moving to the next
  • Save checkpoints along the way
Break large requests into smaller prompts. Instead of “build a full e-commerce site,” start with “create a product listing page,” then add cart, checkout, and payment flows step by step.

​
5. Tweak with Visual Edit (web only)

Use Visual Edit to adjust layout, spacing, text, and element order. These changes are safe, fast, and token-free.
Visual Edit currently supports the web browser only.

​
6. Use commands and context

/ commands Type / in chat to open the command palette. Popular commands:
  • /Generate image: Generate images without leaving Rocket
  • /Set up Google Analytics: Wire GA tracking to measure usage
  • /Fix layout issues: Straighten columns, spacing, or alignment
  • /Update content: Refresh copy without hunting down every text block
  • /Update App Logo: Update app logo across the project in one move
Browse all available commands to see 100+ options. @ commands Use @ to pick the exact file or component, then describe the change in plain language. Example: @header remove the hero image and add pricing cards.
Combine / commands with @ to scope edits and launch precise changes without hunting through the canvas.

​
7. Connect Supabase carefully

Supabase is powerful, but schema changes can break things if not managed properly.
  • Connect Supabase after getting the desired output
  • Avoid reverting versions with a live schema
  • Test connected flows before publishing
Set up your app structure first, then connect Supabase once you are happy with the core functionality.

​
8. Know when to rebuild

When fixes keep failing or logic becomes too complex, start fresh instead of untangling spaghetti code. Rebuild when:
  • Multiple fixes keep failing or reintroduce bugs
  • Logic is deeply nested and hard to reason about
  • Schema reverts keep breaking your data model
Screenshot the good parts, save the prompt, then relaunch with a clean slate.

​
9. Test on multiple devices and browsers

Use the Preview panel to test different viewport sizes. Then test on real devices (desktop browsers, iOS, Android) before going live. This catches layout issues early and ensures your app works everywhere.

​
10. Use the docs and ask for help

If you are stuck:

​
Additional tips

  • Custom domain: Connect through Netlify when you are ready to go live
  • Low on tokens: Top up mid-cycle instead of changing plans
  • Code ownership: You always own 100% of the output
  • Slow generation: Break requests into smaller prompts and preview in batches
  • Multiple roles: Mention the role in every command so Rocket scopes the change correctly
  • Save frequently: Your projects auto-save, but you can manually save checkpoints for important milestones