No VPS, no Hub, no public IP required. 24/7 high availability monitoring. Deploy in 3 minutes and view data instantly in your browser. Zero maintenance, zero dependencies, zero external attack surface.
Need to view internal network metrics, status, or logs from the public internet? Tired of complicated configurations or worried about polluting your development environment? Concerned about introducing security risks, disrupting existing networks, or simply unable to expose any devices?
Fetch data, parse and render, display automatically. That's it. Poll Worker, match Type, four primitives auto-map to components.
Nexknit Frontend is the frontend dashboard for the nexknit monitoring system. It's a Vue 3-based single-page application that handles:
- Poll Worker: Fetch latest data from
/api/stateevery 5 seconds, update node list from/api/nodesevery minute - Parse Payload: Deduplicate by slice UID, merge to local state using LWW (Last Writer Wins)
- Auto Render: Automatically select visualization components based on Type field (Index / Trend / Status / Log)
- Node Management: Sidebar showing node list, online status indicators (green/yellow/red), support multi-node switching and deletion
- Login Authentication: Authenticate via API Key, which is automatically stored in localStorage
| Layer | Technology |
|---|---|
| Framework | Vue 3 (Composition API) |
| State Management | Pinia |
| Routing | Vue Router |
| Build Tool | Vite |
| Type Checking | TypeScript |
| UI Style | Dark theme, Linear color scheme |
| Chart Rendering | Native SVG (no third-party chart library) |
| Code Quality | ESLint + Prettier + Oxlint |
git clone https://github.com/nexknit-dev/nexknit-frontend
cd nexknit-frontend
npm install
npm run devFor local development, configure the proxy in vite.config.ts to forward /api/* requests to your production Worker:
server: {
proxy: {
'/api': {
target: 'https://your-worker.workers.dev',
changeOrigin: true,
secure: true
}
}
}You can also directly modify WORKER_BASE in vue/src/api/worker.ts to point to your local or development environment Worker.
The frontend code follows the Single Responsibility Principle, divided into API layer, parsing layer, state management layer, polling scheduling layer, and view layer:
src/
├── api/
│ └── worker.ts # Worker API request wrapper
├── utils/
│ └── metricParser.ts # Parse payload, deduplicate by slice UID
├── stores/
│ ├── dashboard.ts # Core state: node list, metric data, polling scheduling
│ ├── displayStore.ts # Jitter Buffer virtual clock, smooth display
│ └── nodeStatus.ts # Node last report time, online status indicators
├── composables/
│ ├── useMetricData.ts # Metric data CRUD operations
│ ├── useTrendChart.ts # Trend chart data management
│ ├── useVirtualClock.ts # Virtual clock logic
│ └── usePolling.ts # Polling scheduling wrapper
├── router/
│ └── index.ts # Route configuration, auth guard
├── components/
│ ├── MetricCard.vue # Index / Status overlay card
│ ├── TrendCard.vue # Trend line chart card
│ ├── ChartRenderer.vue # SVG line chart renderer
│ ├── LogCard.vue # Log terminal
│ ├── NodeSidebar.vue # Node sidebar (list, status lights, switch, delete)
│ └── CorpusCarousel.vue # Splash screen corpus carousel
├── views/
│ ├── DashBorad.vue # Dashboard main view
│ ├── LoginView.vue # Login page
│ ├── HomeView.vue # Home page (welcome component)
│ └── AboutView.vue # About page
├── types/
│ └── index.ts # TypeScript type definitions
├── data/
│ └── corpus.ts # Splash screen corpus
└── assets/
├── base.css # Global style variables
└── main.css # Global style entry
No manual chart configuration required. The frontend automatically selects components based on each metric's type field in the payload:
| Type | Behavior | Render Component |
|---|---|---|
| Index | Overwrite value, keep only latest | Large number card (blue) |
| Trend | Append value, keep time series | SVG line chart (orange) |
| Status | Overwrite string, keep only latest status | Status tag (green, supports \n line breaks) |
| Log | Append string, keep log sequence | Scrolling log terminal (supports \n line breaks) |
Rendering Architecture:
- Unified Card Component: Uses
MetricCard.vueas the primary rendering component for all metric types - Dynamic Card Generation: Cards are dynamically generated from
displayStore.allCardscomputed property - Card Sorting: Cards are sorted alphabetically by name
- Line Break Support: Status and Log content automatically render
\nas line breaks using CSSwhite-space: pre-wrap - Splash Screen: Shows a random corpus text with "Waiting for data" indicator during initial loading
Packet loss and latency are normal on the public internet. Without processing, line charts would frequently break and status lights would flicker unexpectedly. But nexknit cannot guarantee real-time performance by increasing requests or establishing long connections - free tier limits are hard constraints.
The frontend's Jitter Buffer mechanism solves this problem. Data is not displayed immediately upon arrival; instead, it enters a buffer first. The dashboard has a built-in virtual clock (13 seconds behind real time) that releases data points in timestamp order. If data for a certain timestamp hasn't arrived yet (still floating on the public network), the clock skips it without affecting subsequent data point rendering.
Users see continuous, smooth charts. Late or lost packets are silently handled in the background. This isn't true smoothness - it's a stable view constructed on top of an unreliable transport layer. We call it "pseudo-smoothness."
Frontend static assets are automatically hosted by Nexknit Worker's [assets] binding, sharing the same domain as the Worker API, completely eliminating CORS issues.
npm run buildBuild output is located in the dist/ directory. Configure this in Worker's wrangler.toml:
[assets]
directory = "./dist"
binding = "ASSETS"
run_worker_first = trueWhen deploying the Worker, both the frontend page and API endpoints go live simultaneously. Visit the Worker domain in your browser to see the dashboard.
Nexknit Frontend is open source under the AGPL-3.0 license. Issues and PRs are welcome.
Highly welcome contributions:
- Frontend beautification (dashboard UI, responsive layout, dark theme optimization)
- New chart components (radar chart, heatmap, etc.)
- Splash screen corpus expansion (
src/data/corpus.ts- attribution and soft ads allowed)
Related Repositories:
- Nexknit Gateway — Python gateway for data collection and pushing
- Nexknit Worker — Cloudflare Worker, cloud mailbox