https://github.com/uimix-editor/uimix

A WYSIWYG React component builder 🚧 Very work-in-progress
https://github.com/uimix-editor/uimix

css design-to-code html javascript low-code no-code react ui-components

Last synced: 7 days ago
JSON representation

A WYSIWYG React component builder 🚧 Very work-in-progress

• Host: GitHub
• URL: https://github.com/uimix-editor/uimix
• Owner: uimix-editor
• License: mit
• Created: 2022-04-18T15:28:10.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-30T14:04:57.000Z (over 1 year ago)
• Last Synced: 2024-04-14T03:11:31.437Z (8 months ago)
• Topics: css, design-to-code, html, javascript, low-code, no-code, react, ui-components
• Language: TypeScript
• Homepage: https://uimix-editor.vercel.app/
• Size: 13.7 MB
• Stars: 422
• Watchers: 4
• Forks: 17
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# UIMix

> [!IMPORTANT]  

> This project will no longer be updated. When I restart the project in the future, the codebase will be a separate one.

> Macaron is rebranding to UIMix and is under active development. The old version is still available at the links below.

>

> - [Old Branch](https://github.com/uimix-editor/uimix/tree/old)

> - [Old Website](https://macaron-elements.com/)

UIMix is a WYSIWYG editor for React components that offers a Figma or Framer-like experience for creating and maintaining React components.

It aims to bridge the gap between modern design tools / no-code web builders and modern front-end development, by combining their strengths.

- [Demo](https://uimix-editor.vercel.app/)

- [Figma File](https://www.figma.com/file/Ec45PJS7toeZIZWXKBYthG/UIMix-editor?node-id=0%3A1&t=5n9xAh34Qj7xe1Pc-1)

🚧 Very work-in-progress, do not use in production!

## Roadmap

- [x] Freehand editing equivalent to Figma / Framer

- [x] Launch the locally-running editor from CLI

- [ ] Emit React components with types that can be easily overridden

- [x] Import React components directly into the editor

## Potential plans

- [ ] Sync with Figma files

- [ ] Collaborative editing

- [ ] Support other frameworks and Web Components

- [ ] Publish as a cloud service, enabling non-developers to utilize the platform

- [ ] Managed website hosting that offers a complete no-code starting point for new projects, with the ability to gradually integrate code as needed

- [ ] Publish as a WYSIWYG editor library

## Build Figma plugin and VSCode extension

```

git clone --recursive [email protected]:uimix-editor/uimix.git

cd uimix

pnpm install

pnpm build

pnpm package

```

- Figma plugin: `packages/figma/uimix-figma-plugin.zip`

- VSCode extension: `packages/vscode/uimix-vscode-{version}.vsix`