ui-editor is user interfaces builder for web. It is actively being maintained. . If you want to get started right away there is a demo and a getting started page
- Cross framework component code generation.
- GUI.
- Concept can be applied to any framework of your team's choice.
- Hides the framework APIs.
- Component testability for different states.
- More refining will allow us to cleanup front end development.
git clone https://github.com/imvetri/ui-editor.git
cd ui-editor
npm i
npm start
npm start
npx cypress open
To see it in action, do below
npx cypress open
run the first test
How to create a component with markup.
![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_with_static_content.gif)
How to pass a state.
![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_receiving_data_from_state.gif)
How to bind events and modify state.
![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_responding_to_events.gif)
How to read data from an event.
![Alt Text](https://github.com/imvetri/ui-editor/blob/master/gifs/Component_accessing_event_object.gif)
How to export the component and use it in your react projects.
- Preview feature - An inbrowser JSX transpilation takes care of dynamically creating react components. Refer to DynamicComponent.js
- Export feature - Markup, events with reducers, style, state are stringified. Refer to convert-to-react-component.js
- Events with tags listed - jsxTranspiler.js returns parsed content which is rendered using Nodes.js component in Events.js
Contributions like feature requests, feeback for improvements, ideas are welcome! Feel free to open an issue.
- Feedback for improvement, Feature requests, Styling. Any ideas you have, share your expectations as a mock via screenshot.
List of files to touch for events
- src/utilities/codeGenerator/prepareMarkup.js
- src/utilities/jsxTranspiler/store-events-global/index.js
- src/Nodes/Index.js
- src/Events/Index.js
- Nested component building.
This project is licensed under the GNU General Public License v3.0 - see the LICENSE.md file for details
- Open source community members, for making things easier, their efforts made sure that knowledge/information shouldn't be held as property of a company and should be free for access.
If you are working as an employee, its important that we stay chill minded. Solve important problems that saves time of developer not just the busines.
- Make time for yourself at work, if any of your solution saves time for business, that is something you have earned for yourself.
Project will maintain monthly release after some feedback. This is my first time maintaining an open source project, it would be of great help if you could drop some tips.!