How to Use Framer for Indie Hackers

Framer is a fast way for indie hackers to turn an idea into a live product. In this guide you will learn how to set up a project, design a UI, add interactivity, and publish a responsive site without leaving the browser. The steps are written for people who want to move from prototype to revenue quickly.

Table of contents

• 1. Set up a Framer account and workspace
• 2. Build a responsive layout with the canvas
• 3. Add real data using Components and Stores
• 4. Enhance with custom React code
• 5. Publish, test, and iterate
• 6. Framer vs. alternative tools
• FAQ

1. Set up a Framer account and workspace

1.1 Create a free account

Go to framer.com and click “Sign up”. You can register with Google, GitHub, or email. The free tier gives you three projects and 500 MB of storage.

1.2 Choose the Indie plan

If you need unlimited projects, custom domains, and code export, upgrade to the Indie plan at $15 / month. The plan also removes the Framer branding from published sites.

1.3 Set up a new project

From the dashboard click “New Project”, select “Blank Canvas”, and give it a name like “My SaaS MVP”. Framer will create a URL such as my-saas-mvp.framer.website.

2. Build a responsive layout with the canvas

2.1 Use frames and auto‑layout

Frames are the building blocks. Drag a Frame onto the canvas, set its width to 100% and height to auto. Turn on “Auto‑layout” in the right panel to stack child elements vertically with a 24 px gap.

2.2 Add a navigation bar

// No code needed – just drag a Frame, add Text links, and set
// Layout → Horizontal, Gap 32px, Align Center.

2.3 Create a hero section

Insert a background image (e.g., hero-bg.jpg), then add a Heading and a Call‑to‑Action button. Use the “Resize to Fit” option so the text scales on mobile.

3. Add real data using Components and Stores

3.1 Define a Store

Stores hold JSON data that components can read. Click “+ Store”, paste:

{
  "features": [
    {"title":"Realtime analytics","desc":"See usage instantly."},
    {"title":"Email onboarding","desc":"Automated welcome flow."},
    {"title":"Custom branding","desc":"Add your logo and colors."}
  ]
}

3.2 Build a Feature Card component

Make a new Component called FeatureCard. Inside, bind the title text to {store.features[i].title} and the description to {store.features[i].desc}. Use a repeat loop on the parent Frame to render all three cards.

3.3 Connect a Form to an external API

Drag a Form component, set its “Action URL” to https://api.example.com/subscribe, and map the email input to email. Framer will send a POST request when the user clicks Submit.

4. Enhance with custom React code

4.1 Add a Code Component

From the Insert menu choose “Code”. Replace the default code with a simple counter:

import * as React from "react";

export default function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Clicked {count} times
    </button>
  );
}

4.2 Use external NPM packages

Open the Project Settings → “Dependencies”. Add date-fns version 2.30.0. Then import it in a Code Component to format dates:

import { format } from "date-fns";

export default function Today() {
  return <div>{format(new Date(), "PPP")}</div>;
}

4.3 Deploy a server‑side function

Framer supports “Server Functions”. Create a new file api/price.js:

export async function onRequest(context) {
  const { searchParams } = new URL(context.request.url);
  const qty = Number(searchParams.get("qty")) || 1;
  const price = qty * 9.99;
  return new Response(JSON.stringify({total: price}), {
    headers: {"Content-Type":"application/json"}
  });
}

Call it from the client with fetch("/api/price?qty=3").

5. Publish, test, and iterate

5.1 Preview on device

Click the “Preview” button. Use the device selector (mobile, tablet, desktop) to ensure layouts adapt.

5.2 Publish to a custom domain

In Settings → “Domain”, type myapp.com. Add the DNS A record pointing to Framer’s IP (provided in the UI). After propagation, your site is live at https://myapp.com.

5.3 Enable SEO meta tags

Add a “Head” component and insert:

<title>My SaaS – Real‑time analytics for startups</title>
<meta name="description" content="Instant analytics, email onboarding, and custom branding. Try for free.">
<meta property="og:image" content="https://myapp.com/og.png">

5.4 Track conversions

Paste your Google Analytics or Plausible script into the “Head” component. Framer’s fast reload lets you see changes instantly.

6. Framer vs. alternative tools

Indie hackers often compare Framer with Webflow, Bubble, and Vercel + Next.js. The table below summarises key differences for a typical MVP.

Feature	Framer	Webflow	Bubble	Next.js on Vercel
Learning curve	Low – visual canvas + optional code	Medium – visual + CSS	Medium – visual workflow	High – full React
Code export	Yes, clean React/HTML	No, proprietary	No, proprietary	Yes, full control
Custom domain	Included in Indie plan	Included in paid plans	Included in paid plans	Free with Vercel
Built‑in CMS	Basic Stores	Robust CMS	Full DB	None – add yourself
Pricing (as of 2026)	$15/mo Indie	$24/mo Basic	$29/mo Personal	Free tier, pay for serverless
SEO friendliness	Good – static HTML	Good – meta editor	Average – SPA	Excellent – full control

FAQ

What is Framer?

Framer is a design and prototyping tool that lets you build interactive UI with visual editing and real code.

Do I need to know React to use Framer?

No. Framer offers a no‑code canvas, but you can add React components if you want more control.

Can I export a Framer project as a static site?

Yes. Framer lets you publish to framer.com or export the code bundle for self‑hosting.

How much does Framer cost for indie hackers?

Framer has a free tier with limited projects. The Indie plan is $15/month and includes unlimited projects, custom domains, and code export.

Is Framer SEO‑friendly?

Framer outputs clean HTML and supports meta tags, so you can optimise for search engines just like any static site.

With this guide you now have a complete workflow: create a Framer account, design a responsive UI, add real data, write a bit of code, and publish a live site. Test, iterate, and watch your indie project grow.