XeroCodee

There are now no-code solutions for developing websites, but the most of them are either theme-based or too expensive for most people. We want to create the XeroCodee webapp builder, which will be an open-source, free, user-friendly web application for developing appealing websites without writing any code, and where anybody can quickly draught components using the easy drag and drop UI. Drag & drop UI components, live props editing and styling, preset components, and production-ready code will be included. Knowing how to code is no longer a barrier to creating your own websites. It will be a tremendous benefit for all those people and enterprises who want to develop their own websites without hiring a professional.

The greatest component library in town is XeroCodee, and Open XeroCodee is a visual editor for it. Utilize the straightforward drag and drop UI to quickly draught components.

Technologies

Javascript | ReactJS | NextJS | VueJS | Typescript | NodeJS | ExpressJS | MongoDB | Docker | Cloud

Features

• Drag & Drop Components
• Preset Components
• Export 4 frameworks ( ReactJS, VueJS, NextJs, Typescript)
• Build Mobile View / Web View
• Build Static & Dynamic Website
• Database & API Integration
• SEO / SMO / Google Kits
• Production Ready Code

Builder mode

The Builder mode increases the padding and border to make choosing components easier.

> 💡Toggle the Builder mode with the b shortcut

Code panel

To view the JS/JSX/TSX code of your components, toggle the code panel. Even better, you can export your code right to CodeSandbox!

> 💡Toggle the Code panel with the c shortcut

Components panel

Any component may be dropped into this editor from the left-hand panel. Start communicating with them after that.

A preset can be moved around; it is a collection of parts. To setup a complicated component quickly, simply drop a preset!

Inspector

Update props & style

The inspector panel is located on the right-hand side. You can edit the component's props and style using the available tools.

Delete, reset and documentation

To delete, reset, and access the XeroCodee documentation for each component, reach the yellow bar at the top.

Sort components

By clicking on a component containing children, you will see a Children panel appearing on the right. It enables sorting the children.

Roadmap

• More XeroCodee UI components integration
• Components copy
• Props panel improvements
• Code generation improvements
• Dark mode support
• Login system
• Build static & dynamic feature (Form, Login System, Database ec...)
• Custom presets
• Custom theme
• Fix bugs 🧨
• Support other UI (Material, Reakit...)
• More framework export

How to use it ?

1 : Clone this repository.

• Github CLI

gh repo clone XeroCodee/Builder
cd Builder

• HTTPS

git clone https://github.com/XeroCodee/Builder.git
cd Builder

2 : Install npm

npm install 

3 : Run the run command

npm run dev

Docker Image

1 : Build docker image

docker build . -t ghcr.io/XeroCodee-builder/XeroCodee-builder

2 : Run docker image

docker run -p 3000:3000 ghcr.io/XeroCodee-builder/XeroCodee-builder

Project Admin ❤️

Arya Soni LinkedIn

How to Contribute

• Take a look at the Existing Issues or create your own Issues!
• Wait for the Issue to be assigned to you.
• Fork the repository
• Have a look at Contibuting Guidelines

Contributors

This project exists thanks to all the people who contribute.