Appearance
⌘K
Templates
How To Use Templates
Starting from scratch is one way to build — but MonstarX gives you a smarter shortcut. The Templates library contains a curated collection of professionally designed, ready-to-customise starting points. Browse through the options, pick the one that fits your vision, make it your own with a few edits, and watch it transform into something uniquely yours.
What Are Templates?
Templates are pre-built project blueprints that come with the structure, UI patterns, and key pages already in place. Instead of describing an app from nothing, you start with a fully formed foundation and refine it to match your specific needs.
Every template is built to production standards — responsive, clean, and ready to connect to real services.
Available Templates
| Template | What it includes |
|---|---|
| SaaS Landing | Marketing site + waitlist capture |
| E-Commerce | Product listings, cart, and checkout |
| Dashboard | Charts, KPI cards, and data tables |
| Task Manager | Kanban board + deadline tracking |
| Portfolio | Project showcase + contact section |
| Blog Platform | Article listing + content editor |
| Booking System | Calendar picker + payment flow |
| Mobile App | React Native + Expo starter |
How To Use a Template
Step 1 — Open the Templates section
When you open MonstarX, look for the Templates tab on the home screen. Click it to open the full library.
What you will see: A gallery of template cards, each showing the template name and a short description.
Step 2 — Browse and choose
Scroll through the available options. Each card tells you what the template covers. Take your time — there are many to explore.
Tip: If you have a general idea of your app type (e-commerce, SaaS, portfolio), filter by category to narrow it down faster.
Step 3 — Select a template
Click the template that best matches your project goal. MonstarX loads a preview so you can see the layout before committing.
Expected result: The template preview opens, showing the default pages and structure.
Step 4 — Make it yours
Once you select a template, tell MonstarX what to change. You can:
- Update the copy, brand name, and colour palette.
- Add or remove pages.
- Change the layout or adjust sections.
- Describe any new functionality you want to add.
You interact with the template the same way you would with any MonstarX project — through natural language prompts in the chat.
Example prompt:
"Change the brand name to Acme Corp, update the hero headline to 'Ship faster, worry less', and replace the waitlist form with a 'Book a demo' button."
Expected result: MonstarX applies your changes and regenerates the affected sections in the Preview.
Step 5 — Continue building
From this point on, you are working in a full MonstarX project. You can:
- Connect integrations (Supabase, Stripe, Resend, and others).
- Inspect and edit the generated code in the Code tab.
- Publish your app and share the live URL.
- Push the project to GitHub.
See Features for the full Workbench guide.
Recovery
| Problem | Fix |
|---|---|
| Template preview does not load | Refresh the page and try selecting the template again. |
| Changes are not applying as expected | Be specific in your prompt. Describe exactly which section to change and what the new content should be. |
| You selected the wrong template | Start a new project and choose again — template selection happens before any code is generated, so nothing is lost. |
Note: Template names and available options reflect the current MonstarX build. The library may expand over time.