Discodance

A visual website builder for Next.js + Tailwind CSS

Status: Planning Phase - Documentation Only

What is Discodance?

Discodance is a local development tool that provides a visual interface for building Next.js websites with Tailwind CSS. It runs alongside your Next.js project and gives you a powerful drag-and-drop interface accessible at /discodance during development.

Key Features

• 🎨 Visual Page Builder: Create and edit pages using drag-and-drop
• 🎭 Theme System: Visual editor for Tailwind configuration with multiple theme presets
• 🧩 Component Library: 120+ pre-built marketing components based on Headless UI
• 📝 Content Management: JSON-based content with built-in localization (i18n)
• 🖼️ Asset Manager: Upload and manage images directly to your public/ folder
• 🔧 Custom Components: Automatically discovers and integrates your own components
• 💾 Git-Based: All changes write to files, use Git for version control
• ⚡ Next.js Native: Built entirely in Next.js, works with App Router and Pages Router

Documentation

Planning Documents

All architecture and planning documentation is located in the docs/ directory:

1. Project Overview Vision, goals, and target users

2. Installation & Setup How to install and configure Discodance

3. User Interface Visual builder interface design and workflows

4. Code Generation How Discodance generates TSX files

5. Component Library Headless UI integration, custom components, and theme system

6. Component Categories Complete list of 120+ pre-built marketing components

7. Responsive Design Breakpoint previews and responsive behavior

8. Content Management JSON-based content and localization (i18n)

9. Assets Management Image uploads and asset organization

10. Version Control Git-based workflow and file management

11. Technical Architecture Technology stack, modules, data flow, and API design

12. Implementation Roadmap 17-phase development plan with timeline estimates

13. Component Identification How Discodance identifies and manages components with disco-id

14. Data Fetching & Server Components Server Components, async data fetching, and loading states

15. SEO & Metadata Managing SEO, Open Graph, structured data, and sitemaps

16. Forms & Validation Form builder, validation strategies, and submission handling

17. Migration Guide Step-by-step guide for integrating Discodance into existing projects

Quick Start (Planned)

# Install Discodance in your Next.js project
npm install --save-dev discodance

# Start your Next.js dev server
npm run dev

# Open Discodance in your browser
# Visit: http://localhost:3000/discodance

Local Development Workspace

The package now ships a Phase 3 visual builder prototype. To preview it inside a Next.js project:

1. Install the package locally (link or npm install).
2. Run your Next.js dev server.
3. Visit /discodance – the generator now writes a page that mounts DiscodanceBuilderApp from discodance/ui.

When running npm run dev in this repo we build the library with tsup --watch; pair it with npm link/pnpm link in a host app for live development.

The builder UI uses placeholder data, drag-and-drop, and responsive preview toggles. Backend API endpoints are expected at /api/discodance/* in subsequent phases.

Core Concepts

Local Development Tool

Discodance runs locally as part of your Next.js dev server. It's not a hosted service - you maintain full control of your code.

File-Based

Everything Discodance creates is written to actual files in your project:

• Pages: TSX files in app/ or pages/
• Content: JSON files in content/{locale}/
• Theme: Updates to tailwind.config.js
• Assets: Images in public/

Component Identification

Discodance uses data-disco-id attributes to identify managed components:

• Works with existing projects - just add the ID to components you want to edit visually
• Preserves custom code - only touches disco-id components
• Mix and match - combine visual building with hand-written code

Git for Version Control

No built-in undo/redo - use Git for version control like you normally would. All changes are visible in git diff.

Development Only

The /discodance interface only works in development mode. In production, it returns 404 and the code is tree-shaken from your bundle.

Technology Stack

• Framework: Next.js (App Router & Pages Router support)
• UI Components: React + Headless UI
• Styling: Tailwind CSS
• Language: TypeScript
• Code Generation: TypeScript Compiler API
• File Operations: Node.js fs module
• Package Manager: npm

Component Library

Discodance includes 120+ pre-built components organized in categories:

Page Sections

• Hero Sections
• Feature Sections
• CTA Sections
• Bento Grids
• Pricing Sections
• Newsletter Sections
• Stats, Testimonials
• Blog, Contact, Team sections
• Content Sections
• Logo Clouds, FAQs
• Headers, Footers

Interactive Elements (Headless UI)

• Dialogs/Modals
• Menus/Dropdowns
• Popovers
• Tabs, Accordions
• Form Elements
• And more...

All components are:

• ✅ Fully responsive
• ✅ Themeable with your brand
• ✅ Accessible (Headless UI)
• ✅ Customizable in visual builder

Workflow Example

1. Install Discodance in your Next.js project
2. Open /discodance in your browser
3. Create a new page (e.g., /about)
4. Drag components from the library onto your canvas
5. Edit component content and properties
6. Customize theme colors, fonts, and styles
7. Save - generates TSX file in your project
8. Commit changes with Git
9. Deploy your Next.js app as normal

Project Status

Current Phase: Planning & Documentation

This repository currently contains comprehensive planning documentation for Discodance. Implementation has not yet begun.

Completed

• ✅ Core concept and vision defined
• ✅ Feature requirements documented
• ✅ Technical architecture planned
• ✅ Component library outlined
• ✅ Implementation roadmap created

Next Steps

• [ ] Phase 1: Foundation & Setup
• [ ] Phase 2: File System & Project Scanner
• [ ] Phase 3: Basic Visual Builder UI
• [ ] See Implementation Roadmap for full plan

Timeline

Full Version (v1.0): ~12 months MVP: ~5-6 months

See the Implementation Roadmap for detailed phase breakdown.

Contributing

This project is currently in the planning phase. Contributions will be welcome once implementation begins.

License

TBD

Contact & Feedback

TBD

Inspiration

Discodance is inspired by tools like:

• Webflow: Visual web design
• Tailwind UI: Component library approach
• shadcn/ui: Copy-paste component philosophy
• Headless UI: Accessible, unstyled components

The goal is to bring visual building capabilities to the Next.js + Tailwind ecosystem while maintaining developer control and code quality.

Built with ❤️ for the Next.js community