Skip to main content

Build better HubSpot sites, faster

FreshJuice DEV is a developer-first HubSpot CMS theme that combines Tailwind CSS, Alpine.js, and 37 pre-built modules to accelerate your custom theme development.

Get StartedView Documentation
$ npm run start
✓ Tailwind CSS watching…
✓ esbuild bundling JavaScript…
✓ HubSpot CLI syncing to portal…
✓ Ready in 1.2s

Quick Start

Get FreshJuice DEV running on your machine in minutes

1

Clone and install dependencies

Clone the repository and install dependencies using Node.js 22.0.0 or newer.
git clone https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme.git
cd freshjuice-dev-hubspot-theme
npm install
2

Configure HubSpot CLI

Set up the HubSpot CLI to connect to your HubSpot portal. You’ll need a HubSpot account and portal access.
hs init
Follow the prompts to authenticate with your HubSpot account.
3

Start development mode

Run the development server to watch for changes and automatically sync to HubSpot.
npm run start
This command runs Tailwind CSS, esbuild, and HubSpot CLI in parallel with file watching enabled.
The theme will be uploaded to /FreshJuiceDEV in your HubSpot portal. You can change this in package.json.
4

Build your first page

In the HubSpot portal, create a new page and select the FreshJuice DEV theme. Choose from multiple templates:
  • Home — Landing page with hero section
  • Blog — Blog listing and post templates
  • Landing Page — Modular drag-and-drop layout
  • Pricing — Pre-styled pricing page
Add modules from the sidebar to build your page.

Why FreshJuice DEV?

A minimal, performant foundation for custom HubSpot theme development

Tailwind CSS 4.x

Modern utility-first CSS with custom theme configuration and responsive design out of the box.

Alpine.js Interactivity

Lightweight JavaScript framework with collapse, focus, and intersect plugins for rich interactions.

37 Pre-built Modules

Buttons, cards, testimonials, pricing tables, navigation, blog components, and more.

HubL Macros & Utilities

Custom macros for slugification, unique IDs, reading time, and more.

Fast Build Pipeline

esbuild for JavaScript bundling and Tailwind CLI for CSS — both optimized for speed.

Version Management

Built-in scripts to bump patch, minor, and major versions across theme files.

Explore by Topic

Deep dive into core concepts and development workflows

📁

Project Structure

Understand the source and theme directory layout, build outputs, and module organization.

Learn more
🏗️

HubL Templates

Learn HubSpot’s templating language and how to create layouts, partials, and system templates.

Learn more
🧩

Creating Modules

Build custom HubSpot modules with fields, templates, and meta configuration.

Learn more
⚡

Performance Optimization

Optimize page speed with Flying Pages prefetching, lazy loading, and efficient asset delivery.

Learn more

API Reference

Explore HubL macros, JavaScript utilities, and theme configuration

HubL Macros

Reusable HubL functions for slugification, unique IDs, reading time, and random numbers.

JavaScript Modules

Alpine.js setup, script loaders, debug utilities, and DOM helpers.

Theme Configuration

Global color fields, responsive breakpoints, and theme.json structure.

Ready to build your next HubSpot site?

Get started with FreshJuice DEV today and experience the speed and flexibility of a modern HubSpot theme.

Get Started Now

Build docs developers (and LLMs) love

Get started for freeTalk to us