In early June I stumbled across Layouts.dev, a visual layout builder that offered a fast way to scaffold UIs with drag-and-drop ease. The concept was great—but I wanted something more open, developer-first, and extensible. Something that could be used like a real tool, not just a toy.

That moment kicked off a journey to create Spindle—a blazing-fast, open-source layout builder designed for engineers to prototype components and templates with minimal friction. This blog post walks through the inspiration, research, naming conventions, and technical planning that shaped Spindle into a real, usable tool.

---

🔍 The Inspiration: Layouts.dev and the Need for Speed

Layouts.dev is visually appealing, intuitive, and useful for quickly generating UI mockups. I wanted my own version of this but considering:

• What if it supported a minimal syntax like Pug, but was custom-built for layout thinking?
• What if it was portable, extensible, and capable of outputting code I could plug into a WordPress theme—or anywhere else?

Thus began the exploration.

---

🧠 The Research & Design Phase

Over several collaborative brainstorms (many powered by ChatGPT), we mapped out:

• Existing tools and their limitations
• Developer pain points in prototyping UI
• The desire for minimal syntax, instant feedback, and no build steps

We focused on key features:

• A custom DSL, like Pug, that engineers could write quickly
• A web-based editor with live preview
• Component support and layout composition
• Export options for WordPress, JSX, or plain HTML

We also discussed potential integration with CMSs like WordPress, while keeping the tool standalone and framework-agnostic.

---

🧵 The Naming System: Weaving an Identity

The name Spindle emerged early as the project codename. It metaphorically evokes spinning layouts together, creating structure, and speed. From there, a naming system spun into place:

• Spindle — The platform itself
• Loom Editor — The in-browser editor where you write layout code
• Threads DSL — Our minimal, Pug-inspired syntax for layouts
• Fiber Library — Reusable component snippets
• Warp Preview — The live output pane for real-time feedback
• Bobbin Projects — Project save/load system (planned)

The names are thematic but minimal—memorable without confusing new users.

---

⚙️ Planning the MVP

I scoped out an MVP that could:

• Load the Loom Editor (Monaco-based) with syntax highlighting
• Capture Threads syntax input and store it in state
• Render a live preview (even if raw at first)
• Prepare the folder structure for future parser/renderer/export tools

We settled on a structure that supports rapid development and scaling:

/src
  /components    # React UI components
  /parser        # Threads DSL parser (coming soon)
  /renderer      # Threads-to-HTML/JSX renderer
  /storage       # Local storage and persistence
  /export        # Export tools (HTML, JSX, etc.)

A full engineering ticket was created to scaffold the project using Vite, React, Tailwind, and Monaco. The goal? Allow a user to build a basic layout within 5–10 minutes of opening the editor—no build step required.

---

🤖 How AI Helped Me Jumpstart This

This was a hybrid build:

• ChatGPT helped me scope the project, break down initial features, naming, and sketch the POC architecture.
• Claude wrote the initial scaffold.sh script after I gave it our initial ticket for scaffolding out the system architecture (mostly initing, installing packages, and creating a setup.sh) Then starting on an initial implementation to test out the waters.
• Cursor was used to implement and debug the first parser and build steps interactively.

I’m using AI as a kind of rubber duck with code generation powers — not to replace my thinking, but to augment it and accelerate the “getting started” pain.

---

✅ Spindle MVP Is Live!

The MVP is now public at github.com/NickOrtiz/spindle.

It includes:

• The Loom Editor with Monaco
• Project scaffold for future DSL and rendering logic
• Tailwind-based styling
• A clean developer-first foundation

What’s Next:

• Implement Threads DSL parser (In Progress…)
• Build layout renderer
• Add component library
• Create export functionality
• Add project management

---

🧩 Final Thoughts

Spindle is just getting started. But it’s designed with intention:

• Fast for engineers
• Friendly for component systems
• Extensible enough to integrate into real production workflows

If this excites you, check out the GitHub repo, watch for updates, or contribute. I’ll be building this in public.

🧶 Let’s “spin up” something powerful.