PageSourceSearch

https://niwrap.dev/

html niwrap.dev collected 2026-10-09 22:08:54 UTC 35,665 bytes, 1,155 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
7    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
8    <meta
9      name="theme-color"
10      media="(prefers-color-scheme: light)"
11      content="#ffffff"
12    />
13    <meta
14      name="theme-color"
15      media="(prefers-color-scheme: dark)"
16      content="#0d1117"
17    />
18    <title>NiWrap - Type-safe neuroimaging tools</title>
19    <meta
20      name="description"
21      content="Seamless, programmatic access to FSL, ANTs, AFNI, FreeSurfer, MRtrix3 and more neuroimaging tools through clean, type-safe APIs in Python, TypeScript, and R."
22    />
23    <link rel="canonical" href="https://niwrap.dev/" />
24    <!-- Open Graph / social previews -->
25    <meta property="og:type" content="website" />
26    <meta property="og:site_name" content="NiWrap" />
27    <meta property="og:url" content="https://niwrap.dev/" />
28    <meta property="og:title" content="NiWrap - Type-safe neuroimaging tools" />
29    <meta
30      property="og:description"
31      content="Use neuroimaging tools directly from Python, TypeScript, or R with IDE autocompletion, type checking, and structured outputs."
32    />
33    <meta
34      property="og:image"
35      content="https://niwrap.dev/niwrap/og-image.png"
36    />
37    <meta property="og:image:type" content="image/png" />
38    <meta property="og:image:width" content="1200" />
39    <meta property="og:image:height" content="630" />
40    <meta
41      property="og:image:alt"
42      content="NiWrap - type-safe neuroimaging tools for Python and TypeScript"
43    />
44    <meta name="twitter:card" content="summary_large_image" />
45    <meta
46      name="twitter:title"
47      content="NiWrap - Type-safe neuroimaging tools"
48    />
49    <meta
50      name="twitter:description"
51      content="Use neuroimaging tools directly from Python, TypeScript, or R with IDE autocompletion, type checking, and structured outputs."
52    />
53    <meta
54      name="twitter:image"
55      content="https://niwrap.dev/niwrap/og-image.png"
56    />
57    <!-- Structured data (Schema.org) -->
58    
58<script type="application/ld+json">
59      {
60        "@context": "https://schema.org",
61        "@graph": [
62          {
63            "@type": "Organization",
64            "@id": "https://niwrap.dev/#organization",
65            "name": "NiWrap",
66            "url": "https://niwrap.dev/",
67            "logo": "https://raw.githubusercontent.com/styx-api/niwrap/main/logo.svg",
68            "sameAs": [
69              "https://github.com/styx-api",
70              "https://discord.gg/QMKUVCFWsR"
71            ]
72          },
73          {
74            "@type": "WebSite",
75            "@id": "https://niwrap.dev/#website",
76            "name": "NiWrap",
77            "url": "https://niwrap.dev/",
78            "description": "Type-safe access to neuroimaging CLI tools from Python, TypeScript, and R.",
79            "publisher": { "@id": "https://niwrap.dev/#organization" }
80          },
81          {
82            "@type": "SoftwareApplication",
83            "name": "NiWrap",
84            "applicationCategory": "DeveloperApplication",
85            "operatingSystem": "Linux, macOS, Windows",
86            "url": "https://niwrap.dev/",
87            "description": "Programmatic access to FSL, ANTs, AFNI, FreeSurfer, MRtrix3 and more neuroimaging tools through clean, type-safe APIs with IDE autocompletion, type checking, and structured outputs.",
88            "programmingLanguage": ["Python", "TypeScript"],
89            "softwareHelp": "https://niwrap.dev/styxbook/",
90            "isAccessibleForFree": true,
91            "offers": {
92              "@type": "Offer",
93              "price": "0",
94              "priceCurrency": "USD"
95            },
96            "publisher": { "@id": "https://niwrap.dev/#organization" }
97          }
98        ]
99      }
100    </script>
100
101    <link rel="preconnect" href="https://fonts.googleapis.com" />
102    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
103    <link
104      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap"
105      rel="stylesheet"
106    />
107    <!-- Cloudflare Web Analytics -->
vendor: 122 bytes, lines 107-111
107
108    <script
109      defer
110      src="https://static.cloudflareinsights.com/beacon.min.js"
111      data-cf-beacon='{"token": "
1113cc81275d9484412b3569fdb3580758a
vendor: 23 bytes, lines 111-113
111"}'
112    ></script>
113    
113<!-- End Cloudflare Web Analytics -->
114    <!-- Set theme before first paint to avoid a flash of the wrong theme -->
115    
115<script>
116      (function () {
117        var saved = localStorage.getItem("theme");
118        var theme =
119          saved ||
120          (window.matchMedia("(prefers-color-scheme: dark)").matches
121            ? "dark"
122            : "light");
123        document.documentElement.setAttribute("data-theme", theme);
124      })();
125    </script>
125
126    <style>
127      :root {
128        --bg-primary: #ffffff;
129        --bg-secondary: #f6f8fa;
130        --border-primary: #d0d7de;
131        --border-secondary: #d0d7de;
132        --text-primary: #1f2328;
133        --text-secondary: #656d76;
134        --text-tertiary: #656d76;
135        --accent-primary: #1f883d;
136        --accent-hover: #1a7f37;
137        --accent-blue: #0969da;
138        --card-bg: #f6f8fa;
139        --card-border: #d0d7de;
140        --card-hover: #e1e4e8;
141        --stat-bg: #ffffff;
142        --stat-hover: rgba(9, 105, 218, 0.08);
143        --shadow: rgba(0, 0, 0, 0.1);
144      }
145
146      [data-theme="dark"] {
147        --bg-primary: #0d1117;
148        --bg-secondary: #161b22;
149        --border-primary: #21262d;
150        --border-secondary: #30363d;
151        --text-primary: #f0f6fc;
152        --text-secondary: #c9d1d9;
153        --text-tertiary: #8b949e;
154        --accent-primary: #238636;
155        --accent-hover: #2ea043;
156        --accent-blue: #58a6ff;
157        --card-bg: #161b22;
158        --card-border: #21262d;
159        --card-hover: #30363d;
160        --stat-bg: #0d1117;
161        --stat-hover: rgba(88, 166, 255, 0.05);
162        --shadow: rgba(0, 0, 0, 0.3);
163      }
164
165      * {
166        margin: 0;
167        padding: 0;
168        box-sizing: border-box;
169      }
170
171      body {
172        background-color: var(--bg-primary);
173        color: var(--text-secondary);
174        font-family:
175          "Inter",
176          -apple-system,
177          BlinkMacSystemFont,
178          "Segoe UI",
179          sans-serif;
180        line-height: 1.6;
181        transition:
182          background-color 0.3s ease,
183          color 0.3s ease;
184      }
185
186      @media (prefers-reduced-motion: reduce) {
187        * {
188          animation: none !important;
189          transition: none !important;
190        }
191      }
192
193      .container {
194        max-width: 1280px;
195        margin: 0 auto;
196        padding: 0 1.5rem;
197      }
198
199      /* Header */
200      header {
201        border-bottom: 1px solid var(--border-primary);
202        padding: 1.5rem 0;
203      }
204
205      .header-content {
206        display: flex;
207        align-items: center;
208        justify-content: space-between;
209        gap: 1rem;
210      }
211
212      .header-left {
213        display: flex;
214        align-items: center;
215        gap: 1rem;
216      }
217
218      .logo {
219        width: 40px;
220        height: 40px;
221      }
222
223      .header-text .brand-name {
224        display: block;
225        font-size: 1.25rem;
226        font-weight: 600;
227        color: var(--text-primary);
228      }
229
230      .header-text p {
231        font-size: 0.875rem;
232        color: var(--text-tertiary);
233      }
234
235      /* Theme Toggle */
236      .theme-toggle {
237        background: var(--card-bg);
238        border: 1px solid var(--border-secondary);
239        border-radius: 6px;
240        padding: 0.5rem;
241        cursor: pointer;
242        display: flex;
243        align-items: center;
244        justify-content: center;
245        transition: all 0.2s ease;
246        width: 36px;
247        height: 36px;
248      }
249
250      .theme-toggle:hover {
251        background: var(--card-hover);
252        border-color: var(--text-tertiary);
253      }
254
255      .theme-toggle svg {
256        width: 20px;
257        height: 20px;
258        color: var(--text-secondary);
259      }
260
261      .theme-icon {
262        display: none;
263      }
264
265      [data-theme="light"] .theme-icon-sun,
266      [data-theme="dark"] .theme-icon-moon {
267        display: block;
268      }
269
270      /* Hero */
271      .hero {
272        padding: 5rem 0 4rem;
273      }
274
275      .hero h1 {
276        font-size: clamp(2.25rem, 5vw, 3.75rem);
277        font-weight: 600;
278        color: var(--text-primary);
279        margin-bottom: 1.5rem;
280        letter-spacing: -0.025em;
281        line-height: 1.15;
282      }
283
284      .hero-description {
285        font-size: 1.25rem;
286        color: var(--text-secondary);
287        margin-bottom: 3rem;
288        line-height: 1.7;
289        max-width: 900px;
290      }
291
292      /* Stats */
293      .stats {
294        display: grid;
295        grid-template-columns: repeat(3, 1fr);
296        gap: 0;
297        margin: 2.5rem 0 3rem;
298        background: var(--stat-bg);
299        border: 1px solid var(--border-secondary);
300        border-radius: 8px;
301        max-width: 700px;
302        overflow: hidden;
303        box-shadow: 0 4px 12px var(--shadow);
304      }
305
306      .stat {
307        display: flex;
308        flex-direction: column;
309        align-items: center;
310        justify-content: center;
311        padding: 2rem 1.5rem;
312        border-right: 1px solid var(--border-primary);
313        transition: background-color 0.2s ease;
314      }
315
316      .stat:hover {
317        background-color: var(--stat-hover);
318      }
319
320      .stat:last-child {
321        border-right: none;
322      }
323
324      .stat-number {
325        font-size: 3.5rem;
326        font-weight: 700;
327        color: var(--accent-blue);
328        line-height: 1;
329        font-family: "JetBrains Mono", monospace;
330        margin-bottom: 0.75rem;
331        letter-spacing: -0.03em;
332      }
333
334      .stat-label {
335        font-size: 0.875rem;
336        color: var(--text-tertiary);
337        font-weight: 600;
338      }
339
340      /* CTA Buttons */
341      .cta-group {
342        display: flex;
343        gap: 1rem;
344        flex-wrap: wrap;
345      }
346
347      .cta {
348        display: inline-flex;
349        align-items: center;
350        gap: 0.5rem;
351        padding: 0.875rem 1.75rem;
352        border-radius: 6px;
353        font-weight: 600;
354        font-size: 0.9375rem;
355        text-decoration: none;
356        transition: all 0.2s ease;
357        border: 1px solid transparent;
358      }
359
360      .cta-primary {
361        background-color: var(--accent-primary);
362        color: #ffffff;
363        border-color: rgba(240, 246, 252, 0.1);
364      }
365
366      .cta-primary:hover {
367        background-color: var(--accent-hover);
368      }
369
370      .cta-secondary {
371        background-color: transparent;
372        color: var(--text-secondary);
373        border-color: var(--border-secondary);
374      }
375
376      .cta-secondary:hover {
377        background-color: var(--card-bg);
378        border-color: var(--text-tertiary);
379      }
380
381      /* Core Projects Section */
382      .section {
383        padding: 5rem 0;
384      }
385
386      .section-header {
387        margin-bottom: 3rem;
388      }
389
390      .section-title {
391        font-size: 1.75rem;
392        font-weight: 600;
393        color: var(--text-primary);
394        margin-bottom: 0.5rem;
395      }
396
397      .section-subtitle {
398        font-size: 1rem;
399        color: var(--text-secondary);
400      }
401
402      .grid {
403        display: grid;
404        grid-template-columns: 1fr;
405        gap: 1.5rem;
406      }
407
408      @media (min-width: 768px) {
409        .grid {
410          grid-template-columns: repeat(2, 1fr);
411        }
412      }
413
414      /* Cards */
415      .card {
416        border: 1px solid var(--card-border);
417        border-radius: 6px;
418        padding: 1.75rem;
419        background-color: var(--card-bg);
420        transition: border-color 0.2s ease;
421      }
422
423      .card:hover {
424        border-color: var(--border-secondary);
425      }
426
427      .card-header {
428        display: flex;
429        align-items: center;
430        gap: 0.75rem;
431        margin-bottom: 1.25rem;
432      }
433
434      .card-icon {
435        width: 32px;
436        height: 32px;
437      }
438
439      .card-title {
440        font-size: 1.125rem;
441        font-weight: 600;
442        color: var(--text-primary);
443      }
444
445      .card-description {
446        color: var(--text-secondary);
447        line-height: 1.7;
448        margin-bottom: 1.5rem;
449      }
450
451      .card-tags {
452        display: flex;
453        gap: 0.5rem;
454        flex-wrap: wrap;
455        margin-bottom: 1.5rem;
456      }
457
458      .tag {
459        padding: 0.125rem 0.625rem;
460        background-color: #1f6feb;
461        border-radius: 12px;
462        font-size: 0.75rem;
463        color: #ffffff;
464        font-weight: 500;
465      }
466
467      .card-links {
468        display: flex;
469        gap: 0.75rem;
470        flex-wrap: wrap;
471      }
472
473      .card-link {
474        padding: 0.5rem 1rem;
475        border-radius: 6px;
476        text-decoration: none;
477        font-weight: 500;
478        font-size: 0.875rem;
479        transition: all 0.2s ease;
480        display: inline-flex;
481        align-items: center;
482        gap: 0.5rem;
483      }
484
485      .link-github {
486        background-color: var(--card-bg);
487        color: var(--text-secondary);
488        border: 1px solid var(--border-secondary);
489      }
490
491      .link-github:hover {
492        background-color: var(--card-hover);
493        border-color: var(--text-tertiary);
494      }
495
496      .link-docs {
497        color: var(--accent-blue);
498        border: 1px solid transparent;
499      }
500
501      .link-docs:hover {
502        border-color: var(--accent-blue);
503      }
504
505      /* Footer */
506      footer {
507        border-top: 1px solid var(--border-primary);
508        padding: 3rem 0 2rem;
509        margin-top: 4rem;
510      }
511
512      .footer-grid {
513        display: grid;
514        grid-template-columns: 1fr;
515        gap: 2.5rem;
516        margin-bottom: 2.5rem;
517      }
518
519      @media (min-width: 640px) {
520        .footer-grid {
521          grid-template-columns: repeat(2, 1fr);
522        }
523      }
524
525      @media (min-width: 1024px) {
526        .footer-grid {
527          grid-template-columns: repeat(4, 1fr);
528        }
529      }
530
531      .footer-section h4 {
532        font-size: 0.875rem;
533        font-weight: 600;
534        color: var(--text-primary);
535        margin-bottom: 0.75rem;
536      }
537
538      .footer-links-list {
539        display: flex;
540        flex-direction: column;
541        gap: 0.5rem;
542      }
543
544      .footer-link {
545        color: var(--text-tertiary);
546        text-decoration: none;
547        font-size: 0.8125rem;
548        transition: color 0.2s ease;
549      }
550
551      .footer-link:hover {
552        color: var(--accent-blue);
553      }
554
555      .footer-link-disabled {
556        color: var(--text-tertiary);
557        opacity: 0.6;
558        cursor: not-allowed;
559      }
560
561      .footer-bottom {
562        border-top: 1px solid var(--border-primary);
563        padding-top: 1.5rem;
564        display: flex;
565        justify-content: space-between;
566        align-items: center;
567        flex-wrap: wrap;
568        gap: 1rem;
569      }
570
571      .footer-text {
572        font-size: 0.8125rem;
573        color: var(--text-tertiary);
574      }
575
576      /* Responsive */
577      @media (max-width: 640px) {
578        .stats {
579          grid-template-columns: 1fr;
580          max-width: 400px;
581        }
582
583        .stat {
584          border-right: none;
585          border-bottom: 1px solid var(--border-primary);
586        }
587
588        .stat:last-child {
589          border-bottom: none;
590        }
591
592        .footer-content {
593          flex-direction: column;
594          text-align: center;
595        }
596
597        .hero {
598          padding: 3rem 0 2rem;
599        }
600      }
601    </style>
602  </head>
603
604  <body>
605    <header>
606      <div class="container">
607        <div class="header-content">
608          <div class="header-left">
609            <img
610              src="https://raw.githubusercontent.com/styx-api/niwrap/main/logo.svg"
611              alt="NiWrap Logo"
612              class="logo"
613              width="40"
614              height="40"
615            />
616            <div class="header-text">
617              <span class="brand-name">NiWrap</span>
618              <p>Modern Neuroimaging Made Simple</p>
619            </div>
620          </div>
621          <button
622            class="theme-toggle"
623            id="theme-toggle"
624            aria-label="Toggle theme"
625          >
626            <svg
627              class="theme-icon theme-icon-sun"
628              viewBox="0 0 24 24"
629              fill="none"
630              stroke="currentColor"
631              stroke-width="2"
632              stroke-linecap="round"
633              stroke-linejoin="round"
634            >
635              <circle cx="12" cy="12" r="5"></circle>
636              <line x1="12" y1="1" x2="12" y2="3"></line>
637              <line x1="12" y1="21" x2="12" y2="23"></line>
638              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
639              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
640              <line x1="1" y1="12" x2="3" y2="12"></line>
641              <line x1="21" y1="12" x2="23" y2="12"></line>
642              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
643              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
644            </svg>
645            <svg
646              class="theme-icon theme-icon-moon"
647              viewBox="0 0 24 24"
648              fill="none"
649              stroke="currentColor"
650              stroke-width="2"
651              stroke-linecap="round"
652              stroke-linejoin="round"
653            >
654              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
655            </svg>
656          </button>
657        </div>
658      </div>
659    </header>
660
661    <main>
662      <section class="hero">
663        <div class="container">
664          <h1>Neuroimaging tools for modern workflows</h1>
665          <p class="hero-description">
666            Use neuroimaging tools directly from Python, TypeScript, or R with
667            IDE autocompletion, type checking, and structured outputs.
668          </p>
669
670          <div class="stats">
671            <div class="stat">
672              <span class="stat-number" id="tools-count">1500</span>
673              <span class="stat-label">tools</span>
674            </div>
675            <div class="stat">
676              <span class="stat-number" id="packages-count">10</span>
677              <span class="stat-label">packages</span>
678            </div>
679            <div class="stat">
680              <span class="stat-number" id="languages-count">2</span>
681              <span class="stat-label">languages</span>
682            </div>
683          </div>
684
685          <div class="cta-group">
686            <a href="https://niwrap.dev/hub" class="cta cta-primary">
687              Try NiWrap Hub
688              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
689                <path
690                  d="M6 3L11 8L6 13"
691                  stroke="currentColor"
692                  stroke-width="2"
693                  stroke-linecap="round"
694                  stroke-linejoin="round"
695                />
696              </svg>
697            </a>
698            <a href="https://niwrap.dev/styxbook/" class="cta cta-secondary">
699              Documentation
700            </a>
701          </div>
702        </div>
703      </section>
704
705      <section class="section">
706        <div class="container">
707          <div class="section-header">
708            <h2 class="section-title">Core Projects</h2>
709            <p class="section-subtitle">
710              The tools and platforms powering NiWrap
711            </p>
712          </div>
713
714          <div class="grid">
715            <div class="card">
716              <div class="card-header">
717                <img
718                  src="https://raw.githubusercontent.com/styx-api/niwrap/main/logo.svg"
719                  alt="NiWrap Logo"
720                  class="card-icon"
721                  width="32"
722                  height="32"
723                />
724                <h3 class="card-title">NiWrap Packages</h3>
725              </div>
726              <p class="card-description">
727                Type-safe Python, TypeScript, and R packages providing
728                programmatic access to neuroimaging tools. Get full IDE
729                autocompletion, type checking, and structured outputs for
730                seamless pipeline creation.
731              </p>
732              <div class="card-tags">
733                <span class="tag">FSL</span>
734                <span class="tag">ANTs</span>
735                <span class="tag">AFNI</span>
736                <span class="tag">FreeSurfer</span>
737                <span class="tag">MRTrix3</span>
738                <span class="tag">+7 more</span>
739              </div>
740              <div class="card-links">
741                <a
742                  href="https://github.com/styx-api/niwrap"
743                  class="card-link link-github"
744                >
745                  <svg
746                    width="16"
747                    height="16"
748                    viewBox="0 0 16 16"
749                    fill="currentColor"
750                  >
751                    <path
752                      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
753                    />
754                  </svg>
755                  GitHub
756                </a>
757                <a
758                  href="https://niwrap.dev/styxbook/"
759                  class="card-link link-docs"
760                >
761                  Get Started →
762                </a>
763              </div>
764            </div>
765
766            <div class="card">
767              <div class="card-header">
768                <img
769                  src="https://raw.githubusercontent.com/styx-api/niwrap/main/logo.svg"
770                  alt="Hub Logo"
771                  class="card-icon"
772                  width="32"
773                  height="32"
774                />
775                <h3 class="card-title">NiWrap Hub</h3>
776              </div>
777              <p class="card-description">
778                Interactive web platform for exploring neuroimaging tools.
779                Browse available tools, configure them through auto-generated
780                GUIs, and generate ready-to-use code for your pipelines.
781              </p>
782              <div class="card-tags">
783                <span class="tag">Code Generation</span>
784                <span class="tag">Interactive GUIs</span>
785                <span class="tag">Tool Discovery</span>
786              </div>
787              <div class="card-links">
788                <a href="https://niwrap.dev/hub" class="card-link link-github">
789                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
790                    <path
791                      d="M2 8C2 8 4 4 8 4C12 4 14 8 14 8C14 8 12 12 8 12C4 12 2 8 2 8Z"
792                      stroke="currentColor"
793                      stroke-width="2"
794                      stroke-linecap="round"
795                      stroke-linejoin="round"
796                    />
797                    <circle
798                      cx="8"
799                      cy="8"
800                      r="2"
801                      stroke="currentColor"
802                      stroke-width="2"
803                    />
804                  </svg>
805                  Launch Hub
806                </a>
807                <a
808                  href="https://niwrap.dev/styxbook/"
809                  class="card-link link-docs"
810                >
811                  Learn More →
812                </a>
813              </div>
814            </div>
815
816            <div class="card">
817              <div class="card-header">
818                <img
819                  src="https://raw.githubusercontent.com/styx-api/styx/main/docs/logo.svg"
820                  alt="Styx Logo"
821                  class="card-icon"
822                  width="32"
823                  height="32"
824                />
825                <h3 class="card-title">Styx Compiler</h3>
826              </div>
827              <p class="card-description">
828                The engine behind NiWrap. Generates type-safe bindings from CLI
829                tool descriptions. Define a tool once, get Python, TypeScript,
830                and R bindings with full IDE support.
831              </p>
832              <div class="card-tags">
833                <span class="tag">Code Generation</span>
834                <span class="tag">Multi-Language</span>
835                <span class="tag">Type Safety</span>
836              </div>
837              <div class="card-links">
838                <a
839                  href="https://github.com/styx-api/styx"
840                  class="card-link link-github"
841                >
842                  <svg
843                    width="16"
844                    height="16"
845                    viewBox="0 0 16 16"
846                    fill="currentColor"
847                  >
848                    <path
849                      d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
850                    />
851                  </svg>
852                  GitHub
853                </a>
854                <a
855                  href="https://niwrap.dev/styxbook/"
856                  class="card-link link-docs"
857                >
858                  Documentation →
859                </a>
860              </div>
861            </div>
862          </div>
863        </div>
864      </section>
865
866      <section
867        class="section"
868        style="border-top: 1px solid var(--border-primary)"
869      >
870        <div class="container">
871          <div class="section-header">
872            <h2 class="section-title">Collaborators</h2>
873            <p class="section-subtitle">
874              Built to work for the community, by the community
875            </p>
876          </div>
877          <div
878            style="
879              display: flex;
880              flex-wrap: wrap;
881              align-items: center;
882              justify-content: center;
883              gap: 2.5rem 3rem;
884            "
885          >
886            <div
887              style="opacity: 0.75; transition: opacity 0.2s ease"
888              onmouseover="this.style.opacity = 1"
889              onmouseout="this.style.opacity = 0.75"
890            >
891              <img
892                class="theme-logo"
893                data-light="/assets/logos/bids-light.png"
894                data-dark="/assets/logos/bids-dark.png"
895                src="/assets/logos/bids-light.png"
896                alt="BIDS"
897                style="max-height: 48px; max-width: 160px; width: auto"
898              />
899            </div>
900            <div
901              style="opacity: 0.75; transition: opacity 0.2s ease"
902              onmouseover="this.style.opacity = 1"
903              onmouseout="this.style.opacity = 0.75"
904            >
905              <img
906                src="/assets/logos/boutiques.png"
907                alt="Boutiques"
908                style="max-height: 48px; max-width: 120px; width: auto"
909              />
910            </div>
911            <div
912              style="opacity: 0.75; transition: opacity 0.2s ease"
913              onmouseover="this.style.opacity = 1"
914              onmouseout="this.style.opacity = 0.75"
915            >
916              <img
917                class="theme-logo"
918                data-light="/assets/logos/neurodesk-light.png"
919                data-dark="/assets/logos/neurodesk-dark.png"
920                src="/assets/logos/neurodesk-light.png"
921                alt="Neurodesk"
922                style="max-height: 48px; max-width: 160px; width: auto"
923              />
924            </div>
925            <div
926              style="opacity: 0.75; transition: opacity 0.2s ease"
927              onmouseover="this.style.opacity = 1"
928              onmouseout="this.style.opacity = 0.75"
929            >
930              <img
931                src="/assets/logos/nipoppy.svg"
932                alt="Nipoppy"
933                style="max-height: 48px; max-width: 120px; width: auto"
934              />
935            </div>
936            <div
937              style="opacity: 0.75; transition: opacity 0.2s ease"
938              onmouseover="this.style.opacity = 1"
939              onmouseout="this.style.opacity = 0.75"
940            >
941              <img
942                src="/assets/logos/pydra.svg"
943                alt="Pydra"
944                style="max-height: 48px; max-width: 120px; width: auto"
945              />
946            </div>
947          </div>
948        </div>
949      </section>
950    </main>
951
952    <footer>
953      <div class="container">
954        <div class="footer-grid">
955          <div class="footer-section">
956            <h4>Getting Started</h4>
957            <div class="footer-links-list">
958              <a href="https://niwrap.dev/hub" class="footer-link"
959                >NiWrap Hub</a
960              >
961              <a href="https://niwrap.dev/styxbook/" class="footer-link"
962                >Documentation</a
963              >
964              <a href="https://github.com/styx-api/niwrap" class="footer-link"
965                >GitHub Repository</a
966              >
967              <a
968                href="https://niwrap.dev/styxbook/contributing/"
969                class="footer-link"
970                >Contributing Guide</a
971              >
972            </div>
973          </div>
974
975          <div class="footer-section">
976            <h4>Install</h4>
977            <div class="footer-links-list">
978              <a href="https://pypi.org/project/niwrap/" class="footer-link"
979                >Python (PyPI)</a
980              >
981              <a href="https://www.npmjs.com/package/niwrap" class="footer-link"
982                >TypeScript (npm)</a
983              >
984              <span class="footer-link footer-link-disabled"
985                >R (coming soon)</span
986              >
987            </div>
988          </div>
989
990          <div class="footer-section">
991            <h4>Community</h4>
992            <div class="footer-links-list">
993              <a href="https://discord.gg/QMKUVCFWsR" class="footer-link"
994                >Discord</a
995              >
996              <a
997                href="https://doi.org/10.1101/2025.07.24.666435"
998                class="footer-link"
999                >Research Paper</a
1000              >
1001              <a href="https://boutiques.github.io/" class="footer-link"
1002                >Boutiques</a
1003              >
1004            </div>
1005          </div>
1006
1007          <div class="footer-section">
1008            <h4>Projects</h4>
1009            <div class="footer-links-list">
1010              <a href="https://github.com/styx-api/styx" class="footer-link"
1011                >Styx Compiler</a
1012              >
1013              <a href="https://github.com/styx-api/niwrap" class="footer-link"
1014                >NiWrap Packages</a
1015              >
1016              <a href="https://github.com/styx-api" class="footer-link"
1017                >GitHub Organization</a
1018              >
1019            </div>
1020          </div>
1021        </div>
1022
1023        <div class="footer-bottom">
1024          <p class="footer-text">© 2025-2026 NiWrap. Neuroimaging wrappers.</p>
1025          <p class="footer-text">Built with &#x2665;.</p>
1026        </div>
1027      </div>
1028    </footer>
1029
1030    
1030<script>
1031      // Theme management
1032      const themeToggle = document.getElementById("theme-toggle");
1033      const html = document.documentElement;
1034      // Initial theme is set by the inline <head> script (before first paint).
1035
1036      // Update theme-aware logo sources
1037      function updateThemeLogos() {
1038        const theme = html.getAttribute("data-theme");
1039        document.querySelectorAll(".theme-logo").forEach((img) => {
1040          const src = img.getAttribute(`data-${theme}`);
1041          if (src) {
1042            img.src = src;
1043          }
1044        });
1045      }
1046
1047      // Set initial logo sources (head script runs before DOM is ready)
1048      updateThemeLogos();
1049
1050      // Toggle theme
1051      function toggleTheme() {
1052        const currentTheme = html.getAttribute("data-theme");
1053        const newTheme = currentTheme === "dark" ? "light" : "dark";
1054        html.setAttribute("data-theme", newTheme);
1055        localStorage.setItem("theme", newTheme);
1056        updateThemeLogos();
1057      }
1058
1059      // Listen for system preference changes
1060      window
1061        .matchMedia("(prefers-color-scheme: dark)")
1062        .addEventListener("change", (e) => {
1063          if (!localStorage.getItem("theme")) {
1064            html.setAttribute("data-theme", e.matches ? "dark" : "light");
1065            updateThemeLogos();
1066          }
1067        });
1068
1069      themeToggle.addEventListener("click", toggleTheme);
1070
1071      // Counter animation
1072      function animateCount(
1073        element,
1074        start,
1075        target,
1076        duration = 1000,
1077        suffix = "",
1078      ) {
1079        // Respect reduced-motion: skip the count-up and show the final value.
1080        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
1081          element.textContent = target.toLocaleString() + suffix;
1082          return;
1083        }
1084
1085        const startTime = performance.now();
1086
1087        const easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
1088
1089        function update(currentTime) {
1090          const elapsed = currentTime - startTime;
1091          const progress = Math.min(elapsed / duration, 1);
1092
1093          const easedProgress = easeOutQuint(progress);
1094          const current = start + (target - start) * easedProgress;
1095
1096          element.textContent = Math.floor(current).toLocaleString() + suffix;
1097
1098          if (progress < 1) {
1099            requestAnimationFrame(update);
1100          } else {
1101            element.textContent = target.toLocaleString() + suffix;
1102          }
1103        }
1104
1105        requestAnimationFrame(update);
1106      }
1107
1108      window.addEventListener("load", async () => {
1109        const baseUrl = "https://niwrap.dev/niwrap";
1110
1111        try {
1112          // The releases index points at the latest version's catalog manifest,
1113          // which carries every package and its apps (see niwrap `wrap hub-build`).
1114          const index = await (await fetch(`${baseUrl}/index.json`)).json();
1115          const entry =
1116            index.versions.find((v) => v.version === index.latest) ??
1117            index.versions[0];
1118
1119          const catalog = await (
1120            await fetch(`${baseUrl}/${entry.catalog}`)
1121          ).json();
1122          const packagesCount = catalog.packages.length;
1123          const toolsCount = catalog.packages.reduce(
1124            (sum, pkg) => sum + (pkg.apps?.length || 0),
1125            0,
1126          );
1127          const languagesCount = 2;
1128
1129          animateCount(
1130            document.getElementById("tools-count"),
1131            1500,
1132            toolsCount,
1133            1200,
1134          );
1135          animateCount(
1136            document.getElementById("packages-count"),
1137            10,
1138            packagesCount,
1139            1000,
1140          );
1141          animateCount(
1142            document.getElementById("languages-count"),
1143            2,
1144            languagesCount,
1145            800,
1146          );
1147        } catch {
1148          document.getElementById("tools-count").textContent = "2,000+";
1149          document.getElementById("packages-count").textContent = "12";
1150          document.getElementById("languages-count").textContent = "2";
1151        }
1152      });
1153    </script>
1153
1154  </body>
1155</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.