- Pages versus the canvas
- Your first Framer site in seven steps
- What Framer's help centre says, at a glance
- Moving around the canvas
- Previewing like a visitor would
- Before you start: the limits worth knowing
- Framer and search engines
- Other builders to compare
- The order the help centre follows
- Frequently asked questions
To use Framer, start a new project (it opens with a Home page), add more pages from the Pages panel, build your layout on the canvas, then preview it with the Play button before you publish. Framer's help centre walks through each of those stages in its Get started section.
Framer's help pages describe an editor with a canvas, a Pages panel and a toolbar along the bottom. The first thing worth knowing is which of those parts ends up on your live site, and the help pages answer that clearly.
I read through Framer's own help centre to put this guide together, so every step below comes from the vendor's pages rather than guesswork. If a detail isn't in their docs, I've left it out.
Pages versus the canvas
Framer separates the page from the canvas around it. The help pages say anything you place inside a page is visible on the published website, while the surrounding canvas isn't published at all.
The same help article says that surrounding canvas can be used for exploration or for storing design assets. Because it isn't published, anything you leave there stays off your site.
Framer also gives you three kinds of page. Web pages are the ordinary pages of your site. CMS pages are generated from CMS collections and share one template. Design pages are for assets and mockups.
Your first Framer site in seven steps
- Open a new project. Sign up or log in, then start a project. It begins with a Home page, which the help pages describe as the entry point for the website.
- Add pages. Open the Pages panel, click the plus button and pick the page type that fits: a web page, a CMS page or a design page.
- Name them. Framer turns a page name into a valid URL path for you, so there's no need to type a forward slash.
- Build on the canvas. Use the bottom toolbar to select layers, pan around and add comments, with the zoom menu on the right.
- Manage the page list. The docs say you hover over a page in the Pages panel and use its menu to customise the page URL, duplicate it or delete it.
- Preview it. Click the Play button in the top-left corner of the editor, or press Cmd P on a Mac or Ctrl P on Windows. Press Esc or the Close button to leave.
- Check other screens, then publish. Resize the preview, or select a breakpoint such as Tablet before you preview, to see how the layout adapts. When it looks right, follow the Publishing section of the help centre.
What Framer's help centre says, at a glance
| Topic | What the vendor's help pages say |
|---|---|
| Help centre sections | Get started, Canvas, CMS, Publishing, SEO, Integrations and Localization, among others |
| Get started articles | Pages, the canvas, previewing, icons, favicons and layout grids |
| New projects | Every project starts with a Home page, the entry point for the site |
| Adding a page | Open the Pages panel, click the plus button, choose a page type |
| Page types | Web pages, CMS pages from a collection template, and design pages |
| Page URLs | The page name becomes a valid URL path automatically |
| Canvas | Only content inside a page is published; the canvas around it isn't |
| Preview | Play button in the top-left corner, or Cmd P / Ctrl P, exit with Esc |
| Search engines | Sites are crawlable and indexable unless a page is set to noindex |
Moving around the canvas
The canvas article covers navigation. It says you can pan by holding the Space key and dragging with a mouse, or by dragging or two-finger scrolling on a trackpad. The zoom menu sits on the right of the bottom toolbar.
According to the same article, that bottom toolbar holds the canvas controls: tools for selecting layers, for panning around the canvas and for adding comments.
Previewing like a visitor would
The preview article says preview mode shows your site the way visitors will see it, so you can check layouts, responsiveness and interactions before publishing.
It also says that if you select a breakpoint such as Tablet on the canvas before clicking the Preview icon, the preview opens at that breakpoint width. You can repeat that for each breakpoint you want to check, or resize the preview instead.
Before you start: the limits worth knowing
- The Home page stays. It's the entry point for your site and the help pages say it can't be deleted.
- Older browsers. Framer's requirements page says some older browsers may not fully support every modern CSS feature it uses, which can cause small layout differences.
- Plans and accounts. Those details sit in a separate Account section of the help centre, and I haven't covered them here.
- Newer AI sections. The help centre now lists AI areas such as Agents, MCP and a Skills index alongside the design tool. I haven't covered them, so check the docs if that's why you're signing up.
Framer and search engines
If you're building a site you want people to find, the requirements page says Framer sites are crawlable and indexable by search engines and bots, including Googlebot and Bingbot, unless you set a page to noindex. The help centre also has a separate SEO section.
Want AI doing the heavy lifting in your marketing?
I build the systems that handle the boring 80 percent, so you get your week back. Done properly, with the human kept in.
If you're still choosing a tool, my roundup of website builders for SEO sets Framer against the alternatives on exactly that point.
Other builders to compare
If all you need is a single page to collect sign-ups, my guide to landing page builders for small business covers other options, and this comparison of one page website builders helps if your whole site fits on one scroll.
The order the help centre follows
Framer's Get started section moves through the same stages as this guide: pages, the canvas, then previewing. Work through it in that order, use the page versus canvas rule to decide where things go, and open the preview with Cmd P or Ctrl P before you publish. The Publishing section picks up from there.
Frequently asked questions
What part of a Framer project gets published?
Only content placed inside a page. The help pages say the surrounding canvas isn't published and can be used for exploration or storing design assets.
How do I add a new page in Framer?
Open the Pages panel, click the plus button and choose the page type you want: a web page, a CMS page or a design page.
Can I delete the Home page in Framer?
No. Framer's help pages say every project starts with a Home page, which is the entry point for the site and can't be deleted.
How do I preview my Framer site?
Click the Play button in the top-left corner of the editor, or press Cmd P on macOS or Ctrl P on Windows. Press Esc to close it.
Will Google index my Framer site?
Framer's requirements page says its sites are crawlable and indexable by search engines, including Googlebot, unless a page is set to noindex.
