> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 4e92b98e-655e-41e6-aa93-89ed1a117e59
---

# HubSpot Developer Documentation

export const IntroCard = ({img, title, description, bullets = []}) => {
  return <div className="flex flex-col gap-6 mb-8">
      <div className="w-full h-42 overflow-hidden rounded-xl">
          <img src={img} className="w-full h-full object-cover pointer-events-none" alt={title} />
        </div>
      <div className="flex flex-col gap-3">
        <h2 className="text-xl font-[2rem] text-gray-900 dark:text-gray-200 text-left">
          {title}
        </h2>
        <p className="text-gray-600 dark:text-gray-400 text-md text-left">
          {description}
        </p>
      </div>
      {bullets.length > 0 && <div className="px-3 w-fit">
          <ul className="list-inside space-y-1 text-sm text-gray-800 dark:text-gray-200 text-left">
            {bullets.map((bullet, index) => <li key={index}>{bullet}</li>)}
          </ul>
        </div>}
    </div>;
};

export function openSearch() {
  document.getElementById('search-bar-entry').click();
}

<div className="relative w-full flex items-center justify-center h-[36rem] sm:h-[30rem] sm:mt-0 md:mt-20 lg:mt-0 overflow-hidden page-header">
  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 2rem', maxWidth: '800px' }} className="mt-36 sm:mt-0">
    <div
      className="dark:text-[#f7f5ee] header-text"
      style={{
   fontWeight: '500',
   fontSize: '3.5rem',
   margin: '0 0 1rem 0',
   lineHeight: '1.1',
   fontFamily: 'HubSpot Serif'
  }}
    >
      Bring Productivity To Life Through Code
    </div>

    <div className="flex items-center justify-center pt-10" style={{ maxWidth: '600px', margin: '0 auto' }}>
      <button
        type="button"
        className="w-full flex items-center justify-start text-base leading-6 rounded-full py-4 px-6 text-gray-500 bg-white dark:bg-black border-2 border-[#B9CDBE] dark:border-[#B9CDBE] hover:border-gray-300 dark:hover:border-gray-500 transition-colors"
        id="home-search-entry"
        style={{
      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    }}
        onClick={openSearch}
      >
        <svg width="20" height="20" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-3">
          <g clip-path="url(#clip0_8010_4440)">
            <path d="M3.69466 7.97223L4.35577 9.64445L6.02799 10.3056L4.35577 10.9667L3.69466 12.6389L3.03355 10.9667L1.36133 10.3056L3.03355 9.64445L3.69466 7.97223Z" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />

            <path d="M8.75022 1.36111L9.85233 4.14789L12.6391 5.25L9.85233 6.35211L8.75022 9.13889L7.64811 6.35211L4.86133 5.25L7.64811 4.14789L8.75022 1.36111Z" stroke="#999999" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </g>

          <defs>
            <clipPath id="clip0_8010_4440">
              <rect width="14" height="14" fill="white" />
            </clipPath>
          </defs>
        </svg>

        <span className="text-gray-600 dark:text-gray-300">Search or ask...</span>
      </button>
    </div>
  </div>
</div>

<div style={{ maxWidth:"80rem",margin:"1rem auto",padding:"0 2rem" }}>
  <div style={{ marginBottom:"4rem", textAlign: "center", paddingTop: "1rem" }}>
    <p className="text-lg text-gray-600 dark:text-gray-400 mb-8 pb-10max-w-2xl header-subtitle" style={{ margin: "0 auto 2rem auto" }}>
      Welcome to the HubSpot Developer Documentation. Build custom CRM and data-driven website experiences on HubSpot. Follow the steps below to get started, or jump directly into a quickstart that fits your build.
    </p>

    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8" style={{ textAlign: "left" }}>
      <div className="mt-5 get-started-text">
        <Accordion title="Get Started" defaultOpen="true" icon="shapes">
          1. Install the HubSpot CLI globally
          2. Authorize your HubSpot account
          3. Start building
        </Accordion>
      </div>

      <div>
        <CodeGroup className="homepage-codegroup" style={{ textAlign: "left" }}>
          ```bash npm theme={null}
          npm install -g @hubspot/cli && hs init
          ```

          ```bash yarn theme={null}
          yarn global add @hubspot/cli && hs init
          ```

          ```bash pnpm theme={null}
          pnpm add -g @hubspot/cli && hs init
          ```

          ```bash ruby theme={null}
          gem install hubspot-cli && hs init
          ```
        </CodeGroup>

        <CodeGroup>
          ```bash Build your first project theme={null}
          hs get-started
          ```
        </CodeGroup>
      </div>
    </div>

    <div className="pt-5 dark:hidden">
      <CardGroup cols={3} className="home-cards">
        <IntroCard
          img="https://mintlify-assets.b-cdn.net/hubspot/datain-light.svg"
          title="Get Data In and Out of HubSpot"
          description="Easily migrate data in and out of HubSpot using modern APIs and data tools."
          bullets={[
<a
key="import-api"
href="/api-reference/latest/crm/imports/guide"
className=""
onClick={(e) => e.stopPropagation()}>
Import/Export data</a>,
<a
key="custom-channels"
href="/api-reference/legacy/conversations/guide"
className=""
onClick={(e) => e.stopPropagation()}>
Custom channels</a>,
<a
key="crm-object-sync"
href="https://github.com/hubspotdev/crm-object-sync"
className=""
onClick={(e) => e.stopPropagation()}>
CRM object sync</a>
]}
        />

        <IntroCard
          title="Visualize Data in HubSpot"
          description="Add custom UI elements (like CRM cards) to display your data right inside of HubSpot."
          img="https://mintlify-assets.b-cdn.net/hubspot/visualize-light.svg"
          bullets={[
<a
key="custom-cards"
href="/apps/developer-platform/add-features/ui-extensions/extension-points/app-cards/overview"
className=""
onClick={(e) => e.stopPropagation()}>
Custom cards</a>,
<a
key="custom-quota"
href="/apps/developer-platform/add-features/ui-extensions/extension-points/create-a-settings-page"
className=""
onClick={(e) => e.stopPropagation()}>
App settings page</a>,
<a
key="calling-extensions"
href="/api-reference/latest/crm/extensions/calling-extensions/third-party-calling"
className=""
onClick={(e) => e.stopPropagation()}>
Custom calling extensions</a>
]}
        />

        <IntroCard
          title="Act on Data in HubSpot"
          description="Automate actions, trigger workflows, and extend HubSpot logic to fit your business."
          img="https://mintlify-assets.b-cdn.net/hubspot/act-light.svg"
          bullets={[
<a
key="custom-workflow"
href="/api-reference/latest/automation/workflow-actions/custom-action-guide"
className=""
onClick={(e) => e.stopPropagation()}>
Custom coded workflows</a>,
<a
key="action-builder"
href="/apps/developer-platform/add-features/"
className=""
onClick={(e) => e.stopPropagation()}>
Custom action builder</a>,
<a
key="membership"
href="/cms/start-building/features/memberships/overview"
className=""
onClick={(e) => e.stopPropagation()}>
Gated website content</a>,
<a
key="conversations-api"
href="/api-reference/legacy/conversations/guide"
className=""
onClick={(e) => e.stopPropagation()}>
Conversations API</a>
]}
        />
      </CardGroup>
    </div>

    <div className="pt-5 hidden dark:block home-cards">
      <CardGroup cols={3}>
        <IntroCard
          img="https://mintlify-assets.b-cdn.net/hubspot/datain-dark.svg"
          title="Get Data In and Out of HubSpot"
          description="Easily migrate data in and out of HubSpot using modern APIs and data tools."
          bullets={[
<a
key="import-api"
href="/api-reference/latest/crm/imports/guide"
className=""
onClick={(e) => e.stopPropagation()}>
Import/Export data</a>,
<a
key="custom-channels"
href="/api-reference/legacy/conversations/guide"
className=""
onClick={(e) => e.stopPropagation()}>
Custom channels</a>,
 <a
key="crm-object-sync"
href="https://github.com/hubspotdev/crm-object-sync"
className=""
onClick={(e) => e.stopPropagation()}>
CRM object sync</a>
]}
        />

        <IntroCard
          title="Visualize Data in HubSpot"
          description="Add custom UI elements (like CRM cards) to display your data right inside of HubSpot."
          img="https://mintlify-assets.b-cdn.net/hubspot/visualize-dark.svg"
          bullets={[
<a
key="custom-cards"
href="/apps/developer-platform/add-features/ui-extensions/extension-points/app-cards/overview"
className=""
onClick={(e) => e.stopPropagation()}>
Custom cards</a>,
<a
key="custom-quota"
href="/apps/developer-platform/add-features/ui-extensions/extension-points/create-a-settings-page"
className=""
onClick={(e) => e.stopPropagation()}>
App settings page</a>,
<a
key="calling-extensions"
href="/api-reference/latest/crm/extensions/calling-extensions/third-party-calling"
className=""
onClick={(e) => e.stopPropagation()}>
Custom calling extensions</a>
]}
        />

        <IntroCard
          title="Act on Data in HubSpot"
          description="Automate actions, trigger workflows, and extend HubSpot logic to fit your business."
          img="https://mintlify-assets.b-cdn.net/hubspot/act-dark.svg"
          bullets={[
<a
key="custom-workflow"
href="/api-reference/automation-actions-v4-v4/custom-action-guide"
className=""
onClick={(e) => e.stopPropagation()}>
Custom coded workflows</a>,
<a
key="action-builder"
href="/apps/developer-platform/add-features/custom-workflow-actions"
className=""
onClick={(e) => e.stopPropagation()}>
Custom action builders</a>,
<a
key="membership"
href="/cms/start-building/features/memberships/overview"
className=""
onClick={(e) => e.stopPropagation()}>
Gated content</a>,
<a
key="conversations-api"
href="/api-reference/2026-09-beta/conversations/conversations/guide"
className=""
onClick={(e) => e.stopPropagation()}>
Conversations API</a>
]}
        />
      </CardGroup>
    </div>
  </div>

  <div className="pb-20">
    <div style={{textAlign: "center", paddingTop: "1rem" }}>
      <h2 className="text-3xl font-semibold text-gray-900 dark:text-gray-100 mb-5">
        Resources
      </h2>
    </div>

    <div style={{ marginBottom:"6rem" }}>
      <CardGroup cols={3}>
        <Card title="Get Started" icon="rocket" href="/getting-started/quickstart">
          Create your first app or template in minutes
        </Card>

        <Card title="Platform Overview" icon="building" href="/apps/developer-platform/overview">
          Get to know HubSpot's development platform and tools
        </Card>

        <Card title="API Reference" icon="code" href="/api-reference/latest/overview">
          Integrate with HubSpot's APIs
        </Card>

        <Card title="Developer Changelog" icon="clock" href="https://developers.hubspot.com/changelog">
          Learn about new changes and releases
        </Card>

        <Card title="HubSpot Developers Channel" icon="video" href="https://www.youtube.com/c/HubSpotDevelopers">
          Explore educational developer content
        </Card>

        <Card title="HubSpot Community" icon="users" href="https://developers.hubspot.com/community">
          Join the HubSpot Community
        </Card>
      </CardGroup>
    </div>
  </div>
</div>
