Component Showcase

Review components and flag for removal. Reference by number/letter.

Legacy Components (Review)

#	Component	Description
1	`HowItWorksSection`	Step-by-step workflow section with 5-layer architecture
2	`ImpactSection`	DORA metrics impact visualization
3	`KeyAdvantagesSection`	Key advantages comparison grid
4	`CompetitiveSection`	Competitor comparison table
5	`PainPointCard`	Pain point quote card
6	`StatCard`	Statistic display card with source
7	`FeatureCard`	Feature highlight card
8	`TerminalHeader`	Terminal-style section header

New Components (Keep)

#	Component	Description
A	`PersonaSelector`	Horizontal persona tabs with localStorage
B	`StickyPersonaSelector`	Floating persona switcher
C	`ArchitectureDiagram`	5-layer SVG with persona highlighting
D	`TeamDashboard`	Team collaboration visualization
E	`PluginHoverBlock`	Code block with plugin tooltips
F	`MacroDocumentation`	Port macro before/after demo
G	`VideoPlaceholder`	Video placeholder with play button

New Components

A PersonaSelector

One config file. All your dev environments.

asd.yaml configPort macrosHot reloadLocal tunnels

B StickyPersonaSelector

Scroll down to see the floating persona switcher in the bottom-right corner.

C ArchitectureDiagram

Your Application

SvelteKit, Next.js, Rails, Django...

Caddy Reverse Proxy

Auto-HTTPS, routing, load balancing

ASD Network

Secure tunnels, service discovery

Security Layer

Auth, encryption, access control

Infrastructure

Local, cloud, or hybrid deployment

D TeamDashboard

Team Members

Active Now

Active Tunnels

Team Hub

Alice

Lead Dev

Working

Bob

Backend

Working

Carol

Frontend

Away

Frank

Data Eng

Working

Eve

Offline

Real-time Visibility

See who's working on what

Access Control

Role-based permissions

Environment Isolation

Separate dev environments

E PluginHoverBlock

asd.yaml

version: 1
project:
  name: "my-project"
  plugins: ["supabase"]
network:
  services:
    app:
      dial: "127.0.0.1:3000"

F MacroDocumentation

Dynamic Port & Secret Allocation

Used in tpl.env template files

1 Template (tpl.env)

ASD_CADDY_PORT_HTTP=getRandomPort()

MY_PORT=getRandomPort(min=X,max=Y)

ASD_BASIC_AUTH_PASSWORD=getRandomString(length=N)

2 Generated (.env)

ASD_CADDY_PORT_HTTP=???

MY_PORT=???

ASD_BASIC_AUTH_PASSWORD=???

Template Macros (tpl.env)

Macro Function	Description	Example Output
`getRandomPort()`	Allocates a random available port from OS ephemeral range (30000-65000)	47832
`getRandomPort(min=X,max=Y)`	Allocates a random port within a specific range	8472
`getRandomString(length=N)`	Generates a cryptographically secure random string	k9Xp2mLq8vNw3rTz6yBc1dFg4hJa7sMn
`getRandomString(length=N,charset=X)`	Random string with specific charset: alphanumeric, safe, hex	a8f2c3d4e5b6a7f8

Manifest Template Variables (*.yaml)

Syntax	Description	Example
`${{ env.VAR_NAME }}`	Reference an environment variable in manifest YAML	port: "${{ env.ASD_CADDY_PORT_HTTP }}"
`${{ macro.bcryptEnv(VAR) }}`	Bcrypt hash an environment variable (for basic auth)	password: "${{ macro.bcryptEnv('ASD_BASIC_AUTH_PASSWORD') }}"

How It Works

1 Define ports/secrets in tpl.env using macro functions
2 Run asd init to expand macros into .env
3 Reference generated values in manifests with ${{ env.VAR }}
4 Port registry prevents conflicts across all your services

G VideoPlaceholder

Demo Video

This is a placeholder for video content

3:45

Coming Soon

Saved Components (For Later Use)

S1 CTO Quote Block

Saved from How It Works page - use in testimonials or trust section

"

Every broken environment is a tax on your best engineers.

K

Kelvin
CTO, ASD B.V.

Legacy Components (For Review)

1 HowItWorksSection

ARCHITECTURE

The ASD Stack

Orchestration-as-a-Service: Five layers from user to infrastructure.

USERS

Developer

CLI, IDE, Dashboard

AI Agent

Claude Code, Cursor

Team

Shared environments

PRODUCTS

ASD Manager

SaaS Platform

Auth · Billing · RBAC

.ASD CLI

DevOps Framework

Automation · Health

ASD Dashboard

Zero-Backend PWA

Fragment Sharing

ASD.host

Static Hosting

EU · Hetzner

OAAS

Config

asd.yaml

Manifests · Env vars

Discovery

Service Registry

5-level Health

Tunneling

SSH Reverse

Ephemeral Tokens

Auth

Basic · JWT

OAuth/OIDC

DTAP

Development

Laptop · Codespace

Test

CI Runner · PR Env

Acceptance

Self-hosted · On-prem

INFRA

Cloud

Supabase · Stripe · Hetzner

Open Source

Sish · code-server · Caddy

Runtime

Bun · Node · Just · Deno

Users

Products

OAAS Layer

DTAP Environments

Infrastructure

THE FLOW

What happens when you run asd start

Your Machine

localhost:3000

ASD CLI

Reads asd.yaml

Tunnel Server

SSH reverse tunnel

1. Parse

CLI reads asd.yaml and detects services

2. Connect

Establishes encrypted SSH tunnel to relay server

3. Route

Caddy configures routes and TLS certificates

4. Serve

Public URL maps to your local port

Result: https://your-project.tunnel.asd.host → localhost:3000

CORE COMPONENTS

What each part does.

.ASD CLI

DevOps automation framework. Portable Git submodule.

• Core — Automation runner, macros, sandbox

• Network — Service registry, health checks

• Caddy — Ingress routing, TLS, auth

• Tunnel — SSH reverse tunnels, credentials

Runtime: Bun + Just + Golang

Caddy Server

Local reverse proxy with automatic HTTPS.

• Path-based routing to services

• Automatic TLS via Let's Encrypt

• Basic auth per route

• Live config via Admin API :2019

One domain, many services

Tunnel Server (Sish)

SSH-based reverse tunnel relay. EU hosted.

• Relay only — no data stored

• Ephemeral tokens per session

• Custom CNAME domains

• HTTP/HTTPS + TCP + SNI tunnels

Hetzner, Amsterdam NL

ASD Dashboard

Zero-backend PWA. Runs entirely in browser.

• Service status at a glance

• One-click URL sharing

• Fragment-based state (no server)

• Works offline after first load

Static files only

THE MANIFEST

One file defines your entire environment.

asd.yaml Project root

network:
  services:
    app:
      dial: "127.0.0.1:5173"
      tunnelPrefix: "demo"
      path: "/"
    api:
      dial: "127.0.0.1:8080"
      path: "/api"
    code:
      dial: "127.0.0.1:8443"
      path: "/code"

automation:
  dev:
    - npm run dev
  test:
    - npm run test

Declares services

Maps local ports to URL paths. ASD routes /api to port 8080, /code to port 8443.

Sets tunnel prefix

Your subdomain: demo.tunnel.asd.host. Or use your own domain via CNAME.

Defines automation

Named command groups. asd dev runs your dev workflow. asd test runs tests.

Portable across machines

Same file works on laptop, CI runner, Codespace, or self-hosted server. Zero per-machine config.

DEPLOYMENT OPTIONS

Choose your infrastructure model.

Shared

Multi-tenant tunnel server. Fastest to start.

No infrastructure to manage

Instant setup

EU data residency

Shared bandwidth pool

Best for

Individual devs, small teams

Dedicated

Your own tunnel server. We manage it.

Isolated resources

Custom domain branding

SLA guarantees

Priority support

Best for

Growing teams, agencies

Self-Hosted

Run everything on your infrastructure.

Full control

Air-gapped deployments

Compliance friendly

No external dependencies

Best for

Enterprise, regulated industries

SECURITY MODEL

Where your data flows and what we never see.

Your Machine

Code, data, secrets stay here

Encrypted

Relay

Pass-through only

Collaborator

Sees only what you expose

What stays local

• Your source code
• Database contents
• Environment variables
• API keys and secrets
• All application data

What touches relay

• HTTP request headers (routing)
• TLS handshake (encrypted)
• Connection metadata only
• No logging of payloads
• Session-scoped tokens

Zero-backend dashboard: The ASD Dashboard is a static PWA. No server. State lives in URL fragments — we literally cannot see your service list.

Ready to see it in action?

Start free. No credit card required.

Get Started Free CLI Reference

100% EU hosted • Amsterdam, NL • Zero vendor lock-in

2 ImpactSection

THE IMPACT

Every broken environment is a tax on your best engineers.

When teams can't quickly reach the environments where things actually break, they lose time, focus, and confidence. Toil goes up, incident response slows down, and your best people debug infrastructure instead of shipping features.

Slower Delivery

Configuration drift and developer friction blow up Cycle Time and Lead Time for changes. Developer productivity metrics suffer.

Higher MTTR

Every incident starts with "who can even reach this environment?" Root cause analysis tools can't help if you can't access the system.

Onboarding Drag

New engineers spend weeks wrestling with environment setup instead of contributing. Fast developer onboarding requires standardized environments.

Security Risk

Ad-hoc SSH keys and long-lived VPNs make audits painful and leave access trails incomplete.

3 KeyAdvantagesSection

WHY ASD WINS

Why ASD beats screen sharing, VPNs, and log dashboards.

Replace fragmented tools with a unified collaboration layer that gives everyone interactive access to real environments.

Alternative	The Problem	ASD Advantage
Screen sharing	One person drives; others watch and dictate. Doesn't work on headless servers.	One shared dashboard URL with code server, browser terminals and database tools on the same environment — every role works in parallel, not through one driver.
VPN + SSH	Long-lived keys, hard to audit, risky to manage.	Short-lived, session-scoped tunnels with full audit trails.
Log dashboards	Logs show symptoms, not system behavior. Slow to debug distributed failures.	Step directly into the failing environment and run live experiments together.
DIY scripts	Scripts rot; config drift breaks onboarding and 'works on my machine.'	Standardized shared environments guarantee reproducibility and instant productivity.

vs Screen sharing

Problem

One person drives; others watch and dictate. Doesn't work on headless servers.

ASD

One shared dashboard URL with code server, browser terminals and database tools on the same environment — every role works in parallel, not through one driver.

vs VPN + SSH

Problem

Long-lived keys, hard to audit, risky to manage.

ASD

Short-lived, session-scoped tunnels with full audit trails.

vs Log dashboards

Problem

Logs show symptoms, not system behavior. Slow to debug distributed failures.

ASD

Step directly into the failing environment and run live experiments together.

vs DIY scripts

Problem

Scripts rot; config drift breaks onboarding and 'works on my machine.'

ASD

Standardized shared environments guarantee reproducibility and instant productivity.

4 CompetitiveSection

COMPARISON

Everything they charge extra for, we include.

One platform. All the tools. No enterprise tax. Compare ASD to the alternatives and see why teams are switching.

Feature Comparison

Feature	ASD	ngrok	Cloudflare Tunnel	GitHub Codespaces
HTTP/HTTPS tunnels	✓	✓	✓	✗
TCP tunnels	✓	✓	✓	✗
UDP tunnels	✓	✗	✗	✗
Self-hosted option	✓	Ent.	✗	✗
EU data residency (100%)	✓	◐	Ent.	Ent.
Integrated web IDE	✓	✗	✗	✓
Database GUI included	✓	✗	✗	✗
Web terminal included	✓	✗	✗	✓
HTTP debugger/inspector	✓	✓	✗	✗
Works offline	✓	✗	✗	✗
No session time limits	✓	✓	✓	Paid
Open source	✓	✗	✗	✗

Full support Not available ◐ Partial Ent. Enterprise only

Cost Comparison

Monthly cost for a 10-developer team

ngrok

€70

/month

No dev tools
US control plane

Codespaces

€80

/month

Cloud only
No tunneling

BEST VALUE

ASD

€88

/month

All tools included
Self-host option

Prices for a 10-developer team. ASD includes IDE, database GUI, terminal, HTTP debugger, and request replay.

Get Started Free View Pricing

5 PainPointCard

"Example pain point"

This is an example description of a pain point that users experience.

6 StatCard

84%

of dev time on non-coding

IDC Survey 2024

7 FeatureCard

🚀

Sample Feature

This is a sample feature card demonstrating the component.

8 TerminalHeader Keep

EXAMPLE HEADER