# How to Vibe Code Your Own Siter.io (and Stop Paying for It)

> No-code website builder and web design tool

- Site: https://siter.io
- Category: Web Design & No-Code Builder
- Verdict: **Serious undertaking** (35/100 vibecodeable)
- Estimated effort: 3-6 months of serious part-time work

## Verdict

Build a simplified single-user design canvas subset, but keep paying if you need reliable production hosting and seamless Figma imports.

Replicating Siter.io requires building a performant vector/canvas editor in the browser, handling real-time multiplayer cursor synchronization, and writing a complex Figma parser. While AI coding tools can scaffold the UI layout and basic state management quickly, getting a buttery-smooth freehand canvas to parse and export responsive code without breaking is a massive engineering hurdle for a solo developer.

### What you can't replicate

- The official Figma plugin distribution network and user base
- Battle-tested automated SSL provisioning and global edge routing for thousands of published custom domains

## What it does

A cloud-based freehand visual website builder geared toward UI/UX designers, featuring layers, groups, animations, a bi-directional Figma plugin, and live publishing.

### Core features

- Browser-based freehand visual canvas with vector/element manipulation
- Layers and groups panel with lock, hide, and reorder
- Custom animation presets and trigger configuration
- Figma plugin parsing node trees into website components
- Real-time multiplayer collaboration with shared presence
- Live publishing engine generating responsive HTML/CSS structures

## The business

### Pricing

- Start: Free — Basic free tier for trying out the editor.
- Solo: $7/mo — For individual creators launching single websites.
- Plus: $12/mo — For small projects and marketing pages.
- Pro: $24/mo — For professional designers needing exports.

### Funding

0 raised.

Founded 2010.
Team size: ~11.

## The hard parts

- Achieving 60fps freehand canvas performance with panning, zooming, and resizing handles
- Writing a robust bi-directional Figma parser that translates Auto Layout and vector fills to DOM elements
- State synchronization via CRDTs or WebSockets for real-time multiplayer editing without race conditions
- Translating absolute canvas positions into clean, responsive layout trees

## How to vibe code Siter.io

### Prerequisites

- Node.js (free): Required for running frontend frameworks, bundlers, and local backend services.
- GitHub (free): Source control and CI/CD deployment pipelines.

### Recommended AI tools

- Claude Code: Best-in-class multi-file agentic coding tool for scaffolding complex canvas logic and state machines.
- Cursor: Ideal for iterative visual UI adjustments and reviewing code diffs component by component.

### Stack

- Frontend: Next.js
- Backend: Next.js API Routes
- Database: Turso
- Auth: better-auth
- Payments: Stripe
- Other: Liveblocks, Tailwind CSS, Vercel AI SDK

### Hosting

- Vercel (Hosting the Next.js visual builder application and editor frontend.): $0-20/mo
- Cloudflare (Edge routing and static publishing destination for user-built websites.): $0-5/mo

### Build guide

1. **Project Scaffolding and Database Schema** — Initialize the Next.js application with Tailwind CSS, configure Turso for database storage, and set up better-auth for user sessions.

```
Scaffold a new Next.js project using App Router and TypeScript. Install Tailwind CSS and configure a modular component structure. Set up a Turso database client using libSQL, and define database schemas for users, projects, pages, and element JSON trees. Integrate better-auth with email/password authentication and secure session cookies. Ensure all configuration files are complete and ready for local development.
```

2. **Visual Canvas Editor Foundation** — Build the core freehand design canvas interface with zoom, pan, element dragging, and properties inspector.

```
Create a React-based visual canvas component that supports infinite panning, zooming, and freehand element placement. Implement a selection model where clicking canvas items (rectangles, text blocks, images, buttons) highlights them with resizing handles. Build a sidebar properties inspector that lets users modify width, height, background color, border radius, and typography for the currently selected element. Store canvas state as a reactive JSON tree in React state, syncing dirty states back to the Turso database.
```

3. **Layers, Groups, and Animation Settings** — Add a layers panel for managing node hierarchies, grouping elements, and configuring animation triggers.

```
Build a layers tree view sidebar that mirrors the canvas element hierarchy. Allow users to reorder layers via drag-and-drop, lock elements to prevent editing, toggle visibility, and group multiple elements together into container nodes. Add an animation settings panel allowing users to attach CSS animation presets (fade-in, slide-up, scale) and trigger conditions (on-load, scroll-into-view) to any canvas element.
```

4. **Real-Time Multiplayer Collaboration** — Integrate Liveblocks to enable live multi-user cursor tracking and concurrent element editing.

```
Integrate Liveblocks into the canvas editor to support real-time multiplayer collaboration. Configure room presence so teammates see each other's live cursors with user names and colors. Bind canvas element modifications (position, styling, additions) to Liveblocks Yjs shared document structures so changes sync instantly across active browser sessions without race conditions.
```

5. **Figma JSON Import Parser** — Implement a parser capable of translating exported Figma node trees into native builder elements.

```
Build an import utility API route and client modal that accepts pasted or uploaded Figma JSON node trees (from a companion plugin export). Write a recursive parser function that maps Figma frames, rectangles, text nodes, and auto-layout flex properties directly into the application's internal canvas element JSON schema, preserving nested hierarchies and fills.
```

6. **Publishing Engine and Static Export** — Create a compilation pipeline that converts visual project trees into responsive HTML/CSS pages and deploys them.

```
Build a publishing service that compiles the project's element JSON tree into clean, responsive HTML and CSS strings. Create a deployment route that pushes the compiled static assets to Cloudflare Workers/R2 storage under a dynamic project subdomain (e.g. projectname.yourdomain.com). Ensure custom fonts, images, and embedded styles render correctly on the published output.
```

### Cost vs paying

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

- Custom Domain for self-hosted clone: $12/yr
- Total: ~$32 one-time (AI tools + domain)

**Ongoing costs (monthly):**

- Vercel / Cloudflare Infrastructure: $5/mo
- Total: ~$5/mo

- Paying for the SaaS instead: $24/mo (Pro Plan)
- Build time: 80-120 hours
- AI tool credits: $20 (Claude Pro / Cursor)
- Break-even: Never (built for learning and personal customization)

## Sources

- [Siter.io Official Website & Pricing](https://siter.io)
- [Indie Hackers: Bootstrapping Designmodo portfolio to 7-figure ARR](https://www.indiehackers.com)