SearchApi Design System
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div class="space-y-3" data-playground-target="curl"
     data-playground-url="https://www.searchapi.io/api/v1/search?engine=google&q=coffee&api_key=E5oa7LbhkKN7YUyj4CwXppK8"
     data-playground-query="engine=google&q=coffee&api_key=E5oa7LbhkKN7YUyj4CwXppK8">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <nav aria-label="Export target">
      <ul class="inline-flex flex-wrap gap-0.5 rounded-lg bg-surface-sunk p-0.5">
        <li>
          <a href="/docs/google/code?target=curl"
           class="inline-block rounded-md bg-surface px-3 py-1 text-sm font-medium text-ink shadow-xs"
           aria-current="page">cURL</a>
        </li>
        <li>
          <a href="/docs/google/code?target=ruby"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Ruby</a>
        </li>
        <li>
          <a href="/docs/google/code?target=python"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Python</a>
        </li>
        <li>
          <a href="/docs/google/code?target=javascript"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >JavaScript</a>
        </li>
        <li>
          <a href="/docs/google/code?target=n8n"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >n8n <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
          </a>
        </li>
        <li>
          <a href="/docs/google/code?target=mcp"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >MCP <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
          </a>
        </li>
        <li>
          <a href="/docs/google/code?target=tool"
           class="inline-block rounded-md px-3 py-1 text-sm text-ink-muted transition-colors hover:text-ink"
           >Tool <span class="inline-block rounded-full px-2.5 py-0.5 text-xs font-semibold bg-badge-primary text-badge-primary-ink">New</span>
          </a>
        </li>
      </ul>
    </nav>
    <button type="button"
        class="inline-flex shrink-0 items-center gap-1.5 rounded-md text-sm text-ink-muted transition-colors hover:border-accent-line hover:text-ink border border-line-strong bg-surface px-2.5 py-1"
        data-controller="copy"
        data-action="copy#copy"
        data-copy-text-value="curl "https://www.searchapi.io/api/v1/search?engine=google&q=coffee&api_key=E5oa7LbhkKN7YUyj4CwXppK8""
        >
      <span class="inline-flex items-center gap-1.5" data-copy-target="idle">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
          <path d="M9 3.75h9a1.5 1.5 0 0 1 1.5 1.5v9" /><path d="M6 8.25h9a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5H6a1.5 1.5 0 0 1-1.5-1.5v-9A1.5 1.5 0 0 1 6 8.25Z" />
        </svg>
        <span>Copy cURL command</span>
      </span>
      <span class="inline-flex items-center gap-1.5 text-ink" data-copy-target="done" role="status" hidden>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
         stroke-linecap="round" stroke-linejoin="round" class="size-4 shrink-0" aria-hidden="true">
          <path d="M4.5 12.75 9 17.25l10.5-10.5" />
        </svg>
        <span>Copied</span>
      </span>
    </button>
  </div>
  <figure class="flex h-full flex-col overflow-hidden rounded-2xl bg-surface-code shadow-md">
    <figcaption class="flex items-center px-4 py-3">
      <span class="text-xs font-medium uppercase tracking-wider text-code-fg">cURL</span>
    </figcaption>
    <pre class="overflow-x-auto px-4 pb-4 font-mono text-sm text-code-fg"><code><span class="text-code-keyword">curl</span><span class="text-code-fg"> </span><span class="text-code-string">"https://www.searchapi.io/api/v1/search?engine=google&q=coffee&api_key=E5oa7LbhkKN7YUyj4CwXppK8"</span></code></pre>
  </figure>
</div>
1
2
3
4
5
render CodeSampleComponent.new(
  sample: code_sample(engine: engine, target: target),
  tabs: target_tabs(engine: engine, active: target),
  note: note.presence
)

The composition, previewed as a composition: the switcher, the copy control and the dark card assembled once rather than at each call site — which is exactly the drift that put two disagreeing copy buttons on the captured pages.

The api_key is always the placeholder. A sample that looked like it held a real key would be copied, fail, and teach nothing about why.

Param Description Input

—

—

—