Your first app

The quick start is the short version. This page is the longer version — a walk through every part of the Studio, using a single example project. Follow along with a new project of your own and by the end you'll know where everything lives.

Start from a prompt#

Open the dashboard home and type this into the box:

An Italian café landing page called Oliveto. Warm, editorial, coastal Italian palette. I want a hero, a menu section, an about page, a reservation form, and a page with the address and opening hours.

Press ⏎. Wemob will ask a couple of quick questions — pick the Italian coastal palette and say yes to reservations. Then you'll see your café start to appear.

The chat#

The chat panel on the left is where everything starts. Every message you type can change your site. Every reply from Wemob tells you what it's working on. You'll see things like:

• Short messages in plain English describing what Wemob is doing
• Small tags showing which parts of your site changed — like hero or menu page — you can click any of them to jump to that part
• Occasional clarifying questions when Wemob needs more direction

The preview#

The right side of the screen shows your website, live. You can scroll through it, click links, fill in forms — everything works the same way it will once it's published. There are three things to notice at the top of the preview:

• Three screen-size buttons — desktop, tablet, phone. Tap any of them to see how your site looks at that size.
• The URL— a temporary address you can click to open your site in a new tab. It already works. You can share it with a friend even before you've published.
• A reload button — in case you want to force a refresh after editing something directly in the code.

The tabs at the top#

Across the top of the Studio there's a row of tabs. The preview is the default, but each tab gives you a different view of the same project.

• Preview— what you've just been looking at. Your site, live.
• Code — the actual files that make up your site. You can browse, read, and edit any file directly if you want.
• Data — if your project stores information (like reservations or menu items), this is where you can look at it, add new entries, and edit existing ones.
• Analytics — visitor numbers, popular pages, and where people are coming from. Starts collecting as soon as you publish.
• Store — products, orders, categories, and discounts. Only appears if your project is an online shop.
• Deploy— publishing controls, domain settings, and a history of every version you've put online.

Ship it#

When your café looks the way you want, click Deploy in the top-right corner. Wemob will check your site for problems, build a final version, and put it online at a free .wemob.app address. Share the link.

That's the whole tour. From here:

• Try writing better prompts to get sharper results
• Learn how to use your own domain
• See how to add an online shop to any project