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

# Overview

> Open-source client libraries for the CMS API

## Server-side SDKs

Cutemshort offers server-side SDKs for many popular programming languages, making it easy to integrate the CMS API into your existing stack.

<div
  style={{
display: "grid",
gridTemplateColumns: "repeat(2, 1fr)",
gap: "16px",
margin: "28px 0 48px 0",
}}
>
  {[
      {
        name: "TypeScript",
        desc: "TypeScript library for the CMS API",
        href: "/sdks/serverside/typescriptSDK",
        img: "/images/Attribution/tslogo.svg",
      },
      {
        name: "Python",
        desc: "Python library for the CMS API",
        href: "/sdks/serverside/pythonSDK",
        img: "/images/Attribution/pylogo.png",
      },
      {
        name: "PHP",
        desc: "PHP library for the CMS API",
        href: "/sdks/serverside/phpSDK",
        img: "/images/Attribution/php.png",
        badge: null,
      },
    ].map((item) => (
      <a
        key={item.name}
        href={item.href}
        style={{
          padding: "20px",
          display: "flex",
          alignItems: "center",
          gap: "16px",
          border: "1px solid var(--color-border, #e5e7eb)",
          borderRadius: "14px",
          textDecoration: "none",
          color: "var(--color-text-primary)",
          background: "var(--color-background-primary)",
          transition: "all 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
          position: "relative",
          overflow: "hidden",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.borderColor = "#6366f1";
          e.currentTarget.style.boxShadow = "0 8px 24px rgba(99, 102, 241, 0.12)";
          e.currentTarget.style.transform = "translateY(-2px)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.borderColor = "var(--color-border, #e5e7eb)";
          e.currentTarget.style.boxShadow = "none";
          e.currentTarget.style.transform = "translateY(0)";
        }}
      >
        <div
          style={{
            width: "44px",
            height: "44px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexShrink: 0,
          }}
        >
          <img
            src={item.img}
            alt={item.name}
            style={{ width: "24px", height: "24px", objectFit: "contain" }}
          />
        </div>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "3px" }}>
            <span style={{ fontSize: "15px", fontWeight: "600", letterSpacing: "-0.01em" }}>
              {item.name}
            </span>
          </div>
          <div style={{ fontSize: "13px", color: "var(--color-text-secondary)", lineHeight: "1.4" }}>
            {item.desc}
          </div>
        </div>

        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          style={{ flexShrink: 0, color: "var(--color-text-secondary)", opacity: 0.5 }}
        >
          <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    ))}
</div>

## Client-side SDKs

Use our client-side SDK to capture analytics and user events directly from the browser.

<div style={{ marginTop: "24px", maxWidth: "480px" }}>
  <a
    href="/sdks/clientside/introduction"
    style={{
  padding: "20px",
  display: "flex",
  alignItems: "center",
  gap: "16px",
  border: "1px solid var(--color-border, #e5e7eb)",
  borderRadius: "14px",
  textDecoration: "none",
  color: "var(--color-text-primary)",
  background: "var(--color-background-primary)",
  transition: "all 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
}}
    onMouseEnter={(e) => {
  e.currentTarget.style.borderColor = "#6366f1";
  e.currentTarget.style.boxShadow = "0 8px 24px rgba(99, 102, 241, 0.12)";
  e.currentTarget.style.transform = "translateY(-2px)";
}}
    onMouseLeave={(e) => {
  e.currentTarget.style.borderColor = "var(--color-border, #e5e7eb)";
  e.currentTarget.style.boxShadow = "none";
  e.currentTarget.style.transform = "translateY(0)";
}}
  >
    <div
      style={{
    width: "44px",
    height: "44px",
    borderRadius: "10px",
    background: "var(--color-background-secondary, #f9fafb)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
    border: "1px solid var(--color-border, #e5e7eb)",
  }}
    >
      <img src="https://mintcdn.com/cutmeshort/WRUKHC6fhoVKHM9y/images/Attribution/script.png?fit=max&auto=format&n=WRUKHC6fhoVKHM9y&q=85&s=f8b0cd3612b8fdf48247975638a00886" alt="CMS Analytics SDK" style={{ width: "24px", height: "24px", objectFit: "contain" }} width="512" height="512" data-path="images/Attribution/script.png" />
    </div>

    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: "15px", fontWeight: "600", letterSpacing: "-0.01em", marginBottom: "3px" }}>
        CMS Analytics SDK
      </div>

      <div style={{ fontSize: "13px", color: "var(--color-text-secondary)", lineHeight: "1.4" }}>
        Client-side tracking and analytics SDK
      </div>
    </div>

    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ flexShrink: 0, color: "var(--color-text-secondary)", opacity: 0.5 }}>
      <path d="M6 3l5 5-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </a>
</div>