Forem: sebyx07

[Boost]

sebyx07 — Sat, 11 Apr 2026 14:43:36 +0000

sebyx07

Apr 11

I Built a Free Browser Video Editor with WebGPU, WebCodecs & Optional AI Generation

#webdev #opensource #javascript #ai

Comments 5

3 min read

I Built a Free Browser Video Editor with WebGPU, WebCodecs & Optional AI Generation

sebyx07 — Sat, 11 Apr 2026 14:35:12 +0000

Every time I needed to edit a quick video - trim an AI-generated clip, layer some music, export for social media - I had to open a desktop app. Or worse, upload everything to a cloud editor and wait.

So I built KubeezCut - a professional video editor that runs entirely in your browser. No install, no uploads, no subscription. MIT licensed.

What It Actually Does

KubeezCut is a full multi-track NLE (non-linear editor) built with WebGPU and WebCodecs. Everything runs client-side - your media never leaves your device.

Timeline editing:

Multi-track support: video, audio, text, images, shapes
Trim, split, join, and rate-stretch clips
Pre-compositions for complex scenes
Keyframe animation with a Bezier curve editor
Undo/redo with full history

GPU-accelerated effects:
All visual effects run as WebGPU shaders - zero CPU overhead during preview:

Blur, sharpen, color correction
Distortion, keying (chroma key)
25 blend modes
Layer masks

Export:
Real video export in the browser via WebCodecs - not screen recording, actual encoding:

Containers: MP4, WebM, MOV, MKV
Codecs: H.264, H.265, VP8, VP9, AV1
Quality presets: 2?20 Mbps
No watermarks

Media import:
Drag in files up to 5 GB via the File System Access API:

Video: MP4, WebM, MOV, MKV
Audio: MP3, WAV, AAC, OGG, Opus
Images: JPG, PNG, GIF, WebP

Social-Ready Presets

One thing that bugged me about other editors - you always have to manually set the canvas size. KubeezCut has built-in presets for every major platform:

Preset	Resolution	Aspect Ratio
YouTube	1920�1080	16:9
Shorts / TikTok / Reels	1080�1920	9:16
Instagram Square	1080�1080	1:1
Instagram Portrait	1080�1350	4:5
Twitter/X	1200�675	16:9
LinkedIn	1200�627	~16:9
Custom	Any	Any

Pick the platform, start editing. No math.

The AI Part (Optional)

This is where it connects to the bigger picture. KubeezCut optionally integrates with Kubeez.com - an AI platform with 90+ models for generating video, images, music, and speech.

The workflow:

Add your Kubeez API key in KubeezCut Settings
Generate AI media directly inside the editor - images, video clips, music tracks, voiceovers
Drop them onto the timeline
Edit, trim, layer, and export

Generate ? Edit ? Export, all in one browser tab. No downloading files, no switching apps.

The AI generation uses models like Kling 2.6/3.0, Veo 3.1, Flux 2, Imagen 4, Suno V5, and more. But the editor works perfectly fine without any of that - it's a standalone video editor first.

Tech Stack

For anyone curious about the internals:

React 19 + TypeScript 5.9 - UI layer
WebGPU - GPU-accelerated compositing and effects
WebCodecs - browser-native encoding/decoding
Tailwind CSS 4 + shadcn/ui - styling
Zustand 5 + Zundo - state management with undo/redo
TanStack Router - type-safe file-based routing
Vite 6 - build tooling
OPFS + IndexedDB - local storage for projects and media
Whisper - transcription support

Browser Requirements

This uses bleeding-edge web APIs, so you need:

Chrome 113+ or Edge 113+
WebGPU, WebCodecs, OPFS, and File System Access API support

Firefox and Safari don't support WebGPU yet, so they're out for now.

Why Not Just Use CapCut / Clipchamp / DaVinci?

	KubeezCut	Cloud editors	Desktop editors
Price	Free, forever	Free tier + upsell	Free or $300+
Install	No	No	Yes
Upload required	No	Yes	No
Privacy	100% local	Your media on their servers	Local
Open source	MIT	No	No
AI generation	Optional (90+ models)	Limited/none	None
Export formats	MP4, WebM, MOV, MKV	Usually MP4 only	Everything
Watermark	Never	Often on free tier	Varies

The main trade-off: you need Chrome/Edge. That's it.

Try It

Editor: editor.kubeez.com
Source: github.com/MeepCastana/KubeezCut
License: MIT - fork it, self-host it, contribute

If you're also using the AI side, grab an API key at kubeez.com (comes with trial credits) and plug it into Settings.

If you want to generate AI media programmatically with JavaScript instead, check out the ai-media-cli SDK - one package, 90+ models, all media types.

Would love feedback. What features would make this actually useful for your workflow? Drop a comment or open an issue on GitHub.

How to Generate AI Images, Videos, Music & Speech Programmatically with JavaScript

sebyx07 — Fri, 20 Mar 2026 11:47:09 +0000

AI-generated media is everywhere — product images, marketing videos, background music, voiceovers. But if you've tried integrating it into a JavaScript project, you know the pain: each provider has its own SDK, its own auth flow, its own async patterns. You end up writing more glue code than actual product logic.

In this post, I'll walk through how to programmatically generate images, videos, music, and speech in JavaScript/TypeScript — with real code you can copy into your project today.

The Problem with Multiple AI Media APIs

Let's say you want your app to generate a product image, a short promo video, and a background track. You'd need:

An OpenAI or Google account for image generation
A Kling or Veo account for video generation
A Suno account for music generation
Three different SDKs, three billing dashboards, three sets of API keys
Custom polling logic for each (none of them return results synchronously)

That's a lot of overhead before you've written a single line of business logic.

A Simpler Approach: One SDK, All Media Types

You know how OpenRouter gives you a single API to access hundreds of LLMs? The same concept exists for AI media generation.

The ai-media-cli package is essentially an OpenRouter for AI-generated media — a single TypeScript SDK that routes to 90+ models across providers like OpenAI, Google, Black Forest Labs, ByteDance, xAI, and Suno. One API key, one interface, one billing account. Swap models by changing a string, not rewriting your integration.

npm install ai-media-cli

import { AIImageClient } from "ai-media-cli";

const client = new AIImageClient({
  apiKey: process.env.AI_IMAGE_API_KEY,
});

That's your setup. One client, one API key. Let's generate some media.

Generating AI Images in JavaScript

Text-to-Image

const generation = await client.generateMedia({
  prompt: "a product photo of wireless headphones on a marble surface, soft studio lighting",
  model: "nano-banana-2",
  aspect_ratio: "1:1",
});

// Poll until the image is ready
const result = await client.pollForCompletion(generation.generation_id);
const imageUrl = result.outputs?.[0]?.url;
console.log(imageUrl); // https://media.kubeez.com/images/...

The pollForCompletion method handles the async nature of AI generation — it checks status every few seconds and resolves when the image is ready. No webhooks, no manual polling loops.

Image-to-Image

Already have an image and want to transform it? Upload it first, then reference it:

const upload = await client.uploadMedia("./reference-photo.jpg");

const generation = await client.generateMedia({
  prompt: "transform into an oil painting style, rich warm colors",
  model: "nano-banana-2",
  generation_type: "image-to-image",
  source_urls: [upload.url],
});

const result = await client.pollForCompletion(generation.generation_id);

Choosing a Model

Here are some popular image models to get started:

Model ID	Provider	Credits	Best For
`nano-banana-2`	Google	14	Fast, general purpose
`gpt-1.5-image-high`	OpenAI	32	High quality, prompt adherence
`imagen-4`	Google	13	Photorealism
`imagen-4-fast`	Google	7	Quick drafts, lowest cost
`flux-2-1K`	Black Forest Labs	10	Artistic, creative styles
`seedream-v4-5`	ByteDance	9	Detail-rich scenes
`Z-image`	Alibaba	3	Ultra-cheap generations

You can list all available models programmatically:

const models = await client.listModels();
models.forEach((m) => console.log(m.name, m.credits_cost));

Generating AI Videos in JavaScript

Text-to-Video

const generation = await client.generateMedia({
  prompt: "a slow-motion shot of ocean waves crashing on rocks at sunset",
  model: "kling-2-6-text-to-video-5s-audio",
  generation_type: "text-to-video",
  aspect_ratio: "16:9",
});

const result = await client.pollForCompletion(generation.generation_id);
console.log(result.outputs?.[0]?.url); // MP4 URL

Image-to-Video

Turn a static image into a short video — great for product animations or social content:

const generation = await client.generateMedia({
  prompt: "gentle camera zoom in with soft parallax motion",
  model: "kling-2-6-image-to-video-5s",
  generation_type: "image-to-video",
  source_urls: ["https://example.com/my-product-shot.jpg"],
});

const result = await client.pollForCompletion(generation.generation_id);

Available video models include Kling 2.6/3.0 (Kuaishou), Seedance 1.5 (ByteDance), Veo 3.1 (Google), Grok (xAI), and Wan 2.5 (Alibaba) — each with different strengths for motion quality, duration, resolution, and style.

Generating AI Music in JavaScript

Need a background track for a video, podcast intro, or game?

const generation = await client.generateMusic({
  prompt: "upbeat lo-fi hip hop, vinyl crackle, mellow piano chords, rainy day vibes",
  model: "V5",
  instrumental: true,
});

const result = await client.pollForCompletion(generation.generation_id, "music");
console.log(result.outputs?.[0]?.url); // Audio file URL

Set instrumental: false if you want AI-generated vocals. The V5 model (powered by Suno) produces full-length tracks with surprisingly good musical structure.

Generating AI Speech in JavaScript

For voiceovers, narration, or dialogue — you can generate multi-speaker audio:

const generation = await client.generateDialogue({
  dialogue: [
    { text: "Welcome back to the show. Today we're talking about AI in production.", voice: "Adam" },
    { text: "Thanks for having me. Let's dive right in.", voice: "Emily" },
    { text: "So what's the biggest challenge teams face when shipping AI features?", voice: "Adam" },
    { text: "Honestly? It's the integration complexity. The AI part is the easy part.", voice: "Emily" },
  ],
  stability: 0.7,
  language_code: "en",
});

This is particularly useful for generating podcast-style content, app onboarding audio, or dynamic narration.

Practical Example: Automated Social Media Content Pipeline

Here's a real-world use case — a script that generates a complete social media post with image, caption-ready metadata, and background music:

import { AIImageClient } from "ai-media-cli";

const client = new AIImageClient({ apiKey: process.env.AI_IMAGE_API_KEY });

async function generateSocialContent(topic: string) {
  // Generate visual and audio in parallel
  const [imageGen, musicGen] = await Promise.all([
    client.generateMedia({
      prompt: `social media post visual for: ${topic}, modern design, bold colors, 4K`,
      model: "nano-banana-2",
      aspect_ratio: "1:1",
    }),
    client.generateMusic({
      prompt: `short upbeat jingle for social media, 15 seconds, ${topic} vibes`,
      model: "V5",
      instrumental: true,
    }),
  ]);

  // Wait for both to complete in parallel
  const [image, music] = await Promise.all([
    client.pollForCompletion(imageGen.generation_id),
    client.pollForCompletion(musicGen.generation_id, "music"),
  ]);

  return {
    imageUrl: image.outputs?.[0]?.url,
    musicUrl: music.outputs?.[0]?.url,
  };
}

const content = await generateSocialContent("spring product launch");
console.log(content);

Since image and music generation are independent, we fire them off in parallel with Promise.all — cutting total wait time roughly in half.

Writing Better Prompts for Complex Images

The quality of your output depends heavily on your prompt. Here are patterns that produce significantly better results:

Be specific about composition, lighting, and style

// Vague — unpredictable results
await client.generateMedia({
  prompt: "a cat",
  model: "nano-banana-2",
});

// Specific — consistent, high-quality output
await client.generateMedia({
  prompt: "a tabby cat sitting on a windowsill, golden hour sunlight streaming through sheer curtains, shallow depth of field, shot on 85mm lens, warm color palette, photorealistic",
  model: "nano-banana-2",
  aspect_ratio: "16:9",
});

Use negative prompts to remove unwanted elements

await client.generateMedia({
  prompt: "professional headshot of a business executive, studio lighting, neutral gray background, sharp focus, 4K",
  negative_prompt: "blurry, distorted face, extra fingers, low quality, cartoon, illustration, watermark, text",
  model: "nano-banana-2",
});

Layer details: subject, environment, mood, technical

A good prompt formula: [subject] + [setting/environment] + [mood/atmosphere] + [technical/style details]

// Product photography
await client.generateMedia({
  prompt: "minimalist flat lay of a leather watch on a slate surface, single stem of eucalyptus, soft diffused overhead lighting, muted earth tones, editorial product photography, 8K detail",
  model: "gpt-1.5-image-high",
  aspect_ratio: "1:1",
});

// Architectural visualization
await client.generateMedia({
  prompt: "modern Japanese tea house with floor-to-ceiling glass walls, surrounded by a moss garden and maple trees in autumn, morning fog, architectural photography by Hiroshi Sugimoto, ultra wide angle, natural light",
  model: "imagen-4-ultra",
  aspect_ratio: "16:9",
});

// Fantasy / creative
await client.generateMedia({
  prompt: "an ancient library carved inside a giant redwood tree, bioluminescent mushrooms providing soft blue-green light, leather-bound books on spiral shelves, tiny fireflies, magical realism, painted by Studio Ghibli, intricate detail",
  model: "flux-2-2K",
  aspect_ratio: "9:16",
});

// UI/UX mockup
await client.generateMedia({
  prompt: "clean mobile app interface for a meditation app, dark mode, glassmorphism cards, subtle gradient backgrounds in deep purple and navy, minimal icons, SF Pro Display font, Dribbble quality, UI design",
  model: "nano-banana-2",
  aspect_ratio: "9:16",
});

Match the model to the task

Photorealism: imagen-4, gpt-1.5-image-high, seedream-v4-5
Creative/artistic: flux-2-2K, nano-banana-pro
Quick iterations: imagen-4-fast, Z-image, nano-banana
High resolution: nano-banana-2-4K, nano-banana-pro-4K, flux-2-2K
Image editing: flux-2-edit-1K, seedream-v4-5-edit, nano-banana-edit

Using It from the Command Line

If you just need a quick generation without writing code, the package also works as a CLI:

# Install globally
npm install -g ai-media-cli

# One-time auth
ai-media-cli login YOUR_API_KEY

# Generate an image
ai-media-cli generate -p "product flat lay, minimal, white background" -m nano-banana-2 --wait

# Generate a video
ai-media-cli generate -p "drone flyover mountain valley" -m kling-2-6-text-to-video-5s-audio -t text-to-video --wait

# Generate music
ai-media-cli music -p "ambient electronic, space theme" -m V5 --wait

# Or use npx without installing
npx ai-media-cli generate -p "..." -m nano-banana-2 --wait

Great for prototyping prompts before coding them into your app.

CI/CD Integration

You can automate media generation in your pipelines. Here's a GitHub Actions example:

- name: Generate marketing assets
  env:
    AI_IMAGE_API_KEY: ${{ secrets.AI_IMAGE_API_KEY }}
  run: |
    npx ai-media-cli generate \
      -p "hero banner for product launch, abstract gradient, modern" \
      -m nano-banana-2 \
      -a 16:9 \
      --wait

Error Handling

The library provides typed errors for clean handling in production:

import { AIImageClient, APIError, TimeoutError, ConfigError } from "ai-media-cli";

try {
  const result = await client.generateMedia({ prompt: "...", model: "nano-banana-2" });
} catch (error) {
  if (error instanceof APIError) {
    console.error(`API error ${error.statusCode}: ${error.message}`);
  } else if (error instanceof TimeoutError) {
    console.error("Generation timed out — try a simpler prompt or different model");
  } else if (error instanceof ConfigError) {
    console.error("Missing API key — set AI_IMAGE_API_KEY or call client with { apiKey }");
  }
}

Built-in retry logic handles transient failures and rate limits automatically with exponential backoff — you don't need to add your own.

All 91 Available Models

Here's the full list of models you can access through the SDK, organized by type:

Image Models (27)

Model ID	Name	Provider	Credits
`nano-banana`	Nano Banana	Google	7
`nano-banana-2`	Nano Banana 2	Google	14
`nano-banana-2-2K`	Nano Banana 2 2K	Google	17
`nano-banana-2-4K`	Nano Banana 2 4K	Google	25
`nano-banana-edit`	Nano Banana Edit	Google	7
`nano-banana-pro`	Nano Banana Pro	Google	31
`nano-banana-pro-2K`	Nano Banana Pro 2K	Google	31
`nano-banana-pro-4K`	Nano Banana Pro 4K	Google	41
`imagen-4-fast`	Imagen 4 Fast	Google	7
`imagen-4`	Imagen 4	Google	13
`imagen-4-ultra`	Imagen 4 Ultra	Google	19
`gpt-1.5-image-medium`	GPT 1.5 Image Medium	OpenAI	10
`gpt-1.5-image-high`	GPT 1.5 Image High	OpenAI	32
`flux-2-1K`	Flux 2 1K	Black Forest Labs	10
`flux-2-2K`	Flux 2 2K	Black Forest Labs	13
`flux-2-edit-1K`	Flux 2 Edit 1K	Black Forest Labs	10
`flux-2-edit-2K`	Flux 2 Edit 2K	Black Forest Labs	13
`grok-text-to-image`	Grok Text-to-Image	xAI	14
`seedream-v4`	Seedream V4	ByteDance	7
`seedream-v4-5`	Seedream 4.5	ByteDance	9
`seedream-v4-edit`	Seedream V4 Edit	ByteDance	7
`seedream-v4-5-edit`	Seedream V4.5 Edit	ByteDance	9
`5-lite-text-to-image`	Seedream 5 Lite	ByteDance	12
`5-lite-image-to-image`	Seedream 5 Lite I2I	ByteDance	12
`Z-image`	Z-image	Alibaba	3
`replicate-z-image-hd`	Z-Image HD	Alibaba	6
`ad-copy`	Ad Copy	Kubeez	50

Video Models (53)

Model ID	Name	Provider	Credits
`kling-2-5-image-to-video-pro`	Kling 2.5 I2V Pro	Kuaishou	65
`kling-2-5-image-to-video-pro-10s`	Kling 2.5 I2V Pro 10s	Kuaishou	125
`kling-2-6-text-to-video-5s`	Kling 2.6 (5s)	Kuaishou	90
`kling-2-6-text-to-video-5s-audio`	Kling 2.6 (5s, audio)	Kuaishou	175
`kling-2-6-text-to-video-10s`	Kling 2.6 (10s)	Kuaishou	175
`kling-2-6-text-to-video-10s-audio`	Kling 2.6 (10s, audio)	Kuaishou	310
`kling-2-6-image-to-video-5s`	Kling 2.6 I2V (5s)	Kuaishou	90
`kling-2-6-image-to-video-5s-audio`	Kling 2.6 I2V (5s, audio)	Kuaishou	175
`kling-2-6-image-to-video-10s`	Kling 2.6 I2V (10s)	Kuaishou	175
`kling-2-6-image-to-video-10s-audio`	Kling 2.6 I2V (10s, audio)	Kuaishou	310
`kling-2-6-motion-control-720p`	Kling 2.6 Motion	Kuaishou	270
`kling-2-6-motion-control-1080p`	Kling 2.6 Motion Pro	Kuaishou	360
`kling-3-0-std`	Kling 3.0	Kuaishou	105
`kling-3-0-pro`	Kling 3.0 Pro	Kuaishou	125
`kling-3-0-motion-control-720p`	Kling 3.0 Motion	Kuaishou	720
`kling-3-0-motion-control-1080p`	Kling 3.0 Motion Pro	Kuaishou	960
`seedance-1-5-pro-480p-4s`	Seedance 1.5 (480p, 4s)	ByteDance	12
`seedance-1-5-pro-480p-8s`	Seedance 1.5 (480p, 8s)	ByteDance	24
`seedance-1-5-pro-480p-12s`	Seedance 1.5 (480p, 12s)	ByteDance	48
`seedance-1-5-pro-720p-4s`	Seedance 1.5 (720p, 4s)	ByteDance	19
`seedance-1-5-pro-720p-8s`	Seedance 1.5 (720p, 8s)	ByteDance	38
`seedance-1-5-pro-720p-12s`	Seedance 1.5 (720p, 12s)	ByteDance	76
`seedance-1-5-pro-1080p-4s`	Seedance 1.5 (1080p, 4s)	ByteDance	39
`seedance-1-5-pro-1080p-8s`	Seedance 1.5 (1080p, 8s)	ByteDance	78
`seedance-1-5-pro-1080p-12s`	Seedance 1.5 (1080p, 12s)	ByteDance	156
`seedance-1-5-pro-480p-4s-audio`	Seedance 1.5 (480p, 4s, audio)	ByteDance	24
`seedance-1-5-pro-480p-8s-audio`	Seedance 1.5 (480p, 8s, audio)	ByteDance	48
`seedance-1-5-pro-480p-12s-audio`	Seedance 1.5 (480p, 12s, audio)	ByteDance	58
`seedance-1-5-pro-720p-4s-audio`	Seedance 1.5 (720p, 4s, audio)	ByteDance	38
`seedance-1-5-pro-720p-8s-audio`	Seedance 1.5 (720p, 8s, audio)	ByteDance	76
`seedance-1-5-pro-720p-12s-audio`	Seedance 1.5 (720p, 12s, audio)	ByteDance	152
`seedance-1-5-pro-1080p-4s-audio`	Seedance 1.5 (1080p, 4s, audio)	ByteDance	78
`seedance-1-5-pro-1080p-8s-audio`	Seedance 1.5 (1080p, 8s, audio)	ByteDance	156
`seedance-1-5-pro-1080p-12s-audio`	Seedance 1.5 (1080p, 12s, audio)	ByteDance	312
`v1-pro-fast-i2v-720p-5s`	Seedance 1.0 (720p, 5s)	ByteDance	40
`v1-pro-fast-i2v-720p-10s`	Seedance 1.0 (720p, 10s)	ByteDance	80
`v1-pro-fast-i2v-1080p-5s`	Seedance 1.0 (1080p, 5s)	ByteDance	80
`v1-pro-fast-i2v-1080p-10s`	Seedance 1.0 (1080p, 10s)	ByteDance	130
`veo3-1-fast-text-to-video`	Veo 3.1 Fast T2V	Google	99
`veo3-1-fast-reference-to-video`	Veo 3.1 Fast Ref2V	Google	99
`veo3-1-fast-first-and-last-frames`	Veo 3.1 Fast F&L	Google	99
`veo3-1-text-to-video`	Veo 3.1 Quality T2V	Google	390
`veo3-1-first-and-last-frames`	Veo 3.1 Quality F&L	Google	390
`grok-text-to-video-6s`	Grok T2V (6s)	xAI	65
`grok-image-to-video`	Grok I2V	xAI	65
`wan-2-5`	Wan 2.5	Alibaba	155
`wan-2-5-text-to-video-5s-720p`	Wan 2.5 T2V (5s, 720p)	Alibaba	93
`wan-2-5-text-to-video-5s-1080p`	Wan 2.5 T2V (5s, 1080p)	Alibaba	155
`wan-2-5-text-to-video-10s-720p`	Wan 2.5 T2V (10s, 720p)	Alibaba	186
`wan-2-5-text-to-video-10s-1080p`	Wan 2.5 T2V (10s, 1080p)	Alibaba	310
`wan-2-5-image-to-video-5s-720p`	Wan 2.5 I2V (5s, 720p)	Alibaba	93
`wan-2-5-image-to-video-5s-1080p`	Wan 2.5 I2V (5s, 1080p)	Alibaba	155
`wan-2-5-image-to-video-10s-1080p`	Wan 2.5 I2V (10s, 1080p)	Alibaba	310

Music Models (7)

Model ID	Name	Provider	Credits
`V4`	Music V4	Suno	19
`V4_5`	Music V4.5	Suno	19
`V4_5PLUS`	Music V4.5+	Suno	19
`V5`	Music V5	Suno	19
`suno-add-vocals`	Add Vocals	Suno	19
`suno-add-instrumental`	Add Instrumental	Suno	19
`suno-lyrics-generation`	Lyrics Generation	Suno	2

Speech, Separation & Other (4)

Model ID	Name	Provider	Credits
`text-to-dialogue-v3`	Text To Dialogue V3	ElevenLabs	21
`mvsep-40`	Vocal/Instrumental Separation	MVSEP	6
`auto-caption`	Auto Caption	Kubeez	0.5

Getting Started

Grab a free API key at kubeez.com (comes with trial credits)
Install the package:

npm install ai-media-cli

Start generating:

import { AIImageClient } from "ai-media-cli";
const client = new AIImageClient({ apiKey: "your-key" });

npm: npmjs.com/package/ai-media-cli
GitHub: github.com/sebyx07/js-ai-image-cli

The barrier to generating AI media programmatically has dropped significantly. What used to require stitching together multiple provider SDKs is now a few lines of JavaScript. If you're building anything that touches images, video, audio, or voice — give it a try and let me know what you build.

🌆 Introducing CYBERCORE CSS: A Cyberpunk Design Framework for Futuristic UIs

sebyx07 — Wed, 14 Jan 2026 16:11:29 +0000

🌆 Introducing CYBERCORE CSS

A pure CSS framework for building futuristic, cyberpunk-inspired interfaces

Ever wanted to build a UI that looks like it belongs in Night City? I just released CYBERCORE CSS — a comprehensive CSS framework inspired by Cyberpunk 2077, Blade Runner, and the neon-soaked aesthetics of sci-fi dystopias.

⚡ Why Another CSS Framework?

Most CSS frameworks focus on clean, minimal designs. But what if you're building:

A gaming dashboard
A hacker-themed portfolio
A sci-fi web app
An admin panel with personality

CYBERCORE gives you that distinctive cyberpunk look out of the box — glowing neon borders, glitch effects, scanlines, and more.

🎯 Key Features

Feature	Description
🎨 Pure CSS	Zero JavaScript dependencies
🧩 Modular	Import only what you need
🌙 Dark Theme	Designed for dark interfaces
♿ Accessible	Respects `prefers-reduced-motion`
⚡ Modern CSS	CSS Layers, color-mix(), Container Queries
🎭 153 Icons	Cyberpunk-themed SVG icon system

🚀 Quick Start

npm install cybercore-css

Or use the CDN:

<link rel="stylesheet" href="https://unpkg.com/cybercore-css@latest/dist/cybercore.min.css">

🎨 The Color Palette

🔵 Cyan      #00f0ff  →  Primary accent
🔴 Magenta   #ff2a6d  →  Danger/alerts
🟡 Yellow    #fcee0a  →  Warnings
🟢 Green     #05ffa1  →  Success states
⚫ Void      #0a0a0f  →  Deep backgrounds

✨ Effects That Pop

Glitch Text

<h1 class="cyber-glitch" data-text="NIGHT CITY">NIGHT CITY</h1>

Neon Borders

<div class="cyber-neon-border">Glowing border effect</div>
<div class="cyber-neon-border cyber-neon-border--magenta">Magenta variant</div>

Scanlines & Noise

<div class="cyber-scanlines">CRT monitor effect</div>
<div class="cyber-noise">Subtle static texture</div>

🧩 Component Examples

Buttons

<button class="cyber-btn">EXECUTE</button>
<button class="cyber-btn cyber-btn--magenta">TERMINATE</button>
<button class="cyber-btn cyber-btn--green">CONFIRM</button>
<button class="cyber-btn cyber-btn--outline">SCAN</button>

Cards

<div class="cyber-card">
  <div class="cyber-card__header">
    <h4 class="cyber-h5">SYSTEM STATUS</h4>
  </div>
  <div class="cyber-card__body">
    All systems operational.
  </div>
  <div class="cyber-card__footer">
    <span class="cyber-badge cyber-badge--green">Online</span>
  </div>
</div>

Terminal

<div class="cyber-terminal">
  <div class="cyber-terminal__header">
    <span class="cyber-terminal__dot cyber-terminal__dot--red"></span>
    <span class="cyber-terminal__dot cyber-terminal__dot--yellow"></span>
    <span class="cyber-terminal__dot cyber-terminal__dot--green"></span>
  </div>
  <div class="cyber-terminal__body">
    <span class="cyber-terminal__prompt">$</span> hack the planet
    <span class="cyber-terminal__cursor"></span>
  </div>
</div>

🎭 153 Cyberpunk Icons

CYBERCORE includes a complete icon system with cyberpunk-themed SVG icons:

import { renderIcon } from 'cybercore-css/icons';

const icon = renderIcon('terminal', { size: 24, color: 'cyan' });

Categories include: Navigation, Actions, Media, Security, Tech, and more.

🔧 Customization

Override any CSS variable:

:root {
  --cyber-cyan-500: #00ffaa;
  --glow-cyan: 0 0 10px #00ffaa, 0 0 30px rgba(0, 255, 170, 0.5);
}

📦 What's Included

14 Components: Buttons, Cards, Inputs, Tables, Terminal, Modal, Progress, and more
6 Effects: Glitch, Neon Border, Scanlines, Noise, Datastream, Text Glow
8 Utility Modules: Display, Flex, Grid, Spacing, Text, Animation, Accessibility
153 Icons: Across 10 categories with 4 style variants

🌐 Browser Support

Works in all modern browsers (Chrome 105+, Firefox 121+, Safari 15.4+, Edge 105+).

🔗 Links

Live Demo: sebyx07.github.io/cybercore-css
GitHub: github.com/sebyx07/cybercore-css
npm: npmjs.com/package/cybercore-css

What do you think?

I'd love to hear your feedback! What features would you like to see added? Drop a comment below or open an issue on GitHub.

⚡ Built for the future. Styled for Night City. ⚡

If you found this useful, consider giving the repo a ⭐ on GitHub!

Building a Multi-Interface Todo App with Rust, Ratatui, and Axum

sebyx07 — Wed, 24 Dec 2025 14:15:13 +0000

Why Another Todo App?

I know what you're thinking: "Another todo app tutorial? Really?" But hear me out. This isn't just about building a todo app—it's about exploring how Rust's type system, ownership model, and ecosystem enable you to build one application with three completely different interfaces while maintaining clean architecture, comprehensive testing, and zero code duplication.

📦 Full source code available on GitHub

By the end of this post, you'll understand how to:

Build beautiful terminal UIs with Ratatui
Create type-safe REST APIs with Axum
Design CLI tools with Clap
Share business logic across multiple interfaces
Write comprehensive tests (67 tests and counting!)
Deploy production-ready Rust applications

The Challenge: Three Interfaces, One Codebase

Imagine you're building a todo application. Your users have different needs:

Developers want a quick CLI tool for scripting: todo add "Review PR #42"
Power users prefer a rich TUI for keyboard-driven workflows
Applications need a REST API for integration

Typically, you'd build three separate applications. But what if you could build all three interfaces while writing the business logic exactly once?

That's the challenge I set out to solve.

The Result

The final application includes:

1. 🖥️ TUI Client - Interactive Terminal Interface

A beautiful, keyboard-driven interface built with Ratatui:

cargo run --release --bin todo-tui

Features:

Vim-style navigation (j/k for movement)
Modal editing (i/a to add todos, Esc to cancel)
Visual feedback (strikethrough for completed items)
Real-time state synchronization
Proper terminal cleanup on exit

2. 🌐 HTTP Server - REST API

A production-ready API server built with Axum:

# Start the server
cargo run --bin todo-server

# Create a todo
curl -X POST http://localhost:3000/todos \
  -H "Content-Type: application/json" \
  -d '{"title":"Deploy to production"}'

# List all todos
curl http://localhost:3000/todos

# Update a todo
curl -X PUT http://localhost:3000/todos/1 \
  -H "Content-Type: application/json" \
  -d '{"title":"Deploy to production","completed":true}'

Features:

RESTful design with proper HTTP status codes
Thread-safe database access with Arc<Mutex<Database>>
JSON serialization with serde
CORS support for web applications
Health check endpoint for monitoring
Environment-based configuration

3. ⚡ CLI Client - Scriptable Command-Line Tool

A fast, scriptable CLI built with Clap:

# Add a todo
cargo run --bin todo-cli -- add "Write blog post"

# List all todos
cargo run --bin todo-cli -- list

# Toggle completion
cargo run --bin todo-cli -- toggle 1

# Update title
cargo run --bin todo-cli -- update 1 "Publish blog post"

# Delete
cargo run --bin todo-cli -- delete 1

Perfect for shell scripts, cron jobs, and automation workflows.

Architecture: The Secret Sauce

The magic isn't in any single interface—it's in how they all share the same foundation. Here's the three-layer architecture that makes it possible:

Layer 1: Database Layer (`db.rs`)

The foundation uses SQLite with rusqlite for type-safe database access:

pub struct Database {
    conn: Connection,
}

pub struct Todo {
    pub id: i32,
    pub title: String,
    pub completed: bool,
}

impl Database {
    pub fn new(path: &str) -> rusqlite::Result<Self> {
        let conn = Connection::open(path)?;
        conn.execute(
            "CREATE TABLE IF NOT EXISTS todos (
                id INTEGER PRIMARY KEY AUTOINCREMENT,
                title TEXT NOT NULL,
                completed BOOLEAN NOT NULL DEFAULT 0
            )",
            [],
        )?;
        Ok(Database { conn })
    }

    pub fn add_todo(&self, title: &str) -> rusqlite::Result<i32> {
        if title.trim().is_empty() {
            return Err(rusqlite::Error::InvalidParameterName(
                "Title cannot be empty".to_string()
            ));
        }

        self.conn.execute(
            "INSERT INTO todos (title, completed) VALUES (?1, 0)",
            params![title],
        )?;

        Ok(self.conn.last_insert_rowid() as i32)
    }

    pub fn get_todos(&self) -> rusqlite::Result<Vec<Todo>> {
        let mut stmt = self.conn.prepare(
            "SELECT id, title, completed FROM todos ORDER BY id"
        )?;

        let todos = stmt.query_map([], |row| {
            Ok(Todo {
                id: row.get(0)?,
                title: row.get(1)?,
                completed: row.get(2)?,
            })
        })?
        .collect::<Result<Vec<_>, _>>()?;

        Ok(todos)
    }

    pub fn toggle_todo(&self, id: i32) -> rusqlite::Result<()> {
        let rows = self.conn.execute(
            "UPDATE todos SET completed = NOT completed WHERE id = ?1",
            params![id],
        )?;

        if rows == 0 {
            return Err(rusqlite::Error::QueryReturnedNoRows);
        }

        Ok(())
    }

    // ... delete_todo, update_todo, get_todo_by_id methods
}

Key Design Decisions:

✅ Single responsibility: Only handles persistence, no UI concerns
✅ Input validation: Rejects empty titles at the database boundary
✅ Error handling: Returns rusqlite::Result for proper error propagation
✅ Type safety: Rust's type system prevents SQL injection and type mismatches

Layer 2: Application Layer (`app.rs`)

The business logic layer manages state and coordinates database operations:

pub enum InputMode {
    Normal,
    Editing,
}

pub struct App {
    pub db: Database,
    pub todos: Vec<Todo>,
    pub list_state: ListState,
    pub input: String,
    pub input_mode: InputMode,
}

impl App {
    pub fn new(db_path: &str) -> Result<Self, Box<dyn Error>> {
        let db = Database::new(db_path)?;
        let mut app = App {
            db,
            todos: Vec::new(),
            list_state: ListState::default(),
            input: String::new(),
            input_mode: InputMode::Normal,
        };
        app.refresh_todos()?;
        Ok(app)
    }

    pub fn add_todo(&mut self, title: &str) -> Result<(), Box<dyn Error>> {
        self.db.add_todo(title)?;
        self.refresh_todos()?;  // Critical: reload and update UI state
        Ok(())
    }

    pub fn refresh_todos(&mut self) -> Result<(), Box<dyn Error>> {
        self.todos = self.db.get_todos()?;

        // Adjust selection if list changed
        if self.todos.is_empty() {
            self.list_state.select(None);
        } else if let Some(i) = self.list_state.selected() {
            if i >= self.todos.len() {
                self.list_state.select(Some(self.todos.len() - 1));
            }
        }

        Ok(())
    }

    pub fn next(&mut self) {
        let i = match self.list_state.selected() {
            Some(i) => {
                if i >= self.todos.len() - 1 {
                    0  // Wrap to start
                } else {
                    i + 1
                }
            }
            None => 0,
        };
        self.list_state.select(Some(i));
    }

    // ... previous, toggle_selected, delete_selected methods
}

The State Synchronization Pattern:

This is the most critical pattern in the entire application. After any mutation (add, update, delete, toggle), we call refresh_todos() to reload from the database. Why?

Single source of truth: The database is authoritative
Prevents state drift: In-memory state always matches persistence
Simplifies logic: No need to manually update arrays
Handles edge cases: Selection adjustment happens in one place

Layer 3: UI Layer (`ui.rs`)

Pure rendering functions using Ratatui:

pub fn render(f: &mut Frame, app: &mut App) {
    let chunks = Layout::default()
        .direction(Direction::Vertical)
        .constraints([
            Constraint::Length(3),      // Title bar
            Constraint::Min(1),          // Todo list
            Constraint::Length(3),       // Status bar
        ])
        .split(f.area());

    render_title(f, chunks[0]);
    render_todo_list(f, chunks[1], app);
    render_status_bar(f, chunks[2], app);
}

fn render_todo_list(f: &mut Frame, area: Rect, app: &mut App) {
    let items: Vec<ListItem> = app
        .todos
        .iter()
        .map(|todo| {
            let checkbox = if todo.completed { "[x]" } else { "[ ]" };
            let content = format!("{} {}", checkbox, todo.title);

            let style = if todo.completed {
                Style::default()
                    .fg(Color::Gray)
                    .add_modifier(Modifier::CROSSED_OUT)
            } else {
                Style::default()
            };

            ListItem::new(content).style(style)
        })
        .collect();

    let list = List::new(items)
        .block(Block::default().borders(Borders::ALL).title("Todos"))
        .highlight_style(
            Style::default()
                .bg(Color::DarkGray)
                .add_modifier(Modifier::BOLD)
        );

    f.render_stateful_widget(list, area, &mut app.list_state);
}

Pure UI Philosophy:

No business logic in rendering code
Takes &App or &mut App for stateful widgets only
Easy to modify without breaking functionality
Clear visual feedback for all states

The Power of Shared Architecture

Here's where it gets interesting. Each interface uses exactly what it needs:

CLI: Database Layer Only

// src/bin/cli.rs
use clap::{Parser, Subcommand};
use todo_app::db::Database;

#[derive(Parser)]
struct Cli {
    #[arg(long, env = "TODO_DB_PATH", default_value = "./tmp/todos.db")]
    db_path: String,

    #[command(subcommand)]
    command: Commands,
}

#[derive(Subcommand)]
enum Commands {
    Add { title: String },
    List,
    Toggle { id: i32 },
    Delete { id: i32 },
    // ... more commands
}

fn main() -> Result<(), Box<dyn std::error::Error>> {
    let cli = Cli::parse();
    let db = Database::new(&cli.db_path)?;

    match cli.command {
        Commands::Add { title } => {
            let id = db.add_todo(&title)?;
            println!("Added todo #{}", id);
        }
        Commands::List => {
            let todos = db.get_todos()?;
            for todo in todos {
                let status = if todo.completed { "✓" } else { " " };
                println!("[{}] {} - {}", status, todo.id, todo.title);
            }
        }
        Commands::Toggle { id } => {
            db.toggle_todo(id)?;
            println!("Toggled todo #{}", id);
        }
        // ... handle other commands
    }

    Ok(())
}

Clean and simple: The CLI doesn't need UI state, so it talks directly to the database.

Server: Database Layer + Thread Safety

// src/bin/server.rs
use axum::{
    extract::{Path, State},
    http::StatusCode,
    routing::{get, post},
    Json, Router,
};
use serde::{Deserialize, Serialize};
use std::sync::{Arc, Mutex};
use todo_app::db::Database;

type SharedDatabase = Arc<Mutex<Database>>;

#[derive(Serialize, Deserialize)]
struct CreateTodo {
    title: String,
}

#[derive(Serialize, Deserialize)]
struct UpdateTodo {
    title: Option<String>,
    completed: Option<bool>,
}

async fn create_todo(
    State(db): State<SharedDatabase>,
    Json(payload): Json<CreateTodo>,
) -> Result<(StatusCode, Json<i32>), ApiError> {
    let db = db.lock().unwrap();
    let id = db.add_todo(&payload.title)?;
    Ok((StatusCode::CREATED, Json(id)))
}

async fn list_todos(
    State(db): State<SharedDatabase>,
) -> Result<Json<Vec<Todo>>, ApiError> {
    let db = db.lock().unwrap();
    let todos = db.get_todos()?;
    Ok(Json(todos))
}

#[tokio::main]
async fn main() {
    let db_path = std::env::var("TODO_DB_PATH")
        .unwrap_or_else(|_| "./tmp/todos.db".to_string());

    let db = Arc::new(Mutex::new(
        Database::new(&db_path).expect("Failed to initialize database")
    ));

    let app = Router::new()
        .route("/health", get(health_check))
        .route("/todos", get(list_todos).post(create_todo))
        .route("/todos/:id", get(get_todo).put(update_todo).delete(delete_todo))
        .layer(CorsLayer::permissive())
        .with_state(db);

    let port = std::env::var("PORT").unwrap_or_else(|_| "3000".to_string());
    let addr = format!("127.0.0.1:{}", port);

    println!("Server running on http://{}", addr);

    let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
    axum::serve(listener, app).await.unwrap();
}

Thread safety without overhead: Arc<Mutex<Database>> provides safe concurrent access. The mutex is uncontended in practice since SQLite operations are fast.

TUI: Full Stack

The TUI uses all three layers—database, application logic, and UI rendering—for the complete interactive experience.

Testing: 67 Tests and Counting

One of my favorite parts of this project is the comprehensive test suite. Testing is a first-class concern:

Unit Tests (23 tests)

Embedded in each module with #[cfg(test)]:

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_add_todo() {
        let db = Database::new(":memory:").unwrap();
        let id = db.add_todo("Test todo").unwrap();
        assert_eq!(id, 1);

        let todos = db.get_todos().unwrap();
        assert_eq!(todos.len(), 1);
        assert_eq!(todos[0].title, "Test todo");
        assert!(!todos[0].completed);
    }

    #[test]
    fn test_empty_title_rejected() {
        let db = Database::new(":memory:").unwrap();
        assert!(db.add_todo("").is_err());
        assert!(db.add_todo("   ").is_err());
    }

    #[test]
    fn test_toggle_nonexistent_todo() {
        let db = Database::new(":memory:").unwrap();
        assert!(db.toggle_todo(999).is_err());
    }

    // 20 more unit tests...
}

Integration Tests (44 tests)

Separate tests/ directory with four comprehensive test files:

tests/database_integration.rs - Tests persistence and concurrency:

#[test]
fn test_concurrent_database_access() {
    let temp_file = NamedTempFile::new().unwrap();
    let path = temp_file.path().to_str().unwrap();

    // Create two database connections
    let db1 = Database::new(path).unwrap();
    let db2 = Database::new(path).unwrap();

    // Write from first connection
    db1.add_todo("Todo from connection 1").unwrap();

    // Read from second connection
    let todos = db2.get_todos().unwrap();
    assert_eq!(todos.len(), 1);
    assert_eq!(todos[0].title, "Todo from connection 1");
}

#[test]
fn test_sql_injection_prevention() {
    let db = Database::new(":memory:").unwrap();

    // Attempt SQL injection
    let malicious_title = "'; DROP TABLE todos; --";
    db.add_todo(malicious_title).unwrap();

    // Verify table still exists and contains the malicious string as data
    let todos = db.get_todos().unwrap();
    assert_eq!(todos.len(), 1);
    assert_eq!(todos[0].title, malicious_title);
}

#[test]
fn test_large_dataset_performance() {
    let db = Database::new(":memory:").unwrap();

    // Add 1000 todos
    for i in 0..1000 {
        db.add_todo(&format!("Todo {}", i)).unwrap();
    }

    // Verify retrieval is fast
    let start = std::time::Instant::now();
    let todos = db.get_todos().unwrap();
    let duration = start.elapsed();

    assert_eq!(todos.len(), 1000);
    assert!(duration.as_millis() < 100, "Query took too long: {:?}", duration);
}

tests/app_workflow.rs - Tests end-to-end workflows:

#[test]
fn test_complete_workflow() {
    let mut app = App::new(":memory:").unwrap();

    // Start in normal mode
    assert!(matches!(app.input_mode, InputMode::Normal));

    // Add first todo
    app.add_todo("First todo").unwrap();
    assert_eq!(app.todos.len(), 1);

    // Add second todo
    app.add_todo("Second todo").unwrap();
    assert_eq!(app.todos.len(), 2);

    // Navigate and toggle
    app.next();
    app.toggle_selected().unwrap();
    assert!(app.todos[1].completed);

    // Delete selected
    app.delete_selected().unwrap();
    assert_eq!(app.todos.len(), 1);
    assert_eq!(app.todos[0].title, "First todo");
}

#[test]
fn test_selection_adjustment_after_delete() {
    let mut app = App::new(":memory:").unwrap();

    // Add 3 todos
    for i in 1..=3 {
        app.add_todo(&format!("Todo {}", i)).unwrap();
    }

    // Select last item (index 2)
    app.next();
    app.next();
    assert_eq!(app.list_state.selected(), Some(2));

    // Delete it
    app.delete_selected().unwrap();

    // Selection should adjust to new last item (index 1)
    assert_eq!(app.list_state.selected(), Some(1));
}

tests/server_api.rs - Tests API endpoints:

#[test]
fn test_api_validation() {
    let db = Arc::new(Mutex::new(Database::new(":memory:").unwrap()));

    // Test empty title rejection
    let result = create_todo(
        State(db.clone()),
        Json(CreateTodo { title: "".to_string() }),
    );
    assert!(result.is_err());
}

#[test]
fn test_api_not_found() {
    let db = Arc::new(Mutex::new(Database::new(":memory:").unwrap()));

    let result = get_todo(State(db), Path(999));
    assert!(matches!(result, Err(ApiError::NotFound)));
}

tests/cli_integration.rs - Tests CLI commands via process spawning:

#[test]
fn test_cli_workflow() {
    let temp_file = NamedTempFile::new().unwrap();
    let db_path = temp_file.path().to_str().unwrap();

    // Add a todo
    let output = Command::new("cargo")
        .args(&["run", "--bin", "todo-cli", "--", "--db-path", db_path, "add", "Test todo"])
        .output()
        .unwrap();
    assert!(output.status.success());

    // List todos
    let output = Command::new("cargo")
        .args(&["run", "--bin", "todo-cli", "--", "--db-path", db_path, "list"])
        .output()
        .unwrap();
    assert!(output.status.success());

    let stdout = String::from_utf8_lossy(&output.stdout);
    assert!(stdout.contains("Test todo"));
}

The Power of :memory: Databases:

All tests use SQLite's in-memory databases for:

⚡ Blazing fast execution
🔄 Perfect isolation (no shared state between tests)
🧹 No cleanup needed
✅ Idempotent tests (same result every time)

Real-World Lessons

Building this project taught me several valuable lessons about Rust and software architecture:

1. Separation of Concerns Is Not Optional

The database layer knows nothing about UIs. The UI layer knows nothing about SQLite. This isn't just good practice—it's what enables code reuse across three completely different interfaces.

2. The Type System Is Your Friend

Rust prevented entire categories of bugs:

No null pointer exceptions (Option type forces handling)
No use-after-free (ownership system prevents it)
No data races (Mutex + Arc provides safe concurrency)
No SQL injection (parameterized queries)

3. State Synchronization Must Be Deliberate

The refresh_todos() pattern is simple but powerful. After every mutation, reload from the database. This prevents an entire class of state drift bugs that plague many applications.

4. Testing Drives Design

Writing integration tests for all three interfaces revealed design issues early. The test suite gave me confidence to refactor aggressively.

5. In-Memory Databases Are a Superpower

Using :memory: SQLite databases for testing was a game-changer. Tests run in milliseconds, with perfect isolation, and zero cleanup code.

6. Rust Is Production-Ready

This isn't a toy. The application is production-ready with:

Proper error handling at every layer
Thread-safe concurrent access
Comprehensive test coverage
Clean terminal cleanup
Environment-based configuration
Clippy-clean code with all warnings enabled

Performance Characteristics

Let's talk about performance. The application is fast:

Database operations: Sub-millisecond for typical datasets (<1000 todos)
TUI rendering: 60 FPS with Ratatui's efficient diffing
API response times: <5ms for most endpoints (local testing)
CLI commands: Near-instant feedback
Binary size: ~5MB release build (stripped)
Memory usage: ~10MB RSS (TUI), ~15MB (Server)

The test suite demonstrates this:

#[test]
fn test_large_dataset_performance() {
    let db = Database::new(":memory:").unwrap();

    for i in 0..1000 {
        db.add_todo(&format!("Todo {}", i)).unwrap();
    }

    let start = std::time::Instant::now();
    let todos = db.get_todos().unwrap();
    let duration = start.elapsed();

    assert_eq!(todos.len(), 1000);
    assert!(duration.as_millis() < 100); // Completes in <100ms
}

Real-World Use Cases

This architecture pattern isn't just for todo apps. Consider:

System Administration Tools

TUI for interactive management
CLI for scripting and automation
API for web dashboards or monitoring

Database Management

TUI for developers doing migrations
CLI for CI/CD pipelines
API for application integration

Log Analysis

TUI for interactive exploration
CLI for grep-like filtering
API for visualization tools

DevOps Workflows

TUI for interactive debugging
CLI for shell scripts
API for orchestration systems

Getting Started

Clone the repository and try all three interfaces:

git clone https://github.com/sebyx07/rust-ratatui-todos
cd rust-ratatui-todos

# Run tests
cargo test

# Try the TUI
cargo run --release --bin todo-tui

# Try the CLI
cargo run --bin todo-cli -- add "My first todo"
cargo run --bin todo-cli -- list

# Try the server
cargo run --bin todo-server
# In another terminal:
curl http://localhost:3000/todos

Project Structure

rust-ratatui-todos/
├── src/
│   ├── lib.rs           # Library exports for testing
│   ├── main.rs          # TUI client entry point
│   ├── db.rs            # Database layer (Layer 1)
│   ├── app.rs           # Application layer (Layer 2)
│   ├── ui.rs            # UI layer (Layer 3)
│   └── bin/
│       ├── server.rs    # HTTP server
│       └── cli.rs       # CLI client
├── tests/
│   ├── database_integration.rs
│   ├── app_workflow.rs
│   ├── server_api.rs
│   └── cli_integration.rs
├── CLAUDE.md            # Comprehensive documentation
└── Cargo.toml           # Dependencies and configuration

Key Dependencies

[dependencies]
# Database
rusqlite = { version = "0.33", features = ["bundled"] }

# TUI
ratatui = "0.29"
crossterm = "0.28"

# Server
axum = "0.8"
tokio = { version = "1", features = ["full"] }
tower-http = { version = "0.6", features = ["cors"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

# CLI
clap = { version = "4", features = ["derive", "env"] }

What's Next?

Potential enhancements to explore:

Search/Filter: Add text search across todos
Categories/Tags: Organize todos with labels
Due Dates: Add temporal organization
Priorities: High/medium/low priority levels
WebSocket Updates: Real-time sync in the server
Export/Import: JSON/CSV data portability
Undo/Redo: Command pattern for state history
Persistence Layer Abstraction: Support PostgreSQL, MySQL

But the core lesson remains: clean architecture enables flexibility.

Conclusion

This project demonstrates that Rust is not just for systems programming—it's excellent for building complete, production-ready applications with multiple interfaces.

Key takeaways:

Layer your architecture properly - Separation of concerns enables code reuse
Let the type system guide you - Rust prevents entire categories of bugs
Test comprehensively - Integration tests catch real issues
State synchronization is critical - Always reload after mutations
Choose the right tools - Ratatui for TUIs, Axum for APIs, Clap for CLIs

The combination of Rust's safety guarantees, excellent libraries, and clean architecture patterns creates a powerful foundation for building reliable software that users can trust.

📦 Explore the full source code on GitHub

Whether you're building a todo app, a database tool, a monitoring system, or anything else that needs multiple interfaces—this architecture pattern will serve you well.

Happy coding! 🦀

Ruby CSV Parsing 5-6x Faster

sebyx07 — Mon, 08 Dec 2025 02:52:00 +0000

If you've ever had to parse large CSV files in Ruby, you know the pain. Ruby's built-in CSV library is convenient, but it's... not fast. I recently had to process some pretty large datasets and got tired of waiting, so I built something better.

The Problem

Ruby's CSV stdlib is pure Ruby. It works, it's battle-tested, but when you're parsing millions of rows, every millisecond adds up.

The Solution: zsv-ruby

I wrapped zsv, a SIMD-accelerated CSV parser written in C, into a Ruby gem. SIMD means it uses special CPU instructions to process multiple bytes at once - the same tech that makes video encoding and game physics fast.

gem install zsv

That's it. The gem downloads and compiles zsv automatically during installation.

How Fast Are We Talking?

Here are some real benchmarks from my machine (Ruby 3.4.7):

Small file (1K rows):    6.2x faster
Medium file (10K rows):  5.3x faster
Large file (100K rows):  5.0x faster

Not bad for a drop-in replacement.

Usage

If you've used Ruby's CSV, you already know how to use this:

require 'zsv'

# Parse a file
ZSV.foreach("data.csv") do |row|
  puts row.inspect
end

# With headers (returns hashes instead of arrays)
ZSV.foreach("users.csv", headers: true) do |row|
  puts row["email"]
end

# Parse a string
rows = ZSV.parse("name,age\nAlice,30\nBob,25")

# Read entire file
data = ZSV.read("data.csv")

It also includes Enumerable, so you can do stuff like:

ZSV.open("users.csv", headers: true) do |parser|
  adults = parser.select { |row| row["age"].to_i >= 18 }
end

The Technical Bits

For those curious about what's under the hood:

Native C extension - minimal overhead between Ruby and zsv
Streaming parser - doesn't load the whole file into memory
Proper GC integration - no memory leaks, plays nice with Ruby's garbage collector
Cross-platform - works on Linux and macOS (including Apple Silicon)

The trickiest part was bridging zsv's callback-based API (push model) with Ruby's pull-based API (shift, each). Had to implement a row buffer and deal with some fun GC edge cases.

When Should You Use This?

Use zsv when:

You're parsing large CSV files (10K+ rows)
Performance actually matters for your use case
You're already using Ruby's CSV and want a speed boost

Stick with CSV stdlib when:

You need CSV writing (zsv is read-only for now)
You're parsing tiny files where the overhead doesn't matter
You need some obscure CSV option that zsv doesn't support yet

Try It Out

gem install zsv

GitHub: https://github.com/sebyx07/zsv-ruby
RubyGems: https://rubygems.org/gems/zsv

If you run into issues or have feature requests, open an issue. PRs welcome too.

Built this over a weekend with help from Claude Code. Sometimes the best solution is just wrapping a really good C library. 🤷

gem install zsv

GitHub: https://github.com/sebyx07/zsv-ruby
RubyGems: https://rubygems.org/gems/zsv

If you run into issues or have feature requests, open an issue. PRs welcome too.

Built this over a weekend with help from Claude Code. Sometimes the best solution is just wrapping a really good C library. 🤷

BetterStructureSql - Clean Database Schema Dumps for Rails (Beta)

sebyx07 — Thu, 20 Nov 2025 19:18:58 +0000

I've been working on BetterStructureSql, a Ruby gem that generates clean, deterministic database schema dumps for Rails without using pg_dump, mysqldump, or other external tools.

Currently in beta (v0.2.1) and running in 4 production applications. Looking for feedback from the community.

The Problem

Rails' default pg_dump creates noisy schema files with version-specific comments and metadata that pollute git diffs. This makes developers avoid using advanced database features like triggers, materialized views, and custom types.

pg_dump output:

--
-- PostgreSQL database dump
--
-- Dumped from database version 15.4
-- Dumped by pg_dump version 15.4

SET statement_timeout = 0;
SET lock_timeout = 0;
-- ... 50+ lines of noise ...

Different PostgreSQL versions create different output, causing merge conflicts on metadata instead of actual schema changes.

The Solution

BetterStructureSql uses pure Ruby to query database system catalogs directly:

PostgreSQL: information_schema and pg_catalog
MySQL: information_schema and mysql system tables
SQLite: sqlite_master and PRAGMA introspection

BetterStructureSql output:

SET client_encoding = 'UTF8';

-- Extensions
CREATE EXTENSION IF NOT EXISTS "pgcrypto" WITH SCHEMA public;

-- Tables
CREATE TABLE users (
  id BIGSERIAL PRIMARY KEY,
  email VARCHAR NOT NULL,
  created_at TIMESTAMP(6) NOT NULL,
  updated_at TIMESTAMP(6) NOT NULL
);

-- Indexes
CREATE INDEX index_users_on_email ON users (email);

-- Functions
CREATE FUNCTION update_updated_at_column()
RETURNS TRIGGER AS $$
BEGIN
  NEW.updated_at = NOW();
  RETURN NEW;
END;
$$ LANGUAGE plpgsql;

-- Triggers
CREATE TRIGGER update_users_updated_at
  BEFORE UPDATE ON users
  FOR EACH ROW
  EXECUTE FUNCTION update_updated_at_column();

Same output every time. Change one trigger, see one trigger in the diff.

Installation

gem 'better_structure_sql'
bundle install
rails generate better_structure_sql:install
rails db:schema:dump_better

Key Features

1. Pure Ruby - No External Dependencies

No pg_dump, mysqldump, or sqlite3 CLI required. Just the database gem (pg, mysql2, or sqlite3). Works anywhere Rails runs.

2. Schema Versioning with Deduplication

Store schema versions in your database with hash-based deduplication:

rails db:schema:store

Only creates new versions when schema actually changes:

rails db:schema:versions

ID   | Hash     | Created              | Size
-----|----------|----------------------|-------
3    | a3f5c9d2 | 2025-01-20 14:30:15 | 125 KB
2    | b7e2d1c4 | 2025-01-19 10:15:42 | 98 KB
1    | c9f8a3b2 | 2025-01-18 08:45:30 | 85 KB

Includes web UI for browsing and downloading versions:

# config/routes.rb
authenticate :user, ->(user) { user.developer? || user.admin? } do
  mount BetterStructureSql::Engine, at: '/schema_versions'
end

Why this matters: Production schema often differs from local development. New developers join, run migrations locally, but their schema doesn't match production. The web UI lets developers download the actual production schema without needing database access—critical for debugging production-specific issues.

3. Multi-File Output for Large Schemas

Real-world problem: I have an application with 300+ tables. The single structure.sql file was over 8,000 lines—a nightmare to work with. Git diffs were useless, code reviews impossible, and AI assistants couldn't handle it.

Multi-file mode solves this:

# config/initializers/better_structure_sql.rb
BetterStructureSql.configure do |config|
  config.output_path = 'db/schema'  # directory instead of file
  config.max_lines_per_file = 500
end

Generates organized directory structure with numbered prefixes for load order:

db/schema/
├── _header.sql              # SET statements
├── _manifest.json           # Load order metadata
├── 01_extensions/
│   └── 000001.sql
├── 02_types/
│   └── 000001.sql
├── 03_functions/
│   ├── 000001.sql
│   └── 000002.sql
├── 04_sequences/
│   └── 000001.sql
├── 05_tables/
│   ├── 000001.sql          # First ~500 lines of tables
│   ├── 000002.sql          # Next ~500 lines
│   ├── 000003.sql
│   ├── 000004.sql
│   └── 000005.sql          # 300 tables split across 5 files
├── 06_indexes/
│   ├── 000001.sql
│   └── 000002.sql
├── 07_foreign_keys/
│   └── 000001.sql
├── 08_views/
│   └── 000001.sql
├── 09_triggers/
│   └── 000001.sql
└── 20_migrations/
    └── 000001.sql          # schema_migrations INSERT

How it works:

Splits each object type (tables, indexes, etc.) into ~500 line chunks
Numbers directories by dependency order (extensions → types → tables → foreign keys)
Includes _manifest.json with file count, line count, and load order
Stores as ZIP archive in database for schema versioning

Benefits for 300+ table schemas:

Git diffs: Only see files that changed (e.g., added one table? One file changes, not 8,000 lines)
Code review: Review specific sections (just check 05_tables/000003.sql)
AI assistants: 500-line files work perfectly—no "file too large" errors
Navigation: Find triggers in 09_triggers/, views in 08_views/
Performance: Incremental file writing, handles 50,000+ objects

Loading multi-file schemas:

rails db:schema:load_better  # Reads manifest, loads files in order

Automatically detects single-file vs multi-file mode. For multi-file, uses manifest to load in correct dependency order.

4. Complete PostgreSQL Feature Support

Tables, indexes, foreign keys, constraints
Triggers and functions (plpgsql, SQL)
Views and materialized views
Extensions (pgcrypto, uuid-ossp, pg_trgm, etc.)
Custom types (ENUMs, domains)
Sequences
Partial indexes and expression indexes

Multi-Database Support

Feature	PostgreSQL 12+	MySQL 8.0+	SQLite 3.35+
Tables & Indexes	✓	✓	✓
Triggers	✓	✓	✓
Views	✓	✓	✓
Materialized Views	✓	-	-
Functions	✓ plpgsql	✓ stored procs	-
Extensions	✓	-	-
Custom ENUMs	✓	inline only	via CHECK

PostgreSQL is production-ready. MySQL and SQLite adapters are experimental.

Production Experience

Running in 4 production applications including:

E-commerce platform with 200+ tables
SaaS application with triggers and materialized views
API service with custom PostgreSQL ENUMs
Multi-tenant application with extensive use of database functions

Zero issues with deterministic output. Schema versioning provides clear audit trail for schema evolution.

Configuration Example

# config/initializers/better_structure_sql.rb
BetterStructureSql.configure do |config|
  # Output mode
  config.output_path = 'db/structure.sql'

  # Replace default rake tasks (optional)
  config.replace_default_dump = true

  # Schema versioning
  config.enable_schema_versions = true
  config.schema_versions_limit = 10

  # Feature toggles
  config.include_extensions = true
  config.include_functions = true
  config.include_triggers = true
  config.include_views = true
  config.include_materialized_views = true
  config.include_custom_types = true
end

Migration Example

Using database triggers with clean diffs:

class AddUpdatedAtTrigger < ActiveRecord::Migration[7.0]
  def up
    execute <<~SQL
      CREATE FUNCTION update_updated_at_column()
      RETURNS TRIGGER AS $$
      BEGIN
        NEW.updated_at = NOW();
        RETURN NEW;
      END;
      $$ LANGUAGE plpgsql;

      CREATE TRIGGER update_users_updated_at
        BEFORE UPDATE ON users
        FOR EACH ROW
        EXECUTE FUNCTION update_updated_at_column();
    SQL
  end

  def down
    execute "DROP TRIGGER IF EXISTS update_users_updated_at ON users;"
    execute "DROP FUNCTION IF EXISTS update_updated_at_column();"
  end
end

Materialized views for performance:

class CreateUserStatsView < ActiveRecord::Migration[7.0]
  def up
    execute <<~SQL
      CREATE MATERIALIZED VIEW user_statistics AS
      SELECT
        status,
        COUNT(*) as total_count,
        COUNT(*) FILTER (WHERE created_at > NOW() - INTERVAL '30 days') as recent_count
      FROM users
      GROUP BY status;

      CREATE UNIQUE INDEX index_user_stats_on_status
        ON user_statistics (status);
    SQL
  end

  def down
    execute "DROP MATERIALIZED VIEW IF EXISTS user_statistics;"
  end
end

Looking for Feedback

Beta Status (v0.2.1):

PostgreSQL support is production-ready
MySQL and SQLite are experimental
APIs are stable but may see refinements before v1.0

Feedback Needed:

Edge cases with your database schema
Integration with specific Rails setups
Feature requests for v1.0
Performance with very large schemas (1000+ tables)
MySQL and SQLite compatibility issues

Try It

gem 'better_structure_sql'
bundle install
rails generate better_structure_sql:install
rails db:schema:dump_better

If you try BetterStructureSql, please share your experience. Issues and pull requests welcome on GitHub.

Made by sebyx07

Ruby2html: Streamline Your Rails Views with Pure Ruby

sebyx07 — Sat, 10 Aug 2024 02:32:09 +0000

https://github.com/sebyx07/ruby2html

As a Rails developer, I've often found myself wrestling with the limitations of ERB templates. The constant context switching between Ruby and HTML can be jarring, and complex logic in views can quickly become unwieldy. That's why I was excited to discover Ruby2html, a gem that allows you to write your entire view logic in pure Ruby.

The Power of Ruby in Your Views

Ruby2html isn't just another templating engine – it's a different approach to writing views. Instead of mixing Ruby and HTML, you write your entire view in Ruby, which is then transformed into clean, semantic HTML. This approach brings several benefits:

Consistent syntax: No more switching between Ruby and HTML syntax.
Full access to Ruby's features: Use all of Ruby's powerful methods and constructs in your views.
Improved readability: Your views become as clear and expressive as your Ruby code.

Here's an example of what a view looks like with Ruby2html:

div class: 'container' do
  h1 'Welcome to Ruby2html', class: 'main-title', 'data-controller': 'welcome'

  @items.each do |item|
    h2 class: 'item-title', id: "item-#{item.id}" do
      item.title
    end
    p class: 'item-description' do
      item.description
    end
  end
end

Notice how we're using object methods (item.title) instead of hash syntax. This aligns better with Ruby conventions and provides better IDE support.

Gradual Adoption and Seamless Integration

One of Ruby2html's strengths is its ability to coexist with your current ERB templates. You don't need to rewrite your entire application at once. Instead, you can adopt Ruby2html gradually, allowing for a smooth transition:

<h1>Welcome to our evolving page</h1>

<%= render partial: 'legacy_erb_partial' %>

<%=
  html(self) do
    div class: 'ruby2html-section' do
      h2 "This section uses Ruby2html"
      p "It integrates seamlessly with existing ERB"
    end
  end
%>

<%= render ModernComponent.new %>

This flexibility means you can start benefiting from Ruby2html immediately in new views or components, while gradually refactoring existing ones as time allows.

ViewComponent Compatibility

If you're using ViewComponents (which I highly recommend), Ruby2html integrates smoothly. You can use Ruby2html syntax in your call method or stick with traditional .erb template files:

class GreetingComponent < ApplicationComponent
  def initialize(name)
    @name = name
  end

  def call
    html do
      h1 class: 'greeting', 'data-user': @name do
        "Hello, #{@name}!"
      end
      p class: 'welcome-message' do
        'Welcome to Ruby2html'
      end
    end
  end
end

This compatibility allows you to leverage Ruby2html where it makes the most sense in your application architecture.

Performance Considerations

When adopting a new view rendering approach, performance is always a concern. In my testing, I've found that Ruby2html performs comparably to traditional ERB templates:

Comparison:
GET /benchmark/html (ERB):       21.0 i/s
GET /benchmark/ruby (Ruby2html): 20.4 i/s - difference falls within error margin

These benchmarks suggest that you can adopt Ruby2html without significant performance impact.

Getting Started

To start using Ruby2html in your Rails project, add this line to your Gemfile:

gem 'ruby2html'

Then, you can start writing your views in Ruby. I recommend starting with a small, isolated component to get a feel for the syntax and workflow.

Real-world Experience

In my recent project, a complex dashboard application, I used Ruby2html for all new views. The transition was smooth, and I noticed several benefits:

Reduced cognitive load: Writing views in pure Ruby eliminated the mental context switching between Ruby and HTML.
Improved maintainability: Views became easier to refactor and test, as they're now just Ruby code.
Enhanced reusability: It became simpler to extract common patterns into helper methods or components.

However, it's worth noting that there was a learning curve for the team. Developers needed time to adjust to thinking about HTML structure in terms of Ruby methods. We found that pair programming sessions were particularly helpful during this transition.

Conclusion

Ruby2html offers a compelling alternative to traditional ERB templates in Rails. By allowing you to write your views in pure Ruby, it brings consistency, power, and improved maintainability to your frontend code.

While it may not be the right choice for every project, I've found it particularly beneficial in applications with complex view logic or those heavily utilizing ViewComponents.

I encourage you to give Ruby2html a try in your next Rails project. Start small, perhaps with a single component, and see how it fits into your workflow. You might find, as I did, that it significantly improves your view-writing experience.

Check out the Ruby2html GitHub repo to get started, and feel free to share your experiences or ask questions in the comments. Happy coding!

Ruby(Opal) + Express.js + Socket.io. Real time chat Server implementation

sebyx07 — Sun, 20 Oct 2019 17:47:54 +0000

Opal implementation of a simple server with Express and Socket.io

Link to the implementation: https://github.com/sebyx07/opal-express-socketio

Demo https://opal-realtime-socket-express.herokuapp.com/

Run

Installation

git clone https://github.com/sebyx07/opal-express-socketio.git opal-server
cd opal-server
bundle install && yarn install # install deps

Update index.html

var socket = io.connect('https://opal-realtime-socket-express.herokuapp.com', {transports:['websocket']});
// with
var socket = io.connect('http://localhost:8000', {transports:['websocket']});

Usage

Replace

rake it's the default rake task that starts the server

go to http://localhost:8000

Server.new(8000) do |s, io|
  s # you can access express methods: with get, post, use, etc. Most is supported
    # callbacks, you replace them with do; end blocks

  io # you can use socket-io methods: on, emit etc. Most is supported
     #  socket must be wrapped using Native()
end

Example server usage

Server.new(8000) do |s, io|
  # express part
  s.use(Logger) # use middlewares
  s.start! # start the server

  s.get("/") do |_, res| # handle get to root request
    res.sendFile(s.view("index.html")) # send the index html file
  end

  s.get("/:name") do |req, res| # handle dynamic requests
    res.send(req.params.name)
  end

  # socket io part
  io.on 'connection' do |socket| # initialize socket io connection
    socket = Native(socket) # if you have problems with apply for a object, just Native() it

    socket.on('chat message') do |msg| # listen for messages
      io.emit('chat message', msg) # send it back, to all clients
    end

    socket.on('disconnect') do # handle disconnect
      p "disconnect"
    end
  end
end

Hopefully, someone will pick this up and build a framework around it. Like with Hyperstack

Get server statistics using 🚀StatsLite:

sebyx07 — Fri, 04 Oct 2019 20:36:36 +0000

StatsLite

Here is the link to the tool

Simple way to get server information as json. Easy to extend with a config.rb file.
Embeddable in Rails

Standalone usage

Requirements ruby, min version 2

sudo apt-get install -y ruby build-essential ruby-dev

Usage standalone, you might need to run some commands as sudo.

gem install stats_lite --no-ri --no-rdoc
stats-lite
curl http://localhost:9111

Add to startup, crontab

crontab -e
# then add
@reboot /usr/local/bin/stats-lite

create a config.rb then stats-lite

# example config.rb
# basic usage

StatsLite.configure do |s|
  s.password "1234" # password protection
  s.port 9111 # listening port
end

# now it's protected by passowrd
curl http://localhost:9111?password=1234

Rails usage

gem "stats_lite"

# routes.rb
mount StatsLite::App => "/server-stats"

Advanced configuration


StatsLite.configure do |s, h|
  s.password ENV["STATS_LITE_PASS"] # defaults to nil, unprotected
  s.port ENV["STATS_LITE_PORT"] # defaults to 9111

  s.data -> (data) do # add more data
    data[:ruby_current_time] = Time.now # simple value
    data[:linux_time] = h.command("date") # bash command, supports {cache: true, expires_in: 60} 

    data[:slow_command] = h.fetch :slow_command, -> {
      sleep 1
      "slow command"
    }, expires_in: 5 # cached ruby value
  end

  s.app do |sinatra| # extend the app, add multiple routes, which are protected by the password
    sinatra.get("/another_route") do
      content_type :json

      { cpus: h.command("nproc", { cache: true }) }.to_json
    end
  end
end

Forem: sebyx07

[Boost]

I Built a Free Browser Video Editor with WebGPU, WebCodecs & Optional AI Generation

I Built a Free Browser Video Editor with WebGPU, WebCodecs & Optional AI Generation

What It Actually Does

Social-Ready Presets

The AI Part (Optional)

Tech Stack

Browser Requirements

Why Not Just Use CapCut / Clipchamp / DaVinci?

Try It

How to Generate AI Images, Videos, Music & Speech Programmatically with JavaScript

The Problem with Multiple AI Media APIs

A Simpler Approach: One SDK, All Media Types

Generating AI Images in JavaScript

Text-to-Image

Image-to-Image

Choosing a Model

Generating AI Videos in JavaScript

Text-to-Video

Image-to-Video

Generating AI Music in JavaScript

Generating AI Speech in JavaScript

Practical Example: Automated Social Media Content Pipeline

Writing Better Prompts for Complex Images

Be specific about composition, lighting, and style

Use negative prompts to remove unwanted elements

Layer details: subject, environment, mood, technical

Match the model to the task

Using It from the Command Line

CI/CD Integration

Error Handling

All 91 Available Models

Image Models (27)

Video Models (53)

Music Models (7)

Speech, Separation & Other (4)

Getting Started

🌆 Introducing CYBERCORE CSS: A Cyberpunk Design Framework for Futuristic UIs

🌆 Introducing CYBERCORE CSS

⚡ Why Another CSS Framework?

🎯 Key Features

🚀 Quick Start

🎨 The Color Palette

✨ Effects That Pop

Glitch Text

Neon Borders

Scanlines & Noise

🧩 Component Examples

Buttons

Cards

Terminal

🎭 153 Cyberpunk Icons

🔧 Customization

📦 What's Included

🌐 Browser Support

🔗 Links

What do you think?

Building a Multi-Interface Todo App with Rust, Ratatui, and Axum

Why Another Todo App?

The Challenge: Three Interfaces, One Codebase

The Result

1. 🖥️ TUI Client - Interactive Terminal Interface

2. 🌐 HTTP Server - REST API

3. ⚡ CLI Client - Scriptable Command-Line Tool

Architecture: The Secret Sauce

Layer 1: Database Layer (db.rs)

Layer 2: Application Layer (app.rs)

Layer 3: UI Layer (ui.rs)

The Power of Shared Architecture

CLI: Database Layer Only

Server: Database Layer + Thread Safety

TUI: Full Stack

Testing: 67 Tests and Counting

Unit Tests (23 tests)

Integration Tests (44 tests)

Real-World Lessons

1. Separation of Concerns Is Not Optional

2. The Type System Is Your Friend

3. State Synchronization Must Be Deliberate

Layer 1: Database Layer (`db.rs`)

Layer 2: Application Layer (`app.rs`)

Layer 3: UI Layer (`ui.rs`)