How We Built a No-Code Landing Page Editor That Ships Static Pages in Minutes

We got tired of changing hex codes for a living. So we automated ourselves out of the job.

---

The Old Way (Pain)

Every "small" landing page change went through this obstacle course:

1. Marketing has an idea

2. Designer mocks it up (3 rounds of feedback)

3. Engineer builds it (next sprint, maybe)

4. Marketing: "Can we try a different blue?"

5. Back to step 2

6. Engineer: quietly updates resume

One landing page? Fine. Twenty pages, three languages, influencer-specific variants, each with custom pricing? We were drowning.

The chain was the problem: Marketing -> Designer -> Engineer -> Designer -> Engineer -> Deploy. We needed: Marketing -> Deploy.

---

The Core Idea

Every landing page is a JSON file.

Not "backed by" JSON. The JSON is the page — every heading, color, image, testimonial, pricing plan, CTA button. At build time, the static site generator reads the JSON and bakes it into pre-rendered HTML. No database. No CMS. No API calls at runtime.

Recipe goes in, cake comes out. Visitor gets the cake instantly.

{
  "hero": {
    "heading": "Build Your App 10x Faster",
    "ctaText": "Get Started Free",
    "colors": { "heading": "#FFFFFF", "ctaBackground": "#6C5CE7" }
  },
  "pricing": {
    "plans": [
      { "name": "Pro", "monthly": 29, "features": ["Unlimited projects", "Priority support"] }
    ]
  },
  "testimonials": {
    "items": [
      { "name": "Sarah Chen", "role": "CTO", "quote": "Saved us 200 engineering hours." }
    ]
  }
}

Change the headline? Edit one string. New testimonial? Add an object. Different pricing for France? Swap the numbers. Done.

---

Architecture

Four pieces:

1. Visual Editor — Marketing customizes pages. Spits out JSON.

2. Serverless Worker — Uploads images, validates config, triggers the build.

3. GitHub Actions — Commits config to Git, opens a PR, deploys.

4. Global CDN — Serves static HTML from 300+ edge locations.

Marketing clicks a button. A Git commit happens. They don't need to know that.

---

The Editor

Three panels. That's it.

• Left sidebar: 12 section editors (Hero, Pricing, Testimonials, FAQ, etc.) with fields for text, colors, images, toggles

• Right panel: Live preview of the actual page. Viewport switching — Desktop, Tablet, Mobile

• Top toolbar: Publish, presets, reset

Every field maps to a path in the JSON. Change a color picker, the preview updates instantly. It's all local state — no network calls during editing.

Auto-save to localStorage means marketing can close the browser, come back tomorrow, pick up where they left off. We also built a presets system — save configs as reusable templates. Marketing built a library of these within the first week without us asking.

---

The Publish Pipeline

Marketing clicks "Publish." Here's what happens in the next 3 minutes:

sequenceDiagram
    participant M as Marketing
    participant W as Worker
    participant G as GitHub Actions
    participant CDN as CDN

    M->>W: Uploads images + config JSON
    W->>G: Triggers build workflow
    G->>G: Creates branch, commits config, opens PR
    G->>CDN: Deploys to staging
    G-->>M: Preview URL ready
    Note over M,CDN: Engineer approves PR (~30 sec)
    G->>CDN: Deploys to production

Image upload: Scans config for images, uploads to object storage with immutable cache headers (cached for a year). Validates file types. No, marketing, you cannot upload a 50MB PSD.

Slug generation: Auto-generates from the heading. Detects collisions, appends -v2, -v3.

CI/CD: Creates a Git branch, writes the JSON config, commits, opens a PR, triggers deploy. All automated.

gitGraph
    commit id: "main"
    branch variant/summer-sale
    commit id: "publish summer-sale"
    checkout main
    branch variant/influencer-alex
    commit id: "publish influencer-alex"
    checkout main
    merge variant/summer-sale
    merge variant/influencer-alex

The zero-load-time trick: The config gets baked into static HTML at build time. When a visitor loads the page, everything is already there — colors, copy, images, pricing. No API calls. No loading spinners. The page is "done" before JavaScript even loads.

---

Performance

Two-tier loading: Hero, social proof, and testimonials render immediately. Pricing, FAQ, and video lazy-load via IntersectionObserver with 100px look-ahead. By the time you scroll there, it's ready.

Edge delivery: Static HTML on a global CDN. No origin server. Brotli compression. Your page loads fast whether you're in Mumbai or Montreal.

Analytics that don't block paint: PostHog and monitoring load async. Section visibility tracking fires events as sections enter the viewport — marketing gets funnel data without us sacrificing a millisecond.

---

Variants: Languages, Influencers, Campaigns

This is where it gets fun.

Language variants: Duplicate a preset, translate the copy, adjust pricing. Publish. Fully localized page in minutes, no i18n library needed.

Influencer pages: Custom colors matching their brand, their testimonial front and center, tailored hero copy, unique pricing. They get a custom URL. Their audience gets a page that feels hand-built — because it is.

Safety net: Every variant is a Git commit. Marketing published something broken? git revert. 30 seconds. Try doing that with a CMS.

---

Idea to Live Page: The Timeline

timeline
    title 20 Minutes, Start to Finish
    0 min : Open editor, load a preset
    3 min : Customize copy, colors, pricing, testimonials
    5 min : Preview on mobile, tweak, hit Publish
    8 min : Staging deploy complete, verify preview
    15 min : Engineer approves PR
    20 min : Live on production, globally

Old flow: 1-2. New flow: 20 minutes. Engineering's involvement: a 30-second PR approval.

---

What We'd Do Differently

Config bloat: Each variant JSON is ~38KB because it stores everything, including defaults. Storing only overrides would cut this by 80% and make PR diffs actually readable.

Single-player editing: localStorage means one person per browser. Two marketers editing simultaneously = last one wins. Real-time collab would fix this, but hasn't been needed yet.

Preview speed: The "real" preview requires a staging deploy (~3 min). An on-demand render function would make this instant.

---

TL;DR

• JSON config = entire page. Git = CMS. PR = content approval.

• Static generation means zero API calls at runtime. Pages load instantly.

• Marketing clicks Publish, automation handles the rest. Engineering reviews at their pace.

• Every variant is a Git commit. Rollbacks are a git revert away.

Marketing went from "file a ticket and wait two weeks" to "ship it yourself in 20 minutes." Engineering went from "change hex codes" to "approve PRs over coffee."

Everyone's happier. Especially the engineer.

---

Building something similar? Hit me up — happy to nerd out about config-driven UIs and making marketing teams dangerously autonomous.