# How to Vibe Code Your Own Weglot (and Stop Paying for It)

> Website translation and multilingual SEO platform

- Site: https://weglot.com
- Category: Localization SaaS
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 2-3 weeks part-time

## Verdict

Build a solid personal-use translation proxy and dashboard subset, but expect real debugging friction around DOM text node extraction and SEO subdirectory routing.

Creating a personal-use clone of Weglot is an excellent 2-week side project if you scope it correctly. You can build a Next.js control plane with a PostgreSQL database, a translation memory caching layer powered by DeepL or OpenAI APIs, and a proxy/middleware worker that intercepts incoming web traffic to inject translated HTML. The real catch will be writing a robust DOM mutation and text-node extraction script that does not break third-party JavaScript hydration or shatter complex layouts on SPAs. For personal use or internal apps, this saves you from paying subscription fees, but replicating enterprise CMS plugins and edge reverse proxies at Weglot's production scale is a massive undertaking.

### What you can't replicate

- Native one-click plugins for 70+ external CMS platforms
- Enterprise trust, compliance accreditations, and DPA agreements
- Massive pre-existing translation memory databases across 110k active brands

## What it does

Translate your website instantly with AI, refine with human edits, and go live in multiple languages with automated multilingual SEO and language-specific URLs.

### Core features

- DOM content extraction and client-side mutation injection script
- Translation Memory (TM) database caching layer to avoid duplicate LLM costs
- Multilingual SEO infrastructure with subdirectory (/fr/) routing and hreflang tags
- Visual editor overlay allowing live inline editing inside an iframe preview
- Glossary rules engine for always/never translate terms
- Dashboard for managing translation lists, export/import, and statistics

## The business

### Pricing

- Free: $0/mo
- Starter: $17/mo
- Business: $32/mo
- Pro: $87/mo
- Advanced: $329/mo
- Extended: $769/mo
- Enterprise: Custom

### Funding

€45.45M raised.
- Seed (2017): €450k
- Growth/Investment (2022): €45m with Partech
Investors: Partech, SIDE Capital

Founded 2016.
Team size: 50+.

## The hard parts

- Building a DOM parser and mutation observer that extracts text nodes without breaking HTML tags, attributes, or scripts on third-party SPAs
- Achieving robust server-side rendering or reverse-proxy routing so search engines properly index localized subdirectories with correct hreflang headers
- Ensuring translation memory lookups handle semantic proximity and exact matches cleanly without exploding API translation costs

## How to vibe code Weglot

### Prerequisites

- Node.js (free): Required runtime for building and running the Next.js full-stack control plane and proxy middleware.
- GitHub (free): Version control and repository hosting to deploy your application to Cloudflare or Vercel.
- DeepL API Account (pay-as-you-go (~$5/mo)): Provides professional machine translation engine calls for source text strings.

### Recommended AI tools

- Claude Code: Best-in-class terminal coding agent for scaffolding full-stack Next.js apps, writing complex DOM manipulation scripts, and debugging proxy routing logic.
- Cursor: Excellent AI code editor for inspecting visual editor components, tweaking Tailwind CSS layouts, and refining inline translation diffs.

### Stack

- Frontend: Next.js with Tailwind CSS and shadcn/ui
- Backend: Next.js Server Actions and Edge Middleware
- Database: Neon (Serverless Postgres)
- Auth: better-auth
- Payments: None (Personal use clone)
- Other: DeepL API for machine translation, Vercel AI SDK for LLM integration, Cheerio for HTML server-side parsing

### Hosting

- Cloudflare (Hosts the translation proxy worker and edge routing middleware for fast global page rewriting.): $0-5/mo
- Neon (Serverless Postgres database storing projects, domains, translation memory, and custom glossary rules.): $0/mo

### Build guide

1. **Scaffold Next.js App, Database Schema, and Auth** — Initialize a Next.js 16 project with Tailwind CSS, configure better-auth with email/password authentication, and connect Neon Postgres using Drizzle ORM.

```
Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth for secure authentication with email and password. Configure Drizzle ORM to connect with Neon Postgres. Create database schemas for users, projects (tracking target domain, original language, and target languages), translation memory (source hash, target language, translated text, verified boolean), and glossary rules (project_id, source term, translation term, rule type). Ensure proper relational foreign keys and index source hashes for sub-millisecond translation lookups.
```

2. **Build Translation Memory and DeepL/OpenAI API Integration Service** — Implement a backend translation service that checks the translation memory cache before querying DeepL or OpenAI APIs, storing newly generated strings automatically.

```
Build a robust translation service module in TypeScript. When given a batch of text strings, a source language, and a target language, the service must first query the database translation memory table using a secure content hash. For any cache misses, call the DeepL API (with fallback to OpenAI via Vercel AI SDK). Store all newly fetched translations back into the translation memory table with appropriate timestamps and status flags. Implement rate-limiting protection and batching logic to prevent API quota exhaustion.
```

3. **Develop Edge Proxy and HTML Rewriting Engine** — Create an edge middleware or proxy service that fetches target web pages, parses HTML nodes, replaces text with cached translations, and injects language switcher widgets.

```
Build a Cloudflare Worker or Next.js Edge Middleware proxy that accepts requests for localized subdirectories (e.g., /fr/about). Extract the target language code from the path prefix, fetch the original target URL content, and use an HTML parser (such as Cheerio or HTMLRewriter) to extract text nodes. Pass these text nodes through the translation memory service built in Step 2, substitute the translated strings back into the DOM, inject appropriate hreflang link tags into the HTML head, and rewrite internal links to maintain language context. Return the modified HTML response to the browser.
```

4. **Build Dashboard Control Panel and Translation List Editor** — Create the main SaaS dashboard featuring a spreadsheet-style translation list for reviewing, editing, and overriding machine-generated strings.

```
Create a responsive dashboard UI using Next.js App Router and shadcn/ui components. Build a project management view where users can register their website domain and select target languages. Implement a spreadsheet-style Translation List view with pagination, search, filter by status (machine vs. human edited), and inline editing capabilities. Connect these UI tables to Server Actions that update the translation memory database records immediately upon user edit.
```

5. **Implement Visual Editor Overlay and Glossary Rules** — Develop an interactive visual editor interface using iframes and custom toolbar overlays, alongside glossary rules management for brand terms.

```
Build a Visual Editor screen in the dashboard that embeds the user's website inside an interactive iframe. Inject a small companion script into the iframe that highlights translatable text elements on hover, allowing the user to click an element, open an inline edit popover, and save custom translations back to the database instantly. Also, create a Glossary management page where users can define 'always translate' or 'never translate' rules for specific words and short phrases, ensuring these rules take precedence during translation pipeline execution.
```

6. **Polish, Error Handling, and Deployment** — Add comprehensive error handling, configure environment variables, set up Sentry monitoring, and deploy the application to Cloudflare and Vercel.

```
Perform a comprehensive code review and polish pass across the entire codebase. Add robust error boundaries, graceful fallbacks for third-party translation API outages, and input sanitization across all forms and proxy handlers. Configure environment variables for DeepL API keys, Neon database connections, and better-auth secrets. Write deployment configuration files for Vercel (frontend control plane) and Cloudflare Workers (edge proxy), and verify end-to-end translation flow and SEO hreflang injection on a test domain.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom domain for personal testing: $12 one-time
- DeepL API initial developer credits: $10 one-time
- Total: ~$22 one-time

**Ongoing costs (monthly):**

- Cloudflare Workers & Neon Database: $0-5/mo
- DeepL API translation volume: ~$5/mo
- Total: ~$10/mo

- Paying for the SaaS instead: $87/mo (Pro Plan)
- Build time: 35-50 hours
- AI tool credits: $20 (Claude Pro or Cursor Pro)
- Break-even: 1 month vs Pro plan

## Sources

- [Weglot Official Website](https://weglot.com)
- [Weglot Pricing Page](https://weglot.com/pricing)