{"id":29860547,"url":"https://github.com/guptakushal03/ui-generator","last_synced_at":"2026-05-16T06:36:30.480Z","repository":{"id":293813590,"uuid":"985192527","full_name":"guptakushal03/UI-Generator","owner":"guptakushal03","description":"A whiteboard-style UI builder with real-time HTML/CSS code generation, live preview, editable code, and downloadable/uploadable designs.","archived":false,"fork":false,"pushed_at":"2025-05-17T09:39:50.000Z","size":50,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-30T04:01:10.128Z","etag":null,"topics":["code-generator","drag-and-drop","fastapi","monaco-editor","ui-designer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guptakushal03.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-17T08:51:15.000Z","updated_at":"2025-05-17T09:43:03.000Z","dependencies_parsed_at":"2025-05-17T10:40:31.798Z","dependency_job_id":null,"html_url":"https://github.com/guptakushal03/UI-Generator","commit_stats":null,"previous_names":["guptakushal03/ui-generator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/guptakushal03/UI-Generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guptakushal03%2FUI-Generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guptakushal03%2FUI-Generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guptakushal03%2FUI-Generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guptakushal03%2FUI-Generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guptakushal03","download_url":"https://codeload.github.com/guptakushal03/UI-Generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guptakushal03%2FUI-Generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33092719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T04:41:52.686Z","status":"ssl_error","status_checked_at":"2026-05-16T04:41:52.009Z","response_time":115,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-generator","drag-and-drop","fastapi","monaco-editor","ui-designer"],"created_at":"2025-07-30T03:42:46.792Z","updated_at":"2026-05-16T06:36:30.466Z","avatar_url":"https://github.com/guptakushal03.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UI Whiteboard Designer\n\nA web-based application for designing user interfaces using a whiteboard-style canvas, with real-time code generation and live preview capabilities.\n\n## Features\n- **Interactive Whiteboard**: Draw and manipulate UI elements (div, button, input, freehand) on a canvas.\n- **Element Management**: Select, resize, group, copy, paste, and delete elements.\n- **Code Generation**: Generate HTML and CSS based on the whiteboard design via a FastAPI backend.\n- **Code Editor**: Edit generated code using a Monaco Editor with copy and download functionalities.\n- **Live Preview**: View real-time rendering of the generated code in an iframe.\n- **Undo/Redo**: Support for undoing and redoing actions on the canvas.\n- **Save/Load UI**: Download and upload whiteboard designs as JSON files.\n- **Responsive Design**: CSS includes media queries for mobile and tablet views.\n\n## Technologies\n- **Backend**:\n  - FastAPI: For handling API requests and generating HTML/CSS.\n  - Pydantic: For data validation.\n  - CORS Middleware: To allow cross-origin requests.\n- **Frontend**:\n  - React: For building the user interface.\n  - Monaco Editor: For code editing.\n  - Prettier: For code formatting.\n  - React Icons: For toolbar icons.\n  - Canvas API: For whiteboard rendering.\n- **Dependencies**:\n  - Node.js (for frontend)\n  - Python (for backend)\n  - npm/yarn (for frontend package management)\n  - pip (for Python package management)\n\n## Prerequisites\n- **Node.js** (\u003e= 16.x)\n- **Python** (\u003e= 3.8)\n- **npm** or **yarn**\n- **pip**\n- A modern web browser (Chrome, Firefox, Edge, etc.)\n\n## Installation\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/guptakushal03/UI-Generator.git\n   cd ui-whiteboard-designer\n   ```\n\n2. **Backend Setup**:\n   ```bash\n   cd backend\n   pip install -r requirements.txt\n   ```\n\n3. **Frontend Setup**:\n   ```bash\n   cd frontend\n   npm install  # or yarn install\n   ```\n\n## Usage\n1. **Run the Backend**:\n   ```bash\n   cd backend\n   uvicorn app:app --reload\n   ```\n   The FastAPI server will run on `http://localhost:8000`.\n\n2. **Run the Frontend**:\n   ```bash\n   cd frontend\n   npm start  # or yarn start\n   ```\n   The React app will run on `http://localhost:3000`.\n\n3. **Access the Application**:\n   Open your browser and navigate to `http://localhost:3000`. You will see:\n   - A whiteboard canvas for designing UI elements.\n   - A toolbar to switch between draw/select modes, choose element types, and perform actions like generate code, save/load UI, and clear canvas.\n   - A code editor displaying generated HTML/CSS.\n   - A live preview showing the rendered design.\n\n4. **Designing a UI**:\n   - Use **Draw Mode** to create elements (div, button, input, freehand).\n   - Use **Select Mode** to manipulate elements (resize, move, group, delete).\n   - Click **Generate Code** to produce HTML/CSS based on the canvas.\n   - Edit the code in the editor or download it as an HTML file.\n   - Use keyboard shortcuts:\n     - `Ctrl+Z`: Undo\n     - `Ctrl+Y`: Redo\n     - `Ctrl+C`: Copy selected elements\n     - `Ctrl+V`: Paste elements\n     - `Ctrl+G`: Group selected elements\n     - `Ctrl+Shift+G`: Ungroup selected group\n     - `Delete`: Delete selected elements\n\n## Project Structure\n```\nui-whiteboard-designer/\n├── backend/\n│   ├── app.py                  # FastAPI server and code generation logic\n│   └── requirements.txt        # Python dependencies\n├── frontend/\n│   ├── src/\n│   │   ├── components/\n│   │   │   ├── Whiteboard.jsx  # Canvas-based whiteboard component\n│   │   │   ├── CodeEditor.jsx  # Monaco editor for code\n│   │   │   ├── LivePreview.jsx # Iframe for live preview\n│   │   ├── App.jsx             # Main React component\n│   │   └── main.jsx            # Entry point\n│   └── package.json            # Frontend dependencies\n├── README.md                   # Project documentation\n└── .gitignore                  # Git ignore file\n```\n\n## Contributing\nContributions are welcome!\n\n## License\nThis project is licensed under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguptakushal03%2Fui-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguptakushal03%2Fui-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguptakushal03%2Fui-generator/lists"}