Skip to main content
Build production-ready apps faster with Rocket. 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. Here’s how it works: Four ways to start: From an idea, from Figma (web), using templates, or from an image. Rocket generates a complete, working app from any starting point.

Project setup options

See the setup choices (use case, stack, screens) before you generate your first project.

​
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

Now that you understand how Rocket works, here are proven practices to build faster and avoid common mistakes.

​
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 example:
Create a pricing page with three horizontally spaced plans. Each should have a name, price, feature list, and call-to-action.
Avoid prompts like:
Make a pricing page with cards.

​
2. Start with templates

Rocket’s template library provides tested structure, proven layouts, and common patterns. Templates are free to use with no tokens required. How to use:
  • 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
Tip: Even if you don’t use a template exactly, they’re great for inspiration and understanding common app patterns.
Explore templates.

​
3. Define app structure first

Plan your app’s 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
Tip: 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. Why small steps work:
  • Each change is easier to verify and fix
  • Focus on one feature or screen at a time
  • Faster feedback loop
How to iterate:
  • 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
Tip: 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.
Web only: Visual Edit currently supports the web browser only.
Great for:
  • Small copy changes
  • Reordering blocks
  • Fast design tweaks
Speed tip: Use prompts for structure, then fine-tune visually.

​
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.
Tip: 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. Play it safe:
  • Connect Supabase after getting the desired output
  • Avoid reverting versions with a live schema
  • Test connected flows before publishing
Best practice: Set up your app structure first, then connect Supabase once you’re 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
Rebuild tip: Screenshot the good parts, save the prompt, then relaunch with a clean slate.

​
9. Test on multiple devices and browsers

Use Rocket’s 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’re stuck, use the resources available. What to do:
  • Browse nearby guides for examples or patterns
  • Adjust the prompt and try a close variation
  • Reach out in chat or the community for a second set of eyes
You’re not alone. Ask early so you can ship faster.

​
11. Additional tips

  • Custom domain: Connect through Netlify when you’re 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
Build smart. Launch fast.
Prompt clearly. Preview constantly. Polish with care.

You did it!

You understand Rocket’s workflow and best practices. Apply these tips to build and ship faster.