Create a New Project manually as outlined below or use Maker Agent
* Click **New Project** in the sidebar or type a prompt. * (Optional) Select a **Brand Style** from the dropdown. * Click on the arrow to proceed.View the Live Preview
After a few seconds, your project will appear in the preview pane. * Toggle between mobile/desktop viewports. * Click on the “open in new tab” to **preview the project** in full screen.Creating a Project without Brand Guidelines
* Click **+ New Project**. * Choose **No Style Guide** from the dropdown. * Name and **Create**. * Maker AI will apply a clean, unbranded palette and font set.Creating a Project that Follows Your Brand Guidelines
* Click **+ New Project**. * Select your **Style Guide** from the dropdown. * Name your project and **Create**. * All generated code and components will automatically adhere to your saved styles.Write Your First Prompt
Type your desired project description into the prompt box. For example: “Create a hero banner for my homepage with parallax animation. “ Press **Enter** or click the **→** button.Prompting & AI Behavior
* **Can I control the tone or layout Maker uses?** Yes—be explicit in your prompt. Example: “Create a minimal product page with large headlines, small body copy, and a calm, editorial tone.” * **Can Maker adhere to my brand's voice and tone?** Yes, as long as the[ style guide](/features/style-guide) is set up and you have references shared when creating the style guide, along with clear instructions, Maker will adhere to the brand's voice and tone. * **Can I prompt in other languages?** Currently, we support only prompts in English and will be adding other language support.Iterate & Customize
* Edit the project directly in the editor. * Ask Maker follow-up prompts, e.g.: * “Add a blue background to the header.” * “Include a footer with © 2025 My Company.” * Each change updates the live preview in real timeWhat Is Remix?
Remix is Maker’s “fork” feature: 1. Open any project. 2. Click **Remix** in the top toolbar. 3. A copy appears in your **Projects** list. 4. Changes to the remix don’t affect the original—ideal for experimentation or sharing a template.How can I delete or rename a project
To **delete** a project, click the **delete icon** on the project thumbnail. To **rename** a project, open the **dropdown menu** in the top-left corner of the project and select the rename option.How Style Guides work in Maker
* This feature is available only on premium plans, such as Pro and Team. * Uses a **Style Guide** to define colors, fonts, and imagery. * Every component and template reads from the active style. * **Style Guides** live in **Settings** → **Style Guide**. * You can **edit**, **duplicate**, or **delete** a style guide at any time—changes cascade through existing projects. * Prompt inline overrides (e.g., “Use a red button instead of primary”) temporarily supersede the style guide.How Do I Duplicate a Maker Project?
* From **Projects**, hover over the project card. * Click the **••** menu → **Duplicate Project**. * A copy will appear immediately for you to modify.Can I create content in dark mode?
Yes! You can prompt Maker to design your component or page in dark mode. Example: > “Create a dark-mode pricing page with white text on a black background and clear CTAs.” You can even ask Maker to include a **light/dark mode toggle** in the design.Publish Your Project
* Click **Publish** in the top-right corner. * Choose **Publish Now** to make your project public, or **Make Private** to restrict access. * (Optional) Under **Publish**, connect a custom domain. * Use the “Live” link to share the project with teammates and stakeholdersUpdating Maker Content
* Open the project you want to update. * Choose either the ["Select to edit"](/features/select-to-edit) option or add a prompt with the updates you’d like to make. * Press **Enter** * Review the updated preview in the editor. It’s always advisable to preview the full-screen preview by clicking on “open in new tab,” * Click **Publish** again to push your updates to the public (or private) URL.Connecting a Custom Domain
* Inside your project, click **Publish** * Click on **+ Connect Custom Domain**. * This will redirect you to the domain settings page. * [Follow the instructions to connect.](https://www.notion.so/Hosting-Updates-done-214866387a5380878f82cfb7f28dd079?pvs=21) * Wait up to 24 hours for DNS propagation. * Once verified, your Maker project will be accessible at your custom URL.Embedding Maker Content on Your Site
* In your Maker project, click **Publish.** * Copy the provided **embed** code—choose between a Simple Embed or an Iframe Embed. * Paste it into your site’s HTML where you want the Maker project to appear. * Save and deploy your site. Your live Maker project will load in place of the embed.Embeds, CMS & Integration
* **Can I export HTML or code?** Yes — you can download your project by clicking the **Download project as ZIP** icon located next to the **Publish** button.Do I have to use Maker Agent?
No. When you log in, you'll see the Agent home screen by default. If you prefer the classic home screen, toggle the purple button that says "Agent" and you'll switch back to the standard experience. You can go back and forth whenever you want.How does Maker Agent know about my workspace?
The Agent reads your actual project data from Maker: published status, page views, A/B tests, open comments, chat history, and your file contents. It's not making guesses. It's looking at what's really happening in your workspace.Is my data private?
Yes. The Agent only accesses information from your own workspace. It doesn't share your data with other users or use it to train models.Can the Agent access all my projects?
Yes. The Agent can see all projects in your workspace, including draft and published projects. It can read comments, chat history, and files across all of them.How much does Maker Agent cost?
Every message you send to the Agent (not the greeting or follow-ups) uses credits at our fast model rate, the same as other AI runs in Maker. The Agent's welcome message and follow-up prompts are free, since you didn't trigger them.Do I get charged if the Agent sends me a follow-up?
No. The initial greeting and follow-up messages from the Agent are free. You only use credits when you send a message to start a conversation.Can I turn off the Agent to avoid credit usage?
Yes. Toggle the purple button to switch back to the classic home screen. You won't use any credits just by not interacting with the Agent.What if I ask the Agent something it doesn't know?
The Agent draws answers from real Maker documentation and your actual workspace data. If you ask about a feature or plan detail, it will pull from our docs with a link. If it can't find an answer, it will let you know and point you to where you can get help.Can the Agent create projects for me?
Yes. You can tell the Agent what you want to build (like "create a landing page for a SaaS product" or "redesign my pricing page"), and it will start the right kind of project for you. You can then open it in the editor to keep working.Can the Agent edit my existing projects?
Not directly in the editor, but it can handle certain tasks without you opening a project. For example, you can ask it to "add a testimonials section to my homepage" and the Agent will relay that request into the project and start the work.What if I don't know what to ask?
That's exactly why the Agent exists. Just ask open-ended questions like "What should I work on first?" or "How is my homepage doing?" The Agent will scan your workspace and give you a real answer based on what it sees.Can the Agent run audits?
Yes. You can ask it to audit any page for SEO, performance, security, or conversion factors. The Agent runs real Lighthouse audits and checks against Maker's audit skills, then reports back with findings and recommendations.The Agent gave me an answer that seems wrong. What do I do?
The Agent pulls information from your real workspace data and our docs. If something seems off, try rephrasing your question or asking for more detail. If you think there's a bug, let us know.Can I see what the Agent did in my workspace?
If the Agent creates a project or makes changes, you'll see them in your Projects list, just like anything else you create in Maker. Chat history stays in the Agent conversation.What if the Agent doesn't understand my request
The Agent is getting smarter over time, but it's still learning. If something doesn't work, try being more specific. For example, instead of "make my site better," try "audit my pricing page for conversion." The more details you give, the better it works.Can I give the Agent feedback?
Yes. If something isn't working well or you have an idea for how to improve it, let us know. We're actively developing the Agent and your feedback helps shape what it can do.Do I need to name my Figma frames "Desktop," "Tablet," and "Mobile"
No, Maker detects breakpoints by frame name or by frame width, so if your frames are already named by size (like home(1440), home(768), home(320)), they'll be picked up automatically.What if I only have a desktop design in Figma?
Maker will automatically generate mobile and tablet versions for you based on the desktop layout.Why do some sections look different after import than they do in Figma?
Complex sections occasionally get flattened into a single image instead of being imported as editable elements. If this happens, ask Maker to rebuild that section, and it will recreate it as editable content.Why does the text look cut off or overflowing after import?
Auto-generated mobile and tablet breakpoints adjust column layout automatically, but if the font does not re-size, prompt Maker to adjust sizing where needed.Are tablet layouts as reliable as mobile and desktop?
Tablet breakpoints are currently the least consistent of the three and may need a quick manual touch-up after import.If I edit text in one imported section, will it update everywhere else it appears?
Usually yes. If a section shows up on more than one breakpoint (for example, the same header on your Desktop, Tablet, and Mobile designs), Maker now recognizes it as the same piece of content. So editing the text in one place typically updates it across all versions, instead of you having to make the same edit three separate times. Occasionally, if this does not happen, you will need to individually select those sections and elements and either prompt Maker or use the visual editor to make those edits.What's the difference between clicking "Import from Figma" and pasting a Figma link into a prompt?
Clicking Import from Figma always uses Maker's own built in importer. Pasting a Figma link directly into a prompt instead will use Figma's MCP connector, if you have it connected.What's the recommended way to import from Figma for the most accurate results?
We recommend using the Import from Figma button (as described above) rather than pasting a Figma link directly into a prompt. It uses Maker's own built-in importer, which is tuned for accurate fonts and font weights, complete image assets, and clean layouts that stay true to your original design, even in more complex sections. Pasting a link directly into a prompt instead uses Figma's MCP connector, which can sometimes add elements that weren't in the original design or introduce other unintended changes.| Change | Step 1 | Step 2 | |
|---|---|---|---|
| Styling | Select a button. | Prompt: “Make the selected element’s text uppercase” | /files/XDDC2qzF0URfV9RVW1zN |
| Content | Select a paragraph. | Prompt: “Update the selected text to ‘Welcome to Our Platform!’ and center-align it.” | /files/ygWj7ul2yL4rCMoF9sHH |
| Behavior | Select a link. | Prompt: “Wrap the selected element in a tooltip that says ‘Click here to learn more.’” | /files/t6BXjpUhnqEKn4PfgXlk |
Where is the imported data stored, and who on my team can see it??
Anyone who is a member of the organization can see all fonts used across the style guides.How are licensed fonts and brand files handled so they aren’t shared outside our team??
Font URLs must be publicly accessible in order to load on a website. But they are not shared outside of an organization unless DevTools is used to inspect the AI-generated page to extract those URLs.If I already have a style guide, does this update it or create a new one? Can I choose?
You can choose. While working on a project, Maker will also prompt you to save recent design changes to a style guide if it detects you asked it to make changes to a design element. When you ask Maker to “save to style guide,” it knows if the project is already linked to a style guide and only updates the linked style guide, and will not create a new style guide unless asked explicitly.If names or settings clash with my current guide, how do I pick which one to keep?
Maker will decide which one to keep and which one to omit.How long does a typical import take? Is there a progress bar?
The amount of time it takes depends on the size of the context given to Maker. Large files and too many screenshots can slow it down. It can take several minutes. There is no progress bar at the moment.Are there limits on the number of pages or asset sizes Maker's Style Guide can handle?
The real limit is the context window, which is 200,000 tokens. We have no limit on asset size.If I update my Style Guide, will existing projects update automatically?
No. Existing AI-generated projects never auto-update, and republishing won’t apply new styles. To use the latest Style Guide, **Remix** the project with the current style guide—this creates a new copy so the original stays intact **while you test and fix any compatibility issues** from the updated Style Guide.If a font is a Google Font, will it be available automatically, or do I still need to upload files?
No need to upload Google Fonts; you can ask Maker to use the Google Font of your choice in the style guide instruction doc or the context field. For example, add “Use Playfair for the headings and Inter for the body text,” and Maker will know how to do that.If I import into a project and then “save as style,” does that update the current style or create a new style?
It depends on how the project was created. Projects started with a style guide can modify the style guide they’re linked to. Projects created without a style guide will be saved to a new style guide.If a new style is created, is there a way to merge it into the existing guide?
Currently, there is no option to merge two style guides.Are there versions or changelogs for style guides so one can roll back after an import?
There is no versioning at the moment for style guides.If some font uploads fail, can I still proceed with the project and fix items later?
Yes, you can fix those later by uploading font files and regenerating the style guide.When a font is missing, what is the fallback?
Fallback fonts are defined by Maker automatically and we will try to use system fonts as a fallback.What happens when a font is missing—do I get a prompt to add it?
Yes, you’ll see a button “Missing fonts” in the project preview.Are there any limits on the number/size of font files and assets per style guide?
There’s no limit to the number of fonts or assets you can add, but each uploaded file is limited to 5 MB.Where are uploaded fonts stored? Is it per style guide or account?
Fonts are stored in an S3 bucket at `/fonts/{orgId}/theme/{themeId}`. They’re shared within a style guide, keeping them organized by the style guide.Can I continue adding assets (screenshots, palettes, logos) to the same style guide to incrementally upload additional fonts and brand details, or do I need to create a new guide each time?
Yes, you can continue adding assets and regenerate existing style guides at any time. ***NOTE:***** Regenerating or editing a style guide doesn’t automatically update projects created from an older version. To apply changes, remix the project with the theme; fix any incompatibilities in the new remix while the original remains intac**t.For custom fonts, which file formats are supported?
Supported font formats: TTF, WOFF, WOFF2, and OTF.How are weights/styles mapped from Figma text styles to the Style Guide?
We import the **style names** (family + weight/italic) as text tokens, but Figma doesn’t provide the actual font files—so they come in as **Missing**. Upload the correct fonts to your Style Guide, then use **Missing Fonts** in the project to map each style to the matching family/weight. Once mapped, all tokens resolve; if an exact weight isn’t available, we fall back to the closest weight.If the imported Figma designs conflict with my Style Guide, which wins?
Imported layouts remain intact; Style Guides govern AI-generated and edited outputs. To enforce a new style across an imported project, Remix it and reapply the Style GuideCan I make a Style Guide the default for all new projects?
Yes. Set it as the default in Settings → Style Guide; new projects will start with it.How can I make a new page match the design style and fonts of an existing project?
There are two good options, depending on what you are trying to do: **Option 1: Duplicate Project 1 (fastest way to match the design exactly)**\ If you want Project 2 to inherit the exact same look and feel, duplicate Project 1 and use it as your starting point. Then replace the content and adjust sections as needed.\ You can duplicate from the **top-left dropdown menu**. **Option 2: Save Project 1 as a Style, then apply it to Project 2 (best when Project 2 already exists)**\ If Project 2 is already built but you want it to adopt the same style as Project 1, save Project 1 as a Style and then apply it to Project 2 using **Remix**. **How to apply a saved style to Project 2 (while keeping structure and content):** 1. Open **Project 2**. 2. Click the **top-left dropdown menu**. 3. Select **Remix**. 4. Choose the **saved style** from Project 1. 5. Run Remix to update the project’s styling (fonts, visual language, design system) while keeping the existing content and structure. **Tip:** If your goal is a perfect visual match and you have not built Project 2 yet, duplicating Project 1 is usually the simplest. If Project 2 is already created, Remix is the best way to switch it to the saved style.Can I export my Style Guide?
Yes, that option is available in the Style Guide. Open the style guide you created, click the three dots in the top-right corner, and select the option to export a `design.md` file. The exported file will include all of your style guide details.| Live Preview | Every change you make shows up instantly in the right-hand preview pane. This is your “draft” view—perfect for iterating before anyone else sees it. | /files/DXL3FnxHNuGxFPE3J1Xh |
| Published URL | Once you hit Publish, Maker assigns a permanent public URL (or private link) that you can share with teammates or embed on your site. | /files/F3V1LK403l5lNr9GTRXX |
How is my content hosted?
We manage the hosting for all your content, ensuring it’s stored securely and delivered quickly. You don’t need to worry about server maintenance or uptime.What does the update process involve?
Updates are simple and intuitive. Use our chat-based editor to interactively modify your content with ease.How do I push my updates live?
After editing, click **Publish**. This action pushes your changes live so your audience sees the latest version immediately.Can I preview my updates before publishing?
Yes—our editor allows you to preview changes before going live, so you can confirm everything looks as intended.How quickly are published updates reflected on my site?
Once you click **Publish**, changes deploy in real time. Depending on network conditions, updates should be visible almost immediately.What if I encounter issues with my updates?
You can revert to a previous version via the **History** tab or contact our support team for troubleshooting and assistance.Is there any downtime during the update process?
Our system is designed for seamless updates with minimal disruption. Content transitions occur smoothly without noticeable downtime.Who can I contact for hosting or update-related support?
For our Pro and Team plans, our dedicated support team is available via the in-app chat to help with any hosting or update questions.Can I connect different custom domains to different projects?
Yes. You can assign unique custom domains to different projects. **How to set it up** 1. Go to **Settings** and connect your domain. 2. Open the **project** you want to link. 3. In the **Publish** menu, click the **dropdown**. 4. Under **Link**, choose from the list of available **domains** and confirm.Provide your desired domain/subdomain
***For features listed as Beta, please contact Maker support for early access*** *** ### Navigating Insights The left-hand navigation in Insights is organized into a few sections: * **Ask Maker** – opens the AI assistant panel, where you can ask questions about your data in plain language * **Products** – Ai, Pages, and Nav, for viewing performance by product * **Sources** – connect and view data from outside platforms, including Google Ads * **Custom Reports** (Beta) – build and save reports tailored to what you want to track * **Recent chats** – your past conversations with Ask Maker, so you can pick up where you left off *** ### Organization-level Insights Use the Dashboard to view overall performance for a selected organization and quickly spot which projects are driving results.
#### Outbound Click Insights Depending upon where the user has clicked on the page, this is aggregated data on the URL level. #### Heatmap toggle Turn on the heatmap to visualize engagement directly on the page. #### Scroll depth The scroll indicator shows how far users scroll, based on the **number of unique users** reaching each depth. #### Section Views We consider the section view if even one element inside the section is visible, essentially the maximum of all elements within a section. #### Element-level insights When the heatmap is on, click/hover an element to open an **Element Insight** panel showing: * **eCTR** * **Clicks** * **Element Views**\ …and supporting context metrics (like page-level totals) for comparison. *** ### Understanding eCTR **eCTR (Element Click-Through Rate)** helps answer: *“When users actually see this element/section, how often do they click it?”* In practice: * **Element Views / Section Views** represent how many times something was *viewed* (often estimated using pageviews and scroll depth). * **eCTR** is clicks / element or section views. *** ## Data Sources Insights isn’t limited to your Maker data anymore. Under **Sources** in the left nav, you can connect outside platforms so their metrics show up alongside your Maker performance: * **Google Analytics** – top pages, traffic, and where visitors drop off * **Google Ads** (Beta) – ad spend, ROAS, cost-per-click, and conversion trends across your campaigns Click **Connect** next to a source to link the account. Once connected, that source's data becomes available both in its own report and as something you can ask **Ask Maker** about directly. #### Google Ads Insights (Beta) Once Google Ads is connected, select it under **Sources** to see a full ad performance report for the selected account and date range: * **Top metrics**: Spend, Revenue, Avg. CPC, Conversions, and Search Impression Share, each with a trend line and change vs. the prior period * **Campaign performance**: a table of campaigns, with a callout for ones falling below their ROAS target so you know where to look first * **Signal-level performance**: switch between Keywords, Search Terms, Audiences, and Landing Pages to see what's working and what's not, including a callout for high-traffic, low-converting keywords worth reviewing *** ### Ask Maker\* (Beta) Ask Maker is an AI assistant built into Insights. Instead of digging through dashboards, you can ask it questions in plain language and get an answer pulled from your connected data. To get started, click **Ask Maker** in the left nav. You'll see suggested questions for each data source, for example: * **Maker Insights** – "How are my AI sites performing?" * **Google Analytics** – "What are my top pages this month?" * **Google Ads** – "How is my ad spend performing?" * **Meta Ads** – "What are my best-performing Meta campaigns?" If a source hasn't been connected yet, you'll see a **Connect** link next to it. Once connected, you can ask Ask Maker follow-up questions directly in the chat, and your past conversations are saved under **Recent chats** so you can return to them later. *\*This feature uses Maker credits*
Why does my Maker content show up visually but not in SEO tools or AI assistants?
Most SEO browser extensions and AI tools (ChatGPT, Claude, Perplexity) read a page's raw HTML - they do not wait for JavaScript to run. If your Maker content is delivered via Simple Embed or Enhance, it is injected into the page after the initial load by JavaScript. Those tools never see it. The SSR Component solves this by rendering the content server-side, so it is present in the HTML from the start.Does SSR work for Google SEO as well?
Yes. Google uses a headless browser to render pages, so it can generally read JavaScript-injected content. But for consistent, delay-free indexing across Google, Bing, and AI crawlers, SSR is the most reliable approach. Content in the initial HTML is indexed faster and more reliably than content that requires JavaScript rendering.Does structured data (FAQ schema) still work with SSR?
Yes, and it is worth knowing how this works across all delivery methods. When a Maker project includes schema markup (like FAQ JSON-LD), Maker automatically includes that structured data in the embed code itself -- meaning it lives in the raw HTML regardless of which delivery method you use. So even on JavaScript embed methods like Simple Embed and Enhance, your structured data is visible to crawlers and AI assistants. What SSR and Custom Domain add on top of that is visibility for the full page content, the actual text, headings, and body copy. Structured data gets you into AI answers; native HTML delivery gets your full content read and indexed. Both matter, and SSR gives you both.When should I use SSR Component vs. Custom Domain?
Use SSR Component when Maker is one block or section inside a page you manage in another CMS. Use [Custom Domain](https://docs.maker.co/tips-and-tricks/custom-domain) when the entire page is built in Maker. Both methods deliver the same crawlability benefit -- the right choice depends on who owns the page.yarn add @maker/ssr-component
Configuration error: API key not found
;
}
return My Page
Configuration Error
MAKER_SSR_API_KEY is not configured
My Page
My Page
My Page
My Page
{/* You'll need to implement the server-side fetch yourself */}| Prop | Type | Required | Description |
|---|---|---|---|
apiKey | string | Yes | Your Maker SSR API key |
projectId | string | Yes | Your Maker project ID |
options | MakerComponentOptions | No | Configuration options (see below) |
| Option | Type | Default | Description |
|---|---|---|---|
debug | boolean | false | Enable debug logging |
device | "mobile" | "desktop" | "tablet" | - | Specify device type for responsive rendering |
cacheBust | boolean | false | Bypass cache and fetch fresh content |
version | string | - | Specify version of the project to render |
| Prop | Type | Required | Description |
|---|---|---|---|
scripts | Script[] | Yes | Array of scripts to inject |
| Variable | Required | Description |
|---|---|---|
MAKER_SSR_API_KEY | Yes | Your Maker API key |