Middleware chain

Middleware chain of one demo proxy route with switchable steps. Above 200 req/s the rate limiter answers the excess with 429.

View as Markdown

<sv-middleware>· loading

Tryraise the incoming rate above 200 req/s.

Installation

pnpm dlx shadcn@latest add @lumesec/sv-middleware

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/sv-middleware.json

Usage

import { SvMiddleware } from "@/components/lumesec/sv-middleware";

export function Example() {
  return (
    <SvMiddleware />
  );
}

Behaviour

The steps a request passes before it reaches the service. Above the rate limit, the excess is answered with 429 at the limiter.

API reference

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

changeReact proponChangeDetail{ action: 'enable-middleware' | 'disable-middleware', middleware: string }

Fires when a step is switched on or off. middleware is the step name, for example Rate limit.

Accessibility

Each step has a role="switch" with aria-checked, labelled with the step name. The TLS switch cannot be turned off and stays checked.
The incoming-rate slider is labelled Incoming requests per second. The outcome sentence is a polite live region.
Step details are only in title tooltips. The canvas is aria-hidden.
Reduced motion: no request particles are drawn and the pulsing outline on the rate limiter does not animate.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --border, --card, --destructive, --foreground, --lumesec and --muted-foreground.

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-border, --ui-danger, --ui-fg, --ui-muted and --ui-surface.

Notes

Built-in demo chain for api.lumesec.local: TLS, IP allowlist, Rate limit (200 req/s), Auth, Headers and Compress. The incoming rate ranges from 20 to 600 req/s, default 160. No attribute selects a record.
Only the rate limiter changes how much traffic passes; switching other steps changes their state and fires change.
Container query: three steps per row under 520 px.

<sv-routes>

Routessv-routes

<sv-route-tester>

Where does this request go?sv-route-tester

<sv-upstream>

Upstream poolsv-upstream

<sv-certs>

Certificatessv-certs

Was this page helpful?

Related