Traqix LowCode/NoCode Editor is a powerful tool for designing visual interfaces for systems and websites. Built on Tailwind CSS and using ShadCN-UI components, it simplifies the creation of layouts and components such as tables, charts, forms, and panels.
With a modern and intuitive interface, this editor allows developers to create responsive and interactive UI elements visually, while maintaining control over the Tailwind CSS classes. It also integrates with Vercel’s v0, enabling the reuse of AI-generated components, allowing seamless import and manipulation of these components within the editor.
Note: This project is under active development and may contain bugs or unexpected behavior.
- Visual Component Builder: Drag and drop UI components like tables, forms, charts, and widgets onto the canvas.
- Tailwind CSS Integration: Complete control over CSS styles with Tailwind's utility-first approach.
- ShadCN-UI Components: Reusable UI components that are easy to customize and integrate.
- AI Component Import: Direct integration with Vercel v0, allowing you to import and customize AI-generated UI designs.
- Real-Time Code Export: Export your design as TSX code or JSON for further integration into your projects.
- JSON Import: Load saved layouts or work on existing designs by importing JSON configurations.
- Next.js
- TypeScript
- Tailwind CSS
- ShadCN-UI
- Vercel v0 integration
-
Clone the repository:
git clone https://github.com/traqix/traqix-editor.git
-
Navigate to the project directory:
cd traqix-editor -
Install dependencies:
pnpm i
-
Run the development server:
pnpm dev
-
Open your browser and navigate to:
http://localhost:3000
The Traqix LowCode/NoCode Editor is currently in active development. While the core functionality is stable, new features are continuously being added, and there may be bugs or areas of improvement. Contributions, feedback, and bug reports are highly appreciated.
Contributions are welcome! To get started:
- Fork the repository.
- Create a new branch:
git checkout -b feature/new-feature. - Make your changes and commit them:
git commit -m 'Add new feature'. - Push to the branch:
git push origin feature/new-feature. - Open a Pull Request.
An overview of the Traqix LowCode/NoCode Editor interface.
Customizing components with Tailwind CSS classes.
Building a page layout with drag-and-drop components.
Customizing a page with drag-and-drop components left-sidebar.
Click on the image to watch the demo video.
This project is licensed under the MIT License.
This README is now optimized for GitHub and includes all the details for setting up, running, and contributing to the Traqix LowCode/NoCode Editor. You can directly copy it into your repository.