This walkthrough builds a small site with a hero, a blog list fed by the CMS and a contact form, then publishes it. Every step links to the guide that covers it in depth.
Build your first site
Create an account and a site
Sign up, then press New site on the dashboard. Give it a name, or pick a template to start from a finished design. The editor opens on the home page.
Draw the hero
Press F for the frame tool and drag on the desktop artboard. Add a heading with T and an image with I. In the inspector, set the frame’s layout to Stack, center it and give it padding.
Look at the tablet and phone artboards: they update live. Pick a breakpoint in the toolbar to override a value for smaller screens only.
Make it consistent
Open Tokens in the inspector and set your brand colour and fonts. Select the heading, type a class name in the class bar (for example
heading-xl) and reuse it everywhere. Change the class once and every heading follows.Add content from the CMS
Open the CMS workspace from the bottom of the left sidebar, create a Posts collection with a title, slug, cover image and body, and add a few items. Back on the canvas, insert a Collection list, point it at Posts and bind the card’s text to
item.title.Add a contact form
Insert a Form, then an email Input and a Text area inside it. Submissions land in the Forms workspace, protected by Turnstile and rate limits.
Animate something
Select the hero and open Interactions in the inspector. Pick the Fade in on load preset and press ⌘↵ to preview it.
Publish
Press Publish in the toolbar and choose Staging. Your site goes live at its staging address in a moment. When you are happy, publish to Production and connect your own domain.
Where to go next
You touched each part of Malla once. Each guide below goes deeper. You can also browse the core concepts for the vocabulary.