Skip to content

docs: redesign docs homepage #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aallam merged 1 commit into from
May 2, 2026
Merged

docs: redesign docs homepage #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 65 additions & 35 deletions docs/src/content/docs/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,76 @@ template: splash
next: false
hero:
title: execbox
tagline: Portable code execution for MCP tools and wrapped MCP servers, with runtime boundaries you choose.
tagline: Run guest JavaScript against host-defined tools and wrapped MCP servers with one portable execution contract.
actions:
- text: Getting Started
link: /getting-started/
variant: primary
---

## What execbox does
<section class="execbox-start">
<div>
<p class="execbox-eyebrow">Node.js 22+ library for tool-backed JavaScript execution</p>
<h2>Start with one provider and one guest call.</h2>
<p>
Execbox turns host tool catalogs into scoped guest namespaces. Begin with
the QuickJS package, execute a small provider flow, then move into examples
or MCP wrapping when the contract is clear.
</p>
</div>
<div class="execbox-command" aria-label="Install execbox">
<div class="execbox-command__bar">
<span>Install</span>
<code>npm</code>
</div>
<pre><code>npm install @execbox/core @execbox/quickjs</code></pre>
</div>
</section>

Execbox is a Node.js library for running guest JavaScript against host-defined tools and wrapped MCP servers. It separates:
<section class="execbox-paths" aria-labelledby="start-building">
<div class="execbox-section-heading">
<p class="execbox-eyebrow">Start building</p>
<h2 id="start-building">Follow the shortest path into the docs.</h2>
</div>
<div class="execbox-path-grid">
<a class="execbox-path execbox-path--primary" href="/getting-started/">
<span class="execbox-path__step">01</span>
<h3>Run the smallest example</h3>
<p>Install the packages, define one host tool, and call it from guest JavaScript.</p>
<strong>Open Getting Started</strong>
</a>
<a class="execbox-path" href="/examples/">
<span class="execbox-path__step">02</span>
<h3>Try the runnable flows</h3>
<p>Compare the basic, worker, remote, MCP provider, and MCP server examples.</p>
<strong>Browse Examples</strong>
</a>
<a class="execbox-path" href="/architecture/execbox-mcp-and-protocol/">
<span class="execbox-path__step">03</span>
<h3>Wrap MCP tools</h3>
<p>Expose upstream MCP catalogs as callable guest namespaces through the execbox protocol.</p>
<strong>Read MCP Provider</strong>
</a>
</div>
</section>

- what tools are available
- where guest code runs
- how calls cross boundaries

That split gives you one execution contract across inline QuickJS, worker-hosted QuickJS, and remote transport-backed execution.

<div class="execbox-card-grid">
<a class="execbox-card" href="/getting-started/">
<h3>Install and run</h3>
<p>Start with the smallest QuickJS example and one provider flow.</p>
</a>
<a class="execbox-card" href="/runtime-choices/">
<h3>Choose a runtime</h3>
<p>Pick inline QuickJS, worker-hosted QuickJS, or a remote runner.</p>
</a>
<a class="execbox-card" href="/architecture/execbox-mcp-and-protocol/">
<h3>Wrap MCP tools</h3>
<p>Expose upstream MCP catalogs as callable guest namespaces.</p>
</a>
<a class="execbox-card" href="/security/">
<h3>Review boundaries</h3>
<p>Understand the provider capability surface before production use.</p>
</a>
</div>

## Runtime packages

| Backend | Package | Start here when |
| --------------------- | ------------------ | ------------------------------------------------------------------------------------ |
| In-process QuickJS | `@execbox/quickjs` | You want the easiest install and the default development path. |
| Worker-backed QuickJS | `@execbox/quickjs` | You want the runtime off the main thread with pooled worker reuse. |
| Remote transport | `@execbox/remote` | Your application owns the process, container, VM, or network boundary for a runtime. |
<section class="execbox-contract" aria-labelledby="contract">
<div class="execbox-section-heading">
<p class="execbox-eyebrow">What stays consistent</p>
<h2 id="contract">A small contract between host tools and guest code.</h2>
</div>
<div class="execbox-contract-grid">
<div>
<h3>Host-owned capabilities</h3>
<p>Applications decide which tools exist and how each call is executed.</p>
</div>
<div>
<h3>Scoped guest namespaces</h3>
<p>Guest code calls named providers instead of reaching into host internals.</p>
</div>
<div>
<h3>JSON-only transport shape</h3>
<p>Inputs, outputs, logs, and tool calls stay serializable across boundaries.</p>
</div>
</div>
</section>
234 changes: 208 additions & 26 deletions docs/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
:root {
--sl-color-accent-low: #082f49;
--sl-color-accent: #38bdf8;
--sl-color-accent-high: #bae6fd;
--sl-color-white: #f8fafc;
--sl-color-gray-1: #e5e7eb;
--sl-color-gray-2: #cbd5e1;
--sl-color-gray-3: #94a3b8;
--sl-color-gray-4: #64748b;
--sl-color-gray-5: #334155;
--sl-color-gray-6: #1e293b;
--sl-color-black: #0b1120;
--sl-color-accent-low: #0f2d4a;
--sl-color-accent: #5cc8ff;
--sl-color-accent-high: #d7efff;
--sl-color-white: #fbfdff;
--sl-color-gray-1: #eef3f8;
--sl-color-gray-2: #d5dee9;
--sl-color-gray-3: #a6b4c4;
--sl-color-gray-4: #728195;
--sl-color-gray-5: #394657;
--sl-color-gray-6: #1d2632;
--sl-color-black: #0c1017;
--execbox-surface: #111821;
--execbox-surface-soft: #171f2b;
--execbox-border: #2b394a;
--execbox-warm: #f2b56b;
--execbox-command-bg: #0c1220;
--execbox-command-bar: #101a2a;
--execbox-command-chip: #233247;
--execbox-command-text: #dce7f5;
}

:root[data-theme="light"] {
Expand All @@ -25,41 +33,215 @@
--sl-color-gray-6: #eef2f7;
--sl-color-gray-7: #f8fafc;
--sl-color-black: #ffffff;
--execbox-surface: #ffffff;
--execbox-surface-soft: #f4f7fb;
--execbox-border: #d8dee8;
--execbox-warm: #b45309;
--execbox-command-bg: #101828;
--execbox-command-bar: #172235;
--execbox-command-chip: #263449;
--execbox-command-text: #e5edf8;
}

.hero {
align-items: center;
padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.execbox-card-grid {
.execbox-start,
.execbox-paths,
.execbox-contract {
margin-block: 2rem;
}

.execbox-start {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
margin-block: 1.5rem 2rem;
grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
gap: 1.25rem;
align-items: stretch;
border: 1px solid var(--execbox-border);
border-radius: 0.75rem;
background:
linear-gradient(
135deg,
color-mix(in srgb, var(--sl-color-accent-low) 34%, transparent),
transparent 55%
),
var(--execbox-surface);
padding: clamp(1rem, 3vw, 1.5rem);
}

.execbox-start h2,
.execbox-section-heading h2 {
margin-block: 0 0.6rem;
color: var(--sl-color-white);
font-size: 1.75rem;
letter-spacing: 0;
line-height: 1.12;
}

.execbox-start p,
.execbox-section-heading {
max-width: 46rem;
}

.execbox-card {
border: 1px solid var(--sl-color-gray-5);
.execbox-start p,
.execbox-path p,
.execbox-contract p {
color: var(--sl-color-gray-2);
}

.execbox-eyebrow {
margin-block: 0 0.65rem;
color: var(--execbox-warm);
font-size: var(--sl-text-sm);
font-weight: 650;
letter-spacing: 0;
}

.execbox-command {
display: grid;
align-content: center;
min-width: 0;
overflow: hidden;
border: 1px solid
color-mix(in srgb, var(--sl-color-accent) 34%, var(--execbox-border));
border-radius: 0.5rem;
background: color-mix(in srgb, var(--sl-color-gray-6) 72%, transparent);
background: var(--execbox-command-bg);
box-shadow: 0 1rem 2.4rem
color-mix(in srgb, var(--sl-color-black) 24%, transparent);
}

.execbox-command__bar {
display: flex;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--execbox-border);
background: var(--execbox-command-bar);
padding: 0.65rem 0.8rem;
color: var(--execbox-command-text);
font-size: var(--sl-text-sm);
}

.execbox-command__bar code {
background: var(--execbox-command-chip);
color: var(--execbox-command-text);
}

.execbox-command pre {
margin: 0;
overflow-x: auto;
border: 0;
border-radius: 0;
background: transparent;
color: var(--execbox-command-text);
padding: 1rem;
font-size: var(--sl-text-sm);
}

.execbox-command code {
overflow-wrap: normal;
white-space: pre;
}

.execbox-section-heading {
margin-block-end: 1rem;
}

.execbox-path-grid,
.execbox-contract-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}

.execbox-path {
display: grid;
min-height: 15rem;
align-content: start;
border: 1px solid var(--execbox-border);
border-radius: 0.625rem;
background: var(--execbox-surface);
padding: 1rem;
text-decoration: none;
transition:
border-color 140ms ease,
background-color 140ms ease;
background-color 140ms ease,
transform 140ms ease;
}

.execbox-card:hover {
.execbox-path:hover {
border-color: var(--sl-color-accent);
background: color-mix(in srgb, var(--sl-color-accent-low) 36%, transparent);
background: color-mix(
in srgb,
var(--sl-color-accent-low) 24%,
var(--execbox-surface)
);
transform: translateY(-1px);
}

.execbox-path--primary {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--sl-color-accent-low) 28%, transparent),
transparent
),
var(--execbox-surface);
}

.execbox-path__step {
color: var(--sl-color-accent);
font-size: var(--sl-text-sm);
font-weight: 700;
}

.execbox-card h3 {
margin-block: 0 0.5rem;
.execbox-path h3,
.execbox-contract h3 {
margin-block: 0.75rem 0.5rem;
color: var(--sl-color-white);
font-size: var(--sl-text-lg);
letter-spacing: 0;
}

.execbox-card p {
margin: 0;
color: var(--sl-color-gray-2);
.execbox-path p,
.execbox-contract p {
margin-block: 0;
}

.execbox-path strong {
margin-block-start: 1.25rem;
color: var(--sl-color-accent-high);
font-size: var(--sl-text-sm);
}

.execbox-contract-grid > div {
border-left: 2px solid
color-mix(in srgb, var(--sl-color-accent) 45%, var(--execbox-border));
background: color-mix(in srgb, var(--execbox-surface-soft) 80%, transparent);
padding: 0.2rem 0 0.2rem 1rem;
}

@media (max-width: 50rem) {
.execbox-start,
.execbox-path-grid,
.execbox-contract-grid {
grid-template-columns: 1fr;
}

.execbox-command code {
overflow-wrap: anywhere;
white-space: pre-wrap;
}

.execbox-path {
min-height: 0;
}
}

@media (min-width: 50rem) {
.execbox-start h2,
.execbox-section-heading h2 {
font-size: 2rem;
}
}
Loading