---
title: Vibe coded a website? How to move it into HubSpot
description: Built a site with Claude, ChatGPT, Lovable or v0? Three ways to get it into HubSpot as an editable theme, and the shortcut that costs you later.
---

[Skip to content](https://themespot.app/blog/vibe-coded-website-into-hubspot#main-content)

[![themespot](https://themespot.app/hubfs/themespot-1.svg)](https://themespot.app/)

- Product
  
    - [Build themes/theme-development](https://themespot.app/theme-development)
    - [Manage content/content-management](https://themespot.app/content-management)
    - [Roadmap/roadmap](https://themespot.app/roadmap)
- [Pricing](https://themespot.app/pricing)

[Connect your portal](https://themespot.app/join-the-waitlist)

[← All posts](https://themespot.app/blog)

[Development](https://themespot.app/blog/tag/development)

# So you vibe coded a website. Now you want it in HubSpot. What next?

By [Reece Sim](https://themespot.app/blog/author/reece-sim)·October 13, 2026·4 min read

You built a website in an afternoon. Maybe Claude Code wrote it, maybe Lovable, v0, Bolt or Cursor, maybe you pasted a ChatGPT answer into a folder and it just worked. It is React or plain HTML, probably with Tailwind, and it looks better than the site you have now.

Then someone says the words: "it needs to be in HubSpot". That is where the forms, the CRM, the blog and the marketing team live.

There is no "import my site" button in HubSpot. Most of the advice online is either "rewrite it in HubL" or "iframe it in and hope". Here is what actually works, from someone who has built HubSpot sites for six years, first by hand and now with an agent doing the heavy lifting.

## First, what HubSpot actually wants

A HubSpot website is not a bundle of pages. It is a **theme**: a folder of templates, modules, fields and settings that HubSpot's page editor understands. Every heading, image and button a marketer can change in the editor has to be declared as a **field**. Every band of a page they can drag, drop or reorder has to be a **module** or a **section** inside a **drag and drop area**. Colours and fonts live in **theme settings**, so changing the brand colour once changes it everywhere.

Your vibe coded site has none of that. It has components with props, or HTML with the words typed straight in. Both are fine as a design. Neither is something a marketer can edit.

So the real job is not "get the pixels onto HubSpot's servers". It is "turn the design into editable modules without losing how it looks". Skip that and you get a page nobody but a developer can touch, which defeats the point of moving to HubSpot at all.

## The trap: pushing raw HTML through the API from one laptop

Here is the shortcut a lot of people take, and I understand why. HubSpot's content API will happily accept a page of HTML. Your AI tool can generate it, a script can push it, and the page is live in minutes. HubSpot's own Claude connector does something similar for Claude Design landing pages.

I was recently asked to review exactly this setup. The enquiry said the rebuild was "100% AI-generated custom HTML, deployed to HubSpot via the API by one developer, from their laptop. Only that one developer can currently edit the site."

That last sentence is the problem. Here is what that business was about to give up, while still paying for Content Hub:

- **Drag and drop editing.** The page editor opens on a blank canvas or one big block of code. Nobody can move a section or swap an image.
- **The blog, HubDB and custom objects.** Dynamic content needs templates that read HubSpot's data. Static HTML does not.
- **Every HubSpot AI feature, now and later.** HubSpot's content tools work on modules and fields. A wall of HTML gives them nothing to work with.
- **More than one editor.** Every change, however small, goes back through the one person with the laptop and the script.

And when I tried HubSpot's Claude Design import myself, the page was close to the design but not exact, there were no module fields to edit, and each new version replaced the whole page, so any edits made in HubSpot were lost.

That route is fine for some jobs. It is not a website.

## Which route fits

| You have | Best route | Why |
| --- | --- | --- |
| A one-off campaign landing page, live for weeks, never reused | Push it straight in (API or HubSpot's Claude connector) | Speed matters more than editability, and nobody will maintain it |
| A website the marketing team will edit every week | A HubL theme (option 1 or 3 below) | Every HubSpot developer can maintain it, and it works with every editor feature |
| Real interactive components you want to keep as React, and a developer on hand | CMS React (option 2) | Keeps your components, at the cost of the field work and more developer time |

If you are not sure which row you are in, you are almost certainly in the second one. Most "quick landing pages" end up being edited for a year.

## Option 1: Rewrite it in HubL (the classic route)

HubL is HubSpot's templating language, a relative of Jinja. Classic themes are HTML plus HubL, and they are still the most common thing in a HubSpot account.

The manual process:

1. Install the HubSpot CLI (`npm install -g @hubspot/cli`) and sign in with a personal access key.
2. Start from HubSpot's CMS theme boilerplate (`hs cms theme create`).
3. Go component by component. Each React component, or each repeated block of HTML, becomes a module: a `module.html` written in HubL, a `fields.json` describing every editable value, a `meta.json`, plus CSS and JavaScript.
4. Translate the logic. `{props.title}` becomes `{{ module.title }}`. `.map()` becomes `{% for item in module.items %}`. Conditional rendering becomes `{% if %}`. State and effects get rewritten as plain JavaScript, because nothing runs on the server except HubL.
5. Translate Tailwind into the theme's CSS, reading colours and fonts from theme settings rather than hard-coded classes.
6. Rebuild the layout as templates with `dnd_area`, `dnd_section`, `dnd_column` and `dnd_module` tags, which have their own column maths and quirks.
7. Preview with HubSpot's local preview. Module previews render without the theme's styling, and template previews need a signed-in HubSpot account.
8. Upload with `hs cms upload`, then build a page from a template in the editor.

This works, and I have shipped dozens of sites this way. The catch is that you now have two codebases, and the one your AI tool understands quietly dies.

## Option 2: CMS React (keep the React)

HubSpot has a newer route: **CMS React**, built on its developer projects framework. Modules are React components, rendered on the server and placed in HubL templates, with optional client-side **islands** for anything interactive. You keep TypeScript, Vite, CSS modules, Tailwind and npm packages.

The manual process:

1. Run `npx @hubspot/create-cms-theme@latest`. It scaffolds a project, installs the CLI and signs you in.
2. You get a project file at the root and a theme folder with components, templates, styles, theme fields and theme settings.
3. Port each component into a module. The part nobody tells you: the component still has to declare its fields. Every prop a marketer should edit becomes a typed field (text, rich text, image, link, repeater, choice), and the component reads field values instead of props.
4. Wrap anything interactive as an island. Everything else renders on the server.
5. Templates are still HubL. Page layout, header, footer and drag and drop areas are HubL files that place your React modules.
6. Run the local dev server. It can overlay local changes on live HubSpot pages, which is genuinely useful, but it needs a signed-in account.
7. `hs project upload`. The project goes through HubSpot's build checks and deploys.
8. Create a page from one of your templates.

What you lose compared with the app your AI tool built: client-side routing (HubSpot owns the URLs), arbitrary data fetching, global state and context providers. What you keep: components, TypeScript and your styling approach.

## The part that takes all the time, either route

Nobody budgets for this, and it is where these projects stall: **the fields**.

A component with twelve props becomes a module with twelve fields, each with a label a marketer understands, a default that is the real content rather than "Enter heading here", and help text. Repeaters for lists. Choice fields for variants. Image fields with alt text. Link fields that understand internal pages.

Then the things HubSpot refuses on upload: a handful of reserved field names, image defaults pointing at the wrong place, layout grids that collapse because the column CSS is missing. Multiply by thirty components. That is the real migration.

## Option 3: Let Claude Code do the conversion, with checks

I built a free Claude Code plugin for this, because I was doing the steps above by hand on every site. It is called **Theme Dev Tools for HubSpot, by ThemeSpot**. It takes the site you already have, whether that is a Claude Design export, HTML, CSS, Tailwind or React from ChatGPT, Lovable or another AI tool, a Figma export or just a screenshot, and builds it as an editable HubL theme.

Step by step:

1. **Install it.** In a terminal:  
   `claude plugin marketplace add reecesim/theme-devtools-for-hubspot`  
   `claude plugin install theme-devtools-for-hubspot@theme-devtools-for-hubspot`
2. **Ask for what you want.** Something like "turn the site in ./my-site into a HubSpot theme". It first checks what your machine has (Node, the HubSpot CLI, a way to take screenshots) and tells you what each missing piece costs. Nothing is installed without asking.
3. **It reads your site as a reference, not code to paste.** Your components and Tailwind classes are not carried over. They are rebuilt as HubL templates, modules and theme CSS. It captures full-page screenshots of your original at desktop and phone widths to compare against later.
4. **It shows you a plan before writing a file.** Theme settings from your colours, fonts and spacing. A section for each band of the page, a module for each kind of content, one module with a repeater for repeated cards or logos. Header and footer as global partials. HubSpot's own forms, menus, logo and CTAs used rather than rebuilt. You agree it or change it.
5. **It builds from HubSpot's boilerplate.** Every heading, paragraph, image, link, button and repeated item becomes a field whose default is your real content, so a new page from the template looks like your design before anyone edits it.
6. **It renders the theme on your machine, with no HubSpot login.** Then it screenshots the build the same way as your original, compares the two, fixes the largest difference first and repeats, up to eight rounds, until they match or every remaining difference is explained.
7. **It uploads with HubSpot's own CLI, only when you say so,** to a new location in your account rather than over an existing theme, and preferably to a test account first.
8. **It hands over a plain report.** What was built, what is editable where, what still differs from your design and why, and what is left to do.

The honest limits:

- **HubL themes only.** It does not build CMS React modules. If your site has a genuinely interactive component, it plans how that works in HubL with its own JavaScript, or leaves it out and says so.
- **You still review the result.** The local render is an approximation; HubSpot's own render is the authority, and HubSpot may still refuse something on upload. The report says exactly how far the checks went.
- **HubSpot's own settings are done by hand in HubSpot.** The brand kit, your domain, each form, a centrally managed navigation menu, blog setup and creating the pages all happen in HubSpot's screens. The plugin stops at the theme.

If you want the next part handled too (real content on the pages, QA, a preview to share with a client, or keeping React modules), that is what the hosted ThemeSpot at [themespot.app](https://themespot.app) is for, on a connected HubSpot account.

## FAQ

**Can I import a Lovable, v0 or Claude Code website into HubSpot directly?**  
 Not as an editable website. You can push its HTML into a page through HubSpot's API, but you get a page with no editable fields, no drag and drop and no theme settings. To make it editable it has to be rebuilt as a HubSpot theme, either by hand in HubL, as CMS React modules, or with a tool that does the conversion and checks it against your original.

**Do I have to rewrite my React site in HubL?**  
 No. HubSpot's CMS React lets you keep React components as modules, but each one still needs fields declared for the editor, and templates and layouts are still HubL. If the site is mostly marketing content with little interactivity, a HubL theme is usually simpler to maintain.

**Will my HubSpot site look exactly like the one I vibe coded?**  
 It can come very close. The way to know is to compare full-page screenshots of the original and the build at desktop and phone widths, and fix differences until they match or are explained. Placeholder content and HubSpot's own form markup are the usual remaining differences.

**Why not just paste the HTML into a custom HTML module?**  
 Because the marketer then has to edit raw HTML to change a heading, the brand colour in theme settings does nothing, HubSpot's forms and menus are not wired in, and the next page has to be pasted again. It looks right in a screenshot and is wrong in every way that matters after launch.

---

*HubSpot is a trademark of HubSpot, Inc. ThemeSpot is not affiliated with or endorsed by HubSpot.*

Filed under

- [Development](https://themespot.app/blog/tag/development)

![](https://themespot.app/hs-fs/hubfs/fsdf%20(1).png?width=64&height=64&name=fsdf%20(1).png)

Written by

Reece Sim

[More from this author →](https://themespot.app/blog/author/reece-sim)

[← Back to all posts](https://themespot.app/blog)

[![themespot](https://themespot.app/hubfs/themespot-1.svg)](https://themespot.app/)

Runs alongside HubSpot. Never replaces it.

Your site is yours, forever. ThemeSpot is the bonus.

All systems normal

- Legal
  
    - [Privacy](https://themespot.app/privacy)
    - [Terms](https://themespot.app/terms)

© 2026 ThemeSpot

HubSpot is a trademark of HubSpot, Inc. ThemeSpot is not affiliated with or endorsed by HubSpot.

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Reece Sim",
    "url" : "https://themespot.app/blog/author/reece-sim"
  },
  "dateModified" : "2026-10-13T07:39:07.150Z",
  "datePublished" : "2026-10-13T07:39:07.000Z",
  "headline" : "Vibe coded a website? How to move it into HubSpot",
  "mainEntityOfPage" : {
    "@id" : "https://themespot.app/blog/vibe-coded-website-into-hubspot",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://themespot.app/hubfs/themespot.svg"
    }
  }
}
```