@morphika/andami

A visual page builder framework for Next.js — the engine behind morphika.tv.

Andami is a self-hosted, code-first alternative to Webflow / Framer / Semplice. You scaffold a new site in one command, write your branding in a single config file, and get a Sanity-backed CMS plus a drag-and-drop visual editor — all running on Vercel's free Hobby tier.

Status — actively maintained, not actively promoted. Built and used in production by Morphika Studio. Released as MIT for transparency and as a reference implementation. Issues and PRs are welcome but not guaranteed a response — this is a personal/studio tool first, an open-source project second.

Demo

🔗 Live site: morphika.tv

The visual builder

Infinite canvas with desktop / tablet / phone previews side-by-side, live minimap, and a contextual settings panel. Zoom, pan, undo/redo — all client-side.

Adding content

Contextual toolbars

Sections, columns and blocks each get their own floating toolbar — duplicate, reorder, delete, and add adjacent elements without losing canvas focus.

Quick start

npx create-andami-site my-site
cd my-site
npm install
npm run dev

Open http://localhost:3000/admin and follow the setup wizard. You'll need:

• A free Sanity account (CMS backend)
• A Cloudflare R2 bucket (asset storage — also free up to 10 GB)
• A Vercel account for deployment (optional — works anywhere Next.js runs)

Full guide → docs/QUICK-START.md

Who this is for

✅ Designers / studios who want a polished portfolio site they fully own — no monthly subscription, no platform lock-in. ✅ Developers building bespoke sites for clients in the design / architecture / fashion / photography space. ✅ Anyone who has outgrown Webflow's pricing or wants a Next.js codebase they can extend.

Who this is not for

❌ Non-technical users expecting a SaaS experience. You need to deploy it yourself. ❌ E-commerce, blogs at scale, or content-heavy sites. Andami is optimized for portfolio / brand / case-study sites. ❌ Teams looking for guaranteed support or SLAs. This is single-maintainer software.

What's inside

Visual page builder

• Infinite canvas with zoom, pan, minimap and device frames (desktop / tablet / phone)
• Cross-section drag-and-drop between V2 sections, Cover sections, and Parallax groups
• 12-column responsive grid with push-cascade overlap resolution
• Per-viewport overrides (desktop / tablet / mobile) for every block

Content blocks (10)

• Text (Tiptap rich text with inline color, links, BubbleMenu)
• Image, Image Grid, Video, Audio, Spacer, Button, Before/After
• Project Grid (masonry with multi-aspect-ratio cards)
• Project Carousel (horizontal "keep browsing" at end of project pages)

Section types

• V2 Section — flat columns, content-driven height
• Cover Section — full-viewport, proportional rows, background media, drag-to-resize
• Parallax Group — multi-slide parallax with crossfade / reveal transitions
• Custom Section — reusable sections with per-instance overrides

Animation system

• 7 enter-animation presets + per-character typewriter
• 4-level cascade (block → column → section → page)
• Hover effects: 7 CSS presets + 3 WebGL shaders (ripple, RGB shift, pixelate)
• Page exit animations that replay enter animations in reverse

CMS & assets

• Sanity v3 schemas (5 doc types, 10+ object types)
• Cloudflare R2 storage with presigned uploads, asset registry, thumbnail CLI
• Full-site backup & restore (client-side ZIP, bypasses serverless body limits)
• Custom font upload with magic-byte validation

Vercel-Hobby-tier optimized

• Sanity CDN routing for public queries (~2ms vs ~200ms)
• 24h ISR with on-demand revalidation
• Edge-middleware bot guard (blocks 20+ aggressive crawlers before they hit serverless)
• Aggressive robots.txt with crawl-delay and AI-scraper blocks
• React cache() deduplication on SSR fetches

→ Designed to run a low-traffic portfolio site comfortably within 4h Fluid Active CPU/month.

Stack

| Layer | Choice | |---|---| | Framework | Next.js 16 (App Router) | | CMS backend | Sanity v3 | | State | Zustand 5 | | Drag & drop | @dnd-kit | | Styling | Tailwind CSS v4 | | Rich text | Tiptap 2 | | Shaders | OGL (WebGL) | | Storage | Cloudflare R2 (S3-compatible) | | Tests | Vitest + React Testing Library (980+ assertions) |

Why this stack

• Next.js + Sanity — most boring, well-documented stack for content-driven sites. ISR + GROQ scales to any portfolio.
• Zustand instead of Redux — the page-builder state is complex (drag, undo/redo, multi-viewport overrides, snapshots) but a single feature; Zustand's slice pattern keeps it readable.
• Sanity for data, not for editing — Sanity is excellent as a structured-content backend but its built-in studio doesn't fit a visual layout tool. Andami uses Sanity purely as a typed JSON store.
• Cloudflare R2 over S3 — zero egress fees. For a portfolio site that's the difference between $0/mo and "depends on the month".

Architecture

Andami ships as an npm package (@morphika/andami). Each deployed site is an instance — a thin Next.js app that imports framework code and provides its own site.config.ts:

my-site/                          # Instance (your repo)
├── site.config.ts                # Branding, fonts, palette, features
├── app/
│   ├── (site)/page.tsx           # → re-exports @morphika/andami/site/page
│   ├── admin/                    # → re-exports admin pages
│   └── api/                      # → re-exports API routes
└── lib/config-init.ts            # Registers config with the framework

@morphika/andami/                 # Framework (this repo)
├── components/builder/           # Visual editor
├── components/blocks/            # Public-site renderers
├── lib/sanity/                   # Schemas, queries, types
└── app/api/                      # All API routes (auth, pages, assets, R2, backups)

This split lets you upgrade the framework with npm update without touching the instance, and lets one studio run many sites from a single shared codebase.

→ Full breakdown in docs/ARCHITECTURE.md.

Documentation

| Doc | What's in it | |---|---| | QUICK-START | 5-minute setup for a new instance | | CONFIGURATION | Every field of site.config.ts | | ARCHITECTURE | Data flow, module boundaries, design decisions | | BUILDER | Visual editor — interactions, store, undo/redo | | CANVAS | Infinite canvas, zoom, pan, device frames | | BLOCKS | All 10 block types with fields and options | | CMS | Sanity schemas and GROQ queries | | NAVIGATION | Navigation builder spec | | ASSETS | Storage, providers, thumbnails | | BACKUPS | Full-site backup & restore (V2 client-side) | | CUSTOMIZATION | Custom blocks, fonts, schemas | | SECURITY | Auth, CSRF, encryption, sanitization | | DEPLOYMENT | Vercel, domains, R2 setup | | PACKAGE-DEV | Local dev, npm link, publishing |

License

MIT — use it, fork it, ship clients with it. Attribution appreciated but not required.

Credits

Built by Daniel Planas at Morphika Studio. The name Andami (Catalan for "scaffold") refers to the temporary structures used to build something more permanent.