Skip to main content
The theme.json file contains metadata about your FreshJuice DEV theme, including theme information, responsive breakpoints, and preview settings.

​
File Location

theme/theme.json

​
Complete Structure

theme.json
{
  "label": "FreshJuice DEV",
  "version": "3.0.0",
  "author": {
    "name": "Alex Zappa",
    "email": "[email protected]",
    "url": "https://alex.zappa.dev"
  },
  "documentation_url": "https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme",
  "example_url": "https://143910617.hs-sites-eu1.com",
  "preview_path": "./templates/home.html",
  "screenshot_path": "./images/template-previews/blog-index.png",
  "enable_domain_stylesheets": false,
  "license": "MIT",
  "responsive_breakpoints": [
    {
      "name": "mobile",
      "mediaQuery": "@media (max-width: 767px)",
      "previewWidth": {
        "value": 375
      }
    }
  ]
}

​
Field Reference

​
Theme Information

​
label
string
required
The display name of the theme shown in the HubSpot design manager.Default: "FreshJuice DEV"
​
version
string
required
The current version of the theme following Semantic Versioning.Format: MAJOR.MINOR.PATCHExample: "3.0.0"
This version is automatically updated when you run npm run version:patch, npm run version:minor, or npm run version:major.
​
license
string
The license under which the theme is distributed.Default: "MIT"

​
Author Information

​
author
object
Information about the theme author.

​
URLs

​
documentation_url
string
Link to the theme documentation. This appears in the HubSpot design manager.Default: "https://github.com/freshjuice-dev/freshjuice-dev-hubspot-theme"
​
example_url
string
Link to a live demo site using this theme.

​
Preview Configuration

​
preview_path
string
The default template to display when previewing the theme in the design manager.Default: "./templates/home.html"Path Format: Relative to the theme root directory
​
screenshot_path
string
Path to the theme screenshot image displayed in the theme marketplace and design manager.Default: "./images/template-previews/blog-index.png"Recommended Size: 1200x900 pixels (4:3 aspect ratio)

​
Styling Options

​
enable_domain_stylesheets
boolean
Whether to enable domain-specific stylesheets.Default: false
When enabled, you can create separate CSS files for different domains using the same theme. This is useful for white-label implementations.

​
Responsive Breakpoints

​
responsive_breakpoints
array
Defines responsive breakpoints for preview mode in the HubSpot page editor.

​
Default Breakpoint

FreshJuice DEV includes one responsive breakpoint by default:
NameMedia QueryPreview Width
mobile@media (max-width: 767px)375px
This aligns with Tailwind CSS’s default md: breakpoint (768px).

​
Adding Custom Breakpoints

To add additional breakpoints (e.g., tablet, desktop), extend the responsive_breakpoints array: 
{
  "responsive_breakpoints": [
    {
      "name": "mobile",
      "mediaQuery": "@media (max-width: 767px)",
      "previewWidth": {
        "value": 375
      }
    },
    {
      "name": "tablet",
      "mediaQuery": "@media (min-width: 768px) and (max-width: 1023px)",
      "previewWidth": {
        "value": 768
      }
    },
    {
      "name": "desktop",
      "mediaQuery": "@media (min-width: 1024px)",
      "previewWidth": {
        "value": 1440
      }
    }
  ]
}
After modifying theme.json, you must re-upload the theme to HubSpot using npm run upload:hubspot for changes to take effect.

​
Version Management

The version field is automatically synchronized with package.json when you run version bump scripts: 
npm run version:patch
See the Version Management guide for details.

Theme Fields

Global color, font, and style configuration

Version Management

Guide to managing theme versions

Build docs developers (and LLMs) love

Get started for freeTalk to us