diff --git a/docs/platforms/javascript/common/apis.mdx b/docs/platforms/javascript/common/apis.mdx
new file mode 100644
index 0000000000000..d6768e5a7aad1
--- /dev/null
+++ b/docs/platforms/javascript/common/apis.mdx
@@ -0,0 +1,75 @@
+---
+title: APIs
+description: "Learn more about APIs of the SDK."
+customCanonicalTag: "/platforms/javascript/apis/"
+sidebar_order: 3
+---
+
+This page shows all available to-level APIs of the SDK. You can use them like this:
+
+```javascript
+import * as Sentry from "@sentry/browser";
+
+Sentry.setTag("tag", "value");
+```
+
+## Available Options
+
+<TableOfContents ignoreIds={["available-options"]} />
+
+## Enriching Events
+
+<SdkApi
+  name="addBreadcrumb"
+  signature="function addBreadcrumb(breadcrumb: Breadcrumb, hint?: Hint): void"
+  parameters={[
+    {
+      name: "breadcrumb",
+      required: true,
+      type: [
+        {
+          name: "message",
+          type: "string",
+          description:
+            "If a message is provided, it is rendered as text with all whitespace preserved.",
+        },
+        {
+          name: "type",
+          type: '"default" | "debug" | "error" | "info" | "navigation" | "http" | "query" | "ui" | "user"',
+          defaultValue: '"default"',
+          description:
+            "The type influences how a breadcrumb is rendered in Sentry. When in doubt, leave it at `default`.",
+        },
+        {
+          name: "level",
+          type: '"fatal" | "error" | "warning" | "log" | "info" | "debug"',
+          defaultValue: '"info"',
+          description:
+            "The level is used in the UI to emphasize or deemphasize the breadcrumb.",
+        },
+        {
+          name: "category",
+          type: "string",
+          description:
+            "Typically it is a module name or a descriptive string. For instance, `ui.click` could be used to indicate that a click happened",
+        },
+        {
+          name: "data",
+          type: "Record<string, unknown>",
+          description:
+            "Additional data that should be sent with the breadcrumb.",
+        },
+      ],
+    },
+    {
+      name: "hint",
+      type: "Record<string, unknown>",
+      description:
+        "A hint object containing additional information about the breadcrumb.",
+    },
+  ]}
+>
+  You can manually add breadcrumbs whenever something interesting happens. For
+  example, you might manually record a breadcrumb if the user authenticates or
+  another state change occurs.
+</SdkApi>
diff --git a/src/components/sdkApi.tsx b/src/components/sdkApi.tsx
new file mode 100644
index 0000000000000..f97a61c928da1
--- /dev/null
+++ b/src/components/sdkApi.tsx
@@ -0,0 +1,99 @@
+import {Fragment} from 'react';
+import {jsx, jsxs} from 'react/jsx-runtime';
+import {toJsxRuntime} from 'hast-util-to-jsx-runtime';
+import {Nodes} from 'hastscript/lib/create-h';
+import bash from 'refractor/lang/bash.js';
+import json from 'refractor/lang/json.js';
+import {refractor} from 'refractor/lib/core.js';
+
+import {PlatformCategory} from 'sentry-docs/types';
+
+import {Expandable} from './expandable';
+import {SdkDefinition, SdkDefinitionTable} from './sdkDefinition';
+
+interface ParameterDef {
+  name: string;
+  type: string | ParameterDef[];
+  defaultValue?: string;
+  description?: string;
+  required?: boolean;
+}
+
+type Props = {
+  name: string;
+  parameters: ParameterDef[];
+  signature: string;
+  categorySupported?: PlatformCategory[];
+  children?: React.ReactNode;
+  language?: string;
+};
+
+refractor.register(bash);
+refractor.register(json);
+
+const codeToJsx = (code: string, lang = 'json') => {
+  return toJsxRuntime(refractor.highlight(code, lang) as Nodes, {Fragment, jsx, jsxs});
+};
+
+export function SdkApi({
+  name,
+  children,
+  signature,
+  parameters = [],
+  // TODO: How to handle this default better?
+  language = 'typescript',
+  categorySupported = [],
+}: Props) {
+  return (
+    <SdkDefinition name={name} categorySupported={categorySupported}>
+      <pre className="mt-2 mb-2">{codeToJsx(signature, language)}</pre>
+
+      {parameters.length ? (
+        <Expandable title="Parameters">
+          <SdkDefinitionTable className="bg-white">
+            {parameters.map(param => (
+              <ApiParameterDef key={param.name} {...param} />
+            ))}
+          </SdkDefinitionTable>
+        </Expandable>
+      ) : null}
+
+      {children}
+    </SdkDefinition>
+  );
+}
+
+function ApiParameterDef({name, type, description, required}: ParameterDef) {
+  return (
+    <tr>
+      <th>
+        {name}
+        {required ? <span className="text-red">*</span> : null}
+      </th>
+      <td>
+        {typeof type === 'string' ? (
+          <code>{type}</code>
+        ) : (
+          <RenderNestedObject objProps={type} />
+        )}
+
+        {description ? <p className="m-0">{description}</p> : null}
+      </td>
+    </tr>
+  );
+}
+
+function RenderNestedObject({objProps}: {objProps: ParameterDef[]}) {
+  return (
+    <Fragment>
+      <div>
+        <code>Object:</code>
+      </div>
+      <SdkDefinitionTable className="mt-1">
+        {objProps.map(prop => (
+          <ApiParameterDef key={prop.name} {...prop} />
+        ))}
+      </SdkDefinitionTable>
+    </Fragment>
+  );
+}
diff --git a/src/components/sdkDefinition/index.tsx b/src/components/sdkDefinition/index.tsx
new file mode 100644
index 0000000000000..ef799aca63e7b
--- /dev/null
+++ b/src/components/sdkDefinition/index.tsx
@@ -0,0 +1,53 @@
+import {PlatformCategory} from 'sentry-docs/types';
+
+import styles from './style.module.scss';
+
+import {PlatformCategorySection} from '../platformCategorySection';
+
+type Props = {
+  name: string;
+  categorySupported?: PlatformCategory[];
+  children?: React.ReactNode;
+};
+
+export function SdkDefinition({name, children, categorySupported = []}: Props) {
+  return (
+    <PlatformCategorySection supported={categorySupported}>
+      <div>
+        <h3 id={name} aria-label={name} data-sdk-option>
+          <a href={`#${name}`}>
+            <svg
+              className="anchorlink before"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+            >
+              <path
+                d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"
+                fill="currentColor"
+              />
+            </svg>
+            {name}
+          </a>
+        </h3>
+
+        {children}
+      </div>
+    </PlatformCategorySection>
+  );
+}
+
+export function SdkDefinitionTable({
+  children,
+  className,
+}: {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <table className={styles['sdk-option-table'] + (className ? ` ${className}` : '')}>
+      <tbody>{children}</tbody>
+    </table>
+  );
+}
diff --git a/src/components/sdkOption/style.module.scss b/src/components/sdkDefinition/style.module.scss
similarity index 87%
rename from src/components/sdkOption/style.module.scss
rename to src/components/sdkDefinition/style.module.scss
index 263f6f8e40516..74a84ee713203 100644
--- a/src/components/sdkOption/style.module.scss
+++ b/src/components/sdkDefinition/style.module.scss
@@ -1,12 +1,20 @@
 .sdk-option-table {
   --border-radius: 6px;
-
+  font-size: 1rem;
   width: auto !important;
 
   // This is necessary to make rounded borders work :(
   border-collapse: separate !important;
   border-spacing: 0px;
 
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   & tr th, & tr td {
     border-bottom-width: 0;
     border-right-width: 0;
diff --git a/src/components/sdkOption.tsx b/src/components/sdkOption.tsx
new file mode 100644
index 0000000000000..781095976cdac
--- /dev/null
+++ b/src/components/sdkOption.tsx
@@ -0,0 +1,86 @@
+import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
+import {serverContext} from 'sentry-docs/serverContext';
+import {PlatformCategory} from 'sentry-docs/types';
+
+import {PlatformCategorySection} from './platformCategorySection';
+import {PlatformSection} from './platformSection';
+import {SdkDefinition, SdkDefinitionTable} from './sdkDefinition';
+
+type Props = {
+  name: string;
+  type: string;
+  categorySupported?: PlatformCategory[];
+  children?: React.ReactNode;
+  defaultValue?: string;
+  envVar?: string;
+};
+
+export function SdkOption({
+  name,
+  children,
+  type,
+  defaultValue,
+  envVar,
+  categorySupported = [],
+}: Props) {
+  const {showBrowserOnly, showServerLikeOnly} = getPlatformHints(categorySupported);
+
+  return (
+    <SdkDefinition name={name} categorySupported={categorySupported}>
+      <SdkDefinitionTable>
+        {type && <OptionDefRow label="Type" value={type} />}
+        {defaultValue && <OptionDefRow label="Default" value={defaultValue} />}
+
+        <PlatformCategorySection supported={['server', 'serverless']}>
+          <PlatformSection notSupported={['javascript.nextjs']}>
+            {envVar && <OptionDefRow label="ENV Variable" value={envVar} />}
+          </PlatformSection>
+        </PlatformCategorySection>
+
+        {showBrowserOnly && <OptionDefRow label="Only available on" value="Client" />}
+        {showServerLikeOnly && <OptionDefRow label="Only available on" value="Server" />}
+      </SdkDefinitionTable>
+
+      {children}
+    </SdkDefinition>
+  );
+}
+
+function OptionDefRow({label, value}: {label: string; value: string}) {
+  return (
+    <tr>
+      <th>{label}</th>
+      <td>
+        <code>{value}</code>
+      </td>
+    </tr>
+  );
+}
+
+function getPlatformHints(categorySupported: PlatformCategory[]) {
+  const {rootNode, path} = serverContext();
+  const currentPlatformOrGuide = getCurrentPlatformOrGuide(rootNode, path);
+  const currentCategories = currentPlatformOrGuide?.categories || [];
+
+  // We only handle browser, server & serverless here for now
+  const currentIsBrowser = currentCategories.includes('browser');
+  const currentIsServer = currentCategories.includes('server');
+  const currentIsServerless = currentCategories.includes('serverless');
+  const currentIsServerLike = currentIsServer || currentIsServerless;
+
+  const hasCategorySupported = categorySupported.length > 0;
+  const supportedBrowserOnly =
+    categorySupported.includes('browser') &&
+    !categorySupported.includes('server') &&
+    !categorySupported.includes('serverless');
+  const supportedServerLikeOnly =
+    !categorySupported.includes('browser') &&
+    (categorySupported.includes('server') || categorySupported.includes('serverless'));
+
+  const showBrowserOnly =
+    hasCategorySupported && supportedBrowserOnly && currentIsServerLike;
+  const showServerLikeOnly =
+    hasCategorySupported && supportedServerLikeOnly && currentIsBrowser;
+
+  return {showBrowserOnly, showServerLikeOnly};
+}
diff --git a/src/components/sdkOption/index.tsx b/src/components/sdkOption/index.tsx
deleted file mode 100644
index f0fc2adc96304..0000000000000
--- a/src/components/sdkOption/index.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import {getCurrentPlatformOrGuide} from 'sentry-docs/docTree';
-import {serverContext} from 'sentry-docs/serverContext';
-import {PlatformCategory} from 'sentry-docs/types';
-
-import styles from './style.module.scss';
-
-import {PlatformCategorySection} from '../platformCategorySection';
-import {PlatformSection} from '../platformSection';
-
-type Props = {
-  name: string;
-  type: string;
-  categorySupported?: PlatformCategory[];
-  children?: React.ReactNode;
-  defaultValue?: string;
-  envVar?: string;
-  group?: string;
-};
-
-export function SdkOption({
-  name,
-  children,
-  type,
-  defaultValue,
-  envVar,
-  categorySupported = [],
-}: Props) {
-  const {showBrowserOnly, showServerLikeOnly} = getPlatformHints(categorySupported);
-
-  return (
-    <PlatformCategorySection supported={categorySupported}>
-      <div>
-        <h3 id={name} aria-label={name} data-sdk-option>
-          <a href={`#${name}`}>
-            <svg
-              className="anchorlink before"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-            >
-              <path
-                d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"
-                fill="currentColor"
-              />
-            </svg>
-            {name}
-          </a>
-        </h3>
-
-        <table className={styles['sdk-option-table']}>
-          <tbody>
-            {type && (
-              <tr>
-                <th>Type</th>
-                <td>
-                  <code>{type}</code>
-                </td>
-              </tr>
-            )}
-            {defaultValue && (
-              <tr>
-                <th>Default</th>
-                <td>
-                  <code>{defaultValue}</code>
-                </td>
-              </tr>
-            )}
-            <PlatformCategorySection supported={['server', 'serverless']}>
-              <PlatformSection notSupported={['javascript.nextjs']}>
-                {envVar && (
-                  <tr>
-                    <th>ENV Variable</th>
-                    <td>
-                      <code>{envVar}</code>
-                    </td>
-                  </tr>
-                )}
-              </PlatformSection>
-            </PlatformCategorySection>
-
-            {showBrowserOnly && (
-              <tr>
-                <th>Only available on</th>
-                <td>Client</td>
-              </tr>
-            )}
-
-            {showServerLikeOnly && (
-              <tr>
-                <th>Only available on</th>
-                <td>Server</td>
-              </tr>
-            )}
-          </tbody>
-        </table>
-
-        {children}
-      </div>
-    </PlatformCategorySection>
-  );
-}
-
-function getPlatformHints(categorySupported: PlatformCategory[]) {
-  const {rootNode, path} = serverContext();
-  const currentPlatformOrGuide = getCurrentPlatformOrGuide(rootNode, path);
-  const currentCategories = currentPlatformOrGuide?.categories || [];
-
-  // We only handle browser, server & serverless here for now
-  const currentIsBrowser = currentCategories.includes('browser');
-  const currentIsServer = currentCategories.includes('server');
-  const currentIsServerless = currentCategories.includes('serverless');
-  const currentIsServerLike = currentIsServer || currentIsServerless;
-
-  const hasCategorySupported = categorySupported.length > 0;
-  const supportedBrowserOnly =
-    categorySupported.includes('browser') &&
-    !categorySupported.includes('server') &&
-    !categorySupported.includes('serverless');
-  const supportedServerLikeOnly =
-    !categorySupported.includes('browser') &&
-    (categorySupported.includes('server') || categorySupported.includes('serverless'));
-
-  const showBrowserOnly =
-    hasCategorySupported && supportedBrowserOnly && currentIsServerLike;
-  const showServerLikeOnly =
-    hasCategorySupported && supportedServerLikeOnly && currentIsBrowser;
-
-  return {showBrowserOnly, showServerLikeOnly};
-}
diff --git a/src/mdxComponents.ts b/src/mdxComponents.ts
index f433c793de689..0f61fb91a3660 100644
--- a/src/mdxComponents.ts
+++ b/src/mdxComponents.ts
@@ -33,6 +33,7 @@ import {PlatformSdkPackageName} from './components/platformSdkPackageName';
 import {PlatformSection} from './components/platformSection';
 import {RelayMetrics} from './components/relayMetrics';
 import {SandboxLink} from './components/sandboxLink';
+import {SdkApi} from './components/sdkApi';
 import {SdkOption} from './components/sdkOption';
 import {SignInNote} from './components/signInNote';
 import {SmartLink} from './components/smartLink';
@@ -56,6 +57,7 @@ export function mdxComponents(
     CodeTabs,
     ConfigKey,
     SdkOption,
+    SdkApi,
     TableOfContents,
     CreateGitHubAppForm,
     ConfigValue,