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

# 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**.

![Before vs After workflow — 2 weeks of back-and-forth reduced to 20 minutes](https://iili.io/BXzFOrX.png align="center")

* * *

## 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.

![JSON config on the left equals a fully rendered page on the right — baked at build time](https://iili.io/BXzqzdX.png align="center")

```json
{
  "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

![Architecture overview — Visual Editor to Serverless Worker to GitHub Actions to Global CDN](https://iili.io/BXz2zG9.png align="center")

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

![](https://cdn.hashnode.com/uploads/covers/65cb5c95b17a682aa46612ef/72e4a1f9-b159-4a0a-ac1a-c734c62c1c42.png align="center")

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:

![The publish pipeline — from click to live in 7 automated steps](https://iili.io/BXzKitR.png align="center")

```mermaid
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.

```mermaid
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

![Performance comparison — runtime API calls at 2.4s vs pre-baked static at 0.3s](https://iili.io/BXzf6g9.png align="center")

**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

```mermaid
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.*