⚒️ UIForge

Visual UI Builder
Baue Interfaces visuell im Browser und exportiere sauberen Code.

Hallo du! Schön, dass du hier bist. 👋

UIForge ist ein visueller UI-Builder — ein Projekt, das ich ganz allein in unzähligen Abendstunden und Wochenenden zusammengebaut habe. Es hilft dir, Interfaces per Drag & Drop zu designen und als sauberen React/HTML-Code zu exportieren.

Wenn du Fehler findest, Dinge vermisst oder einfach nur Hallo sagen willst — freue ich mich über jede Nachricht!

✨ Features

🖱️ Drag & Drop	Baue Seiten visuell — ziehe Komponenten per Drag & Drop auf die Leinwand.	🎨 Live Editor	Bearbeite Eigenschaften und Styles in Echtzeit mit sofortiger Vorschau.
🧩 Library	20+ vorgefertigte Komponenten — Container, Cards, Formulare, Navigation uvm.	📄 Export	Exportiere als React, Vue, Svelte oder reines HTML+CSS.
↩️ Undo/Redo	Unbegrenztes Rückgängig & Wiederherstellen für jede Änderung.	📱 Responsive	Vorschau für Desktop, Tablet und Mobile — inklusive Zoom.
💾 Lokal speichern	Projekte werden automatisch im Browser gespeichert.	🌍 Mehrsprachig	UI in Deutsch und Englisch — einfach umschaltbar.
📐 Alignment Guides	Intelligente Hilfslinien beim Positionieren von Komponenten.	🔌 Plugins	Erweiterbar durch ein einfaches Plugin-System.

🛠️ Tech Stack

┌─────────────────────────────────────────────────────────┐
│                      UIForge                            │
├──────────────┬──────────────────┬───────────────────────┤
│   Frontend   │     Backend      │      Build            │
├──────────────┼──────────────────┼───────────────────────┤
│  React 18    │  Express.js      │  Vite 5               │
│  TypeScript  │  JWT Auth        │  TypeScript 5.5       │
│  Zustand     │  bcryptjs        │  Tailwind CSS 3       │
│  dnd-kit     │  SQLite / JSON   │  PostCSS / Autoprefixer│
│  i18next     │  UUID            │                       │
│  Lucide Icons│  CORS / Multer   │                       │
│  Tailwind CSS│                  │                       │
└──────────────┴──────────────────┴───────────────────────┘

🚀 Getting Started

Voraussetzungen

Node.js v18 oder höher
npm (wird mit Node.js installiert)

Installation & Start

# Repository klonen
git clone https://github.com/dein-username/uiforge.git
cd uiforge

# Abhängigkeiten installieren
npm install

# Entwicklungsserver starten (Frontend + API-Proxy)
npm run dev

Öffne http://localhost:5173 im Browser.

Für die vollständige API (optional) in einem zweiten Terminal:

npm run server

🏗️ Production Build

npm run build

Erzeugt das optimierte Frontend im dist/ Ordner.

Deployment-Paket erstellen

npm run deploy

Erstellt einen deploy/ Ordner mit allem, was für den Server benötigt wird:

deploy/
├── index.js          # Express-Server (API + Static Files)
├── package.json      # Alle Dependencies
└── dist/             # Gebautes Frontend
    ├── index.html
    └── assets/

Auf dem Server:

cd deploy
npm install
node index.js

Die Anwendung läuft dann auf http://localhost:3004.

Tipp: Port über PORT=8080 node index.js anpassen.

📁 Projektstruktur

uiforge/
├── index.js                 # Production Server (ESM)
├── index.html               # Vite Entry
├── public/
│   └── vite.svg             # Favicon / Logo
├── src/
│   ├── main.tsx             # React Entry Point
│   ├── App.tsx              # Root Component mit Navigation
│   ├── components/
│   │   ├── registry.ts      # Komponenten-Definitionen (20+ Typen)
│   │   └── BuiltInRenderer.tsx # Render-Logik für alle Komponenten
│   ├── editor/
│   │   ├── Canvas.tsx       # Drag & Drop Leinwand (dnd-kit)
│   │   ├── Toolbar.tsx      # Werkzeugleiste (Undo, Zoom, Export)
│   │   ├── ComponentPalette.tsx # Komponenten-Auswahl
│   │   ├── PropertiesPanel.tsx   # Eigenschaften-Editor
│   │   ├── ExportDialog.tsx # Code-Export Dialog
│   │   └── ResizeHandle.tsx # Resize-Griffe für Komponenten
│   ├── pages/
│   │   ├── Dashboard.tsx    # Projektübersicht
│   │   ├── EditorPage.tsx   # Haupt-Editor (Split-View)
│   │   └── SettingsPage.tsx # Projekteinstellungen
│   ├── store/
│   │   ├── editorStore.ts   # Editor-State (Nodes, History, Selection)
│   │   ├── projectStore.ts  # Projekt-State (Projects, Pages)
│   │   ├── uiStore.ts       # UI-State (Panels, Theme, Toasts)
│   │   └── i18nStore.ts     # Sprach-Einstellungen
│   ├── types/
│   │   ├── component.ts     # ComponentInstance, PropDefinition
│   │   ├── page.ts          # Page Interface
│   │   ├── project.ts       # Project, ProjectSettings
│   │   └── plugin.ts        # Plugin-Typen
│   ├── export/
│   │   ├── index.ts         # Export-Hub
│   │   ├── reactExport.ts   # React/HTML Code-Generatoren
│   │   ├── vueExport.ts     # Vue Code-Generator
│   │   └── svelteExport.ts  # Svelte Code-Generator
│   ├── i18n/
│   │   ├── index.ts         # i18n-Initialisierung
│   │   ├── de.json          # Deutsche Übersetzungen
│   │   └── en.json          # Englische Übersetzungen
│   ├── plugins/
│   │   └── index.ts         # Plugin-System
│   ├── lib/
│   │   ├── cn.ts            # Tailwind class merge utility
│   │   └── storage.ts       # localStorage Persistenz
│   ├── preview/
│   │   └── PreviewFrame.tsx # Live-Vorschau
│   └── styles/
│       └── index.css        # Globale Styles, Tailwind, Keyframes
├── server/
│   └── index.js             # Development Server (CJS)
├── deploy.js                # Deployment-Script
├── build.ps1                # PowerShell Build-Script
├── build.bat                # Windows Batch Build
├── vite.config.ts           # Vite-Konfiguration
├── tsconfig.json            # TypeScript-Konfiguration
├── tailwind.config.js       # Tailwind-Konfiguration
├── postcss.config.js        # PostCSS-Konfiguration
└── package.json             # Projekt-Metadaten & Scripts

🧩 Komponenten

Komponente	Kategorie	Kinder?	Beschreibung
Container	Layout	✅	Flex-Container mit Direction, Justify, Align
Section	Layout	✅	Abschnitt mit Hintergrund & Padding
Grid	Layout	✅	CSS-Grid mit einstellbaren Spalten
Column	Layout	✅	Grid-Spalte mit Span
Header	Layout	✅	Kopfzeile
Footer	Layout	✅	Fußzeile mit Hintergrund
Heading	Basic	❌	Überschrift (H1-H4)
Text	Basic	❌	Textabsatz
Button	Basic	❌	Button mit Varianten & Größen
Image	Media	❌	Bild mit Object-Fit
Video	Media	❌	YouTube/Vimeo/Direct Embed
Input	Form	❌	Eingabefeld mit Label
Textarea	Form	❌	Mehrzeiliges Textfeld
Form	Form	✅	Formular mit Submit-Button
Card	Content	✅	Karte mit Shadow & Padding
Divider	Basic	❌	Horizontale Trennlinie
Spacer	Layout	❌	Leerraum
Link	Basic	❌	Hyperlink
NavBar	Navigation	✅	Navigationsleiste mit Brand
RawHTML	Custom	❌	Benutzerdefinierter HTML-Code

🧭 Roadmap — was noch kommt

Version 2.2

Editor

Multi-Select Components
Group & Ungroup Elements
Copy / Paste Components
Layer Locking
Layer Visibility Toggle
Keyboard Shortcuts
Improved Canvas Performance

Components

Tabs
Accordion
Modal/Dialog
Dropdown Menus
Navigation Bars
Data Tables
Charts & Graphs

Export

Next.js Export
Nuxt Export
Astro Export
Improved React TSX Output
Export Optimizations

Version 2.3

Collaboration

Real-Time Collaboration
Shared Projects
Live Presence Indicators
Comments & Feedback System

Design Tools

Global Color Variables
Typography System
Design Tokens
Theme Management
Style Presets

Productivity

Command Palette
Quick Actions
Project Search
Reusable Templates

Version 2.4

Advanced Editing

Auto Layout
Constraints System
Responsive Breakpoints
Flexbox Editor
Grid Layout Editor

Assets

Media Library
Asset Manager
Icon Browser
Font Management

Plugins

Plugin Marketplace
Plugin Manager
One-Click Installation
Plugin Settings API

Version 2.5

AI Features

Generate UI from Prompt
AI Layout Suggestions
Component Recommendations
Smart Auto-Layout
AI Accessibility Checks

Accessibility

WCAG Validation
Accessibility Scanner
Contrast Checker
Semantic HTML Suggestions

Version 3.0

Cloud Platform

Cloud Sync
Project Backup
Version History
Team Workspaces
Organization Accounts

Enterprise Features

Role Management
Project Permissions
Audit Logs
Team Templates

Developer Experience

Public API
CLI Tool
SDK
Webhooks
Git Integration

Future Ideas

Mobile App
Electron Desktop Version
Native Windows Application
Native macOS Application
Native Linux Application
Component Marketplace Revenue Sharing
Template Marketplace
White-Label Support
Self-Hosted Cloud
Figma Import
Figma Export
Tailwind Visual Builder
Shadcn/UI Integration
Material Design Integration
Bootstrap Integration
Storybook Export
Visual Animation Editor
State Management Editor
Database Connectors
Authentication Builder
CMS Integrations
Docker Deployment Templates

🔧 Bugfixes & Changelog

Version 2.0.0

🔨 Undo/Redo gefixt — Die History-Engine speichert jetzt korrekt Zwischenzustände; Undo und Redo funktionieren zuverlässig über beliebig viele Schritte
🧭 Dashboard-Navigation — Vom Editor zurück zur Projektübersicht (neuer Zurück-Button in der Toolbar)
💾 Lokale Persistenz — Projekte und Editor-Zustand werden automatisch im Browser gespeichert und beim Neuladen wiederhergestellt
🖼️ Favicon — Eigenes UIForge-Logo als SVG-Favicon
🧹 Code bereinigt — Unbenutzte Imports entfernt, TypeScript strikter
🎨 README — Liebevoll überarbeitet mit persönlicher Note

Neu in 2.1.0

🖱️ dnd-kit Drag & Drop — Präzises Positionieren mit Drop-Indikatoren
📐 Resizing & Alignment Guides — Größe ändern und intelligent ausrichten
🔄 Vue & Svelte Export — Zwei weitere Exportformate
🧩 Eigene Komponenten — Speichere und verwende deine eigenen Komponenten
🔌 Plugin-System — Erweitere UIForge mit Plugins
🌍 i18n — UI in Deutsch und Englisch
💾 IndexedDB Storage — Robusteres Speichern im Browser
☕ Solo-Dev-Modus — Features, die das Alleine-Entwickeln schöner machen

🔌 API Endpoints

Alle API-Routen sind mit /api prefixiert. Authentifizierte Endpoints benötigen einen Authorization: Bearer <token> Header.

Authentication

Methode	Endpoint	Beschreibung
`POST`	`/api/auth/register`	Benutzer registrieren
`POST`	`/api/auth/login`	Login (Email & Passwort)
`GET`	`/api/auth/me`	Aktuellen Benutzer abrufen *

Projekte

Methode	Endpoint	Beschreibung
`GET`	`/api/projects`	Alle Projekte des Benutzers *
`POST`	`/api/projects`	Neues Projekt erstellen *
`GET`	`/api/projects/:id`	Projektdetails *
`PUT`	`/api/projects/:id`	Projekt aktualisieren *
`DELETE`	`/api/projects/:id`	Projekt löschen *

Seiten & Komponenten

Methode	Endpoint	Beschreibung
`POST`	`/api/pages`	Neue Seite erstellen *
`PUT`	`/api/pages/:id`	Seite aktualisieren *
`DELETE`	`/api/pages/:id`	Seite löschen *
`POST`	`/api/pages/:id/components`	Komponenten speichern *
`GET`	`/api/pages/:id/components`	Komponenten abrufen *

* = Authentifizierung erforderlich

🙋‍♂️ Eine kleine Bitte

Dieses Projekt habe ich ganz allein gebaut — in Feierabenden, an Wochenenden, zwischen Kaffee und Mitternachtssnacks. Wenn dir UIForge gefällt, freue ich mich riesig über:

Einen ⭐ auf GitHub — das motiviert ungemein!
Feedback & Ideen — was fehlt, was könnte besser sein?
Weitersagen — wenn es jemandem helfen könnte

📄 License

Dieses Projekt steht unter der MIT License — frei verwendbar, modifizierbar und verteilbar.

_{Gebaut mit TypeScript und React

Live Demo ·
Bug melden ·
Feature vorschlagen}

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
public		public
server		server
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
build.bat		build.bat
build.ps1		build.ps1
deploy.js		deploy.js
index.html		index.html
index.js		index.js
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

⚒️ UIForge

✨ Features

🖱️

🎨

🧩

📄

↩️

📱

💾

🌍

📐

🔌

🛠️ Tech Stack

🚀 Getting Started

Voraussetzungen

Installation & Start

🏗️ Production Build

Deployment-Paket erstellen

📁 Projektstruktur

🧩 Komponenten

🧭 Roadmap — was noch kommt

Version 2.2

Editor

Components

Export

Version 2.3

Collaboration

Design Tools

Productivity

Version 2.4

Advanced Editing

Assets

Plugins

Version 2.5

AI Features

Accessibility

Version 3.0

Cloud Platform

Enterprise Features

Developer Experience

Future Ideas

🔧 Bugfixes & Changelog

Version 2.0.0

Neu in 2.1.0

🔌 API Endpoints

Authentication

Projekte

Seiten & Komponenten

🙋‍♂️ Eine kleine Bitte

📄 License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 2

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages